ไฮไลท์ปลั๊กอิน Divi: Divi BodyCommerce

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

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

การติดตั้งและการตั้งค่า Divi BodyCommerce

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ ในการเปิดใช้งานใบอนุญาต ให้ไปที่ Divi Engine > BodyCommerce License ในเมนูแดชบอร์ด

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

โมดูล Divi BodyCommerce

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

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

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

การสร้างและกำหนดเพจ

มาดูวิธีการสร้างเพจและตั้งค่าให้เป็นค่าเริ่มต้นสำหรับหมวดหมู่นั้นกัน ขั้นแรก สร้างเลย์เอาต์ใน Divi Library

ถัดไป ไปที่ Divi Engine > BodyCommerce ในเมนูแดชบอร์ด เลือกแท็บสำหรับประเภทของหน้าที่คุณกำลังสร้าง แล้วเลือกเค้าโครงของคุณสำหรับหน้านั้น คุณสามารถสร้างเค้าโครงได้มากเท่าที่คุณต้องการ และใช้สำหรับหน้าประเภทต่างๆ และสำหรับแต่ละหมวดหมู่

ตัวอย่าง Divi BodyCommerce

นี่คือตัวอย่างบางส่วนที่ฉันสร้างขึ้น นี่เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของสิ่งที่สามารถทำได้ด้วยปลั๊กอินนี้

หน้าร้านค้า Divi BodyCommerce

สำหรับหน้าร้านค้า ฉันเพิ่งเพิ่มโมดูลหน้าเก็บถาวรผลิตภัณฑ์

นี่คือหน้าที่มีการตั้งค่าเริ่มต้น แต่ละองค์ประกอบสามารถปรับได้ด้วย Divi Builder

นี่คือภายในเลย์เอาต์ Tea Shop นี่เป็นการตั้งค่าเริ่มต้นยกเว้นขีดจำกัด ฉันตั้งค่าให้แสดงผลิตภัณฑ์ 6 รายการ

คุณสามารถปรับองค์ประกอบบางอย่างได้

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

นี่คือเค้าโครงสไตล์บล็อก มันจะดูดีถ้าคุณมีคำอธิบายผลิตภัณฑ์อีกต่อไป

หน้าผลิตภัณฑ์ Divi BodyCommerce

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

เป็นเรื่องง่าย แต่เป็นจุดเริ่มต้นที่ดี โดยจะแสดงชื่อผลิตภัณฑ์ แกลเลอรี และตัวเลื่อน

ฉันสุ่มเพิ่มหน้าผลิตภัณฑ์และโมดูลทั่วโลกอีกสองสามรายการ

เริ่มแสดงให้เห็นแล้วว่า BodyCommerce ทำอะไรได้บ้าง มาทำ Divi ในเพจนี้กัน

ต่อไปนี้คือการปรับเปลี่ยนง่ายๆ บางประการด้วย Divi Builder ทั้งหมดที่ฉันทำคือเพิ่มพื้นหลังให้กับส่วนและแถว และปรับเส้นขอบสำหรับปุ่มและช่องค้นหา

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

ตะกร้าสินค้า Divi BodyCommerce

ฉันกำลังสร้างหน้าตะกร้าสินค้าโดยใช้หน้าติดต่อในรูปแบบเบเกอรี่ ฉันกำลังใช้โมดูล Cart Products และ Cart Totals พวกเขาไม่แสดงเนื้อหาเมื่อดูใน Visual Builder แต่คุณยังสามารถสร้างใน Visual Builder ได้ โมดูลนี้มีคุณสมบัติอื่นๆ มากมาย เช่น การขายต่อเนื่อง

นี่คือตะกร้าสินค้าที่ใช้การตั้งค่าเริ่มต้น ฉันมีสองโมดูลในรูปแบบ 2 คอลัมน์เดียว

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

เอกสาร Divi BodyCommerce

เอกสารมีให้ในรูปแบบลายลักษณ์อักษรที่เว็บไซต์ของผู้พัฒนาและพร้อมชุดวิดีโอบน YouTube ฉันชอบที่มันรวมทั้ง ลิงก์มีอยู่ในเมนูแดชบอร์ดของ Divi Engine คุณยังสามารถดูวิดีโอได้โดยคลิกที่คุณสมบัติใดๆ ที่เว็บไซต์ของผู้พัฒนา สิ่งนี้สร้างโครงสร้างที่น่าสนใจในการค้นหาวิดีโอที่คุณต้องการ นี่เป็นวิธีที่ฉันพบวิดีโอที่ต้องการดูจริงๆ

ราคา Divi BodyCommerce

BodyCommerce มีใบอนุญาตให้เลือกสามแบบ:

• 1 ไซต์ – £24
• 5 ไซต์ – £50
• ไม่จำกัดไซต์ – £96

คุณสามารถซื้อ BodyCommerce ได้จากเว็บไซต์ของผู้พัฒนา

จบความคิด

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

โมดูลและเลย์เอาต์นั้นใช้งานง่าย ฉันทำตามวิดีโอในหน้าของนักพัฒนาเพื่อสร้างตัวอย่างของฉัน วิดีโอมีรายละเอียดและง่ายต่อการติดตาม ฉันไม่มีปัญหาในการสร้างเพจประเภทใดๆ ที่ฉันต้องการ

BodyCommerce มีเครื่องมือและการปรับแต่งมากกว่าปลั๊กอิน WooCommerce/Divi ใดๆ ที่ฉันเคยเห็นมา หากคุณใช้ WooCommerce กับ Divi และต้องการปรับแต่งหน้า WooCommerce ของคุณ BodyCommerce เป็นตัวเลือกที่ง่าย

เราต้องการได้ยินจากคุณ คุณลอง BodyCommerce สำหรับ Divi และ WooCommerce แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

รูปภาพเด่นผ่าน Letters-Shmetters / shutterstock.com