ไฮไลท์ปลั๊กอิน Divi: โมดูลหมุนผลิตภัณฑ์ Divi

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

Divi Product Carousel Module มีอยู่จากเว็บไซต์ของผู้พัฒนาและในตลาด Divi

โมดูลหมุนผลิตภัณฑ์ Divi

เมื่อคุณอัปโหลดและเปิดใช้งานปลั๊กอินแล้ว ให้ไปที่ DiviGear ในเมนูแดชบอร์ดและเปิดใช้งานใบอนุญาตของคุณ หากคุณมีปลั๊กอินหลายตัวจากนักพัฒนารายนี้ คุณจะต้องเลือกแท็บของปลั๊กอิน

โมดูลใหม่ถูกเพิ่มลงใน Divi Builder ที่เรียกว่า Product Carousel มีไอคอนสีม่วงเพื่อให้โดดเด่นจากฝูงชน

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

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

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

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

การตั้งค่าโมดูลม้าหมุนผลิตภัณฑ์ Divi

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

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

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

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

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

นี่คือลักษณะที่ปรากฏเมื่อเลือก Overflow มันให้เอฟเฟกต์การ์ด 3D ที่ดี คุณสามารถปรับจำนวนการหมุนและเปิดใช้งานเงาของสไลด์ได้

ในตัวอย่างนี้ ฉันกำหนดเงากล่องให้การ์ดและปรับการเบลอ ฉันยังเปลี่ยนลูกศรเป็นวงกลมและปรับสี

นี่คือลักษณะที่ปรากฏที่ส่วนหน้าเมื่อเปิดใช้งาน Center Slide นี่คือเค้าโครง 4 คอลัมน์ จะแสดงแตกต่างออกไปเมื่อคุณเลือก Center Slide

นี่คือเลย์เอาต์ 5 คอลัมน์ที่ใช้การตั้งค่าเดียวกับตัวอย่างด้านบน

ภาพหมุนของผลิตภัณฑ์เข้ากันได้ดีกับเลย์เอาต์ Divi ในตัวอย่างนี้ ฉันได้แทนที่โมดูลร้านค้า Divi ด้วยโมดูล Divi Product Carousel และจัดรูปแบบให้เข้ากับเลย์เอาต์

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

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

มันดูดีมากภายในเลย์เอาต์ แม้ว่าจะซ่อนป้ายการขายส่วนใหญ่ไว้ อาจมีวิธีแก้ไขด้วย CSS

อันนี้ใช้ Overflow กับเลย์เอาต์ 3 คอลัมน์

สำหรับอันนี้ ฉันเอาเส้นขอบของรูปภาพออก แต่เก็บเส้นขอบของสไลด์ไว้ ฉันเพิ่มเงาของกล่องและปรับความแรงและตำแหน่งของมัน

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

ในรายการนี้ ฉันได้จัดรูปแบบการให้คะแนนเพื่อให้ตรงกับองค์ประกอบจากเค้าโครง

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

การสาธิตโมดูลม้าหมุนผลิตภัณฑ์ Divi

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

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

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

นี่คือลักษณะที่ปรากฏจากส่วนหน้า ประกอบด้วยเส้นขอบ ชื่อเรื่องที่ด้านบน และสองสีสำหรับปุ่มหยิบใส่ตะกร้า ลูกศรแสดงภายในภาพของโมดูล

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

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

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

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

Divi Product Carousel Module ราคาและเอกสารประกอบ

มีตัวเลือกการซื้อสองแบบสำหรับ Divi Product Carousel Module:

• ไซต์เดียว – $19
• ไม่จำกัดไซต์ – $39

มีให้จากเว็บไซต์ของผู้พัฒนาและในตลาดกลาง

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

จบความคิด

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

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

หากคุณสนใจที่จะนำเสนอผลิตภัณฑ์ WooCommerce ของคุณในแบบภาพหมุน หรือเพียงแค่มีตัวเลือกการออกแบบอีกสองสามตัว Divi Product Carousel Module ก็คุ้มค่าที่จะดู มีให้จากเว็บไซต์ของผู้พัฒนาและในตลาด Divi

เราต้องการได้ยินจากคุณ คุณเคยลองโมดูล Divi Product Carousel แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

ภาพเด่น ตัวอักษร-Shmetters / shutterstock.com