วิธีเพิ่มรูปภาพผลิตภัณฑ์ Sticky ให้กับเทมเพลตหน้าผลิตภัณฑ์ Divi ของคุณ

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

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

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

แอบมอง

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

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

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/vwfPFqyVaNM

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

วิธีอัปโหลดเทมเพลต

ไปที่ตัวสร้างธีม Divi

ในการอัปโหลดเทมเพลต ให้ไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

อัพโหลดเทมเพลตเว็บไซต์

จากนั้น ที่มุมบนขวา คุณจะเห็นไอคอนที่มีลูกศรสองอัน คลิกที่ไอคอน

ไปที่แท็บนำเข้า อัปโหลดไฟล์ JSON ซึ่งคุณสามารถดาวน์โหลดได้ในโพสต์นี้ แล้วคลิก 'นำเข้าเทมเพลต Divi Theme Builder'

บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi

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

ไปที่บทช่วยสอนเพื่อให้เราสามารถเรียนรู้ที่จะสร้างสิ่งนี้ตั้งแต่เริ่มต้นใช่ไหม

วิธีเพิ่มรูปภาพผลิตภัณฑ์ Sticky ให้กับเทมเพลตหน้าผลิตภัณฑ์ Divi ของคุณ

การอัปโหลดเทมเพลตหน้าผลิตภัณฑ์ Theme Builder Pack 5

ในการเริ่มต้น เราจะเริ่มต้นการออกแบบโดยเพิ่มเทมเพลตหน้าผลิตภัณฑ์ที่สร้างไว้ล่วงหน้ารายการใดรายการหนึ่งของเรา ในการนำเข้าเทมเพลต Theme Builder คุณจะต้องดำเนินการดังต่อไปนี้:

1. ไปที่ตัวสร้างธีม Divi
2. คลิกไอคอนการพกพาที่ด้านบนขวาของหน้า
3. เลือกแท็บนำเข้าในป๊อปอัปการพกพา
4. ดาวน์โหลดและนำเข้าไฟล์เทมเพลตผลิตภัณฑ์ Divi Divi Theme Builder 5 เมื่อคุณดาวน์โหลดแพ็คที่นี่ ให้เปิดเครื่องรูดไฟล์แล้วคุณจะพบไฟล์ “dvi-theme-builder-pack-5-product-page-template.json” ที่คุณจะต้องนำเข้า
5. คลิกปุ่มนำเข้า
6. เมื่อนำเข้าแม่แบบแล้ว ให้คลิกไอคอนแก้ไขบนพื้นที่เนื้อหาที่กำหนดเองของแม่แบบเพื่อแก้ไขเค้าโครงแม่แบบ

เพิ่มแถวใหม่

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

ไปข้างหน้าและเพิ่มส่วนปกติใหม่ภายใต้ส่วนบน

เปิดการตั้งค่าของส่วนใหม่และอัปเดตการเติม:

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

ไปที่แท็บขั้นสูงและอัปเดตดัชนี z:

• ดัชนี Z: 13

เพื่อให้รูปภาพ (องค์ประกอบย่อยของส่วนนี้) อยู่เหนือส่วน/องค์ประกอบอื่นๆ บนหน้าเมื่อเลื่อน

เพิ่มแถว

ถัดไป เพิ่มแถวหนึ่งคอลัมน์ในส่วน

เปิดการตั้งค่าแถวและปรับการจัดแนวแถวและช่องว่างภายใน:

• การจัดแนวแถว: ขวา
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

เพิ่มรูปภาพสินค้า

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

การตั้งค่ารูปภาพ Woo

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

• แสดงรูปภาพของแกลลอรี่: OFF
• แสดงป้ายลดราคา: OFF

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

ภายใต้แท็บการออกแบบ ให้อัปเดตตัวเลือกบังคับเต็มความกว้างเป็น "ใช่"

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

• ความกว้างสูงสุด: 300px (เดสก์ท็อป), 200px (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ขวา

ปรับ padding:

• ช่องว่างภายใน: ด้านบน 10px, ด้านขวา 10px

ภายใต้แท็บขั้นสูง ให้อัปเดตสิ่งต่อไปนี้:

• ดัชนี Z: 1
• ตำแหน่งติดหนึบ: Stick to Top

ซึ่งจะทำให้รูปภาพติดอยู่ที่ด้านบนของหน้าเมื่อผู้ใช้เลื่อนผ่านรูปภาพนั้น

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

• ความทึบ: 0% (เดสก์ท็อป), 100% (เหนียว)

ลบระยะห่างของส่วน แถว และคอลัมน์

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

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

height: 15px;

แค่นั้นแหละ! เราเสร็จแล้ว

ผลสุดท้าย

ตรวจสอบผลลัพธ์สุดท้ายโดยดูที่โพสต์สดบนเว็บไซต์ของคุณ

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

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

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

ไชโย!