Divi: วิธีสร้างส่วน "การติดตามโซเชียลมีเดีย" ที่เหนียวแน่น

คุณต้องการให้ไอคอนโซเชียลมีเดียของคุณติดกับ Divi หรือไม่?

ด้วยตัวเลือก 'เหนียว' ในตัวของ Divi คุณสามารถออกแบบโมดูล 'การติดตามโซเชียลมีเดีย' ที่ติดหนึบ ซึ่งจะทำให้ไอคอนโซเชียลมีเดียเหล่านั้นอยู่ด้านหน้าและตรงกลางขณะที่ผู้ใช้เลื่อนหน้าลงมา 

นอกจากนี้ ด้วยการเพิ่มสไตล์แบบกำหนดเองให้กับโมดูลในสถานะติดหนึบ เราสามารถสร้างช่วงการเปลี่ยนภาพการออกแบบที่ไม่ซ้ำใครเมื่อสลับไปยังสถานะติดหนึบขณะเลื่อน 

ดังนั้น หากคุณกำลังมองหาการควบคุมการออกแบบปุ่มโซเชียลมีเดียอย่างสมบูรณ์ บทช่วยสอนนี้เหมาะสำหรับคุณ!

การสำรวจ

นี่คือภาพรวมโดยย่อของผลลัพธ์ที่เราจะได้รับในบทช่วยสอนนี้

สร้างหน้าใหม่ด้วย "Divi Builder"

จากแดชบอร์ด WordPress ให้ไปที่ “หน้า > เพิ่มใหม่”

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก “ใช้ DiviBuilder”

สำหรับบทช่วยสอนนี้ เราจะใช้เค้าโครงที่กำหนดไว้ล่วงหน้า ในการดำเนินการนี้ ให้คลิกที่ “เรียกดูเค้าโครง”

ค้นหาและเลือกเค้าโครง "นักออกแบบด้านแฟชั่น"

เลือกเลย์เอาต์ “ลงจอด” จากนั้นคลิก “ใช้เลย์เอาต์นี้”

การออกแบบโมดูล "การติดตามโซเชียลมีเดีย" ใน Divi

การสร้างส่วน

เพิ่มส่วนปกติใหม่ให้กับเค้าโครง

จากนั้นย้ายส่วนใหม่ไปที่ด้านบนสุดของหน้า (หรือที่ใดก็ตามที่คุณต้องการเพิ่มลิงก์โซเชียลมีเดียของคุณ)

เปิดการตั้งค่าส่วนและอัปเดตสีพื้นหลังให้ตรงกับเค้าโครงดังนี้:

• สีพื้นหลัง: #fff9f2

ภายใต้แท็บ ออกแบบขยายตัวเลือกการเว้นวรรคและแก้ไขพารามิเตอร์ต่อไปนี้:

• ช่องว่างภายใน (บนและล่าง): 10px

การสร้างเส้น

ภายในส่วน ให้เพิ่มแถวลงในคอลัมน์

เปิดการตั้งค่าบรรทัด ดึงตัวเลือกการเว้นวรรค และเปลี่ยนการตั้งค่าดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ดำเนินการต่อโดยเลื่อนลงตัวเลือก การเว้นวรรค

• ช่องว่างภายใน (บนและล่าง): 0px

การสร้างโมดูล "การติดตามโซเชียลมีเดีย" ที่ติดหนึบ

เมื่อส่วนและบรรทัดอยู่ในตำแหน่งแล้ว ให้เพิ่มโมดูลใหม่ “โซเชียลมีเดียติดตาม” ที่เส้น

กำลังอัปเดตการตั้งค่าโมดูล

เปิดการตั้งค่าของโมดูล "การติดตามโซเชียลมีเดีย" 

สิ่งแรกที่เราต้องทำคือเพิ่มตำแหน่งเหนียวให้กับโมดูล 

ภายใต้แท็บ ระดับสูง, ดึงตัวเลือกลง ผลเลื่อน และอัปเดตสิ่งต่อไปนี้:

• ตำแหน่งติดหนึบ: Stick to Top

เมื่อตำแหน่งอยู่ในสถานะติดหนึบ คุณจะสามารถกำหนดเป้าหมายรูปแบบของโมดูลในสถานะติดหนึบ (เหมือนกับที่คุณสามารถทำได้สำหรับสถานะโฮเวอร์) สามารถทำได้โดยวางเมาส์เหนือตัวเลือกแล้วคลิกไอคอนหมุด

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• โมดูลการจัดตำแหน่ง: Center

• สีไอคอน: #000000 (เดสก์ท็อป), #ffffff (โฮเวอร์), #ffffff (เหนียว)

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

• ช่องว่างภายใน: 20px (บน), 12px (ล่าง), 10px (ซ้ายและขวา)

การตั้งค่าโซเชียลมีเดีย

เมื่อการตั้งค่าโมดูลพร้อมแล้ว เราก็เปลี่ยนความสนใจไปที่การจัดสไตล์ไอคอนโซเชียลมีเดียแต่ละรายการได้ 

ในการทำเช่นนี้ ก่อนอื่นเราจะปรับแต่งไอคอนโซเชียลเน็ตเวิร์ก จากนั้นเราจะคัดลอกเครือข่ายโซเชียลเพื่อสร้างเครือข่ายอื่น

คุณควรมีเครือข่ายโซเชียลสองแห่งอยู่ใต้แท็บอยู่แล้ว เนื้อหา โดยค่าเริ่มต้น. ลบหนึ่งรายการแล้วคลิกเพื่อแก้ไขที่เหลือ

เมื่ออยู่ในการตั้งค่าโซเชียลเน็ตเวิร์ก ให้เลือกโซเชียลเน็ตเวิร์กและอัปเดตสีพื้นหลังสำหรับเดสก์ท็อป โฮเวอร์ และสถานะติดหนึบ

• เครือข่ายสังคม : ติ๊กต๊อก (หรือสิ่งที่คุณต้องการ)

• พื้นหลัง: โปร่งใส (เดสก์ท็อป), #fe2c55 (โฮเวอร์), #000000 (เหนียว)

เล่ห์เหลี่ยม : สีพื้นหลังจะเปลี่ยนโดยอัตโนมัติเพื่อให้เข้ากับแบรนด์โซเชียลมีเดีย คุณสามารถคัดลอกสีนี้และเพิ่มเป็นสีพื้นหลังของสถานะโฮเวอร์สำหรับไอคอนได้ ซึ่งจะแสดงสีพื้นหลังเริ่มต้นของโซเชียลเน็ตเวิร์กเมื่อคุณวางเมาส์เหนือไอคอน

ตอนนี้คุณสามารถสลับระหว่างแท็บต่างๆ เพื่อดูสีพื้นหลังของทั้งสามสถานะ (เดสก์ท็อป โฮเวอร์ และติดหนึบ)

ต่อไป ให้ไอคอนเป็นรูปวงรีที่สวยงามและมีเส้นขอบเพื่อให้เข้ากับเค้าโครงได้ดียิ่งขึ้น ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• มุมโค้งมน: 50%
• ความกว้างของเส้นขอบ: 1px
• สีของเส้นขอบ: #000000 (เดสก์ท็อป), โปร่งใส (โฮเวอร์)

ปัจจุบันไอคอนมีรูปร่างเป็นวงกลม เพื่อให้ได้รูปทรงวงรีมากขึ้น เราจะเปลี่ยนการตั้งค่าระยะห่างดังนี้:

• ระยะขอบ (ซ้ายและขวา): 15px (เดสก์ท็อป), 0px (เหนียว), 0px (โทรศัพท์)
• ช่องว่างภายใน (ซ้ายและขวา): 16px (เดสก์ท็อป), 14px (แท็บเล็ต), 0px (โทรศัพท์)

เครือข่ายโซเชียลที่ซ้ำกัน

ตอนนี้เราออกแบบเครือข่ายโซเชียลแรกเสร็จแล้ว เราสามารถทำซ้ำไอคอนเพื่อสร้างผู้อื่นได้ 

ในการดำเนินการนี้ ให้เปิดการตั้งค่าโมดูล สื่อโซเชียลติดตาม และคลิกไอคอนที่ซ้ำกัน สำหรับตัวอย่างนี้ ให้สร้างเพิ่มอีก 4 รายการ

ตอนนี้ สิ่งที่เราต้องทำคืออัปเดตเครือข่ายโซเชียลใหม่แต่ละเครือข่าย เนื่องจากวิธีนี้จะเปลี่ยนสีพื้นหลัง คุณจะต้องอัปเดตสีพื้นหลังสำหรับแต่ละรายการด้วย

ในการดำเนินการนี้ ให้เปิดการตั้งค่าของโซเชียลเน็ตเวิร์กที่สองและอัปเดตสิ่งต่อไปนี้:

• โซเชียลเน็ตเวิร์ก: Facebook
• พื้นหลัง: โปร่งใส (เดสก์ท็อป), #3b5998 (โฮเวอร์)

ทำขั้นตอนเดิมต่อไปเพื่ออัปเดตเครือข่ายโซเชียลที่เหลือ

ผลสุดท้าย

ตอนนี้เรามาดูผลลัพธ์ที่ได้จากขนาดหน้าจอต่างๆกัน

ดาวน์โหลด DIVI ทันที!!!

ดาวน์โหลด DIVI ทันที!!!

สรุป

ปุ่มโซเชียลมีเดียมักจะเป็นคุณสมบัติหลักในa เว็บไซต์เว็บ. พวกเขาเป็นหนึ่งในวิธีหลักในการเชื่อมต่อช่องทางโซเชียลมีเดียกับ เว็บไซต์เว็บ. นี่คือเหตุผลที่โมดูล “โซเชียลมีเดียติดตาม” ของ Divi มีไอคอนเครือข่ายและตัวเลือกการออกแบบทั้งหมดที่คุณต้องการเพื่อสร้างโซลูชันที่สมบูรณ์แบบสำหรับไซต์ของคุณ 

เราหวังว่าบทช่วยสอนนี้จะเป็นประโยชน์กับคุณในโครงการ Divi ครั้งต่อไปของคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Divi อย่าลังเลที่จะเยี่ยมชมแคตตาล็อกของเรา บทเรียน Divi ปรึกษาได้นะคะ วิธีสร้างหน้าบล็อกด้วยโมดูล Divi Blog 

หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเรา, หากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน, แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...