ไฮไลท์ปลั๊กอิน Divi: โมดูล Divi Carousel

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

การติดตั้งและเปิดใช้งานโมดูล Divi Carousel

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

โมดูล Divi Carousel ใน Divi Builder

โมดูลใหม่ถูกเพิ่มลงใน Divi Builder ชื่อ Divi Carousel

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

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

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

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

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

สำหรับการตั้งค่ารูปภาพ คุณสามารถใช้รูปภาพหรือไอคอนได้

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

ในรายการนี้ ฉันได้ปรับระยะห่างรายการเป็น 100 ความแตกต่างหลักที่แสดงในตัวอย่างของฉันคือข้อความ ตอนนี้แสดงคำต่อบรรทัดน้อยลง

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

ฉันได้ตั้งค่านี้เพื่อแสดงสองสไลด์ กำลังแสดงการนำทางแบบจุด

มาดูการตั้งค่าขั้นสูงกัน ฉันได้ตั้งค่าเอฟเฟกต์ตัวเลื่อนเป็น Coverflow แล้ว ซึ่งจะเปิดตัวเลือกการหมุนและเงา คุณลักษณะนี้แสดงสิ่งที่ทำให้โมดูลแตกต่างจากตัวเลื่อนมาตรฐาน นี่คือการตั้งค่าเริ่มต้น

ตอนนี้ฉันได้ตั้งค่าการหมุนเป็น 100 แล้ว สไลด์จะเอียงไปทางซ้ายมากขึ้นเป็น 3 มิติ โดยอยู่ห่างจากหน้าจอ

นี่คือการหมุนแบบเดียวกัน แต่ไม่มีเงา Coverflow

ตัวอย่างโมดูล Divi Carousel

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

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

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

อันนี้ใช้เอฟเฟกต์ตัวเลื่อนล้น นี่คือการตั้งค่าเริ่มต้น

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

อันนี้ตั้งค่าให้แสดง 3 สไลด์ ฉันตั้งค่าการหมุนเป็น 80

อันนี้ตั้งค่าให้แสดง 6 สไลด์ หมุนถูกตั้งค่าเป็นค่าเริ่มต้น (50)

อันนี้แสดง 6 สไลด์โดยไม่เปิดใช้งาน Center Slide หรือ Overflow

อันนี้แสดง 6 พร้อมเปิดใช้งาน Center Slide

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

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

อันนี้ใช้เอฟเฟกต์ Coverflow ฉันกำลังวางเมาส์เหนือสไลด์ด้านซ้ายเพื่อแสดงโอเวอร์เลย์และลูกศร

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

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

การแสดงหลายสไลด์จะตัดส่วนของไอคอนออก ซึ่งให้ภาพที่ดีเมื่อตัวเลื่อนเคลื่อนไหว

สำหรับตัวอย่างนี้ ฉันต้องการสร้างตัวเลื่อนตารางราคาอย่างง่าย ฉันลดความซับซ้อนของราคาจากแพ็คเลย์เอาต์ของสนามกอล์ฟ

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

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

ฉันได้เพิ่มลูกศรและจัดรูปแบบให้ตรงกับองค์ประกอบในเค้าโครง

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

ตอนนี้ฉันได้เพิ่มปุ่ม ฉันได้ปรับสไตล์ของปุ่มซึ่งรวมถึงสี รัศมีของเส้นขอบ ขนาดตัวอักษร และเพิ่มเงาของกล่องที่เข้ากับสไลด์

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

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

นอกจากนี้ยังใช้งานได้ดีกับ Extra ในตัวอย่างนี้ ฉันได้ตั้งค่าหน้าไม่ให้แสดงแถบด้านข้าง

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

ราคาโมดูลม้าหมุน Divi

Divi Carousel Module มีให้จากเว็บไซต์ของผู้พัฒนา มีสองตัวเลือกให้เลือก:

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

เอกสารประกอบและการสนับสนุนโมดูล Divi Carousel

เอกสารมีอยู่ในเมนูแดชบอร์ด DiviGear เลือกแท็บเอกสาร ซึ่งมีลิงก์ไปยังคำแนะนำแบบวิดีโอ 4 นาทีบนช่อง DiviGear YouTube การสนับสนุนตั๋วให้บริการผ่าน Freshdesk

จบความคิด

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

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

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

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

ภาพเด่นผ่าน Anatolier / shutterstock.com