วิธีสร้างโซเชียลมีเดียตามไอคอน Sticky ใน Divi

Rifat Feb 16, 2022

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

เค้าโครงการออกแบบ

นี่คือเค้าโครงของเราวันนี้ นี่คือสิ่งที่เรากำลังจะสร้าง

เค้าโครงหน้า Landing Page

ก่อนที่เราจะพัฒนาโมดูลการติดตามโซเชียลมีเดียที่เหนียวแน่น เราต้องการเนื้อหาหน้าตัวอย่างบางส่วน โดยไปที่เมนูการตั้งค่าแล้วเลือกตัวเลือกโหลดจากไลบรารี ค้นหาและเลือกเลย์เอาต์ Fashion Designer Landing Page จากกล่อง Load from Library จากนั้น ให้คลิกปุ่ม "ใช้เลย์เอาต์นี้" สีเขียวทางด้านขวา

การออกแบบหน้า Landing Page ด้วยไอคอนสื่อโซเชียลที่ติดหนึบ

เพิ่มส่วนปกติในการออกแบบ

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

ตอนนี้ นำส่วนที่เพิ่มใหม่มาไว้ด้านบนสุดของหน้า

เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลัง

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

จากแท็บการออกแบบ ให้อัปเดตการเติม

  • ช่องว่างภายใน: 10px ด้านบน 10px ด้านล่าง

การเพิ่มแถว

ตอนนี้เพิ่มแถวหนึ่งคอลัมน์ในส่วนที่เตรียมใหม่

เปิดการตั้งค่าแถวและอัปเดตการเปลี่ยนแปลงต่อไปนี้:

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

การเพิ่มโมดูลโซเชียลมีเดีย

ถัดไป เพิ่มโมดูล Social Media Follow ใหม่ในแถว

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

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

จากแท็บออกแบบ ให้อัปเดตการตั้งค่าต่อไปนี้

  • การจัดตำแหน่งโมดูล: ศูนย์
  • ไอคอนสี: #000 (เดสก์ท็อป), #fff (โฮเวอร์), #fff (เหนียว)
  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
  • ช่องว่างภายใน: บน 20px ล่าง 12px ซ้าย 10px ขวา 10px

การตั้งค่าเครือข่ายสังคม

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

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

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

  • โซเชียลเน็ตเวิร์ก: TikTok (หรืออะไรก็ได้ที่คุณต้องการ)
  • พื้นหลัง: โปร่งใส (เดสก์ท็อป), #fe2c55 (โฮเวอร์), #000 (เหนียว)

ตอนนี้ตรวจสอบสีพื้นหลังขสลับผ่านแท็บ

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

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

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

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

ทำซ้ำไอคอนเพื่อสร้างเพิ่มเติม

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

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

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

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

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

ผลลัพธ์สุดท้าย

นี่คือลักษณะการออกแบบขั้นสุดท้ายของเรา

จบความคิด

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