Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

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

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

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

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

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

การสำรวจ

นี่คือภาพรวมคร่าวๆของ ACT ที่เหนียวเหนอะหนะซึ่งถูกเพิ่มไปยังเทมเพลตโพสต์บล็อกใน Divi

วิธีเพิ่มคำกระตุ้นการตัดสินใจคงที่ในเทมเพลตโพสต์บล็อกของคุณใน Divi

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

ขั้นตอนแรกคือการนำเข้าเทมเพลตที่กำหนดไว้ล่วงหน้าบนไซต์ของเรา เราจะใช้เทมเพลตการเผยแพร่ Divi Theme Builder Pack # 1

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

นำเข้าเค้าโครง Divi

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

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

เพิ่มเนื้อหา Divi ที่กำหนดเอง

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

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

เพิ่มเค้าโครง Divi

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

อัพเดตพารามิเตอร์บรรทัด

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

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

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

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

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

  • CSS คลาส: sticky-cta
ปรับแต่งคอลัมน์ 1 css divi

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

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

เพิ่มคำกระตุ้นการตัดสินใจของโมดูล

ปรับแต่ง CTA Sidebar

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

เนื้อหา
  • ปุ่ม: «คลิกที่นี่»
  • เนื้อหา:“ เนื้อหาของคุณอยู่ที่นี่ แก้ไขหรือลบข้อความนี้ทางออนไลน์หรือในการตั้งค่าเนื้อหาของโมดูล ”
  • URL ของลิงค์ของปุ่ม: #
ปรับแต่งโมดูลคำกระตุ้นการตัดสินใจ
การออกแบบตัวข้อความ
  • แบบอักษร: มอนต์เซอร์รัต
  • น้ำหนักตัวอักษร: ตัวหนากึ่ง
  • เนื้อความ: การจัดตำแหน่งด้านขวา
  • สีของข้อความ: # 444444
  • ขนาดตัวอักษร: 22px (เดสก์ท็อป), 18px (แท็บเล็ต)
  • ความสูงของร่างกาย: 1.3em
ถุงน่อง CTA
ปุ่ม
  • ขนาดข้อความของปุ่ม: 14px
  • สีข้อความปุ่ม: #ffffff
  • สีพื้นหลังของปุ่ม: # 6148df
  • ความกว้างของเส้นขอบปุ่ม: 0px
  • รัศมีของปุ่ม: 80px
  • น้ำหนักตัวอักษร: ตัวหนา
  • รูปแบบตัวอักษรของปุ่ม: TT
  • ปุ่มเสริมภายใน: 12px ที่ด้านบน, 12px ที่ด้านล่าง, 22px ทางด้านซ้าย, 22px ทางด้านขวา
ส่วนโมดูล Divi
ความกว้างการจัดตำแหน่งช่องว่างภายในและขอบ
  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 320px
  • การจัดตำแหน่งของโมดูล: ขวา
  • การขยาย: 10px ทางซ้าย, 10px ทางด้านขวา
  • ความกว้างของเส้นขอบด้านบน: 10px
  • สีของเส้นขอบด้านบน: #eeeeee
  • ความกว้างของเส้นขอบด้านล่าง: 10px
  • สีของเส้นขอบด้านล่าง: #eeeeee

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

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

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

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

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

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

  • CSS คลาส: sticky-cta

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

สำนัก

margin-top: 50%

ยาเม็ด

margin-top: 0%

ปรับแต่งสไตล์คอลัมน์ Divi

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

ทำซ้ำโมดูล cta divi

เพิ่ม CSS ที่กำหนดเองลงในเทมเพลตด้วยโมดูลรหัส

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

ใส่โมดูลประเภทรหัส Divi

จากนั้นวาง 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>

รหัสพารามิเตอร์โมดูล Divi

ค่าชดเชยด้านบนในรหัสนี้คือการคำนวณที่วางตำแหน่ง CTA ในแนวตั้งที่กึ่งกลางของหน้าเมื่อเลื่อน 50vh คือครึ่งหนึ่งของความสูงของหน้าต่างเบราว์เซอร์และ 130px คือครึ่งหนึ่งของความสูงของ CTA หาก CTA ของคุณสูงขึ้นหรือต่ำลงคุณจะต้องปรับ 130 พิกเซลขึ้นหรือลง

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

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

บันทึกพารามิเตอร์โมดูล cta divi

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

บันทึก Divi ตัวสร้างธีม

ผลสุดท้าย

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

ถุงน่อง CTA

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

คิดสุดท้าย

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

2 หุ้น
หุ้น2
ทวีต
Enregistrer