วิธีการออกแบบป๊อปอัปโซเชียลมีเดียตามแถบปุ่มบนเทมเพลตเพจของคุณใน Divi

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมอย่างรวดเร็วของปุ่มติดตามโซเชียลมีเดียที่สร้างขึ้นในบทช่วยสอนนี้

ดาวน์โหลดเทมเพลตหน้าแถบปุ่มติดตามโซเชียลมีเดียของ Pop Out ฟรี

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip และเพิ่มไฟล์ json ไฟล์ใดไฟล์หนึ่งลงใน Divi Theme Builder โดยใช้ตัวเลือก Theme Builder Portability

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องติดตั้งและเปิดใช้งานธีม Divi ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุด

คุณจะต้องสร้างอย่างน้อยหนึ่งหน้าด้วย Divi Builder เพื่อวัตถุประสงค์ในการทดสอบเพื่อกำหนดเทมเพลตใหม่ให้กับหน้านั้นเพื่อแสดงผล

หลังจากนั้นคุณก็พร้อมที่จะไป

การสร้างแถบปุ่มติดตามโซเชียลมีเดียแบบป๊อปอัปสำหรับเทมเพลตหน้าใน Divi

การสร้างเทมเพลตใหม่

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Theme Builder จากนั้นคลิกช่อง "เพิ่มเทมเพลตใหม่" เพื่อสร้างเทมเพลตใหม่

กำหนดเทมเพลตให้กับเพจที่คุณต้องการให้แสดงแถบโปรโมชัน

ในเทมเพลตใหม่ ให้คลิกพื้นที่ "เพิ่มเนื้อหาที่กำหนดเอง" จากนั้นเลือก "สร้างเนื้อหาที่กำหนดเอง"

จากนั้นเลือกตัวเลือก “สร้างตั้งแต่เริ่มต้น”

การสร้างแถบปุ่มติดตามโซเชียลมีเดีย

สร้างแถวใหม่

สำหรับผู้เริ่มต้น ให้เพิ่มแถวหนึ่งคอลัมน์ลงในเทมเพลต

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

ในแถวหนึ่งคอลัมน์ ให้เพิ่มโมดูลการติดตามโซเชียลมีเดีย

เพิ่มโซเชียลเน็ตเวิร์ก

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

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

เพิ่มโมดูลปุ่ม

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

เนื้อหาปุ่ม

ถัดไปอัปเดตเนื้อหาปุ่มดังนี้:

• ข้อความปุ่ม: ติดตาม
• URL ลิงก์ของปุ่ม: #

ลักษณะปุ่มและการวางตำแหน่ง

จากนั้นอัปเดตการตั้งค่าการออกแบบปุ่มดังนี้:

• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม:
• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• แบบอักษรของปุ่ม น้ำหนัก: ตัวหนา
• ไอคอนปุ่ม: ลูกศรขวา (ดูภาพหน้าจอ)
• มาร์จิ้น: เหลือ 100%
• ช่องว่างภายใน: 100px ด้านล่าง

จากนั้นเพิ่ม Custom CSS ต่อไปนี้ในองค์ประกอบหลัก:

position: absolute;

การตั้งค่าแถว

เมื่อปุ่มมีสไตล์และพร้อมใช้งานแล้ว ให้อัปเดตการตั้งค่าแถวดังนี้:

• สีพื้นหลัง: #ffffff
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 64px
• ช่องว่างภายใน: บน 24px ล่าง 16px ซ้าย 16px

เงากล่องแถว

• กล่องเงา: ดูภาพหน้าจอ
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของกล่องเงาเบลอ: 30px
• Shadow Color (เดสก์ท็อป): โปร่งใส
• สีเงา (โฮเวอร์): rgba(0,0,0,0.2)

การวางตำแหน่งแถว

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในแถวองค์ประกอบหลัก:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

การดำเนินการนี้จะจัดตำแหน่งแถวในตำแหน่งคงที่หนึ่งในสามของทางลงจากด้านบนของเบราว์เซอร์

โผล่ออกมาบนเอฟเฟกต์โฮเวอร์ด้วยระยะขอบแบบกำหนดเอง

ตอนนี้ให้เพิ่มค่ามาร์จิ้นต่อไปนี้เพื่อเพิ่มป๊อปเอาต์บนฟังก์ชันโฮเวอร์

• ระยะขอบ (เดสก์ท็อป): -64px เหลือ
• ระยะขอบ (โฮเวอร์): 0px left

ที่ดูแลโซเชียลมีเดียตามแถบปุ่ม แต่เรายังต้องสร้างเทมเพลตให้เสร็จโดยสร้างโมดูลเนื้อหาโพสต์ที่จำเป็น

การเพิ่มโมดูลเนื้อหาโพสต์ลงในเทมเพลต

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

เพิ่มแถวใหม่ด้วยโมดูลเนื้อหาโพสต์

ใต้แถวที่มีแถบปุ่มติดตามโซเชียลมีเดียของคุณ ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่

จากนั้นเพิ่มโมดูลเนื้อหาโพสต์ลงในแถว

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

อัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

อัปเดตการตั้งค่าส่วนดังนี้:

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

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

ผลสุดท้าย

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

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!