วิธีสร้างการออกแบบบล็อกที่ตอบสนองต่อหน้าผลิตภัณฑ์ Woo ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะเริ่มต้น มาดูการออกแบบของหน้าจอขนาดต่างๆ กัน

เดสก์ทอป

มือถือ

ดาวน์โหลด The Responsive Block Design ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

• ชื่อ
• คำอธิบาย
• ราคา
• หมวดหมู่
• คุณลักษณะ
• ภาพที่โดดเด่น

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

• คุณลักษณะ:
  • ความจุ: 250มล. / 2 ถ้วยชา
  • วัสดุ: ทองแดงบริสุทธิ์
  • สภาพ: การสึกหรอตามปกติ

รูปภาพเด่นต้องมีพื้นหลังสีเดียวกับสีในการออกแบบ

เปิดใช้งาน Divi Builder & แก้ไขการตั้งค่าหน้า

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

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

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

ลบส่วนผลิตภัณฑ์เริ่มต้น

เนื่องจากเรากำลังสร้างหน้าผลิตภัณฑ์ที่กำหนดเอง ให้ดำเนินการต่อและลบส่วนผลิตภัณฑ์ woo เริ่มต้น

2. สร้างการออกแบบบล็อกที่ตอบสนองขึ้นมาใหม่

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

พื้นหลัง

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

• พื้นหลัง: ไล่โทนสี
• สี 1: เทาอ่อน #f2f6f5
• สี 2: เกือบดำ #313131
• ทิศทาง:
  • เดสก์ท็อป: 90%
  • แท็บเล็ต + โทรศัพท์: 180%
• เริ่ม + เสร็จสิ้น:
  • เดสก์ท็อป: 50%
  • แท็บเล็ต: 40%
  • โทรศัพท์: 30%

ขนาด

ปรับการตั้งค่าขนาดของส่วน

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• ช่องว่างบน + ล่าง: 0vw

ทัศนวิสัย

สุดท้าย ปรับส่วนล้น

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

เพิ่มแถว #1

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

หลังจากตั้งค่าส่วนแล้ว ให้เพิ่มแถวแรกด้วยหนึ่งคอลัมน์

ขนาด

ในแท็บการออกแบบ ปรับขนาดสำหรับขนาดหน้าจอต่างๆ

• ความกว้าง:
  • เดสก์ท็อป: 50%
  • แท็บเล็ต + โทรศัพท์: 100%
• ความกว้างสูงสุด: 100%
• การจัดแนวแถว: ซ้าย

ทัศนวิสัย

สุดท้าย ตั้งค่าโอเวอร์โฟลว์แนวนอนและแนวตั้งให้มองเห็นได้

• แนวนอน + ล้นที่มองเห็นได้: มองเห็นได้

เพิ่ม Woo Breadcrumb

เนื้อหา

เพิ่มโมดูลแรกโมดูล woo breadcrumb เลือก 'ผลิตภัณฑ์นี้'

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

ข้อความ

ในแท็บออกแบบ ให้จัดรูปแบบข้อความดังนี้

• แบบอักษรข้อความ: Fenix
• สีตัวอักษร: สีน้ำตาล #594239
• ขนาดข้อความ:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw

ระยะห่าง

เพิ่มค่าการเว้นวรรคสำหรับขนาดหน้าจอต่างๆ

• อัตรากำไรขั้นต้น: 3vw
• ระยะขอบซ้าย:
  • เดสก์ท็อป: 10vw
  • แท็บเล็ต + โทรศัพท์: 20vw

เพิ่มภาพ Woo

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

ตอนนี้ได้เวลาเพิ่มรูปภาพผลิตภัณฑ์ด้วยโมดูล Woo Image ในแท็บเนื้อหา เลือก 'ผลิตภัณฑ์นี้'

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

ขนาด

ดำเนินการต่อโดยปรับขนาดของโมดูล

• ความกว้าง: 100%

ทัศนวิสัย

สุดท้ายซ่อนน้ำล้น

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

เพิ่มแถว #2

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

เพิ่มแถวที่สองที่มีสองคอลัมน์

ขนาด

ขั้นแรกให้ปรับขนาด

• ความกว้างของรางน้ำ: 1
• ความกว้าง:
  • เดสก์ท็อป: 53%
  • แท็บเล็ต + โทรศัพท์: 53%
• ความกว้างสูงสุด: 100%
• การจัดตำแหน่ง: ขวา

ระยะห่าง

จากนั้นค่าการเว้นวรรค

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -47vw
  • แท็บเล็ต + โทรศัพท์: 0vw
• ระยะขอบซ้าย:
  • แท็บเล็ต: -5vw
  • โทรศัพท์: -8vw
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป + แท็บเล็ต: 4.1vw
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป: 0vw
  • แท็บเล็ต: 16vw
  • โทรศัพท์: 12vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป: 0vw
  • แท็บเล็ต: 0vw

CSS ที่กำหนดเอง

ในแท็บขั้นสูง ให้เพิ่ม CSS ที่กำหนดเอง

• องค์ประกอบหลัก CSS:
  • จอแสดงผล: ดิ้น;

display: flex;

ทัศนวิสัย

สุดท้าย ตั้งค่าโอเวอร์โฟลว์ให้มองเห็นได้

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

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

ระยะห่าง

ก่อนเพิ่มโมดูลใดๆ ให้ปรับค่าระยะห่างในคอลัมน์ 1

• ช่องว่างภายในด้านซ้าย: 4vw
• ช่องว่างภายในด้านขวา: 0vw

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

ระยะห่าง

ปรับค่าระยะห่างคอลัมน์ 2 ด้วย

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 7vw
  • แท็บเล็ต: 17vw
  • โทรศัพท์: 28vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป + แท็บเล็ต: 15vw

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

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

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

ข้อความ

จากนั้นจัดรูปแบบข้อความ

• แบบอักษร: Fenix
• สี: #f2eed0
• ขนาด:
  • เดสก์ท็อป: 1.3vw
  • แท็บเล็ต: 2.6vw
  • โทรศัพท์: 3.8vw
• ระยะห่างระหว่างตัวอักษร: 1px
• การจัดตำแหน่ง: ศูนย์

ขนาด

ปรับขนาดของโมดูลสำหรับขนาดหน้าจอต่างๆ

• ความกว้าง:
  • เดสก์ท็อป: 50%
  • แท็บเล็ต: 60%
  • โทรศัพท์: 80%

ระยะห่าง

นอกจากนี้ ให้ปรับค่าระยะห่างดังนี้

• ช่องว่างด้านบน + ล่าง: 1vw
• ช่องว่างภายในซ้าย + ขวา: 1vw

ชายแดน

เพิ่มเส้นขอบให้กับโมดูลตามลำดับ

• รูปแบบเส้นขอบ: บน + ซ้าย + ขวา
• ความกว้างของเส้นขอบ:
  • บน + ซ้าย + ขวา: 2px
• สีของเส้นขอบ:
  • บน + ซ้าย + ขวา: ครีม #f2eed0

เพิ่มชื่อ Woo ลงในคอลัมน์ 1

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

ตอนนี้ เพิ่มโมดูลชื่อ woo และเลือก 'ผลิตภัณฑ์นี้' ในแท็บเนื้อหา

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

พื้นหลัง

หากต้องการจัดรูปแบบโมดูล ให้เพิ่มพื้นหลังสีส้มเข้ม

• สีพื้นหลัง
• สี: Copper Orange #d66b00

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

จากนั้น แก้ไขการตั้งค่าข้อความหัวเรื่อง

• ระดับหัวเรื่อง: H1
• แบบอักษร: Fenix
• สี: ครีม #f2eed0
• ขนาด:
  • เดสก์ท็อป: 2.9vw
  • แท็บเล็ต: 7.8vw
  • โทรศัพท์: 13.9vw
• ระยะห่างระหว่างตัวอักษร H1: 1px

ขนาด

นอกจากนี้ ปรับขนาดของโมดูล

• ความกว้าง: 100%

ระยะห่าง

จากนั้นเพิ่มค่าการเติม

• บุนวมบน + ล่าง:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์:4vw
• ช่องว่างภายในซ้าย + ขวา:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์:4vw

ชายแดน

สุดท้ายเพิ่มเส้นขอบดังนี้

• รูปแบบเส้นขอบ: บน + ซ้าย + ขวา
• ความกว้างของเส้นขอบ:
  • บน + ซ้าย + ขวา: 2px
• สีของเส้นขอบ:
  • บน + ซ้าย + ขวา: ครีม #f2eed0

เพิ่มชื่อคำอธิบาย Woo ในคอลัมน์ 1

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

ใต้ชื่อ ให้เพิ่มโมดูลคำอธิบาย woo ในแท็บเนื้อหา เลือก 'ผลิตภัณฑ์นี้'

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

ข้อความ

จากนั้นจัดรูปแบบข้อความ

• แบบอักษร: เปิด Sans
• สี: ครีม #f2eed0
• ขนาด:
  • เดสก์ทอป: 08vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw

ขนาด

ปรับขนาดด้วย

• ความกว้าง: 100%

ระยะห่าง

ในทำนองเดียวกันให้ปรับระยะห่าง

• บุนวมบน + ล่าง:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต + โทรศัพท์: 3vw
• ช่องว่างภายในซ้าย + ขวา:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต + โทรศัพท์: 3vw

ชายแดน

คล้ายกับโมดูลอื่นๆ เพิ่มเส้นขอบ

• รูปแบบเส้นขอบ: ทั้งสี่เส้นขอบ
• ความกว้าง: 2px
• สี: ครีม #f2eed0

เพิ่ม Woo ข้อมูลเพิ่มเติมในคอลัมน์ 2

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

ตอนนี้ได้เวลาเพิ่มแอตทริบิวต์ที่กำหนดเองด้วยโมดูลข้อมูลเพิ่มเติม woo ในแท็บเนื้อหา เลือก 'ผลิตภัณฑ์นี้'

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

ข้อความ

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

• แบบอักษร: เปิด Sans
• สไตล์: ตัวเอียง
• สี: ครีม #f2eed0
• ขนาด:
  • เดสก์ท็อป: 0.6vw
  • แท็บเล็ต: 1.6vw
  • โทรศัพท์: 2.2vw

ข้อความแอตทริบิวต์

จากนั้น จัดรูปแบบข้อความแอตทริบิวต์ตามลำดับ:

• แบบอักษร: Fenix
• สี: ครีม #f2eed0
• ขนาด:
  • เดสก์ท็อป: 1.1vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 3vw
• ระยะห่าง: 1px

ขนาด

ปรับขนาดด้วย

• ความกว้าง: 100%

ชายแดน

และสุดท้าย เพิ่มเส้นขอบ

• รูปแบบเส้นขอบ: บน + ขวา + ล่าง
• ความกว้างของเส้นขอบ:
  • บน + ขวา + ล่าง: 2px
• สีของเส้นขอบ:
  • บน + ขวา + ล่าง: ครีม #f2eed0

เพิ่มแถว #3

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

เพิ่มแถวที่สามด้วยสองคอลัมน์

ขนาด

ก่อนเพิ่มโมดูล ให้ปรับขนาดของแถวสำหรับขนาดหน้าจอต่างๆ

• ความกว้าง:
  • เดสก์ท็อป: 50%
  • แท็บเล็ต: 87%
  • โทรศัพท์: 93%
• การจัดตำแหน่ง: ขวา

การขยายความ

ปรับเบาะด้วย

• แผ่นรองด้านล่าง: 12vw

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

ระยะห่าง

ดำเนินการต่อโดยปรับช่องว่างภายในในคอลัมน์แรก

• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต + โทรศัพท์:12vw

เพิ่มราคา Woo ไปที่คอลัมน์ 1

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

ตอนนี้ เพิ่มราคาของผลิตภัณฑ์โดยใช้โมดูลราคา woo ในแท็บเนื้อหา เลือก 'ผลิตภัณฑ์นี้'

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

ข้อความราคา

จากนั้นจัดรูปแบบข้อความตามนั้น

• แบบอักษร: Fenix
• สี: ครีม #f2eed0
• ขนาด:
  • เดสก์ท็อป: 1.5vw
  • แท็บเล็ต: 3.5vw
  • โทรศัพท์: 5vw

ขนาด

ปรับขนาดของโมดูลด้วย

• ความกว้าง:
  • เดสก์ท็อป: 39%
  • แท็บเล็ต: 45%
  • โทรศัพท์: 54%

ระยะห่าง

ปรับระยะห่างด้วย

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

ชายแดน

สุดท้ายเพิ่มเส้นขอบ

• รูปแบบเส้นขอบ: ทั้งสี่ด้าน
• ความกว้าง: 2px
• สี: ครีม #f2eed0

เพิ่ม Woo หยิบใส่รถเข็นในคอลัมน์ 2

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

โมดูลสุดท้ายคือโมดูล woo add to cart ในแท็บเนื้อหา เลือก 'ผลิตภัณฑ์นี้'

ลักษณะปุ่ม

สไตล์ปุ่มดังต่อไปนี้

• สไตล์ที่กำหนดเอง: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1.3vw
  • แท็บเล็ต: 3.5vw
  • โทรศัพท์: 5vw
• สีข้อความ: ครีม #f2eed0
• สีพื้นหลัง: Copper Orange #d66b00

ปุ่ม Padding

จากนั้น เพิ่มค่าการเติมลงในปุ่ม

• แพ็ดดิ้งบน + ล่าง: 0.5vw
• ช่องว่างภายในซ้าย + ขวา: 1.5vw

ขนาด

สุดท้ายแต่ไม่ท้ายสุด ปรับขนาดของโมดูล เท่านี้ก็เสร็จเรียบร้อย!

• ความกว้าง: 100%

ดูตัวอย่าง

มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กันในขั้นสุดท้ายกัน

เดสก์ทอป

มือถือ

มันเป็นแรป

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