แถบข้างเหนียวมีประสิทธิภาพอย่างมากในการดึงดูดความสนใจ ผู้เข้าชม โดยไม่รบกวนหรือรบกวนสมาธิ เคล็ดลับคือการรวมองค์ประกอบหนึ่งหรือสององค์ประกอบไว้ในแถบด้านข้างที่ “มองเห็นได้” หรือจับจ้องอยู่ที่ด้านข้างของ เนื้อหา ของโพสต์เมื่อผู้ใช้เลื่อนหน้า นี่เป็นทางเลือกใหม่แทนรูปแบบแถบด้านข้างแบบเดิม เนื่องจากให้ความรู้สึกถึงรูปแบบเต็มความกว้างที่ทันสมัย (ไม่มีแถบด้านข้าง) พร้อมประโยชน์ของการนำเสนอคำกระตุ้นการตัดสินใจที่สำคัญที่ด้านข้างของหน้าเมื่อจำเป็น
ในบทช่วยสอนนี้เราจะแสดงวิธีเพิ่มคำกระตุ้นการตัดสินใจลงในเทมเพลตโพสต์บล็อกโดยใช้ Divi Theme Builder การใช้เลย์เอาต์นี้มีความสำคัญ จะใช้ได้กับเกือบทุกหน้าหรือเทมเพลตโพสต์ใด ๆ นอกจากนี้คุณไม่จำเป็นต้อง จำกัด ตัวเองไว้ที่ CTA คุณสามารถเลือกเพิ่มโมดูล Divi ที่คุณต้องการได้
สิ่งที่คุณต้องเริ่มต้น
ในการเริ่มต้นคุณต้อง เพื่อติดตั้งและเปิดใช้งานธีม Divi . ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุด
คุณจะต้องมีข้อความอย่างน้อยหนึ่งข้อความที่สร้างขึ้นด้วย Divi Builder เพื่อทำการทดสอบเพื่อแสดงผลลัพธ์ที่ต้องการ
หลังจากนั้นคุณก็พร้อมที่จะออกเดินทาง
การสำรวจ
นี่คือภาพรวมคร่าวๆของ ACT ที่เหนียวเหนอะหนะซึ่งถูกเพิ่มไปยังเทมเพลตโพสต์บล็อกใน Divi
วิธีเพิ่มคำกระตุ้นการตัดสินใจคงที่ในเทมเพลตโพสต์บล็อกของคุณใน Divi
การเพิ่มเท็มเพลตตัวสร้างธีม
ขั้นตอนแรกคือการนำเข้าเทมเพลตที่กำหนดไว้ล่วงหน้าบนไซต์ของเรา เราจะใช้เทมเพลตการเผยแพร่ Divi Theme Builder Pack # 1
ในการเริ่มต้น ให้ไปที่ Divi > Generator ธีม. คลิกไอคอนการพกพาที่ด้านบนขวาของหน้า ในโมดอลพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ divi-theme-builder-pack-1-post-template.json จากโฟลเดอร์ หากคุณมีเทมเพลตที่ติดตั้งอยู่บนไซต์ของคุณ โปรดยกเลิกการเลือกตัวเลือกที่อาจเขียนทับเทมเพลตปัจจุบันของคุณ จากนั้นคลิกปุ่มนำเข้า
สร้างเทมเพลตโพสต์บล็อก
เมื่อนำเข้าเทมเพลตแล้วเราพร้อมที่จะเพิ่ม CTA ใหม่ของเราลงในแถบด้านข้างเพื่อยึดติดกับเค้าโครงเทมเพลต ในการดำเนินการนี้ให้คลิกไอคอนแก้ไขสำหรับส่วนของร่างกายที่กำหนดเอง
เพิ่มเค้าโครงแถบด้านข้างคู่เพื่อเก็บ CTA ของแถบด้านข้าง
ใน Model Layout Editor ให้ค้นหาแถวที่มีโมดูล Publish เนื้อหา และแทนที่เค้าโครงคอลัมน์ด้วยโครงสร้างคอลัมน์หนึ่งในห้าคูณสามในห้าคูณหนึ่งในห้า (1/5 3/5 1/5) ซึ่งจะช่วยให้เรารักษาคอลัมน์ไว้ตรงกลางสำหรับ เนื้อหา ของโพสต์โดยจัดให้มีสองส่วนในด้านใดด้านหนึ่งสำหรับ CTA ที่เหนียวแน่นของเรา
หลังจากเปลี่ยนโครงสร้างคอลัมน์แล้วให้ลากโมดูลการประกาศเนื้อหาไปยังคอลัมน์กลาง
อัพเดตพารามิเตอร์บรรทัด
เปิดการตั้งค่าบรรทัดและอัพเดตตัวเลือกการออกแบบต่อไปนี้:
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 2
- ความกว้าง: 100% (เดสก์ท็อป), 90% (แท็บเล็ต)
- ความกว้างสูงสุด: 1500px
สิ่งนี้จะทำให้เรามีห้องที่เราต้องการสำหรับการกำหนดค่าแถบด้านข้างสองครั้งของเรา
อัพเดตการตั้งค่าคอลัมน์ 1
จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และกำหนด CSS คลาสที่กำหนดเองสำหรับคอลัมน์นี้:
- CSS คลาส: sticky-cta
การเพิ่มแถบด้านข้าง CTA ในคอลัมน์ด้านซ้าย
ตอนนี้เราพร้อมสำหรับคำกระตุ้นการตัดสินใจครั้งแรก เพิ่มคำเรียกไปยังโมดูลการดำเนินการในคอลัมน์ด้านซ้าย
ปรับแต่ง CTA Sidebar
อัพเดตการตั้งค่าดังนี้:
เนื้อหา
- ปุ่ม: «คลิกที่นี่»
- เนื้อหา:“ เนื้อหาของคุณอยู่ที่นี่ แก้ไขหรือลบข้อความนี้ทางออนไลน์หรือในการตั้งค่าเนื้อหาของโมดูล ”
- URL ของลิงค์ของปุ่ม: #
การออกแบบตัวข้อความ
- แบบอักษร: มอนต์เซอร์รัต
- น้ำหนักตัวอักษร: ตัวหนากึ่ง
- เนื้อความ: การจัดตำแหน่งด้านขวา
- สีของข้อความ: # 444444
- ขนาดตัวอักษร: 22px (เดสก์ท็อป), 18px (แท็บเล็ต)
- ความสูงของร่างกาย: 1.3em
ปุ่ม
- ขนาดข้อความของปุ่ม: 14px
- สีข้อความปุ่ม: #ffffff
- สีพื้นหลังของปุ่ม: # 6148df
- ความกว้างของเส้นขอบปุ่ม: 0px
- รัศมีของปุ่ม: 80px
- น้ำหนักตัวอักษร: ตัวหนา
- รูปแบบตัวอักษรของปุ่ม: TT
- ปุ่มเสริมภายใน: 12px ที่ด้านบน, 12px ที่ด้านล่าง, 22px ทางด้านซ้าย, 22px ทางด้านขวา
ความกว้างการจัดตำแหน่งช่องว่างภายในและขอบ
- ความกว้าง: 100%
- ความกว้างสูงสุด: 320px
- การจัดตำแหน่งของโมดูล: ขวา
- การขยาย: 10px ทางซ้าย, 10px ทางด้านขวา
- ความกว้างของเส้นขอบด้านบน: 10px
- สีของเส้นขอบด้านบน: #eeeeee
- ความกว้างของเส้นขอบด้านล่าง: 10px
- สีของเส้นขอบด้านล่าง: #eeeeee
การเพิ่มแถบด้านข้าง CTA ไปยังคอลัมน์ด้านขวา
ในการสร้าง CTA สำหรับคอลัมน์ด้านขวาให้คัดลอกรายการที่เราเพิ่งสร้างและวางในคอลัมน์ด้านขวาสุด จากนั้นอัปเดตการตั้งค่าสำหรับรายการที่ซ้ำกันดังนี้:
- การจัดแนวของเนื้อความข้อความ: ซ้าย
- การจัดตำแหน่งของโมดูล: left
อัพเดตการตั้งค่าคอลัมน์ 3
สำหรับ CTA นี้ในคอลัมน์ด้านขวาเราจะเพิ่มระยะขอบบนให้กับคอลัมน์เพื่อสร้างตำแหน่งเริ่มต้นของแถบด้านข้าง CTA ที่จุดต่ำสุดของหน้า
เริ่มต้นด้วยการเปิดพารามิเตอร์ของคอลัมน์ 3 และเพิ่ม CSS คลาสเดียวกับที่เราเพิ่มลงในคอลัมน์ 1:
- CSS คลาส: sticky-cta
จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:
สำนัก
margin-top: 50%
ยาเม็ด
margin-top: 0%
สิ่งนี้จะทำให้เรามีจุดเริ่มต้นที่แตกต่างกันสำหรับ CTA แบบติดหนึบในคอลัมน์ทางขวาซึ่งคือ 50% ของความกว้างของแถว อย่าลังเลที่จะปรับค่านี้ตามความจำเป็นสำหรับบล็อกโพสต์ของคุณเอง
เพิ่ม CSS ที่กำหนดเองลงในเทมเพลตด้วยโมดูลรหัส
เพื่อให้ได้ตำแหน่งที่ "ติดหนึบ" สำหรับ CTA ของแถบด้านข้างเราจำเป็นต้องเพิ่ม CSS ที่กำหนดเอง ในการดำเนินการนี้ให้สร้างโมดูลโค้ดใหม่ภายใต้โมดูลการเผยแพร่เนื้อหา (หรือที่ใดก็ได้บนเพจ)
จากนั้นวาง CSS ต่อไปนี้ลงในกล่องรหัส:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
ค่าชดเชยด้านบนในรหัสนี้คือการคำนวณที่วางตำแหน่ง CTA ในแนวตั้งที่กึ่งกลางของหน้าเมื่อเลื่อน 50vh คือครึ่งหนึ่งของความสูงของหน้าต่างเบราว์เซอร์และ 130px คือครึ่งหนึ่งของความสูงของ CTA หาก CTA ของคุณสูงขึ้นหรือต่ำลงคุณจะต้องปรับ 130 พิกเซลขึ้นหรือลง
บันทึกการตั้งค่า
เมื่อเสร็จแล้วให้บันทึกเค้าโครงของเทมเพลต
จากนั้นบันทึกการตั้งค่าตัวสร้างธีม
ผลสุดท้าย
หากต้องการดูผลลัพธ์สุดท้ายให้ไปที่บทความบล็อกโดยใช้เทมเพลต
และนี่คือวิธีที่ CTA เหนียวจะยังคงค้างอยู่ในการเลื่อน คุณสามารถดูวิธีที่จะทำงานได้ดีที่สุดสำหรับเนื้อหาที่ยาวขึ้น
คิดสุดท้าย
คำกระตุ้นการตัดสินใจด้านที่ติดหนึบเหล่านี้เป็นทางเลือกใหม่สำหรับแถบด้านข้างแบบดั้งเดิม ใช้งานได้ดีกับการออกแบบสไตล์มินิมอลเพราะไม่รบกวนและไม่ทำให้โพสต์รก นอกจากนี้ คุณสามารถวางตำแหน่ง CTA ในหน้าให้ต่ำลงเพื่อให้ค่อยๆ ปรากฏและติดกับแถบเลื่อน ทำให้ผู้คนมองเห็นหน้าดังกล่าวได้มากขึ้น ผู้เข้าชม. และอย่าลืม คุณสามารถแทนที่ CTA ด้วยโมดูล Divi หรือการรวมกันของโมดูลเพื่อสร้างอะไรก็ได้ที่คุณต้องการ คุณยังสามารถเลือกที่จะเก็บ CTA ไว้ด้านเดียวเท่านั้น ดูเหมือนว่าจะมีแอปพลิเคชันมากมาย
