การสร้างตารางผลประโยชน์แบบไดนามิกสำหรับผลิตภัณฑ์ WooCommerce

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

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

ผลลัพธ์ที่เป็นไปได้

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

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

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

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

ไปที่ฟิลด์ที่กำหนดเองและเพิ่มกลุ่มของฟิลด์ใหม่

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

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

ตั้งชื่อให้กลุ่มฟิลด์ใหม่ของคุณและอนุญาตให้ปรากฏเฉพาะในหน้าผลิตภัณฑ์

• "ประเภทข้อความ" เท่ากับ "ผลิตภัณฑ์"

เพิ่มเขตข้อมูลแรก

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

• ป้ายชื่อฟิลด์: ชื่อผลประโยชน์ 1
• ประเภทฟิลด์: ข้อความ

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

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

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

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

เปิดหรือเพิ่มผลิตภัณฑ์ใหม่

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

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

และเติมเต็มประโยชน์ของผลิตภัณฑ์

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

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

ถึงเวลาเริ่มต้นด้วย Divi! หากต้องการสร้างเทมเพลตใหม่ให้ไปที่ Divi Theme Builder แล้วคลิกที่ "เพิ่มเทมเพลตใหม่"

ใช้เทมเพลตในทุกผลิตภัณฑ์

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

เข้าสู่ตัวแก้ไขเทมเพลตตัวแบบจำลอง

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

แก้ไขส่วน # 1

สีพื้นหลัง

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

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

การเว้นวรรค

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

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

เพิ่มบรรทัดใหม่

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

มาดำเนินการต่อโดยเพิ่มบรรทัดใหม่ในส่วนที่มีโครงสร้างต่อไปนี้:

การเว้นวรรค

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

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

การเว้นวรรค

ลบระยะห่างภายในด้านบนและด้านล่างทั้งหมด

• มาร์จิ้นภายในสูง: 0px
• มาร์จิ้นภายในต่ำ: 0px

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

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

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

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

พื้นหลังสี

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

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

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

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

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

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

เสร็จสิ้นการตั้งค่าปลั๊กอินโดยกำหนดการตั้งค่าสไตล์:

• ใช้ปุ่มกำหนดลักษณะเองสำหรับ: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: # 000000
• พื้นหลังของปุ่ม: # ffd623
• ความกว้างเส้นขอบของปุ่ม: 0px
• ปุ่มขอบโค้งมน: 0px

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: Shift

• มาร์จิ้นภายในสูง: 20px
• มาร์จิ้นภายในต่ำ: 20px
• ระยะขอบภายในด้านซ้าย: 50px
• มาร์จิ้นภายในขวา: 50px

เพิ่มหัวข้อ # 2

พื้นหลังไล่ระดับสี

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

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

การเว้นวรรค

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

• Padding ยอดนิยม: 150px

เพิ่มบรรทัดใหม่

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

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

ปรับขนาด

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

• ใช้รางที่กำหนดเอง: ใช่
• พื้นที่รางน้ำ: 1
• ความกว้าง: 95%
• ความกว้างสูงสุด: 2560px
• การจัดแถว: ศูนย์

การเว้นวรรค

เราจะลบระยะขอบภายในสุดด้วยเช่นกัน

• Padding ยอดนิยม: 0px

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

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

Desktop:

จอแสดงผล: flex; align-items: center;

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

จอแสดงผล: บล็อก

เพิ่มโมดูล Woo Image เข้ากับคอลัมน์ 1

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

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

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

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

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

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

เพิ่มโมดูลหัวเรื่อง Woo ไปยังคอลัมน์ 2

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

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

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

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

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

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

การเว้นวรรค

ทำให้โมดูลชื่อ Woo สมบูรณ์โดยการเพิ่มระยะขอบซ้ายและขวา

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

เพิ่มโมดูลคำอธิบาย Woo ไปยังคอลัมน์ 2

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

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

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

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

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

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

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

ลงรูปตนเอง

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

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

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

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

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

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

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

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

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

จอแสดงผล: อินไลน์บล็อก

โคลนโมดูลสรุป 3 ครั้ง

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

แก้ไขอิมเมจโมดูล Blurb

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

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

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

• หัวข้อ: หัวข้อการให้บริการ (2,3 หรือ 4)
• ร่างกาย: คำอธิบายของข้อดี (2,3 หรือ 4)

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

ประกาศแจ้งการตั้งค่าชายแดน 1

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

• ความกว้างชายแดนด้านขวา: 1px
• สีเส้นขอบด้านขวา: # ffd623

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

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

ประกาศแจ้งการตั้งค่าชายแดน 2

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

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

ประกาศแจ้งการตั้งค่าชายแดน 3

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

• ความกว้างชายแดนด้านขวา: 1px
• สีเส้นขอบด้านขวา: # ffd623

เพิ่ม Woo เพิ่มในตะกร้าโมดูลในคอลัมน์ 2

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

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

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

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

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

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

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

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

จากนั้นจัดสไตล์ปุ่มตาม:

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

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

• การเสริมด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างด้านซ้าย: 50px
• ช่องว่างภายในขวา: 50px

การเว้นวรรค

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

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

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

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

การสำรวจ

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ

คิดสุดท้าย

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