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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงผลิตภัณฑ์ The Frame ฟรี

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

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

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

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

ดาวน์โหลด

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

1. ตั้งค่าส่วนด้วยภาพพื้นหลังที่ตอบสนอง

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

ภาพพื้นหลังที่ตอบสนอง

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

• ภาพพื้นหลัง: ภูมิทัศน์
• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านบน

• ภาพพื้นหลัง: สี่เหลี่ยม

ระยะห่าง

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

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

ชายแดน

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

• ความกว้างของเส้นขอบ: 2vw
• สีเส้นขอบ: #ffffff

2. เพิ่มองค์ประกอบเฟรมต่างๆ ลงในคอลัมน์

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

เว้นช่องเนื้อหาว่างไว้

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพื่อให้ผลิตภัณฑ์สามารถแสดงได้ เราจะใช้โมดูลข้อความเปล่า

ระยะห่าง

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

• ด้านบน: 22vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 35vw (โทรศัพท์)
• Padding ด้านล่าง: 15vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 35vw (โทรศัพท์)

ชายแดน

และเราจะเพิ่มเส้นขอบด้วย

• ความกว้างของเส้นขอบ: 3vw
• ความกว้างขอบล่าง: 1vw
• เส้นขอบสี: rgba(255,255,255,0.7)

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

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

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

• สินค้า: ค้นหาในรายการ

สีพื้นหลัง

ใช้สีพื้นหลังต่อไปนี้:

• สีพื้นหลัง: rgba(255,255,255,0.7)

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

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

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Work Sans
• ขนาดข้อความชื่อเรื่อง: 2.5vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)

ระยะห่าง

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

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

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

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

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

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

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของโมดูลตามลำดับ:

• สีพื้นหลัง: rgba(255,255,255,0.7)

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 2.2vw (แท็บเล็ต), 2.8vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 2.2em

ระยะห่าง

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

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

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

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

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

• สินค้า: ค้นหาในรายการ

สีพื้นหลัง

แก้ไขสีพื้นหลัง

• สีพื้นหลัง: rgba(255,255,255,0.7)

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

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

• แบบอักษรราคา: ทำงาน Sans
• ราคาสีข้อความ: #000000
• ขนาดข้อความราคา: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

ระยะห่าง

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

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

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

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

ไปยังโมดูลถัดไปและสุดท้าย ซึ่งเป็นโมดูล Woo Add To Cart! เลือกผลิตภัณฑ์ที่คุณต้องการ

• สินค้า: ค้นหาในรายการ

สีพื้นหลัง

เปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: rgba(255,255,255,0.7)

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

แก้ไขการตั้งค่าฟิลด์ของโมดูลด้วย

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

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

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

ต่อด้วยการใส่สไตล์ของปุ่มดังนี้:

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

• รัศมีเส้นขอบของปุ่ม: 10vw
• แบบอักษรของปุ่ม: เปิด Sans

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

ระยะห่าง

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

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

3. คอลัมน์สไตล์ ปรับขนาด และเปลี่ยนตำแหน่ง

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

พื้นหลังไล่โทนสี

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

• สี 1: rgba(43,135,218,0)
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เชิงเส้น
• ตำแหน่งเริ่มต้น: 39%

ชายแดน

เพิ่มมุมโค้งมนด้วย

• เตะมุมทั้งหมด: 1vw

กล่องเงา

เรากำลังสร้างความลึกด้วยการเพิ่มเงากล่องที่ละเอียดอ่อนเช่นกัน

• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: rgba(0,0,0,0.24)

แปลงแปล

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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