วิธีการซ้อนภาพ Woo Gallery ในแนวตั้งภายในเทมเพลตหน้าผลิตภัณฑ์ Divi ของคุณ

ตามค่าเริ่มต้น ทันทีที่คุณเพิ่มรูปภาพแกลเลอรีลงในผลิตภัณฑ์ WooCommerce รูปภาพเหล่านั้นจะปรากฏในแนวนอนใต้รูปภาพเด่นของผลิตภัณฑ์ของคุณที่ส่วนหน้าของการออกแบบหน้าผลิตภัณฑ์ของคุณ ในการออกแบบเฉพาะบางอย่าง การซ้อนรูปภาพในแกลเลอรี Woo ในแนวตั้งอาจสะดวกกว่า เช่น ในการออกแบบหน้าผลิตภัณฑ์แบบเต็มหน้าจอ เป็นต้น หากคุณกำลังมองหาวิธีที่รวดเร็วในการซ้อนภาพแกลเลอรี Woo ในแนวตั้งภายในเทมเพลตหน้าผลิตภัณฑ์ที่คุณสร้างด้วย Divi's Theme Builder คุณจะต้องชอบบทแนะนำนี้ เราจะแสดงให้คุณเห็นทีละขั้นตอนว่าจะไปที่นั่นได้อย่างไร เราจะปฏิบัติตามแนวทางนี้ด้วยเทมเพลตหน้าผลิตภัณฑ์ขั้นต่ำที่คุณสามารถดาวน์โหลดได้ฟรีเช่นกัน! บทช่วยสอนนี้ทำงานได้ดีที่สุดบนหน้าผลิตภัณฑ์ที่ใช้รูปภาพที่มีอัตราส่วน 1:1

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

สร้างเทมเพลตหน้าผลิตภัณฑ์ภายในตัวสร้างธีม Divi

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

เริ่มต้นด้วยการไปที่ Divi Theme Builder และคลิกที่ 'Add New Template'

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

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

ป้อนตัวแก้ไขเทมเพลตเนื้อหาของเทมเพลต

เมื่อคุณสร้างเทมเพลตแล้ว ให้คลิกที่ 'Add Custom Body' และดำเนินการต่อโดยเลือก 'Build Custom Body' เพื่อเปลี่ยนเส้นทางไปยังเครื่องมือแก้ไขเทมเพลต

เริ่มสร้างเทมเพลตหน้าหมวดหมู่

แก้ไขส่วน #1

สีพื้นหลัง

ภายในตัวแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนนั้นและเพิ่มสีพื้นหลังสีขาว

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

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 100px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านล่าง: 100px (แท็บเล็ตและโทรศัพท์เท่านั้น)

องค์ประกอบหลัก CSS

ในการจัดแนวเนื้อหาคอลัมน์บนเดสก์ท็อป เราจะใช้โค้ด CSS สองบรรทัดในองค์ประกอบหลักของแถว เราจะนำคุณสมบัติการแสดงผลบนแท็บเล็ตและโทรศัพท์กลับมา

เดสก์ทอป:

display: flex;
align-items: center;

แท็บเล็ตและโทรศัพท์:

display: block;

พื้นหลังไล่ระดับคอลัมน์ 2

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

• สี 1: #f7f2ef
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

ระยะห่างคอลัมน์ 2

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

• ช่องว่างภายในด้านบน: 30% (เดสก์ท็อป), 10% (แท็บเล็ตและโทรศัพท์)
• แผ่นรองด้านล่าง: 10%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

เพิ่มโมดูลภาพ Woo ไปที่คอลัมน์ 1

เนื้อหาแบบไดนามิก

ได้เวลาเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการในคอลัมน์ 1 คือ Woo Images Module บทแนะนำนี้จะได้ผลดีที่สุดหากคุณใช้รูปภาพเด่นและรูปภาพในแกลเลอรีที่มีอัตราส่วน 1:1 ด้วยวิธีนี้ เราจะสามารถเปลี่ยนรูปภาพให้เป็นวงกลมได้ในขั้นตอนต่อๆ ไป เมื่อคุณเพิ่ม Woo Images Module แล้ว ตรวจสอบให้แน่ใจว่าได้ตั้งค่าเนื้อหาแบบไดนามิกเป็น 'This Product'

• สินค้า: สินค้านี้

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

เพิ่มโค้ด CSS

ด้านล่างโมดูลภาพ Woo เราจะเพิ่มโมดูลโค้ด โค้ด CSS ที่เราแทรกในโมดูลโค้ดนี้จะช่วยให้เราจัดวางรูปภาพแกลเลอรี Woo ในแนวตั้งที่ด้านซ้ายของคอลัมน์ของเราได้

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

เพิ่ม Woo Title Module ลงในคอลัมน์ 2

เนื้อหาแบบไดนามิก

ไปยังคอลัมน์ถัดไป โมดูลแรกที่เราต้องการคือ Woo Title Module

• สินค้า: สินค้านี้

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

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

• แบบอักษรของชื่อเรื่อง: PT Sans
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ชื่อข้อความสี: #000000
• ขนาดข้อความชื่อเรื่อง: 84px (เดสก์ท็อป), 60px (แท็บเล็ต), 45px (โทรศัพท์)

เพิ่ม Woo Description Module ลงในคอลัมน์ 2

เนื้อหาแบบไดนามิก

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลคำอธิบายของ Woo

• สินค้า: สินค้านี้
• ประเภทคำอธิบาย: คำอธิบายแบบย่อ

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

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

• แบบอักษรของข้อความ: Karla
• ขนาดตัวอักษร: 17px (เดสก์ท็อปและแท็บเล็ต), 15px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.9em

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 5%
• ขอบล่าง: 5%

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

เนื้อหาแบบไดนามิก

เพิ่ม Woo Price Module ด้านล่าง Woo Description Module

• สินค้า: สินค้านี้

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

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

• แบบอักษรราคา: PT Sans
• น้ำหนักแบบอักษรราคา: ตัวหนา
• ราคาสีข้อความ: #ce8654
• ขนาดข้อความราคา: 27px

เพิ่ม Woo Add to Cart โมดูลไปที่คอลัมน์ 2

เนื้อหาแบบไดนามิก

โมดูลถัดไปและสุดท้ายที่เราต้องทำในบทช่วยสอนนี้คือ Woo Add to Cart Module

• สินค้า: สินค้านี้

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

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าฟิลด์ดังนี้:

• ฟิลด์สีพื้นหลัง: #ffffff
• ฟิลด์ข้อความสี: #000000
• ฟอนต์ฟิลด์: เปิด Sans

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

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

จากนั้นกำหนดรูปแบบปุ่มในการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #0a0201
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px

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

• ปุ่มเสริมด้านบน: 20px
• ปุ่ม Padding ด้านล่าง: 20px
• ช่องว่างภายในปุ่ม: 50px
• ปุ่มขยายด้านขวา: 50px

ระยะห่าง

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

• มาร์จิ้นสูงสุด: 5%

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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