วิธีเพิ่ม CTA ของ Sticky Sidebar ให้กับเทมเพลตบล็อกโพสต์ใน Divi

CTA ของ Sticky Sidebar มีประสิทธิภาพอย่างยิ่งในการดึงดูดความสนใจของผู้เยี่ยมชมโดยไม่ทำให้เสียสมาธิหรือเสียสมาธิ เคล็ดลับคือการรวมหนึ่งหรือสององค์ประกอบในแถบด้านข้างที่ "ติด" หรือคงอยู่ที่ด้านข้างของเนื้อหาโพสต์เมื่อผู้ใช้เลื่อนหน้าลง นี่เป็นทางเลือกใหม่สำหรับการจัดวางแถบด้านข้างแบบดั้งเดิม เนื่องจากให้ความรู้สึกถึงเค้าโครงแบบเต็มความกว้าง (ไม่มีแถบด้านข้าง) ที่ทันสมัย ​​พร้อมประโยชน์ของการแสดง CTA ที่สำคัญที่ด้านข้างของหน้าเมื่อจำเป็น

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

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

ดาวน์โหลดเทมเพลต CTA Sticky Sidebar ฟรี

ในการวางมือบนเทมเพลตโพสต์ cta ของแถบด้านข้างเหนียวจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล 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 เพื่อการทดสอบเพื่อแสดงผลลัพธ์ที่ต้องการ

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของ CTA ของแถบด้านข้างแบบติดหนึบที่เพิ่มลงในเทมเพลตโพสต์บล็อกใน Divi

วิธีเพิ่ม CTA ของ Sticky Sidebar ให้กับเทมเพลตโพสต์บล็อกของคุณใน Divi

การเพิ่มเทมเพลตตัวสร้างธีม

ขั้นตอนแรกรวมถึงการนำเข้าเทมเพลตที่สร้างไว้ล่วงหน้าของเรามายังไซต์ของเรา เราจะใช้เทมเพลตโพสต์จาก Divi Theme Builder Pack #1

ในการเริ่มต้น ให้ไปที่ Divi > Theme Builder คลิกไอคอนการพกพาที่ด้านบนขวาของหน้า ในโมดอลการพกพา ให้เลือกแท็บการนำเข้าและเลือกไฟล์ divi-theme-builder-pack-1-post-template.json จากโฟลเดอร์ ในกรณีที่คุณมีเทมเพลตใด ๆ ติดตั้งอยู่บนไซต์ของคุณ ตรวจสอบให้แน่ใจว่าได้ยกเลิกการเลือกตัวเลือกที่อาจแทนที่เทมเพลตปัจจุบันของคุณ จากนั้นคลิกปุ่มนำเข้า

การสร้างเทมเพลตบล็อกโพสต์

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

การเพิ่มเค้าโครงแถบด้านข้างคู่เพื่อเก็บ CTA ของแถบด้านข้าง

ในตัวแก้ไขเค้าโครงเทมเพลต ให้ค้นหาแถวที่มีโมดูลเนื้อหาโพสต์และเปลี่ยนเค้าโครงคอลัมน์เป็นโครงสร้างคอลัมน์หนึ่งในห้า สามในห้า หนึ่งในห้า (1/5 3/5 1/5) ซึ่งจะทำให้เราสามารถรักษาคอลัมน์ตรงกลางของเนื้อหาโพสต์ในขณะที่ให้สองส่วนที่ด้านใดด้านหนึ่งสำหรับ CTA ของแถบด้านข้างแบบติดหนึบ

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

กำลังอัปเดตการตั้งค่าแถว

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ความกว้าง: 100% (เดสก์ท็อป), 90% (แท็บเล็ต)
• ความกว้างสูงสุด: 1500px

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

กำลังอัปเดตการตั้งค่าคอลัมน์ 1

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

• CSS Class: เหนียว-cta

การเพิ่ม CTA ของแถบด้านข้างที่คอลัมน์ด้านซ้าย

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

จัดแต่งทรงผมแถบด้านข้างCTA

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

เนื้อหา

• ปุ่ม: “คลิกที่นี่”
• เนื้อหา: “เนื้อหาของคุณอยู่ที่นี่ แก้ไขหรือลบข้อความนี้ในบรรทัดหรือในการตั้งค่าเนื้อหาของโมดูล”
• URL ลิงก์ของปุ่ม: #

การออกแบบข้อความเนื้อหา

• แบบอักษรของร่างกาย: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของร่างกาย: กึ่งหนา
• การจัดตำแหน่งข้อความเนื้อหา: right
• สีข้อความ: #444444
• ขนาดข้อความ: 22px (เดสก์ท็อป), 18px (แท็บเล็ต)
• ความสูงของเส้นร่างกาย: 1.3em

ปุ่ม

• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #6148df
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 80px
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ปุ่ม Padding: บน 12px, ด้านล่าง 12px, ซ้าย 22px, 22px ขวา

ความกว้าง การจัดตำแหน่ง ช่องว่างภายใน และเส้นขอบ

• ความกว้าง: 100%
• ความกว้างสูงสุด: 320px
• การจัดตำแหน่งโมดูล: right
• ช่องว่างภายใน: ซ้าย 10px, ขวา 10px
• ความกว้างขอบด้านบน: 10px
• สีขอบบน: #eeeeee
• ความกว้างขอบล่าง: 10px
• สีขอบล่าง: #eeeeee

การเพิ่ม CTA ของแถบด้านข้างไปยังคอลัมน์ด้านขวา

ในการสร้าง CTA สำหรับคอลัมน์ด้านขวา ให้คัดลอกคอลัมน์ที่เราเพิ่งสร้างขึ้นแล้ววางลงในคอลัมน์ทางขวาสุด จากนั้นอัปเดตการตั้งค่าสำหรับรายการซ้ำดังนี้:

• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
• การจัดตำแหน่งโมดูล: ซ้าย

อัปเดตการตั้งค่าคอลัมน์ 3

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

ขั้นแรก เปิดการตั้งค่าสำหรับคอลัมน์ 3 และเพิ่มคลาส CSS เดียวกันกับที่เราเพิ่มในคอลัมน์ 1:

• CSS Class: เหนียว-cta

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

เดสก์ทอป

margin-top: 50%

ยาเม็ด

margin-top: 0%

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

การเพิ่ม Custom CSS ให้กับเทมเพลตด้วย Code Module

เพื่อให้ได้ตำแหน่งที่ "เหนียว" สำหรับ 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 ที่มีความสูงมากกว่า/น้อยกว่า คุณจะต้องปรับ 130px ขึ้นหรือลง

บันทึกการตั้งค่า

เมื่อเสร็จแล้ว ให้บันทึกเค้าโครงเทมเพลต

แล้วบันทึกการตั้งค่าตัวสร้างธีม

ผลสุดท้าย

หากต้องการดูผลลัพธ์สุดท้าย ไปที่บล็อกโพสต์ที่ใช้เทมเพลต

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

และนี่คือการแสดงผลบนมือถือ

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

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

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

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

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

ไชโย!