การสร้างตารางผลประโยชน์ผลิตภัณฑ์แบบไดนามิกสำหรับเทมเพลตหน้าผลิตภัณฑ์ของคุณด้วย Divi & ACF

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตหน้าผลิตภัณฑ์ฟรี

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

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

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

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

ดาวน์โหลด

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

1. ติดตั้งปลั๊กอิน ACF และเพิ่มกลุ่มฟิลด์ผลประโยชน์ผลิตภัณฑ์

ติดตั้งปลั๊กอินฟิลด์กำหนดเองขั้นสูง

ในการแสดงประโยชน์ของผลิตภัณฑ์ต่างๆ ภายในแบ็กเอนด์ของผลิตภัณฑ์ของเรา เราจะใช้ปลั๊กอิน Advanced Custom Fields ฟรี ไปที่ แบ็กเอนด์ WordPress ของคุณ > ปลั๊กอิน > เพิ่มใหม่ > ค้นหาปลั๊กอิน ACF > ติดตั้ง > เปิดใช้งาน

ไปที่ฟิลด์กำหนดเอง & เพิ่มฟิลด์ใหม่ Group

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

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

ตั้งชื่อกลุ่มฟิลด์ใหม่ของคุณและอนุญาตให้แสดงบนหน้าผลิตภัณฑ์เท่านั้น

• 'ประเภทโพสต์' เท่ากับ 'ผลิตภัณฑ์'

เพิ่มช่องแรก

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

• ป้ายกำกับ: ชื่อสวัสดิการ 1
• ประเภทฟิลด์: Text

ทำซ้ำขั้นตอนสำหรับช่องที่เหลือ

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

• ชื่อผลประโยชน์ 1
• คำอธิบายผลประโยชน์ 1
• ชื่อผลประโยชน์2
• คำอธิบายผลประโยชน์ 2
• ชื่อผลประโยชน์ 3
• คำอธิบายผลประโยชน์ 3
• ชื่อผลประโยชน์ 4
• คำอธิบายผลประโยชน์ 4

2. เพิ่มประโยชน์ของผลิตภัณฑ์ให้กับผลิตภัณฑ์

เปิดหรือเพิ่มสินค้าใหม่

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

กรอกข้อมูลในฟิลด์ประโยชน์ของผลิตภัณฑ์

และกรอกผลประโยชน์ของสินค้า

3. สร้างเทมเพลตหน้าผลิตภัณฑ์ภายในตัวสร้างธีม Divi

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

ได้เวลาเริ่มต้นกับ Divi! ในการสร้างเทมเพลตใหม่ ให้ไปที่ Divi Theme Builder และคลิกที่ 'Add New Template'

ใช้เทมเพลตกับผลิตภัณฑ์ทั้งหมด

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

ป้อนตัวแก้ไขเทมเพลตเนื้อหาของเทมเพลต

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

แก้ไขส่วน #1

สีพื้นหลัง

เมื่ออยู่ในตัวแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนนั้นและเปลี่ยนสีพื้นหลังเป็นสีดำ

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

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

เพิ่มโมดูลประกาศ Woo Cart ไปที่คอลัมน์

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

โมดูลเดียวที่เราต้องการในแถวและส่วนนี้คือ Woo Cart Notice Module ตรวจสอบให้แน่ใจว่าได้เลือก 'ผลิตภัณฑ์นี้' ในพื้นที่เนื้อหาแบบไดนามิก

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

สีพื้นหลัง

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

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

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

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

• แบบอักษรของข้อความ: Karla

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

ตั้งค่าโมดูลให้สมบูรณ์โดยกำหนดสไตล์ให้ปุ่มตามลำดับ:

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

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

เพิ่มส่วน #2

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

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

• สี 1: #000000
• สี 2: #ffffff
• ตำแหน่งเริ่มต้น:
  • เดสก์ท็อป: 30%
  • แท็บเล็ต: 57%
  • โทรศัพท์: 54%
• ตำแหน่งสิ้นสุด:
  • เดสก์ท็อป: 30%
  • แท็บเล็ต: 57%
  • โทรศัพท์: 54%

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและเพิ่มช่องว่างภายในบางส่วน

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 95%
• ความกว้างสูงสุด: 2560px
• การจัดแนวแถว: กึ่งกลาง

ระยะห่าง

เรากำลังลบช่องว่างด้านบนเริ่มต้นของแถวด้วย

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

องค์ประกอบหลัก

และเพื่อให้เนื้อหาคอลัมน์อยู่กึ่งกลางบนเดสก์ท็อป เราจะใช้โค้ด CSS สองบรรทัดในองค์ประกอบหลักของแถว

เดสก์ทอป:

display: flex;
align-items: center;

แท็บเล็ตและโทรศัพท์:

display: block;

เพิ่มโมดูลภาพ Woo ไปที่คอลัมน์ 1

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

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

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

เอฟเฟกต์การเคลื่อนไหวในแนวตั้ง

เรากำลังเพิ่มการเคลื่อนไหวเล็กๆ น้อยๆ ให้กับรูปภาพโดยใช้เอฟเฟกต์การเลื่อนแนวนอนในแท็บขั้นสูง

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น:
  • เดสก์ท็อป: -4
  • แท็บเล็ตและโทรศัพท์: 0
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด: 0
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

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

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

ในคอลัมน์ 2 โมดูลแรกที่เราต้องการคือ Woo Title Module ตรวจสอบให้แน่ใจว่าได้เลือก 'ผลิตภัณฑ์นี้' ในพื้นที่เนื้อหาแบบไดนามิก

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

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

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

• แบบอักษรของชื่อเรื่อง: Oswald
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• สีข้อความชื่อเรื่อง: #ffd623
• ขนาดข้อความชื่อเรื่อง: 80px

ระยะห่าง

กรอก Woo Title Module โดยเพิ่มระยะขอบซ้ายและขวา

• ระยะขอบซ้าย: 5%
• ระยะขอบขวา: 5%

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลคำอธิบายของ Woo เรากำลังใช้เนื้อหาแบบไดนามิกต่อไปนี้:

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

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

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

• แบบอักษรของข้อความ: Karla
• สีข้อความ: #dbdbdb
• ขนาดตัวอักษร: 17px (เดสก์ท็อปและแท็บเล็ต), 15px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.9em

ขนาด

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

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

ระยะห่าง

กรอก Woo Description Module โดยเพิ่มค่าระยะขอบแบบกำหนดเองในการตั้งค่าการเว้นวรรค

• ขอบบน: 50px
• ขอบล่าง: 100px
• ระยะขอบซ้าย: 5%
• ระยะขอบขวา: 5%

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

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

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

• หัวข้อ: ผลประโยชน์ หัวข้อ 1
• ร่างกาย: ประโยชน์ คำอธิบาย 1

อัพโหลดภาพ

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

การตั้งค่ารูปภาพ/ไอคอน

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

• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย

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

เรากำลังแก้ไขการตั้งค่าข้อความชื่อเรื่องต่อไป

• แบบอักษรของชื่อเรื่อง: Oswald
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• ขนาดข้อความชื่อเรื่อง: 25px

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

พร้อมกับการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: Karla
• ขนาดข้อความ: 17px (เดสก์ท็อปและแท็บเล็ต), 15px (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 1.9em

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและแก้ไขความกว้าง สิ่งสำคัญคือต้องใช้ความกว้างหลักที่น้อยกว่า 50% ซึ่งจะทำให้เราสามารถแสดงโมดูล Blurb สองโมดูลติดกันในขั้นตอนต่อไป

• ความกว้างของภาพ: 25%
• ความกว้าง: 49%

ระยะห่าง

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

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

องค์ประกอบหลัก

ตอนนี้ เพื่อให้แน่ใจว่าโมดูล Blurb สองโมดูลแสดงติดกัน มีขั้นตอนสำคัญสองขั้นตอน อย่างแรกคือตรวจสอบให้แน่ใจว่าความกว้างของโมดูลน้อยกว่า 50% (เหมือนที่เราทำในขั้นตอนก่อนหน้านี้) อันที่สองกำลังใช้คุณสมบัติการแสดงผลแบบอินไลน์ เราจะเพิ่มคุณสมบัติ CSS นี้ให้กับองค์ประกอบหลักของโมดูล Blurb ในแท็บขั้นสูง

display: inline-block;

โคลนโมดูล Blurb สามครั้ง

เมื่อคุณสร้าง Blurb Module แรกเสร็จแล้ว คุณสามารถโคลนได้สามครั้ง คุณจะสังเกตเห็นโมดูล Blurb ปรากฏในตารางโดยอัตโนมัติ

แก้ไขรูปภาพโมดูล Blurb

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

แก้ไขเนื้อหาไดนามิกของโมดูล Blurb

เปลี่ยนเนื้อหาแบบไดนามิกสำหรับโมดูล Blurb ที่ซ้ำกันแต่ละโมดูลด้วย

• หัวข้อ: หัวข้อผลประโยชน์ (2,3 หรือ 4)
• เนื้อหา: คำอธิบายผลประโยชน์ (2,3 หรือ 4)

เพิ่มเส้นขอบให้กับโมดูล Blurb ทีละรายการ

Blurb โมดูล 1 การตั้งค่าเส้นขอบ

ในตอนนี้ เพื่อให้การออกแบบตารางของเราสมบูรณ์ เราจะเพิ่มเส้นขอบให้กับโมดูล Blurb ในระดับบุคคล เปิด Blurb Module แรกและใช้เส้นขอบด้านขวา

• ความกว้างของขอบขวา: 1px
• สีขอบขวา: #ffd623

เพิ่มเส้นขอบด้านล่างให้กับโมดูล Blurb แรกด้วย

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

Blurb Module 2 การตั้งค่าเส้นขอบ

จากนั้นเปิดโมดูล Blurb ที่สองและใช้เส้นขอบด้านล่าง

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

Blurb Module 3 การตั้งค่าเส้นขอบ

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

• ความกว้างของขอบขวา: 1px
• สีขอบขวา: #ffd623

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

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

โมดูลสุดท้ายที่เราต้องการในการออกแบบของเราคือ Woo Add to Cart Module ตรวจสอบให้แน่ใจว่าได้เลือก 'ผลิตภัณฑ์นี้' ในพื้นที่เนื้อหาแบบไดนามิก

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

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

ไปที่แท็บออกแบบถัดไปแล้วเปลี่ยนการตั้งค่าฟิลด์

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

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

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

จากนั้นจัดรูปแบบปุ่มตามนี้:

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

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ระยะห่าง

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

• ขอบบน: 100px
• ระยะขอบซ้าย: 5%

3. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูตัวอย่างผลลัพธ์

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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