ข้ามไปยังเนื้อหาหลัก

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

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 701.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

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

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

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

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

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

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

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

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

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

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

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

สร้างช่อง acf

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

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

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

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

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

  • ป้ายชื่อฟิลด์: ชื่อผลประโยชน์ 1
  • ประเภทฟิลด์: ข้อความ
เพิ่มช่อง ac
การปรับแต่งฟิลด์ Divi

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

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

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

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

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

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

การสร้างผลิตภัณฑ์ Divi

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

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

กรอกข้อมูลในช่องข้อดีของ Divi

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

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

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

ตัวสร้างธีม Divi

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

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

เพิ่มผลิตภัณฑ์ woocommerce ทั้งหมด

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

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

การสร้างร่างกาย Divi

แก้ไขส่วน # 1

สีพื้นหลัง

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

  • สีพื้นหลัง: # 000000
การกำหนดค่าพื้นหลังส่วน Divi

การเว้นวรรค

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

  • Padding ยอดนิยม: 10px
  • ช่องว่างภายในด้านล่าง: 10px
การกำหนดค่าระยะห่างของส่วน Divi

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

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

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

การกำหนดค่าโครงร่างโมดูลบรรทัด

การเว้นวรรค

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

  • ใช้รางน้ำส่วนบุคคล: ใช่
  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: 90%
  • ความกว้างสูงสุด: 100%
การตั้งค่าระยะห่างโมดูลบรรทัด

การเว้นวรรค

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

  • มาร์จิ้นภายในสูง: 0px
  • มาร์จิ้นภายในต่ำ: 0px
การตั้งค่าระยะห่างโมดูลบรรทัด Divi

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

  • สินค้า: สินค้านี้
การตั้งค่าโมดูลการแจ้งเตือนเกี่ยวกับรถเข็น woo

พื้นหลังสี

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

  • สีพื้นหลัง: rgba (0,0,0,0)
การตั้งค่า Divi โมดูลรถเข็น Woo

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

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

  • แบบอักษรข้อความ: Karla
การตั้งค่าแบบอักษรโมดูล Divi

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

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

  • ใช้ปุ่มกำหนดลักษณะเองสำหรับ: ใช่
  • ขนาดข้อความของปุ่ม: 20px
  • สีข้อความของปุ่ม: # 000000
  • พื้นหลังของปุ่ม: # ffd623
  • ความกว้างเส้นขอบของปุ่ม: 0px
  • ปุ่มขอบโค้งมน: 0px
การตั้งค่าสีโมดูลแจ้งเตือนรถเข็น Woo
  • แบบอักษรของปุ่ม: Oswald
  • รูปแบบตัวอักษรของปุ่ม: Shift
การปรับการออกแบบสีโมดูลแจ้งเตือนรถเข็น Woo
  • มาร์จิ้นภายในสูง: 20px
  • มาร์จิ้นภายในต่ำ: 20px
  • ระยะขอบภายในด้านซ้าย: 50px
  • มาร์จิ้นภายในขวา: 50px
โมดูลการออกแบบการกำหนดค่าประกาศเกี่ยวกับรถเข็น

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

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

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

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

การเว้นวรรค

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

  • Padding ยอดนิยม: 150px
การกำหนดค่าระยะห่างโมดูลบรรทัด Divi

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

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

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

การกำหนดค่าสไตล์เส้น Divi

ปรับขนาด

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

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

การเว้นวรรค

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

  • Padding ยอดนิยม: 0px
การกำหนดค่าระยะห่างโมดูล Divi

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

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

Desktop:

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

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

จอแสดงผล: บล็อก
การตั้งค่าสไตล์โมดูลสาย Divi

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

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

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

  • สินค้า: สินค้านี้
การตั้งค่าโมดูลรูปภาพผลิตภัณฑ์ Woocommerce

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

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

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

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

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

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

  • สินค้า: สินค้านี้
ประโยชน์ของผลิตภัณฑ์กริด

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

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

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

การเว้นวรรค

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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • ขอบซ้าย: 5%
  • ระยะขอบขวา: 5%
การตั้งค่าโมดูลหัวเรื่อง Divi

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

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

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

  • สินค้า: สินค้านี้
  • คำอธิบายประเภท: คำอธิบายสั้น ๆ
การตั้งค่าโมดูลคำอธิบายผลิตภัณฑ์

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

  • ขอบบน: 50px
  • ขอบล่าง: 100px
  • ขอบซ้าย: 5%
  • ระยะขอบขวา: 5%
โมดูลรายละเอียดผลิตภัณฑ์ Divi

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

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

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

  • หัวข้อ: ชื่อเรื่องประโยชน์ 1
  • ร่างกาย: คำอธิบายประโยชน์ 1
การตั้งค่าข้อความโมดูลสรุป Divi

ลงรูปตนเอง

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

การกำหนดค่า Divi สรุปโมดูลรูปภาพ

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

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

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

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

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

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

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

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

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

ปรับขนาด

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

  • ความกว้างของภาพ: 25%
  • ความกว้าง: 49%
กำหนดค่าขนาดโมดูลสรุป Divi

การเว้นวรรค

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

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

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

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

จอแสดงผล: อินไลน์บล็อก
เพิ่มโมดูล divi รหัส css

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

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

ชื่อผลิตภัณฑ์ส่วน divi

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

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

รูปภาพโมดูลสรุป Divi

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

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

  • หัวข้อ: หัวข้อการให้บริการ (2,3 หรือ 4)
  • ร่างกาย: คำอธิบายของข้อดี (2,3 หรือ 4)
กฎโมดูลสรุป Divi

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

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

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

  • ความกว้างชายแดนด้านขวา: 1px
  • สีเส้นขอบด้านขวา: # ffd623
โมดูลสรุป Divi การกำหนดค่าเส้นขอบโค้งมน

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

  • ความกว้างชายแดนด้านล่าง: 1px
  • สีขอบด้านล่าง: # 000000
กำหนดค่าระยะขอบล่างของ Divi
ประกาศแจ้งการตั้งค่าชายแดน 2

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

  • ความกว้างชายแดนด้านล่าง: 1px
  • สีขอบด้านล่าง: # 000000
Divi สรุปโมดูลเส้นขอบการกำหนดค่า
ประกาศแจ้งการตั้งค่าชายแดน 3

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

  • ความกว้างชายแดนด้านขวา: 1px
  • สีเส้นขอบด้านขวา: # ffd623
ประโยชน์ของผลิตภัณฑ์กริด

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

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

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

  • สินค้า: สินค้านี้
เพิ่มลงในการตั้งค่าโมดูลการ์ด Divi

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

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

  • สีพื้นหลังของช่อง: #ffffff
  • สีข้อความของฟิลด์: # 000000
กำหนดค่าโมดูลสีสไตล์เพิ่มในรถเข็น Divi
  • เขตข้อมูลโค้งมน: 0px (ทุกมุม)
  • ความกว้างของเส้นขอบเขตล่าง: 1px
  • สีของเส้นขอบด้านล่างของฟิลด์: # 000000
กำหนดค่าระยะห่างของส่วน Divi

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

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

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

การเว้นวรรค

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

  • ขอบบน: 100px
  • ขอบซ้าย: 5%
กำหนดค่าระยะห่าง Divi

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

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

บันทึกการออกแบบ Divi
บันทึกการปรับเปลี่ยน Divi

การสำรวจ

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

ผลการสาธิต

คิดสุดท้าย

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

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน