วิธีนำเสนอผลิตภัณฑ์ยอดนิยมอย่างสร้างสรรค์บนหน้า Landing Page ของ Divi

เผยแพร่แล้ว: 2019-11-07

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

คงที่

สินค้ายอดนิยม

โฮเวอร์

สินค้ายอดนิยม

มือถือ

สินค้ายอดนิยม

ดาวน์โหลดเค้าโครงผลิตภัณฑ์ยอดนิยมได้ฟรี

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

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

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

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

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

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราใหม่

ระยะห่าง

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

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

สินค้ายอดนิยม

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

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

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

สินค้ายอดนิยม

ขนาด

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

  • ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: 85vw
  • ความกว้างสูงสุด: 100%

สินค้ายอดนิยม

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือ Woo Image Module เลือกผลิตภัณฑ์ที่คุณต้องการแสดง

สินค้ายอดนิยม

ภาพ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่ารูปภาพ

  • มุมโค้งมนของรูปภาพ: 20px (ทุกมุม)

สินค้ายอดนิยม

  • ความแรงของกล่องเงาเบลอ: 50px
  • เงาสี: rgba(0,0,0,0.3)

สินค้ายอดนิยม

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

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

โมดูลต่อไปที่เราต้องการคือ Woo Title Module เลือกผลิตภัณฑ์ที่คุณต้องการ

สินค้ายอดนิยม

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

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

  • ระดับหัวเรื่อง: H3
  • แบบอักษรของชื่อเรื่อง: Prata
  • ขนาดตัวอักษรของชื่อเรื่อง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

สินค้ายอดนิยม

ระยะห่าง

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

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

สินค้ายอดนิยม

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลคำอธิบายของ Woo เลือกผลิตภัณฑ์ที่คุณต้องการ

สินค้ายอดนิยม

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

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

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

สินค้ายอดนิยม

ระยะห่าง

ลองใช้ค่าระยะขอบที่กำหนดเองในขนาดหน้าจอต่างๆ เช่นกัน

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

สินค้ายอดนิยม

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

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

ด้านล่างโมดูลคำอธิบาย Woo เราจะเพิ่ม Woo Add To Cart Module เลือกผลิตภัณฑ์ที่คุณต้องการ

สินค้ายอดนิยม

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

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

  • ฟิลด์สีพื้นหลัง: #ffffff
  • ฟิลด์ข้อความสี: #3d3d3d
  • ฟอนต์ฟิลด์: มอนต์เซอร์รัต

สินค้ายอดนิยม

  • ความกว้างของเส้นขอบฟิลด์: 0px
  • สีของเส้นขอบของฟิลด์: #3d3d3d

สินค้ายอดนิยม

การตั้งค่าฟิลด์โฮเวอร์

แก้ไขความกว้างของเส้นขอบเมื่อโฮเวอร์

  • ความกว้างของเส้นขอบฟิลด์: 1px

สินค้ายอดนิยม

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

เปิดการตั้งค่าปุ่มถัดไปและจัดรูปแบบปุ่ม

  • ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
  • ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
  • สีข้อความของปุ่ม: #3d3d3d
  • สีพื้นหลังของปุ่ม: #FFFFFF
  • ความกว้างของขอบปุ่ม: 0px
  • สีเส้นขอบของปุ่ม: #3d3d3d

สินค้ายอดนิยม

  • แบบอักษรของปุ่ม: Prata

สินค้ายอดนิยม

  • ช่องว่างภายในด้านบน: 0.5vw
  • ช่องว่างภายใน: 0.5vw
  • ช่องว่างภายในด้านซ้าย: 2vw
  • ช่องว่างภายในด้านขวา: 2vw

สินค้ายอดนิยม

การตั้งค่าปุ่มโฮเวอร์

เปลี่ยนความกว้างของเส้นขอบของปุ่มเมื่อวางเมาส์ไว้

  • ความกว้างของขอบปุ่ม: 1px

สินค้ายอดนิยม

ระยะห่าง

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

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

สินค้ายอดนิยม

การตั้งค่าเส้นขอบเริ่มต้น

แก้ไขการตั้งค่าเส้นขอบของโมดูลด้วย

  • ความกว้างขอบล่าง: 1px
  • สีขอบล่าง: #3d3d3d

สินค้ายอดนิยม

การตั้งค่าเส้นขอบโฮเวอร์

และลบความกว้างของเส้นขอบเมื่อโฮเวอร์

  • ความกว้างขอบล่าง: 0px

สินค้ายอดนิยม

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

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

โมดูลสุดท้ายที่เราต้องการในคอลัมน์คือ Woo Price Module เลือกผลิตภัณฑ์ที่คุณต้องการ

สินค้ายอดนิยม

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

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

  • แบบอักษรข้อความราคา: มอนต์เซอร์รัต
  • น้ำหนักตัวอักษรข้อความราคา: เบา
  • สีข้อความราคา: #333333
  • ขนาดข้อความราคา: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
  • ความสูงของเส้นราคา: 1.8em

สินค้ายอดนิยม

ระยะห่าง

แก้ไขค่ามาร์จิ้นด้วย

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

สินค้ายอดนิยม

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

เมื่อคุณสร้างคอลัมน์และโมดูลทั้งหมดในคอลัมน์เสร็จแล้ว คุณสามารถโคลนทั้งคอลัมน์ได้สองครั้ง

สินค้ายอดนิยม

เปลี่ยนโครงสร้างคอลัมน์แถว

เปลี่ยนโครงสร้างคอลัมน์ของแถวถัดไป

สินค้ายอดนิยม

เปลี่ยนเนื้อหาไดนามิกทั้งหมด

ดำเนินการต่อโดยเปลี่ยนเนื้อหาแบบไดนามิกทั้งหมดในคอลัมน์ 2 และ 3 เป็นผลิตภัณฑ์อื่นๆ ที่คุณเลือก

สินค้ายอดนิยม

เปลี่ยนระยะห่างโมดูลคอลัมน์ 2

Woo Title Module

โมดูลในคอลัมน์ที่สองจำเป็นต้องเปลี่ยนแปลงระยะห่างเพิ่มเติม เริ่มต้นด้วยโมดูลชื่อ Woo

  • ระยะขอบซ้าย: 5vw (อุปกรณ์ทั้งหมด)
  • ระยะขอบขวา: 5vw (อุปกรณ์ทั้งหมด)

สินค้ายอดนิยม

โมดูลคำอธิบาย Woo

เปลี่ยนการตั้งค่าระยะห่างของ Woo Description Module ต่อไป

  • มาร์จิ้นสูงสุด: 4vw (อุปกรณ์ทั้งหมด)
  • ขอบล่าง: 4vw (อุปกรณ์ทั้งหมด)
  • ระยะขอบซ้าย: 5vw (อุปกรณ์ทั้งหมด)
  • ระยะขอบขวา: 5vw (อุปกรณ์ทั้งหมด

สินค้ายอดนิยม

Woo Add To Cart โมดูล

ไปที่การตั้งค่าระยะห่างของ Woo Add To Cart Module

  • ระยะขอบซ้าย: 5vw (อุปกรณ์ทั้งหมด)
  • ระยะขอบขวา: 5vw (อุปกรณ์ทั้งหมด)

สินค้ายอดนิยม

โมดูลราคา Woo

และทำโมดูลคอลัมน์ 2 ให้สมบูรณ์โดยแก้ไขการตั้งค่าระยะห่างของ Woo Price Module ด้วย

  • ระยะขอบซ้าย: 5vw (อุปกรณ์ทั้งหมด)
  • ระยะขอบขวา: 5vw (อุปกรณ์ทั้งหมด)

สินค้ายอดนิยม

สไตล์คอลัมน์

ทุกคอลัมน์

สีพื้นหลัง

ตอนนี้เรามีโมดูลทั้งหมดแล้ว เราสามารถเริ่มจัดสไตล์คอลัมน์ได้ แต่ละคอลัมน์ต้องมีสีพื้นหลังสีขาว

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

สินค้ายอดนิยม

ชายแดน

คุณสามารถเพิ่ม '20px' ที่มุมของแต่ละคอลัมน์ได้เช่นกัน

  • มุมโค้งมน: 20px (ทุกมุม)

สินค้ายอดนิยม

คอลัมน์ 1 & 3

ค่าเริ่มต้นกล่องเงา

ดำเนินการต่อโดยเพิ่มเงากล่องเริ่มต้นในคอลัมน์ 1 และ 3

  • ตำแหน่งแนวตั้งเงาของกล่อง: 22px
  • Box Shadow Shadow Blur ความแรง: 150px
  • เงาสี: rgba(0,0,0,0) (เดสก์ท็อป), rgba(0,0,0,0.1) (แท็บเล็ตและโทรศัพท์)

สินค้ายอดนิยม

เงากล่องเลื่อน

เปลี่ยนสีเงาของโฮเวอร์เมื่อโฮเวอร์

  • เงาสี: rgba(0,0,0,0.27)

สินค้ายอดนิยม

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

จากนั้นไปที่การตั้งค่าตัวกรองและเพิ่มความเบลอให้กับทั้งคอลัมน์ 1 และ 3

  • เบลอ: 4px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

สินค้ายอดนิยม

โฮเวอร์ฟิลเตอร์

ลบความเบลอเมื่อโฮเวอร์

  • เบลอ: 0px

สินค้ายอดนิยม

ดัชนี Z เริ่มต้น

กำหนดค่าดัชนี z เริ่มต้นเดียวกันกับคอลัมน์ถัดไป

  • ดัชนี Z: 9

สินค้ายอดนิยม

Hover Z ดัชนี

และเพิ่มดัชนี z เดียวกันนั้นเมื่อโฮเวอร์

  • ดัชนี Z: 12

สินค้ายอดนิยม

คอลัมน์ 1 เท่านั้น

แปลงแปล

ดำเนินการต่อโดยเปลี่ยนตำแหน่งคอลัมน์ 1 โดยใช้ตัวเลือกการแปลการแปลง

  • ขวา: 7vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
  • ด้านล่าง: 2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

สินค้ายอดนิยม

คอลัมน์ 3 เท่านั้น

แปลงแปล

เปิดการตั้งค่าการแปลงคอลัมน์ 3 ถัดไป และใช้การตั้งค่าต่อไปนี้:

  • ขวา: 7vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
  • ด้านล่าง: -2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

สินค้ายอดนิยม

คอลัมน์ 2 เท่านั้น

กล่องเงา

ไปที่การตั้งค่าคอลัมน์ 2 และใช้เงาของกล่องแบบละเอียด

  • ตำแหน่งแนวตั้งเงาของกล่อง: 22px
  • ความชัดเจนของเงากล่อง: 150px
  • เงาสี: rgba(0,0,0,0.27) (เดสก์ท็อป), rgba(0,0,0,0.1) (แท็บเล็ตและโทรศัพท์)

สินค้ายอดนิยม

ดัชนี Z

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนดัชนี z ของคอลัมน์ที่สองแล้วเสร็จ!

  • ดัชนี Z: 11

สินค้ายอดนิยม

ดูตัวอย่าง

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

เดสก์ทอป

คงที่

สินค้ายอดนิยม

โฮเวอร์

สินค้ายอดนิยม

มือถือ

สินค้ายอดนิยม

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

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

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