วิธีสร้างหน้าผลิตภัณฑ์ที่ชัดเจนและโดดเด่นด้วยโมดูล WooCommerce ของ Divi (ดาวน์โหลดฟรี!)

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ดาวน์โหลดเค้าโครงหน้าผลิตภัณฑ์ที่สะอาดและโดดเด่นได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

• ชื่อ
• คำอธิบายสั้น
• คำอธิบายแบบยาว
• หมวดหมู่
• ภาพที่โดดเด่น
• ราคา

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

เมื่อคุณกรอกรายละเอียดผลิตภัณฑ์เสร็จแล้ว ให้เปิดใช้งาน Divi และเปลี่ยนเค้าโครงหน้าเป็น 'เต็มความกว้าง'

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

ดำเนินการต่อโดยเปลี่ยนไปใช้ Visual Builder

ลบส่วนผลิตภัณฑ์ดั้งเดิมบนเพจ

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

2. สร้างหน้าผลิตภัณฑ์ที่ชัดเจนและโดดเด่นโดยใช้ Visual Builder ของ Divi

เพิ่มส่วนปกติ #1

ระยะห่าง

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

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

ล้น

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

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

เพิ่มแถว

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

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

สีพื้นหลัง

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

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

ขนาด

แก้ไขความกว้างสูงสุดของแถวด้วย

• ความกว้างสูงสุด: 1000px

ระยะห่าง

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

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

ชายแดน

เรากำลังเพิ่มรัศมีเส้นขอบ '50px' ที่มุมซ้ายบนของแถวด้วย

ล้น

ทำการตั้งค่าของแถวให้สมบูรณ์โดยทำให้มองเห็นโอเวอร์โฟลว์ได้

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือ Woo Breadcrumb Module

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

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

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

• แบบอักษรข้อความ: ข้อความสีแดง
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• ขนาดตัวอักษร: 20px
• ระยะห่างของตัวอักษรข้อความ: 4px

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

ทำการเปลี่ยนแปลงบางอย่างในการตั้งค่าข้อความลิงก์ด้วย

• ลิงก์น้ำหนักแบบอักษร: เบา
• ลิงค์สีข้อความ: #e02b20

ระยะห่าง

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

• ขอบล่าง: 80px
• ระยะขอบซ้าย: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)
• ระยะขอบขวา: 50px (เดสก์ท็อปและแท็บเล็ต), 20px (โทรศัพท์)

เพิ่มโมดูลชื่อ Woo ให้กับคอลัมน์

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

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

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

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

เปลี่ยนการตั้งค่าข้อความชื่อเรื่องของโมดูลดังนี้:

• แบบอักษรของชื่อเรื่อง: Montserrat
• น้ำหนักแบบอักษรของชื่อเรื่อง: หนัก
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ชื่อข้อความสี: #000000
• ขนาดข้อความของชื่อเรื่อง: 250px (เดสก์ท็อป), 150px (แท็บเล็ต), 80px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 0.9em

ระยะห่าง

เพิ่มความกว้างของโมดูลโดยเพิ่มระยะขอบด้านซ้ายและขวาเป็นลบ

• ระยะขอบซ้าย: -150px (เดสก์ท็อป), -100px (แท็บเล็ต), -50px (โทรศัพท์)
• ระยะขอบขวา: -150px (เดสก์ท็อป), -100px (แท็บเล็ต), -50px (โทรศัพท์)

เพิ่มส่วนปกติ #2

ระยะห่าง

เพิ่มส่วนอื่นด้านล่างส่วนก่อนหน้า แก้ไขค่าการเติมของส่วนดังนี้:

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

เพิ่มแถว

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

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

สีพื้นหลัง

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

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

ขนาด

เพิ่มความกว้างสูงสุดของแถวถัดไป

• ความกว้างสูงสุด: 1000px

ระยะห่าง

เพิ่ม padding ด้านล่างแบบกำหนดเองด้วย

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

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบและใช้รัศมีเส้นขอบ '50px' ที่มุมล่างซ้ายและขวา

ล้น

ตั้งค่าแถวให้สมบูรณ์โดยตรวจสอบให้แน่ใจว่ามองเห็นโอเวอร์โฟลว์ได้

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

คอลัมน์ 1 การตั้งค่า

ภาพพื้นหลังแบบไดนามิก

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

• ภาพพื้นหลัง: ภาพเด่น

ระยะห่าง

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

• ช่องว่างภายในด้านล่าง: 370px (เดสก์ท็อป), 690px (แท็บเล็ต), 380px (โทรศัพท์)

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

เพิ่มเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! ในคอลัมน์ 1 โมดูลเดียวที่เราต้องการคือโมดูลข้อความ เพิ่มเนื้อหาบางส่วนที่คุณเลือก

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของโมดูลถัดไป

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #FFFFFF
• ขนาดตัวอักษร: 30px
• ความสูงของบรรทัดข้อความ: 1em

ขนาด

ลดขนาดโมดูลในการตั้งค่าการปรับขนาดถัดไป

• ความกว้าง: 280px

ระยะห่าง

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

• ขอบบน: -120px
• ระยะขอบซ้าย: -120px
• ช่องว่างภายในด้านบน: 110px
• แผ่นรองด้านล่าง: 110px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

ในการเปลี่ยนสี่เหลี่ยมจัตุรัสให้เป็นวงกลม เราจะเพิ่มรัศมีเส้นขอบ '500px' ให้กับแต่ละมุมของโมดูล

แปลงร่างหมุน

เราจะหมุนโมดูลด้วย

• ซ้าย: 330deg

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

เพิ่มเนื้อหา H2

ต่อคอลัมน์ที่สอง! โมดูลแรกที่เราต้องการคือโมดูลข้อความปกติ ป้อนเนื้อหา H2 ที่คุณเลือก

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

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

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวเรื่อง 2 ขนาดข้อความ: 35px

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองบางส่วนต่อไป

• ขอบบน: -70px (เดสก์ท็อป), 100px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 20px (แท็บเล็ตและโทรศัพท์)

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

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

โมดูลที่สองที่เราต้องการในคอลัมน์ 2 คือ Woo Description Module

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

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

เปลี่ยนการตั้งค่าข้อความของโมดูลตามลำดับ:

• แบบอักษรข้อความ: ข้อความสีแดง
• ขนาดตัวอักษร: 19px
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: Justify

ระยะห่าง

แก้ไขค่าระยะห่างของโมดูลถัดไป

• ขอบล่าง: 50px
• ระยะขอบซ้าย: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: -100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลราคา Woo

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

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

เปลี่ยนการตั้งค่าข้อความราคาดังนี้:

• แบบอักษรราคา: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรราคา: หนัก
• ราคาสีข้อความ: #000000
• ขนาดข้อความราคา: 50px

ระยะห่าง

เปลี่ยนการตั้งค่าระยะห่างถัดไป

• ขอบล่าง: 50px
• ระยะขอบซ้าย: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 20px (แท็บเล็ตและโทรศัพท์)

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

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

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

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

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

เปลี่ยนแบบอักษรข้อความในการตั้งค่าข้อความ

• แบบอักษรของข้อความ: มอนต์เซอร์รัต

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

แก้ไขการตั้งค่าฟิลด์ต่อไป

• สีพื้นหลังของฟิลด์: #ffffff
• ฟิลด์ข้อความสี: #000000
• ช่องว่างภายในด้านบน: 66px
• ช่องว่างภายในด้านล่าง: 66px
• ฟอนต์ฟิลด์: มอนต์เซอร์รัต
• ฟิลด์ น้ำหนักแบบอักษร: หนัก

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

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

ดำเนินการต่อโดยจัดรูปแบบปุ่ม

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

• รัศมีเส้นขอบของปุ่ม: 5px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: Ultra Bold
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 100px (เดสก์ท็อป), 50px (แท็บเล็ต), 20px (โทรศัพท์)
• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

ระยะห่าง

ออกแบบโมดูลให้สมบูรณ์โดยเพิ่มค่าระยะขอบซ้ายและขวาในขนาดหน้าจอที่เล็กกว่า เท่านี้ก็เรียบร้อย!

• ระยะขอบซ้าย: 20px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 20px (แท็บเล็ตและโทรศัพท์)

ดูตัวอย่าง

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

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

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

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