ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับโมดูลม้าหมุนกลุ่มของ Divi 5

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

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

โมดูลม้าหมุนกลุ่มคืออะไร?

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

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

คุณสมบัติที่สำคัญ

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

สไลด์ที่ปรับแต่งได้

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

เนื้อหาแบบไดนามิกด้วยตัวสร้างลูป

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

การออกแบบความยืดหยุ่น

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

วิธีใช้โมดูลม้าหมุนกลุ่ม

การตั้งค่าม้าหมุนกลุ่มใน Divi 5 นั้นใช้งานง่ายและยืดหยุ่น เริ่มต้นด้วยการเพิ่มแถวคอลัมน์เดียวลงในหน้า จากนั้นเลือกโมดูล ม้าหมุนกลุ่ม ใน Visual Builder และเพิ่มลงในหน้าของคุณ

ในแท็บ เนื้อหา คลิกเพื่อขยายเมนูแบบเลื่อนลง ของการตั้งค่า Carousel

เปิดใช้ งานการหมุนอัตโนมัติ โหมดกลาง และตั้งค่า สไลด์เพื่อแสดง เป็น 3

เปิดใช้งาน การแสดงการนำทาง DOT ในเมนูแบบเลื่อนลงขององค์ประกอบ คุณสามารถปล่อยให้ ลูกศรแสดง เปิดใช้งานหรือปิดการใช้งาน

กำหนดสไตล์ให้กับกลุ่มแรก

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

ใน แท็บเนื้อหา ขยายเมนูดรอปดาวน์ พื้นหลัง คลิกแท็บภาพพื้นหลังจากนั้นคลิก +เพิ่มภาพพื้นหลัง เพื่อเพิ่มภาพในกลุ่ม

ถัดไปนำทางไปยัง แท็บการออกแบบ ขยายเมนูแบบเลื่อนลง เค้าโครง และตั้ง ค่าเนื้อหา ให้ จบ

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

ตั้งค่าช่องว่างภายในสูงสุดเป็น 100% ใช้การขยาย 25px ไปทางซ้ายและขวา

เพิ่มเนื้อหาในกลุ่มแรก

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

นำทางไปยัง แท็บการออกแบบ ขยายเมนูดรอปดาวน์ สาย และเปลี่ยนสีเป็น #FFFFFF

ถัดไปขยายแท็บการปรับขนาด ตั้ง ค่าน้ำหนักตัวแบ่ง เป็น 4px และ ความกว้าง เป็น 15%

ถัดไปเพิ่ม โมดูลหัวเรื่อง ในกลุ่ม ให้ หัวเรื่อง ชื่อ

สลับไปที่ แท็บการออกแบบ ภายใต้ ข้อความหัวเรื่อง ตั้งค่า ระดับหัวเรื่อง เป็น H2 (หรือส่วนหัวอื่น ๆ ที่คุณต้องการ) เลือก อินเตอร์ สำหรับ ตัวอักษรหัวเรื่อง เลือก แสง สำหรับ น้ำหนักตัวอักษร #FFFFFF สำหรับ สีข้อความหัวเรื่อง และ 2EM สำหรับ ขนาดข้อความหัว

ก่อนที่จะทำซ้ำกลุ่มของเราลองกลับไปที่แท็บการออกแบบและปรับ ช่องว่างแนวตั้ง เป็น 10px สิ่งนี้จะกำจัดพื้นที่แนวตั้งที่ไม่จำเป็นระหว่างโมดูล

การเพิ่มกลุ่มเพิ่มเติม

ตอนนี้กลุ่มแรกของเราได้รับการออกแบบเราสามารถคัดลอกกลุ่มสไตล์และเพียงแค่สลับเนื้อหาของเรา (ภาพพื้นหลังและชื่อเรื่อง) สำหรับม้าหมุน ทำซ้ำกลุ่มแปดครั้งและเราจะมีเก้าสไลด์ทั้งหมด

หลังจากทำซ้ำกลุ่มแล้วม้าหมุนกลุ่มของคุณควรมีลักษณะเช่นนี้

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

คลิกที่กลุ่มที่ 2 ในม้าหมุน ขยาย แท็บพื้นหลัง และแทนที่ภาพด้วยภาพใหม่

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

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

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

การปรับแต่งกลุ่มและกลุ่มที่ใช้งานอยู่

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

ตอนนี้เราได้สร้างม้าหมุนเป็นกลุ่มมุ่งหน้าไปที่ แท็บการออกแบบ ในการตั้งค่าของม้าหมุนหลัก

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

ขยาย แท็บพื้นหลัง เราจะใช้การไล่ระดับสีแสงกับแท็บที่ไม่ได้ใช้งานเพื่อให้แน่ใจว่าข้อความนั้นชัดเจน ตั้งค่า การไล่ระดับสีครั้งแรก เป็น #000000 ด้วย ความทึบ 0% ปรับแถบเลื่อนเล็กน้อยทางด้านขวา เปิดใช้งาน สถานที่ไล่ระดับสีเหนือภาพพื้นหลัง สลับ

ตั้งค่า การไล่ระดับสีที่ 2 เป็น #000000 ด้วย ความทึบ 40%

เปิดใช้งาน สถานที่ไล่ระดับสีเหนือภาพพื้นหลัง สลับ

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

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

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

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

ปรับแต่งเค้าโครงที่ตอบสนอง

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

เปิดใช้งานจุดพักที่คุณต้องการและคลิก บันทึก เพื่อดำเนินการต่อ

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

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

เมื่อเสร็จแล้วม้าหมุนกลุ่มของคุณควรมีลักษณะคล้ายกับวิดีโอด้านล่าง

แค่ไหน! การสร้างม้าหมุนกลุ่มใน Divi 5 นั้นตรงไปตรงมาและให้ผลลัพธ์ที่น่าเหลือเชื่อ

บูรณาการกับตัวสร้างลูปของ Divi 5

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

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

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

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

ตัวอย่างโลกจริงของโมดูลม้าหมุนกลุ่ม

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

ตัวเลื่อนแบบเต็มความกว้าง / เต็มหน้าจอ

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

สมาชิกในทีม Showcase

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

หมวดหมู่โชว์

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

คำรับรอง

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

การดาวน์โหลด

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

ปลดล็อกความเป็นไปได้ที่สร้างสรรค์ด้วยโมดูล Carousel ของ Divi 5

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

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