ไฮไลท์ปลั๊กอิน Divi: สุดยอดโปรแกรมเสริมตัวสร้าง Divi

Divi Builder Addons เป็นปลั๊กอินของบุคคลที่สามที่เพิ่มสคริปต์ jQuery จำนวนมากที่ใช้โดยเว็บไซต์ระดับไฮเอนด์ใน Divi Builder เพียงสลับสคริปต์ที่คุณต้องการและเพิ่มคลาส CSS ลงในโมดูล Divi Builder ใช้งานง่ายและมีคุณสมบัติและแอนิเมชั่นมากมาย

สุดยอดเมนูเสริม Divi Builder

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ รายการเมนูใหม่ถูกเพิ่มลงในเมนูแดชบอร์ดที่เรียกว่า Ultimate Divi Builder Addons การคลิกที่นี่จะเปิดหน้าจอที่มีคุณสมบัติมากมายในหน้าต่างด้านซ้าย การคลิกที่รายการใดรายการหนึ่งจะแสดงการสลับและข้อมูลในหน้าต่างด้านขวา หน้าต่างด้านขวายังมีคลาส CSS สำหรับเอฟเฟกต์บางส่วนและแสดงวิธีใช้งาน อื่นๆ รวมถึงการสลับหลายปุ่มสำหรับคุณสมบัติและตัวเลือกเพิ่มเติม เช่น สี ขนาดรูปภาพ ระยะเวลา ฯลฯ ทั้งหมดจะถูกปิดใช้งานตามค่าเริ่มต้น

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

คุณสมบัติรวมถึง:

• แถบเลื่อนแบบกำหนดเอง
• DoSlide แนวนอน
• จางหายไปในมุมมอง
• พลิกข้อความ
• ซ่อนส่วนหัวของธีม Divi เมื่อเลื่อนลง
• jQuery Pagefipping การเลื่อนแนวตั้ง
• jQuery Pagefipping การเลื่อนแนวนอน
• jQuery Scrollflow
• jQuery ScrollFX
• jQuery ScrollTrigger
• กล่องหน้าท้าย jQuery
• กำลังโหลดส่วนหัวขณะเลื่อนเอฟเฟกต์1
• กำลังโหลดส่วนหัวขณะเลื่อนเอฟเฟกต์2
• กำลังโหลดส่วนหัวขณะเลื่อนเอฟเฟกต์3
• กำลังโหลดส่วนหัวขณะเลื่อนเอฟเฟกต์4
• นิเมชั่นผู้เปิดเผย
• ScrollMagic Responsive Duration
• ScrollReveal
• StickyStack: jQuery Stacking Effect
• เลื่อน Windows
• ตัวหมุนข้อความแบบง่ายสุด ๆ / Ticker
• ว้าว แอนิเมชั่น

สุดยอด Divi Builder Addons ตัวอย่าง

ต่อไปนี้คือตัวอย่างฟีเจอร์บางส่วนเมื่อใช้กับเลย์เอาต์ Divi

แถบเลื่อนแบบกำหนดเอง

Custom Scroll Bar ให้คุณวางแถบเลื่อนบนเนื้อหาของคุณ มี 8 เอฟเฟกต์ที่แตกต่างกัน วางคลาส CSS ลงในฟิลด์คลาส CSS ของส่วน แถว หรือโมดูลที่คุณต้องการใช้เอฟเฟกต์ ในรายการนี้ ฉันได้เพิ่มเอฟเฟกต์แถบเลื่อนแบบกำหนดเองให้กับเนื้อหาของโมดูลข้อความในรูปแบบ Esports

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

นี่คือเอฟเฟกต์ 3 โดยจะเพิ่มลูกศรไปที่ด้านบนและด้านล่างของสไลด์

เอฟเฟกต์ 5 เปลี่ยนจุดจับจากเส้นเป็นจุดและเปลี่ยนรูปแบบของลูกศร

พลิกข้อความ

Flipping Text เป็นเอฟเฟกต์การพิมพ์ข้อความที่สร้างแอนิเมชั่นแนะนำตัว มันมี 5 เอฟเฟกต์ สำหรับตัวอย่างนี้ ฉันได้เพิ่ม Flipping Text ให้กับเลย์เอาต์ Paralegal นี่เป็นเอฟเฟกต์การพิมพ์ข้อความพลิกครั้งแรก มันพิมพ์ตัวอักษรทีละตัว มีหลายคลาสที่แตกต่างกันที่คุณสามารถใช้ได้ แต่ละประเภทด้วยความเร็วที่แตกต่างกัน

jQuery ScrollFlow

jQuery Scroll Flow เพิ่มแอนิเมชั่นการเลื่อนให้กับแถวหรือโมดูล มี 5 แอนิเมชั่น ฉันได้เพิ่มอันนี้ในแถวในเลย์เอาต์ Paralegal เพื่อให้มีผลกับโมดูลทั้งหมดด้วยกัน คุณยังสามารถเพิ่มลงในโมดูลเพียงโมดูลเดียวในแถวเพื่อให้เข้าที่เพื่อให้พอดีกับเนื้อหาที่เหลือที่มีอยู่แล้ว

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

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

jQuery ScrollFX

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

เมื่อคุณเลื่อนผ่าน เนื้อหาของส่วนจะลดขนาดลงและลดความทึบลง

jQuery Scroll Trigger

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

เนื้อหาทั้งหมดรวมถึงรูปภาพ ปุ่ม ข้อความ ฯลฯ จะเลื่อนเข้าที่เมื่อคุณไปยังส่วนนั้น

แล้วมันก็ตกลงเมื่อทุกอย่างเข้าที่

กล่องหน้าท้าย jQuery

jQuery End Page Box วางกล่องที่อยู่ด้านล่างสุดของหน้าจอ สร้างขึ้นโดยการเพิ่มโค้ดลงในโมดูลข้อความที่ส่วนท้ายของส่วน

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

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

กำลังโหลดส่วนหัวขณะเลื่อน

Loading Header while Scrolling เพิ่มแถบไปยังเมนูที่แสดงจำนวนหน้าที่คุณเคยดู ไม่ต้องการคลาส CSS คุณสามารถปรับแต่งสีของแถบเลื่อนได้ มีสี่สไตล์ให้เลือก

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

นี่คือเอฟเฟกต์ 2 ซึ่งแสดงแถบที่กว้างกว่ามาก

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

เอฟเฟกต์ 4 ใช้ความกว้างของโลโก้

ผู้เปิดเผย

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

มันเคลื่อนไหวบนหน้าจอตามคลาสที่คุณเลือก อันนี้มีตัวเลือกแอนิเมชั่นมากมาย ทั้งเฟด หมุนซ้าย หมุนขวา เลื่อนซ้าย เลื่อนขวา เลื่อนขึ้น เลื่อนลง ซูมเข้า และซูมออก

ผ้าเช็ดทำความสะอาดมาตราเลื่อนวิเศษ

Scroll Magic Section Wipes สร้างแอนิเมชั่นที่จะล้างเนื้อหาลงบนหน้าจอเมื่อคุณเลื่อน ฉันคิดว่านี่เป็นเอฟเฟกต์ที่ฉันชอบที่สุด มันถูกเพิ่มไปยังส่วน

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

เลื่อนเปิดเผย

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

นี่คือเอฟเฟกต์ 1f แถวจะหมุนเข้าที่เมื่อคุณเลื่อนไปที่แถวนั้น

StickyStack: jQuery Stacking Effect

StickyStack: jQuery Stacking Effect สแต็คพาเนลเมื่อไปถึงด้านบนสุดของวิวพอร์ต กล่าวอีกนัยหนึ่ง ทุกส่วนค้างบนหน้าจอเมื่อคุณเลื่อน และส่วนถัดไปจะเลื่อนเพื่อทับซ้อน ผลลัพธ์ดูน่าทึ่งเมื่อเลื่อนดู นี่คือเลย์เอาต์การบริหารความเสี่ยง

นี่คือส่วนอื่นของหน้าเดียวกัน ส่วนที่ทับซ้อนกันทำงานได้อย่างสมบูรณ์

ตัวหมุนข้อความแบบง่ายสุด ๆ / Ticker

Super Simple Text Rotator/Ticker ให้คุณเพิ่มมาร์กอัปในข้อความและหมุนคำได้หลายคำ มีรูปแบบแอนิเมชั่น 5 แบบ อันนี้สลับไปมาระหว่างคำว่า Simple และ Customizable

ที่นี่จะหมุนเพื่อแสดงคำที่สอง ทั้งสองคำจางหายไป

สุดยอด Divi Builder Addons ราคา

Ultimate Divi Builder Addons คือ $59 สำหรับการใช้งานบนเว็บไซต์ไม่จำกัดและรวมถึงการอัปเดตตลอดอายุการใช้งาน การอัปเดตมักจะเพิ่มคุณสมบัติใหม่ คุณสามารถลองใช้การสาธิตได้ฟรีเพื่อดูว่าคุณชอบหรือไม่

• คุณสามารถซื้อส่วนเสริม Ultimate Divi Builder ได้จาก DiviBuilderAddons.com

จบความคิด

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

บางรายการอาจแสดงได้ยากกว่าหากไม่เติมบทความนี้ด้วย GIF ขนาดใหญ่ ตัวอย่างเช่น Wow Animation มีแอนิเมชั่น 75 แบบให้เลือก และคุณสามารถเปลี่ยนการหน่วงเวลา ระยะเวลา ระยะทาง และจำนวนครั้งที่ทำซ้ำได้

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

หากคุณสนใจวิธีง่ายๆ ในการเพิ่มฟีเจอร์และแอนิเมชั่นมากมายให้กับ Divi โปรแกรมเสริม Ultimate Divi Builder ก็คุ้มค่าที่จะลองดู

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

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