วิธีเพิ่มไอคอนโซเชียลลงในเมนูหลักของ Divi

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

มาเริ่มกันเลย!

ดูตัวอย่าง

เดสก์ทอป

มือถือ

ใช้ Divi Theme Builder เพื่ออัปโหลด Global Header Freebie

สำหรับบทความนี้ เราจะใช้ชุดเค้าโครง Tennis Club และหัวกระดาษ/ท้ายกระดาษฟรี คุณสามารถดาวน์โหลดชุดเค้าโครงได้จากภายในตัวสร้าง Divi และชุดส่วนหัว/ส่วนท้ายจากบล็อกของเรา เมื่อคุณดาวน์โหลด ไฟล์ต่างๆ จะเป็นไฟล์ .zip ตรวจสอบให้แน่ใจว่าคุณได้แตกไฟล์เหล่านี้ออกเพื่อให้คุณมีไฟล์ . json ที่ จะอัปโหลดไปยัง Divi

ตอนนี้ ไปที่แดชบอร์ด WordPress ของคุณและค้นหา Divi Theme Builder ภายใต้ Divi – Theme Builder คลิกที่ ไอคอนลูกศรขึ้นและลง ที่มุมบนขวาของหน้า ซึ่งจะเปิดโมดอล Portability เลือกแท็บ นำเข้า ค้นหาไฟล์ . json สำหรับส่วนหัว/ส่วนท้ายที่คุณดาวน์โหลด และคลิก นำเข้า Divi Theme Builder Templates

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

คุณควรอยู่ในตัวสร้างตอนนี้ หากคุณทำตามคำแนะนำด้านบน ส่วนหัวใหม่ที่คุณอัปโหลดควรปรากฏอยู่แล้ว

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

เพิ่มไอคอนโซเชียลลงในแถบเมนูหลัก

อย่างแรกเลย เรามาเปลี่ยนโครงสร้างแถว/คอลัมน์กันก่อน เราต้องการหาแถวในหัวข้อ #2 (แถวล่างสุดที่มีลิงก์ หน้าแรก/ติดต่อ )

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

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

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

width:80%;

หรือ

width:80%!important;

คุณอาจต้องเพิ่มแท็ก !important เพื่อจัดรูปแบบองค์ประกอบนี้ ไม่เป็นไร. ไม่ควรสร้างปัญหาด้านประสิทธิภาพหรือรหัสปาเก็ตตี้ในการจัดการเพราะเป็นองค์ประกอบเดียว

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

ถัดไป ทำซ้ำขั้นตอนนี้สำหรับคอลัมน์ที่สอง เฉพาะครั้งนี้ ตั้งค่าเริ่มต้นที่ 20% และยังคงมีค่ามือถือที่ 100%

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

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

คลิกไอคอน + สีดำ ใน คอลัมน์ 2 เพื่อเพิ่มโมดูลใหม่และเลื่อนจนกว่าคุณจะพบ Social Media Follow ใส่มัน.

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

เรากำลังเลือกการปรับให้เหมาะสมสำหรับเดสก์ท็อป จากนั้นไปที่ตัวเลือกการตอบสนองและจัดกึ่งกลาง

ถัดลงมาคือเลื่อนลงไปที่เมนู ไอคอน เลือกสีของไอคอนที่คุณต้องการ นี่คือ f สำหรับ Facebook, นกสำหรับ Twitter, กล้องสำหรับ Instagram นี่ไม่ใช่พื้นหลังสีน้ำเงินเป็นต้น

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

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

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

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

จากนั้นเลื่อนลงไปที่รายการ Border ใต้แท็บ Design และภายในนั้น คุณจะพบ Border Width ตั้งค่านี้เป็น 3px จากนั้นเลือก สีเส้นขอบ ที่โดดเด่นจากพื้นหลังของเมนูหลัก Divi

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

จากนั้น คลิกขวาที่เครือข่ายอื่นที่คุณต้องการจัดรูปแบบ และเลือก วางลักษณะรายการ

และนั่นแหล่ะ! อย่าลืมคลิกปุ่ม บันทึก ที่มุมล่างขวาของหน้าจอเพื่อบันทึกเค้าโครงโดยรวม จากนั้น คุณจะปลอดภัยที่จะ X ออกจากหน้าจอแก้ไขที่มุมบนขวา

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

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

และนี่คือสิ่งที่ผลลัพธ์สุดท้ายของคุณควรจะคล้ายคลึงกัน

เดสก์ทอป

มือถือ

ห่อ

ตรวจสอบให้แน่ใจว่าผู้ชมของคุณสามารถค้นหาเครือข่ายโซเชียลหลักของคุณได้เสมอด้วย Divi ในไม่กี่ขั้นตอน คุณสามารถปรับชุดส่วนหัว/ส่วนท้าย freebie ชุดใดชุดหนึ่งของเราเพื่อรวมไอคอนโซเชียลมีเดียของคุณไว้ในเมนูหลัก (หรือที่อื่นๆ ที่คุณอาจต้องการ) ขอให้โชคดี!

คุณคิดอย่างไรเกี่ยวกับไอคอนโซเชียลมีเดียในเมนูหลัก? คุณมักจะวางไว้ที่ไหน