ดาวน์โหลดหน้าผลิตภัณฑ์เต็มหน้าจอที่สวยงามสำหรับ Divi

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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

หน้าสินค้าแบบเต็มหน้าจอ

มือถือ

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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

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

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

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

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

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

เปิดหน้าผลิตภัณฑ์ที่มีอยู่

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

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

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

ดำเนินการต่อโดยเปิดใช้งาน Divi และเปลี่ยนเค้าโครงหน้าในการตั้งค่าหน้า

หน้าสินค้าแบบเต็มหน้าจอ

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

เมื่อเสร็จแล้ว คุณสามารถเปลี่ยนไปใช้ Visual Builder

หน้าสินค้าแบบเต็มหน้าจอ

ลบส่วนที่มีอยู่

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

หน้าสินค้าแบบเต็มหน้าจอ

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

ระยะห่าง

ถึงเวลาเริ่มสร้าง! เพิ่มส่วนใหม่ เปิดการตั้งค่าส่วนและแก้ไขค่าการเติมด้านบนและด้านล่าง

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

หน้าสินค้าแบบเต็มหน้าจอ

ล้น

ซ่อนโอเวอร์โฟลว์ของส่วนด้วย

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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

หน้าสินค้าแบบเต็มหน้าจอ

ขนาด

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

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

หน้าสินค้าแบบเต็มหน้าจอ

คอลัมน์ 1

ดัชนี Z

เรากำลังเพิ่มดัชนี z ของคอลัมน์แรกในการตั้งค่าการมองเห็น

  • ดัชนี Z: 10

หน้าสินค้าแบบเต็มหน้าจอ

คอลัมน์ 2

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

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

  • สี 1: #ffcb49
  • สี 2: #ffffff
  • ประเภทการไล่ระดับสี: เรเดียล
  • ทิศทางเรเดียล: ศูนย์กลาง
  • ตำแหน่งเริ่มต้น: 66% (เดสก์ท็อป), 50% (แท็บเล็ตและโทรศัพท์)
  • ตำแหน่งสุดท้าย: 66% (เดสก์ท็อป), 50% (แท็บเล็ตและโทรศัพท์)

หน้าสินค้าแบบเต็มหน้าจอ

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! ในคอลัมน์ 1 โมดูลเดียวที่เราต้องการคือ Woo Title Module

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

  • แบบอักษรของชื่อเรื่อง: Montserrat
  • น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Light
  • การจัดตำแหน่งข้อความชื่อเรื่อง: ซ้าย (เดสก์ท็อป) กึ่งกลาง (แท็บเล็ตและโทรศัพท์)
  • ขนาดข้อความชื่อเรื่อง: 9vw

หน้าสินค้าแบบเต็มหน้าจอ

ขนาด

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

  • ความกว้าง: 50vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

หน้าสินค้าแบบเต็มหน้าจอ

ระยะห่าง

พร้อมกับการตั้งค่าระยะห่าง

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

หน้าสินค้าแบบเต็มหน้าจอ

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

สุดท้ายแต่ไม่ท้ายสุด หมุนทั้งโมดูลในการตั้งค่าการแปลง

  • ซ้าย: 270deg (เดสก์ท็อป), 0deg (แท็บเล็ตและโทรศัพท์)

หน้าสินค้าแบบเต็มหน้าจอ

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

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

สู่โมดูลที่สอง! มีโมดูลเดียวที่เราต้องการคือ Woo Image Module

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

หน้าสินค้าแบบเต็มหน้าจอ

การตั้งค่ารูปภาพ

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

  • ภาพมุมโค้งมน: 1vw (ทุกมุม)

หน้าสินค้าแบบเต็มหน้าจอ

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

หน้าสินค้าแบบเต็มหน้าจอ

ขนาด

ตั้งค่า Woo Image Module ให้สมบูรณ์โดยเปลี่ยนความกว้างและการจัดตำแหน่งโมดูลในการตั้งค่าการปรับขนาด

  • ความกว้าง: 35vw
  • การจัดตำแหน่งโมดูล: ศูนย์

หน้าสินค้าแบบเต็มหน้าจอ

เพิ่ม Woo Description Module #1 ถึงคอลัมน์ 3

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

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

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

  • แบบอักษรของข้อความ: มอนต์เซอร์รัต
  • รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
  • ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
  • ระยะห่างของตัวอักษรข้อความ: -0.07vw
  • ความสูงของบรรทัดข้อความ: 1.8em

หน้าสินค้าแบบเต็มหน้าจอ

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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

หน้าสินค้าแบบเต็มหน้าจอ

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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

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

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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

หน้าสินค้าแบบเต็มหน้าจอ

  • ขนาดข้อความของฟิลด์: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
  • ฟิลด์ มุมโค้งมน: 50vw (ทุกมุม)

หน้าสินค้าแบบเต็มหน้าจอ

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

เล่นกับการตั้งค่าปุ่มเช่นกัน

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

หน้าสินค้าแบบเต็มหน้าจอ

  • แบบอักษรของปุ่ม: มอนต์เซอร์รัต

หน้าสินค้าแบบเต็มหน้าจอ

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

หน้าสินค้าแบบเต็มหน้าจอ

ระยะห่าง

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

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

หน้าสินค้าแบบเต็มหน้าจอ

เปลี่ยนหน้าผลิตภัณฑ์เป็นเทมเพลต

บันทึกเค้าโครงหน้าไปยังห้องสมุด Divi

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

หน้าสินค้าแบบเต็มหน้าจอ

เพิ่มเทมเพลตใหม่ให้กับตัวสร้างธีม

ไปที่ Theme Builder ในการตั้งค่า Divi และเพิ่มเทมเพลตใหม่

หน้าสินค้าแบบเต็มหน้าจอ

เลือกหน้าผลิตภัณฑ์ที่คุณต้องการให้แสดงเค้าโครงนี้

หน้าสินค้าแบบเต็มหน้าจอ

อัปโหลดเค้าโครงไปยังเนื้อหาของเทมเพลต

จากนั้นคลิกที่ 'เพิ่ม Global Body' และเลือก 'เพิ่มจากไลบรารี'

หน้าสินค้าแบบเต็มหน้าจอ

เลือกเลย์เอาต์ของคุณในแท็บ 'เลย์เอาต์ที่บันทึกไว้ของคุณ'

หน้าสินค้าแบบเต็มหน้าจอ

และบันทึกการเปลี่ยนแปลงทั้งหมดของคุณ!

หน้าสินค้าแบบเต็มหน้าจอ

ดูตัวอย่าง

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

เดสก์ทอป

หน้าสินค้าแบบเต็มหน้าจอ

มือถือ

หน้าสินค้าแบบเต็มหน้าจอ

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

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

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