วิธีเปิดเผยคอลัมน์ CTA ในสถานะ Sticky ด้วย Divi

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

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงมาตรา CTA ของ Sticky Column ฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราใหม่

สีพื้นหลัง

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

• สีพื้นหลัง: #ffffff

เพิ่มแถว #1

โครงสร้างคอลัมน์

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

ระยะห่าง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและใช้ระยะขอบด้านล่าง

• ขอบล่าง: 5%

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H2

เพิ่มโมดูลข้อความด้วยเนื้อหา H2 ที่คุณเลือก

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ตามนั้น:

• หัวเรื่อง 2 แบบอักษร: Alata
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 55px
  • แท็บเล็ต: 40px
  • โทรศัพท์: 30px

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

ด้านล่างโมดูลข้อความ เพิ่มโมดูลตัวแบ่ง และตรวจดูให้แน่ใจว่าเปิดใช้งานตัวเลือก "แสดงตัวแบ่ง"

• แสดงตัวแบ่ง: ใช่

เส้น

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าบรรทัดดังนี้:

• สีเส้น: #3a7a84
• สไตล์เส้น: Double

ขนาด

ตั้งค่าโมดูลให้สมบูรณ์โดยแก้ไขการตั้งค่าการปรับขนาดตามนั้น:

• น้ำหนักตัวแบ่ง: 10px
• ความกว้าง: 8%
• การจัดตำแหน่งโมดูล: ศูนย์
• ส่วนสูง: 10px

เพิ่มแถว #2

โครงสร้างคอลัมน์

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 95%
• ความกว้างสูงสุด: 2580px

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

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

ภาพพื้นหลัง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และใช้ภาพพื้นหลัง

• ขนาดภาพพื้นหลัง: ปก

ชายแดน

ไปที่แท็บการออกแบบของคอลัมน์และใช้มุมโค้งมน

• ทุกมุม: 20px

เพิ่มโมดูล Blurb ลงในคอลัมน์ 2

เพิ่มเนื้อหา

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูล Blurb ในคอลัมน์ 2 เพิ่มเนื้อหาที่คุณเลือก

เลือกไอคอน

เลือกไอคอนถัดไป

สีพื้นหลัง

จากนั้นใช้สีพื้นหลังสีขาว

• สีพื้นหลัง: #FFFFFF

การตั้งค่าไอคอน

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าไอคอนตามลำดับ:

• ไอคอนสี: #3a7a84
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย

การตั้งค่าข้อความชื่อเรื่อง

จากนั้นกำหนดรูปแบบการตั้งค่าข้อความชื่อ

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Alata
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ชื่อข้อความสี: #000000
• ขนาดข้อความชื่อเรื่อง:
  • เดสก์ท็อป: 35px
  • แท็บเล็ต: 30px
  • โทรศัพท์: 20px

การตั้งค่าข้อความเนื้อหา

ทำการเปลี่ยนแปลงการตั้งค่าข้อความเนื้อหาด้วย

• แบบอักษรของร่างกาย: Karla
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป: 17px
  • แท็บเล็ต: 15px
  • โทรศัพท์: 14px
• ความสูงของเส้นร่างกาย: 2.5em

ขนาด

เปลี่ยนการตั้งค่าขนาดต่อไป

• ความกว้างของเนื้อหา: 100%

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 20%
• แผ่นรองด้านล่าง: 20%
• ช่องว่างภายในด้านซ้าย: 10%
• ช่องว่างภายในด้านขวา: 10%

ชายแดน

ต่อไป เราจะเพิ่มมุมโค้งมนให้กับการตั้งค่าเส้นขอบ

• ทุกมุม: 20px

กล่องเงา

และเราจะรวมเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(59,120,130,0.14)

แอนิเมชั่น

ดำเนินการต่อโดยลบภาพเคลื่อนไหวเริ่มต้นของโมดูล Blurb ในการตั้งค่าภาพเคลื่อนไหวถัดไป

• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

หัวข้อประกาศ CSS

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มโค้ด CSS หนึ่งบรรทัดลงในช่อง CSS ชื่อการนำเสนอในแท็บขั้นสูง

margin-bottom: 20px;

โคลน Blurb โมดูลสองครั้ง

เมื่อคุณเสร็จสิ้นโมดูล Blurb แรกแล้ว ให้โคลนโมดูล Blurb ได้มากเท่าที่คุณต้องการ

เปลี่ยนเนื้อหา

เปลี่ยนเนื้อหาในแต่ละโมดูลที่ซ้ำกัน

เพิ่มโมดูล CTA ลงในคอลัมน์ 1

เพิ่มเนื้อหา

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

เพิ่มปุ่มลิงค์

เพิ่มลิงก์ปุ่มถัดไป

พื้นหลังไล่โทนสี

จากนั้นใช้พื้นหลังแบบไล่ระดับสี

• สี 1: rgba(59,120,130,0.53)
• สี 2: #112730
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 161deg

การตั้งค่าข้อความชื่อเรื่อง

ไปที่แท็บการออกแบบของโมดูล และทำการเปลี่ยนแปลงต่อไปนี้ในการตั้งค่าข้อความชื่อ:

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Alata
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง:
  • เดสก์ท็อป: 50px
  • แท็บเล็ตและโทรศัพท์: 30px

การตั้งค่าปุ่ม

สไตล์ปุ่มถัดไป

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 20px
  • แท็บเล็ต: 17px
  • โทรศัพท์: 15px
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: Alata
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 20px
• ช่องว่างภายในด้านขวา: 20px
• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 3px
• สีเงา: #ffffff

ขนาด

ไปที่การตั้งค่าขนาดของโมดูลและใช้การเปลี่ยนแปลงต่อไปนี้:

• ความกว้าง:
  • เดสก์ท็อป: 95%
  • แท็บเล็ตและโทรศัพท์: 100%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างแบบกำหนดเองด้วย

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

ชายแดน

รวมมุมโค้งมนด้วย

• ทุกมุม: 20px

แปลงแปล

ตั้งค่าโมดูลให้สมบูรณ์โดยใช้การตั้งค่าการแปลการแปลงต่อไปนี้:

• ถูกต้อง:
  • เดสก์ท็อป: -25px
  • แท็บเล็ตและโทรศัพท์: 0px

ใช้ Sticky Effect กับ CTA Module

การตั้งค่าติดหนึบ

เมื่อองค์ประกอบทั้งหมดพร้อมแล้ว ก็ถึงเวลาใช้เอฟเฟกต์ติดหนึบ เปิด CTA Module และใช้การตั้งค่า Sticky ต่อไปนี้:

• ตำแหน่งเหนียว:
  • เดสก์ท็อป: Stick to Top
  • แท็บเล็ตและโทรศัพท์: อย่าติด
• ออฟเซ็ตติดหนึบ: 50px
• ขีด จำกัด ติดหนึบด้านล่าง: คอลัมน์
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

ความทึบ

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

• ความทึบเริ่มต้น:
  • เดสก์ท็อป: 0%
  • แท็บเล็ตและโทรศัพท์: 100%
• ความทึบเหนียว: 100%

การเปลี่ยนแปลง

สุดท้ายนี้ เราจะเปลี่ยนการตั้งค่าการเปลี่ยนในแท็บขั้นสูง แค่นั้นแหละ!

• ระยะเวลาการเปลี่ยนภาพ: 800ms
• เส้นโค้งความเร็วในการเปลี่ยน: Ease

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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