เมื่อสร้างหน้าผลิตภัณฑ์ใน Divi เราสามารถใช้โมดูลหีบเพลงเพื่อแสดงข้อมูลผลิตภัณฑ์โดยใช้เนื้อหาแบบไดนามิก สิ่งนี้จะทำให้คุณได้รับการออกแบบที่ไม่เหมือนใครสำหรับหน้าผลิตภัณฑ์ในขณะที่รักษาพื้นที่อันมีค่าบนหน้า
ในบทช่วยสอนนี้เราจะแสดงวิธีใช้คุณสมบัติเนื้อหาไดนามิกของ Divi เพื่อสร้างหีบเพลงข้อมูลผลิตภัณฑ์ตลอดจนวิธีออกแบบหีบเพลง (และเนื้อหา) โดยใช้ Divi Visual Builder
ขอเริ่มต้น
การสำรวจ
นี่คือตัวอย่างของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้
โปรดทราบว่าคุณต้องมีการกำหนดค่าผลิตภัณฑ์ตามที่อธิบายไว้ในบทช่วยสอนนี้เพื่อให้ได้ผลลัพธ์เดียวกัน
Commencer
ในการเริ่มต้นคุณจะต้องทำสิ่งต่อไปนี้:
- หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งาน ธีม Divi ติดตั้งแล้ว (หรือปลั๊กอิน Divi Builder หากคุณไม่ได้ใช้ ธีม Divi).
- ติดตั้งและเปิดใช้งานปลั๊กอิน WooCommerce. หากคุณกำหนดค่า WooCommerce เป็นครั้งแรก คุณจะต้องเรียกใช้วิซาร์ดการตั้งค่าพื้นฐานเพื่อเตรียมร้านค้าของคุณ เมื่อเสร็จแล้ว คุณก็พร้อมที่จะเพิ่มผลิตภัณฑ์ใหม่ของคุณ
- สร้างผลิตภัณฑ์ใหม่ดังแสดงด้านล่าง
การตั้งค่าผลิตภัณฑ์ตัวอย่าง
ในการกำหนดค่าผลิตภัณฑ์ตัวอย่างสำหรับบทช่วยสอนนี้ไปที่ผลิตภัณฑ์> เพิ่มใหม่ ตั้งชื่อผลิตภัณฑ์ว่า“ Massage (single session)” แล้วคลิกเพื่อใช้ Divi Builder
จากนั้นอัปเดตการตั้งค่าหน้าผลิตภัณฑ์และข้อมูลผลิตภัณฑ์ต่อไปนี้:
1. ภายใต้การตั้งค่าหน้า Divi ให้เลือกเค้าโครงไม่มีแถบด้านข้าง
2. เพิ่ม / เลือกหมวดหมู่สินค้า
3. เพิ่มรูปภาพสินค้า
4. เพิ่มเนื้อหาของคำอธิบาย
5. ภายใต้ ข้อมูล ของสินค้า ให้เปลี่ยนประเภทสินค้าเป็นสินค้าผันแปร
6. เพิ่มแอตทริบิวต์ชื่อ“ Type” ด้วยค่าต่อไปนี้: สวีเดน | หินร้อน | อโรมาเทอราพี | เนื้อเยื่อลึก. อย่าลืมเลือก“ ใช้สำหรับรูปแบบต่างๆ”
7. จากนั้นในแท็บ รูปแบบ ใต้การสลับของ données ของผลิตภัณฑ์ ให้ใช้รายการแบบเลื่อนลงเพื่อสร้างรูปแบบต่างๆ จากแอตทริบิวต์ทั้งหมด
8. เลือก "กำหนดราคาปกติ" จากเมนูแบบเลื่อนลงเพื่อกำหนดราคาปกติสำหรับตัวแปรสามตัว
9. ในกล่องโต้ตอบป้อนค่า "50" และเลือกตกลง
10 เมื่อเสร็จแล้วให้บันทึกหรือเผยแพร่ผลิตภัณฑ์
ตอนนี้คุณพร้อมที่จะเริ่มต้นออกแบบเค้าโครงของคุณด้วย Accordion ผลิตภัณฑ์ที่กำหนดเอง
การสร้างหีบเพลงข้อมูลผลิตภัณฑ์พร้อมเนื้อหาไดนามิกใน Divi
เค้าโครงผลิตภัณฑ์เริ่มต้นจะแสดงข้อมูลผลิตภัณฑ์โดยใช้โมดูล Woo ต่างๆ สำหรับตัวอย่างนี้เราต้องการใช้หีบเพลงเพื่อแสดงข้อมูลหลักสามประการเกี่ยวกับผลิตภัณฑ์ ได้แก่ คำอธิบายผลิตภัณฑ์ข้อมูลผลิตภัณฑ์เพิ่มเติมและบทวิจารณ์ผลิตภัณฑ์ ขณะนี้เนื้อหาทั้งสามส่วนนี้แสดงอยู่ในโมดูลแท็บ woo สิ่งที่เราต้องทำคือถอดโมดูล woo tabs และแทนที่ด้วยโมดูลหีบเพลงด้วยข้อมูลเดียวกันที่นำมาใช้ผ่านเนื้อหาไดนามิก
นี่คือวิธีที่จะทำ
ขั้นแรกให้คลิกเพื่อใช้ Divi บนระบบส่วนหน้าเพื่อปรับใช้ตัวสร้างภาพ จากนั้นถอดโมดูล Woo Tabs
จากนั้นเพิ่มโมดูล Accordion ใหม่เพื่อแทนที่แท็บ
ในหน้าต่างป็อปอัพการตั้งค่าหีบเพลงให้คลิกไอคอนรูปเฟืองบนหีบเพลงแรกเพื่อเปิดการตั้งค่าหีบเพลงแต่ละรายการ
ป้อนชื่อ "เกี่ยวกับผลิตภัณฑ์"
จากนั้นวางเมาส์เหนือช่องป้อนเนื้อหาเนื้อหาแล้วคลิกไอคอนเนื้อหาแบบไดนามิก
เลือก "คำอธิบายผลิตภัณฑ์" จากรายการเนื้อหาแบบไดนามิก
นี่จะแสดงคำอธิบายแบบยาวของผลิตภัณฑ์ที่เราได้กำหนดไว้สำหรับผลิตภัณฑ์บนแบ็กเอนด์
เมื่อเนื้อหาหีบเพลงแรกเริ่มต้นให้เปิดการตั้งค่าหีบเพลงที่สองและอัปเดตข้อมูลต่อไปนี้:
- หัวข้อ: ข้อมูลจำเพาะ
จากนั้นเพิ่มเนื้อหาแบบไดนามิก "ข้อมูลผลิตภัณฑ์เพิ่มเติม" ลงในเนื้อหา
เมื่อเนื้อหาหีบเพลงที่สองพร้อมแล้วให้เพิ่มองค์ประกอบหีบเพลงใหม่และอัปเดตการตั้งค่าหีบเพลงดังนี้:
- หัวข้อ: ข้อมูลเพิ่มเติม
จากนั้นเพิ่มเนื้อหาไดนามิก "บทวิจารณ์ผลิตภัณฑ์" ลงในเนื้อหาเพื่อฝังรายการ / เนื้อหาของบทวิจารณ์ผลิตภัณฑ์
หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มบทวิจารณ์ผลิตภัณฑ์อย่างน้อยหนึ่งรายการเพื่อที่จะดูเนื้อหาบนหน้าเว็บจริง
การออกแบบผลิตภัณฑ์และข้อตกลงเนื้อหากับ Divi
เมื่อหีบเพลงข้อมูลผลิตภัณฑ์ของเรามีเนื้อหาแบบไดนามิกเพื่อแสดงข้อมูลผลิตภัณฑ์แล้วเราก็พร้อมที่จะปรับแต่งโดยใช้การตั้งค่าของโมดูลหีบเพลงในตัว
เปิดการตั้งค่าโมดูล Accordion และอัพเดตต่อไปนี้:
- ไอคอนสี: # ff9375
- ใช้ขนาดตัวอักษรของไอคอน: ใช่
- ขนาดตัวอักษรของไอคอน: 26px
- สลับสีพื้นหลัง: #ffffff
- เปิดชื่อข้อความสี: #ff9375
- ชื่อข้อความ: #222222
- แบบอักษรของชื่อ: Lato
- ตำรวจหัวข้อ: ตัวหนา
- ลักษณะแบบอักษรของชื่อเรื่อง: TT
- ขนาดหัวเรื่องข้อความ: 20px
- ช่องว่างของตัวอักษรของชื่อเรื่อง: 0.2em
- ความสูงของบรรทัดหัวเรื่อง: 2em
- แบบอักษร: Lato
- ขนาดตัวอักษร: 16px
- ความสูงของร่างกาย: 1.8em
- สีข้อความของลิงก์: #ff9375
สิ่งนี้จะกำหนดเป้าหมายลิงก์ทั้งหมดที่คุณมีในเนื้อหาแบบไดนามิกสำหรับแต่ละหีบเพลงเช่นระดับดาว
- สีข้อความของรายการที่ไม่ได้เรียงลำดับ: # ff9375
- ชนิดสไตล์รายการที่ไม่เรียงลำดับ: แวดวง
- การเยื้องรายการที่ไม่เรียงลำดับ: 5%
- ความกว้างของเส้นขอบ: 0px
- ความกว้างของเส้นขอบด้านบน: 1px
- สีของเส้นขอบด้านบน: #222222
และสำหรับขั้นตอนสุดท้ายเรามาเพิ่ม css แยกขนาดเล็กเพื่อแยกระยะขอบเริ่มต้นระหว่างเครื่องชั่งหีบเพลง
บนแท็บขั้นสูงเพิ่ม CSS ต่อไปนี้ในองค์ประกอบสลับ:
margin-bottom: 0px;
ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายของหีบเพลงข้อมูลผลิตภัณฑ์
การปรับโครงร่างขั้นสุดท้าย
สามารถปรับเปลี่ยนการจัดวางได้เล็กน้อยเพื่อให้เข้ากับการออกแบบของหีบเพลง ตัวอย่างเช่นเราสามารถปรับแบบอักษรของแต่ละโมดูลเป็น Lato เพิ่มเส้นขอบที่กำหนดเองและรัศมีเส้นขอบรอบ ๆ รายการแบบเลื่อนลงตัวแปรและอัปเดตปุ่มเพิ่มในรถเข็นด้วยสีพื้นหลังทึบที่ เหมาะกับเขา
เมื่อเสร็จแล้วนี่คือผลลัพธ์สุดท้าย
ฉันได้รวมการออกแบบนี้เป็นการดาวน์โหลดฟรีด้านบน โปรดตรวจสอบด้วยตัวคุณเอง โปรดทราบว่าคุณต้องมีการกำหนดค่าผลิตภัณฑ์ที่อธิบายไว้ในบทช่วยสอนนี้เพื่อให้ได้ผลลัพธ์เดียวกัน
หมายเหตุ: สีเริ่มต้นสำหรับรายการส่วนใหญ่ WooCommerce ของผลิตภัณฑ์ใน Divi นั้นสืบทอดมาจากค่าสีรองของการตั้งค่าการปรับแต่งธีม การอัปเดตสีรองนี้อาจง่ายกว่าเมื่อโมดูลสีโดย woo
คิดสุดท้าย
ดังที่เราได้เรียนรู้โมดูล Woo ไม่ใช่สิ่งเดียวที่สามารถใช้เพื่อดึงข้อมูลผลิตภัณฑ์แบบไดนามิก หีบเพลงข้อมูลผลิตภัณฑ์เป็นตัวอย่างที่ดีในการใช้โมดูล Divi ใด ๆ เพื่อแสดงข้อมูลผลิตภัณฑ์ด้วยวิธีที่ไม่เหมือนใครและกระชับ อย่าลังเลที่จะสำรวจการออกแบบหีบเพลงใหม่และน่าตื่นเต้นสำหรับหน้าผลิตภัณฑ์ของคุณ และแน่นอนคุณสามารถใช้โมดูลโยกหลายตัวแทนหีบเพลงเพื่อให้ได้ผลลัพธ์ที่คล้ายกัน
