วิธีเพิ่มข้อมูลผลิตภัณฑ์แบบสไลด์ลงในหน้าผลิตภัณฑ์ Divi ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตหน้าผลิตภัณฑ์ Slide-In ฟรี

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

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

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

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

ดาวน์โหลด

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

1. เพิ่ม/เปิดผลิตภัณฑ์ WooCommerce

รายละเอียดสินค้า

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

• ชื่อ
• คำอธิบาย
• รูปภาพสินค้าพร้อมพื้นหลังโปร่งใส
• ราคา
• หมวดหมู่

เปิดใช้งาน Divi Builder & แก้ไขการตั้งค่าหน้าผลิตภัณฑ์

เปิดใช้งาน Divi Builder และเปลี่ยนเค้าโครงเพจที่มุมบนขวา

• เค้าโครงหน้า: เต็มความกว้าง

เปลี่ยนไปใช้ Visual Builder

เมื่อคุณเปลี่ยนเค้าโครงหน้าแล้ว คุณสามารถเปลี่ยนไปใช้ Visual Builder ของ Divi ได้โดยคลิกที่ 'สร้างที่ส่วนหน้า'

2. สร้างสไลด์อิน ข้อมูลผลิตภัณฑ์ เค้าโครงหน้าผลิตภัณฑ์

ลบหลายแถวในหน้า

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

แก้ไขการตั้งค่าส่วน

สีพื้นหลัง

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

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

ขนาด

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

• ความสูงขั้นต่ำ: 100vh

ระยะห่าง

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

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

ทัศนวิสัย

ซ่อนโอเวอร์โฟลว์ของส่วนด้วย วิธีนี้จะช่วยให้แน่ใจว่าไม่มีแถบแนวนอนปรากฏขึ้นเมื่อมีแอนิเมชั่นเกิดขึ้น

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

แก้ไขการตั้งค่าแถว

ขนาด

ถัดไป เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดตามขนาดหน้าจอต่างๆ

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวด้วย

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

ตำแหน่ง

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

• ตำแหน่ง: แอบโซลูท (เดสก์ท็อป), ค่าเริ่มต้น (แท็บเล็ตและโทรศัพท์)
• ที่ตั้ง: Bottom Center

แก้ไขการตั้งค่าคอลัมน์ 2

สีพื้นหลัง

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

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

ระยะห่าง

จากนั้น ให้เพิ่มค่าช่องว่างภายในที่กำหนดเองลงในการตั้งค่าการเว้นวรรค

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

ตัวกรองเริ่มต้น

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

• ความสว่าง: 100%
• กลับด้าน: 0%
• ซีเปีย: 0%

ตัวกรองโฮเวอร์

อย่างไรก็ตาม เมื่อวางเมาส์เหนือ เราจะเปลี่ยนค่าตามลำดับ:

• ความสว่าง: 49%
• กลับด้าน: 100%
• ซีเปีย: 100%

ตำแหน่ง

เรายังทำให้แน่ใจว่าคอลัมน์ถูกวางไว้ที่มุมล่างขวาของคอนเทนเนอร์แถวโดยใช้การตั้งค่าตำแหน่งต่อไปนี้:

• ตำแหน่ง: แอบโซลูท (เดสก์ท็อป), ค่าเริ่มต้น (แท็บเล็ตและโทรศัพท์)
• ตำแหน่ง: ล่างขวา

แก้ไขโมดูลชื่อ Woo ในคอลัมน์ 2

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

ได้เวลาเริ่มปรับแต่งโมดูลต่างๆ ในคอลัมน์ 2 แล้ว! เปิด Woo Title Module และเปลี่ยนการตั้งค่าข้อความ H1 ดังนี้:

• แบบอักษรของชื่อเรื่อง: Playfair Display
• ชื่อข้อความสี: #000000
• ขนาดตัวอักษรของชื่อเรื่อง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

แก้ไขโมดูลราคา Woo ในคอลัมน์ 2

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

เปิดการตั้งค่า Woo Price Module ถัดไปและเปลี่ยนการตั้งค่าข้อความราคา

• แบบอักษรราคา: Poppins
• สีข้อความราคา: #e5bc87
• ขนาดข้อความราคา: 1.4vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างที่กำหนดเองในขนาดหน้าจอต่างๆ ด้วย

• ขอบบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบล่าง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)

แก้ไขโมดูลคำอธิบาย Woo ในคอลัมน์ 2

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

ไปยังโมดูลคำอธิบาย Woo แก้ไขการตั้งค่าข้อความของโมดูลตามลำดับ:

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.7vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.1em

ระยะห่าง

เพิ่มระยะขอบด้านล่างที่ตอบสนองด้วย

• ระยะขอบล่าง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)

แก้ไข Woo Add to Cart Module ในคอลัมน์ 2

การตั้งค่าฟิลด์

ต่อไปเรามี Woo Add to Cart Module เปลี่ยนการตั้งค่าฟิลด์ของโมดูล

• ฟิลด์สีพื้นหลัง: rgba(255,255,255,0)
• ฟิลด์ข้อความสี: #000000
• ฟอนต์ฟิลด์: Poppins
• ขนาดข้อความของฟิลด์: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)

• ทุกมุม: 0px
• ฟิลด์ ความกว้างเส้นขอบด้านล่าง: 1px
• ฟิลด์ขอบด้านล่างสี: #e5bc87

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

ไปที่การตั้งค่าปุ่มและจัดรูปแบบปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: #e5bd89
• ไล่ระดับสี 2: #e5bc87
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 153deg
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: Poppins

• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 9vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 9vw (โทรศัพท์)

ระยะห่าง

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มระยะขอบของปุ่มตามขนาดหน้าจอต่างๆ

• ระยะขอบล่าง: 2vw (Destkop), 4vw (แท็บเล็ตและโทรศัพท์)

แก้ไข Woo Meta Module ในคอลัมน์ 2

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

ดำเนินการต่อโดยเปิด Woo Meta Module และเปลี่ยนการตั้งค่าข้อความ

• แบบอักษร Meta: Poppins
• น้ำหนักแบบอักษร Meta: เบา
• ขนาดข้อความ Meta: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)

ลิงก์การตั้งค่าข้อความ

เปลี่ยนสีข้อความลิงค์ด้วย

• ลิงก์สีข้อความ: #e5bc87

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

ในการเปลี่ยนสีพื้นหลังการซูมของ Woo Image Module เราจำเป็นต้องมีโค้ด CSS เล็กน้อย ซึ่งเราจะใส่ลงใน Code Module ใหม่ในคอลัมน์ 2

เพิ่มโค้ด CSS เพื่อเปลี่ยนสีพื้นหลังซูมภาพ Woo

เพิ่มบรรทัดต่อไปนี้ของโค้ด CSS ลงใน Code Module:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. เพิ่มการตั้งค่าแอนิเมชั่นที่ซิงโครไนซ์ให้กับคอนเทนเนอร์

โมดูลภาพ Woo

ตอนนี้เราได้จัดรูปแบบองค์ประกอบต่างๆ ในหน้าผลิตภัณฑ์ของเราแล้ว ก็ถึงเวลาสร้างเอฟเฟกต์ข้อมูลผลิตภัณฑ์แบบเลื่อนเข้า! เพื่อให้บรรลุสิ่งนี้ เราจะใช้การตั้งค่าแอนิเมชั่นในตัวของ Divi เปิด Woo Image Module ในคอลัมน์ 1 และใช้ภาพเคลื่อนไหวต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 50%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease

คอลัมน์ 1

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย (เดสก์ท็อป), ขึ้น (แท็บเล็ต & โทรศัพท์)
• ภาพเคลื่อนไหวล่าช้า: 950ms (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ความเข้มของแอนิเมชั่น: 25%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

คอลัมน์ 2

สุดท้าย ใช้การตั้งค่าภาพเคลื่อนไหวต่อไปนี้กับคอลัมน์ 2:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย (เดสก์ท็อป), ขึ้น (แท็บเล็ต & โทรศัพท์)
• ระยะเวลาของแอนิเมชั่น: 1200ms
• ภาพเคลื่อนไหวล่าช้า: 800ms (เดสก์ท็อป), 0ms (แท็บเล็ตและโทรศัพท์)
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out

4. เปลี่ยนเค้าโครงหน้าผลิตภัณฑ์เป็นเทมเพลต

บันทึกเค้าโครงไปยัง Divi Library

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

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

ไปที่ Divi Theme Builder และเพิ่มเทมเพลตใหม่

ใช้เทมเพลตกับผลิตภัณฑ์ทั้งหมด

ใช้เทมเพลตใหม่กับผลิตภัณฑ์ทั้งหมด

• ใช้บน: ผลิตภัณฑ์ทั้งหมด

อัปโหลดเค้าโครงไปยังเนื้อหาเทมเพลตหน้าผลิตภัณฑ์

จากนั้นคลิกที่ 'เพิ่มเนื้อหาที่กำหนดเอง' และคลิกที่ 'เพิ่มจากไลบรารี'

ไปที่ 'เค้าโครงที่บันทึกไว้ของคุณ' และเลือกเค้าโครงหน้าผลิตภัณฑ์ที่คุณได้อัปโหลดไปยังห้องสมุด Divi ของคุณ

5. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูผลลัพธ์

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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