วิธีสร้างเมนู Sticky CTA เมื่อคุณเลื่อนหน้าลง

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/kpjbG8frPTQ

สมัครสมาชิกช่อง Youtube ของเรา

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

วิธีสร้างเมนู Sticky CTA เมื่อคุณเลื่อนดูหน้าใน Divi

อาคาร CTA #1

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

ในการเริ่มต้น ให้สร้างแถวหนึ่งคอลัมน์ใหม่ภายในส่วนปกติ

เพิ่มประกาศ

ภายในคอลัมน์ของแถว ให้เพิ่มโมดูลการนำเสนอ

เปิดการตั้งค่าการนำเสนอและเพิ่มรูปภาพที่คุณเลือกแทนไอคอนเริ่มต้น ฉันใช้รูปภาพจาก Cryptocurrency Layout Pack

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความดังนี้:

• ระดับหัวเรื่อง: H2
• แบบอักษรของชื่อเรื่อง: Titillium Web
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความของชื่อเรื่อง: 36px (เดสก์ท็อป), 28px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.5em
• ความสูงของเส้นร่างกาย: 2em

เพิ่มแถวสำหรับปุ่ม CTA

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

สิ่งสำคัญคือต้องตั้งค่าแถวให้ถูกต้องเพื่อให้การทำงานของปุ่มติดหนึบเพื่อให้เข้าแถวได้อย่างถูกต้อง

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 1400px (เดสก์ท็อป), 100% (แท็บเล็ต)

เพิ่มปุ่มเรียกร้องให้ดำเนินการ

ภายในแถวใหม่ เพิ่มโมดูลการเรียกร้องให้ดำเนินการ ปรับปรุงดังต่อไปนี้:

• เราต้องการเพียงแค่องค์ประกอบปุ่มภายในโมดูลนี้ เพื่อที่เราจะได้กำจัดชื่อและข้อความเนื้อหา
• ตรวจสอบให้แน่ใจว่าได้เพิ่มปุ่ม ลิงค์ URL ('#' จะทำในตอนนี้) เพื่อให้มองเห็นปุ่มได้เมื่อออกแบบเลย์เอาต์ คุณสามารถอัปเดตได้ในภายหลัง
• ปิดใช้งานตัวเลือก "ใช้สีพื้นหลัง"

(หมายเหตุ: คุณจะไม่เห็นปุ่มสีขาวบนพื้นหลังสีขาว แต่จะเปลี่ยนไปในขั้นตอนต่อไป)

ใต้แท็บออกแบบ ให้อัปเดตลักษณะปุ่มต่อไปนี้:

• ขนาดข้อความของปุ่ม: 14px (เดสก์ท็อป), 11px (โทรศัพท์)
• สีข้อความของปุ่ม: #1b1f50
• สีพื้นหลังของปุ่ม: #09d5fe
• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: Titilium Web
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ปุ่ม Padding: 1em ด้านบน 1em ด้านล่าง

อัปเดตการออกแบบต่อไปดังนี้:

• ความกว้าง: 33.33%
• การจัดตำแหน่งโมดูล: ศูนย์
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

ใต้แท็บขั้นสูง ให้เพิ่มข้อมูลโค้ด CSS ที่กำหนดเองต่อไปนี้ในคำอธิบายโปรโมชัน (มีระยะห่างที่ไม่จำเป็นที่เราไม่ต้องการ):

display:none;

จากนั้นเพิ่มข้อมูลโค้ดอีกปุ่ม Promo:

display:block;

ทำให้ปุ่มเหนียว

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

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

• ตำแหน่งติดหนึบ: ติดบนและล่าง
• Sticky Top Offset: 54px (เดสก์ท็อป), 0px (แท็บเล็ต)
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: NO

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

อัปเดตรูปแบบการแปลงต่อไปนี้ในสถานะติดหนึบ:

• แปลงแกน X แปล (เหนียว): -100%

การดำเนินการนี้จะย้ายปุ่มไปในระยะทางเท่ากับความกว้างที่แน่นอนของปุ่ม (ซึ่งเท่ากับ 33.33%) เมื่อปุ่มไปติดกับด้านบนหรือด้านล่างของหน้า

อาคาร CTA #2

ตอนนี้เรามีส่วนหนึ่งพร้อมปุ่ม CTA ที่ใช้งานได้แล้ว เราสามารถทำซ้ำส่วนก่อนหน้าและทำการปรับเปลี่ยนเล็กน้อยกับปุ่มได้

ขั้นแรก ทำซ้ำส่วน

เปิดการตั้งค่าสำหรับโมดูลการเรียกร้องให้ดำเนินการในส่วนใหม่และอัปเดตตัวเลือกการแปลงดังนี้:

• แปลงแกน X แปล (เหนียว): 0px

นี่เป็นเพียงการคืนค่ากลับเป็นสถานะเริ่มต้น เนื่องจากเราไม่ต้องการย้ายปุ่มนี้เนื่องจากต้องอยู่ตรงกลาง

อาคาร CTA #3

หากต้องการสร้างส่วน CTA ที่สาม ให้ทำซ้ำส่วนก่อนหน้า

จากนั้นเปิดการตั้งค่าสำหรับโมดูลการเรียกร้องให้ดำเนินการในส่วนใหม่และอัปเดตตัวเลือกการแปลงดังนี้:

• แปลงแกน X แปล (เหนียว): 100%

การดำเนินการนี้จะย้ายปุ่มไปทางขวาเป็นระยะทางเท่ากับความกว้างที่แน่นอนของปุ่ม (ซึ่งเท่ากับ 33.33%) เมื่อปุ่มนั้นเกาะติดกับด้านบนหรือด้านล่างของหน้า

อัปเดตข้อความและสีของปุ่ม

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

สำหรับ CTA #2…

• ข้อความปุ่ม: ดูแผนของเรา
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #1b1f50

สำหรับ CTA #3…

• ข้อความปุ่ม: แชทกับเรา
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #4328b7

เพิ่มระยะขอบชั่วคราวที่ส่วนบนและส่วนล่างสำหรับการทดสอบการทำงาน

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

ที่ส่วนบนเพิ่มระยะขอบบน 90vh

ที่ส่วนล่าง เพิ่มระยะขอบล่าง 90vh

ผลสุดท้าย

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

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

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

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

ไชโย!