Sticky Bars ยังคงเป็นส่วนที่ได้รับความนิยมในการออกแบบเว็บ เหมาะอย่างยิ่งสำหรับการกระตุ้น Conversion โดยรักษาคำกระตุ้นการตัดสินใจที่ล้ำสมัยโดยไม่รบกวนเหมือนป๊อปอัป
กรณีการใช้งานนี้ เราจะออกแบบแท่งหนึบสำหรับผลิตภัณฑ์ WooCommerce ใช้โมดูล Woo จาก Divi. แถบเหนียวสามารถรวมโมดูลใดก็ได้ Divi. สำหรับบทช่วยสอนนี้ เราจะสร้างแถบติดหนึบที่มีปุ่ม "หยิบใส่รถเข็น" เพื่อให้มองเห็นได้ชัดเจนเมื่อผู้ใช้เลื่อนหน้าลงมา นอกจากนี้ เราจะสร้างแถบแจ้งเตือนรถเข็นช็อปปิ้ง เพื่อให้ผู้ใช้เห็นปุ่ม "ดูตะกร้าสินค้า" เสมอเมื่อคลิกปุ่ม "เพิ่มลงในรถเข็น"
องค์ประกอบแท่งที่เหนียวเหล่านี้จะช่วยเพิ่มการแปลงโดยการรักษา CTA ที่สำคัญเหล่านี้ในมุมมอง
การสำรวจ
นี่คือตัวอย่างของสิ่งที่เราจะออกแบบในบทช่วยสอนนี้
ส่วนที่ 1: การออกแบบแถบกาวบนหน้าผลิตภัณฑ์
เรากำลังจะใช้ผลิตภัณฑ์จำลองอย่างง่ายสำหรับตัวอย่างนี้ดังนั้นคุณต้องสร้างผลิตภัณฑ์ใหม่หรือแก้ไขผลิตภัณฑ์ที่มีอยู่ ข้อมูลผลิตภัณฑ์ไม่สำคัญสำหรับบทแนะนำนี้ ตรวจสอบให้แน่ใจว่าคุณมีพื้นฐานเช่นชื่อผลิตภัณฑ์ราคาคำอธิบายรูปภาพ ฯลฯ
เมื่อผลิตภัณฑ์แบบง่ายพร้อมแล้ว คลิกเพื่อแก้ไขผลิตภัณฑ์บนแบ็กเอนด์และปรับใช้ Divi ตัวสร้างในหน้าผลิตภัณฑ์ ภายใต้การตั้งค่าหน้า Divi เลือก "เต็มความกว้าง" สำหรับเค้าโครง จากนั้นคลิก "สร้างที่ด้านหน้า"
หน้าผลิตภัณฑ์ควรมีลักษณะเช่นนี้
ด้านล่างแถวแรกที่มีการแจ้งเตือนเกี่ยวกับการแสดงเส้นทางและรถเข็นให้เพิ่มแถวใหม่ที่มีเค้าโครงแบบคอลัมน์เดียว
การตั้งค่าสาย
ก่อนเพิ่มโมดูลให้อัพเดตการตั้งค่าบรรทัดดังนี้:
- สีพื้นหลัง: # 333333
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 100%
- เบาะ: 0px ด้านบน, 0px ด้านล่าง
ทำให้เส้นเหนียว
ในการทำให้เส้นเหนียวให้เพิ่มโค้ด CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบเดสก์ท็อปหลัก:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
จากนั้นเพิ่มโค้ด CSS ต่อไปนี้ลงในองค์ประกอบหลักเดียวกันสำหรับการแสดงแท็บเล็ต:
top: 0px;
หากคุณไม่คุ้นเคยกับคุณสมบัติ css "position: sticky" นี่คือการผสมระหว่างตำแหน่งคงที่และตำแหน่งสัมพัทธ์ที่องค์ประกอบ (ในกรณีนี้คือเส้น) จะเลื่อนไปพร้อมกับ คอนเทนเนอร์จนกว่าจะถึงตำแหน่งที่กำหนดไว้ที่ด้านบนหรือด้านล่างของหน้า (หรือออฟเซ็ตที่ระบุ) ในตัวอย่างนี้เราตั้งค่าออฟเซ็ตเป็น 50px จากด้านบนของหน้าต่างเบราว์เซอร์ (เว้นที่ว่างไว้สำหรับความสูงของส่วนหัวคงที่เริ่มต้นบนเดสก์ท็อป) จากนั้นในแท็บเล็ตค่าชดเชยจะเปลี่ยนเป็น "top: 0px" เพื่อแก้ไขเส้น / แถบกาวที่ด้านบนของเบราว์เซอร์บนอุปกรณ์เคลื่อนที่
หมายเหตุ: ละเว้นข้อผิดพลาดที่คุณเห็นเมื่อคุณเพิ่ม CSS ลงในกล่อง รหัสจะทำงานได้ดี
หลังจากคุณ CSS แล้วให้อัปเดตดัชนี Z ดังต่อไปนี้:
- ดัชนี Z: 10
ตอนนี้เส้นจะเหนียวเมื่อผู้ใช้เลื่อนดูหน้าผลิตภัณฑ์
คอลัมน์ CSS ที่กำหนดเอง
ก่อนที่คุณจะเริ่มกรอกบรรทัดด้วย เนื้อหาเราต้องแน่ใจว่าโมดูลภายในแถวหนึ่งคอลัมน์ของเราจะจัดเรียงในแนวนอนแทนที่จะเป็นแนวตั้ง เราสามารถใช้เคล็ดลับ CSS ง่ายๆ ในการทำเช่นนี้กับคุณสมบัติ flex เปิดการตั้งค่าคอลัมน์และเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในองค์ประกอบหลัก:
display:flex; align-items:center;
สิ่งนี้ช่วยดูแลการออกแบบเส้นเหนียวของเรา ตอนนี้เราต้องกรอกบรรทัดด้วย เนื้อหา.
เพิ่มชื่อ Woo
เพิ่มโมดูลหัวเรื่อง Woo ใหม่ไปยังคอลัมน์เส้นเหนียว
จากนั้นอัพเดตการตั้งค่าดังนี้:
- ชื่อข้อความสี: #ffffff
- ขนาดหัวเรื่องข้อความ: 28px (เดสก์ท็อป), 20px (แท็บเล็ต), 16px (โทรศัพท์)
- ความกว้าง: 30%
- เบาะ: 2vw ที่ด้านบน, 2vw ที่ด้านล่าง, 2vw ที่ด้านซ้าย, 2vw ที่ด้านขวา
เพิ่มราคาวู
จากนั้นเพิ่มโมดูลราคา Woo โดยคลิกที่ไอคอนเครื่องหมายบวกสีเทาที่ปรากฏขึ้นเมื่อคุณโฮเวอร์เหนือโมดูลชื่อ Woo ที่คุณเพิ่งสร้าง
จากนั้นอัปเดตการตั้งค่าราคาของ Woo ดังนี้:
- ขนาดข้อความราคา: 28px (เดสก์ท็อป), 20px (แท็บเล็ต), 16px (โทรศัพท์)
- ความกว้าง: 30%
- เบาะ: 2vw ที่ด้านบน, 2vw ที่ด้านล่าง, 2vw ที่ด้านซ้าย, 2vw ที่ด้านขวา
- ความกว้างของเส้นขอบด้านขวา: 1px
- สีของเส้นขอบด้านขวา: #777777
- ความกว้างของขอบด้านซ้าย: 1px
- สีขอบซ้าย: #777777
เพิ่มโมดูลใส่ในรถเข็น
สำหรับองค์ประกอบสุดท้ายของ เนื้อหาเพิ่มโมดูล Woo Add to Cart หลังโมดูล Woo Price
จากนั้นอัพเดตการตั้งค่าดังนี้:
ลดความซับซ้อนขององค์ประกอบเพิ่มลงในรถเข็นด้วยการซ่อนช่องปริมาณสินค้าคงคลังและปริมาณบนมือถือ
- แสดงฟิลด์ปริมาณ: ปิด (แท็บเล็ต)
- แสดงสต็อก: ปิด
- การจัดแนวข้อความ: ถูกต้อง
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 18px (แท็บเล็ต), 14px (โทรศัพท์)
- สีข้อความปุ่ม: #ffffff
- สีพื้นหลังของปุ่ม: #0c71c3
- ความกว้างของเส้นขอบปุ่ม: 0px
- ความกว้าง: 40%
- เบาะ: 2vw ทางซ้าย, 2vw ทางด้านขวา
ผล
มาดูกันว่ามันมีหน้าตาเป็นอย่างไรในหน้าสด
ส่วนที่ 2: สร้างแถบการแจ้งเตือนตะกร้า
การสร้างแถบการแจ้งเตือนรถเข็นแบบมีกาวมีขั้นตอนง่ายๆเพียงไม่กี่ขั้นตอน แต่ผลลัพธ์ที่ได้จะมีประสิทธิภาพมาก ดังที่คุณทราบแล้วการแจ้งเกี่ยวกับรถเข็นจะปรากฏขึ้นเมื่อผู้ใช้คลิกปุ่ม "เพิ่มลงในรถเข็น" เท่านั้น แต่เป็นขั้นตอนต่อไปที่สำคัญในกระบวนการซื้อที่จะนำผู้ใช้ไปยังหน้าชำระเงิน ดังนั้นเมื่อประกาศเกี่ยวกับรถเข็นปรากฏเป็นแถบกาวที่ด้านล่างของหน้าต่างผู้ใช้จะมองเห็นได้ชัดเจนขึ้น
ในการสร้างแถบติดการแจ้งเตือนรถเข็นขั้นแรกให้สร้างแถวหนึ่งคอลัมน์ใหม่ที่ด้านล่างของหน้าผลิตภัณฑ์ จากนั้นอัปเดตการตั้งค่าแถวดังนี้:
- ความกว้าง: 100%
- เบาะ: 0px ที่ด้านบน, 0px ที่ด้านล่าง
ทำให้บรรทัดติดกันโดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ให้กับองค์ประกอบหลัก:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
หมายเหตุ: อย่างที่เราเคยทำไปก่อนหน้านี้คุณสามารถเพิกเฉยต่อข้อผิดพลาดที่ปรากฏเมื่อเพิ่มตำแหน่ง: คุณสมบัติเหนียว
แถวจะติดกับด้านล่างของหน้าต่างเมื่อเลื่อนขึ้น
จากนั้นอัปเดตดัชนี z เพื่อให้อยู่ในพื้นหน้าดังนี้:
- ดัชนี Z: 10
เพิ่มโมดูลการแจ้งเตือนตะกร้า
เมื่อคุณสร้างบรรทัดเพิ่มโมดูล Woo Cart Notice ไปยังบรรทัดและอัพเดตการตั้งค่าดังนี้:
- ขนาดตัวอักษร (โทรศัพท์): 15px
- ระยะขอบ: 0em ที่ด้านล่าง
แค่นั้นแหละ ! คุณต้องการลบรายการคำเตือนรถเข็นเริ่มต้นที่ด้านบนของหน้าหรือไม่นั้นขึ้นอยู่กับคุณ แต่คุณควรปล่อยไว้เพื่อให้ได้ Conversion ที่ดีขึ้น
ผลสุดท้าย
นี่คือผลลัพธ์สุดท้ายที่อาจมีลักษณะเป็น
คิดสุดท้าย
หวังว่าบทความนี้จะช่วยให้เราเข้าใจวิธีสร้างแถบเหนียวสำหรับหน้าผลิตภัณฑ์ของเราใน Divi เราได้กล่าวถึงวิธีการสร้างแถบเหนียวที่มีชื่อผลิตภัณฑ์ราคาและปุ่มเพิ่มลงในรถเข็น และเรายังแสดงวิธีสร้างแถบเหนียว ทั้งสองอย่างนี้ควรทำให้กระบวนการซื้อง่ายขึ้นและเพิ่ม Conversion และเราไม่จำเป็นต้องมีปลั๊กอิน!
