Point culminant du plugin Divi: Addons Ultimes Divi Builder

Divi Builder Addons est un plugin tiers qui ajoute de nombreux scripts jQuery utilisés par les sites Web haut de gamme au Divi Builder. Basculez simplement les scripts que vous souhaitez et ajoutez les classes CSS aux modules Divi Builder. Il est facile à utiliser et comprend de nombreuses fonctionnalités et animations.

Menu des modules complémentaires Ultimate Divi Builder

Téléchargez et activez le plugin comme d'habitude. Un nouvel élément de menu est ajouté au menu du tableau de bord appelé Ultimate Divi Builder Addons. En cliquant dessus, vous ouvrez un écran avec de nombreuses fonctionnalités dans la fenêtre de gauche. En cliquant sur l'un d'eux, une bascule et des informations s'affichent dans la fenêtre de droite. La fenêtre de droite comprend également des classes CSS pour certains des effets et montre comment les utiliser. D'autres incluent plusieurs bascules pour plus de fonctionnalités et d'options telles que les couleurs, les tailles d'image, les durées, etc. Elles sont toutes désactivées par défaut.

Les fonctionnalités affichées en violet sont activées, tandis que celles qui sont grisées sont désactivées. Dans l'exemple ci-dessus, la fonctionnalité inclut d'autres options ainsi qu'une classe CSS. Toutes les informations dont vous avez besoin sur la façon d'utiliser une fonctionnalité particulière sont affichées dans la fenêtre de droite lorsque vous cliquez dessus.

Les fonctionnalités incluent:

• Barre de défilement personnalisée
• DoSlide horizontal
• Fondu dans la vue
• Retourner le texte
• Masquer l'en-tête du thème Divi lors du défilement vers le bas
• Défilement vertical jQuery Pagefipping
• Défilement horizontal jQuery Pagefipping
• jQuery Scrollflow
• jQuery ScrollFX
• jQuery ScrollTrigger
• Zone de fin de page jQuery
• Chargement de l'en-tête pendant le défilement de l'effet1
• Chargement de l'en-tête pendant le défilement d'Effet2
• Chargement de l'en-tête pendant le défilement de l'effet3
• Chargement de l'en-tête pendant le défilement de l'effet4
• Animation révélatrice
• Durée de réponse de ScrollMagic
• Faire défilerRévéler
• StickyStack : effet d'empilement jQuery
• Fenêtres défilantes
• Rotateur/ticker de texte super simple
• Waouh Animations

Exemples d'extensions Ultimate Divi Builder

Voici quelques exemples de fonctionnalités lorsqu'elles sont utilisées avec les mises en page Divi.

Barre de défilement personnalisée

Barre de défilement personnalisée vous permet de placer des barres de défilement sur votre contenu. Il a 8 effets différents. Collez la classe CSS dans le champ Classe CSS de la section, de la ligne ou du module où vous souhaitez utiliser l'effet. Dans celui-ci, j'ai ajouté un effet de barre de défilement personnalisé au contenu du module de texte dans la mise en page Esports.

Une barre de défilement apparaît maintenant au survol afin que je puisse faire défiler pour voir plus de contenu dans le même espace. C'est l'effet 1. Il a un design différent sur le site en direct. J'ai éclairci le fond pour qu'il ressorte.

C'est l'effet 3. Il ajoute des flèches en haut et en bas de la diapositive.

L'effet 5 change la poignée d'une ligne en un point et change le style des flèches.

Retourner le texte

Le retournement de texte est un effet de saisie de texte qui crée une animation d'introduction à retardement. Il a 5 effets. Pour cet exemple, j'ai ajouté Flipping Text à la mise en page Paralegal. Il s'agit du premier effet de frappe de texte inversé. Il tape une lettre à la fois. Il existe plusieurs classes différentes que vous pouvez utiliser. Chacun tape à une vitesse différente.

jQuery ScrollFlow

jQuery Scroll Flow ajoute des animations de défilement aux lignes ou aux modules. Il a 5 animations. J'ai ajouté celui-ci à une ligne dans la disposition Paralegal afin qu'il affecte tous les modules ensemble. Vous pouvez également l'ajouter à un seul des modules de la rangée afin qu'il glisse en place pour s'adapter au reste du contenu déjà présent.

Lorsque je fais défiler jusqu'à la ligne, le contenu commence à s'afficher. Il est plus petit que la normale et son opacité est suffisamment basse pour permettre à l'arrière-plan d'apparaître.

Faire défiler un peu plus augmente la taille du contenu et l'opacité jusqu'à ce qu'il soit révélé dans sa pleine largeur et son opacité. Il diminue à nouveau au fur et à mesure que je remonte. Celui-ci reste aux mêmes emplacements, mais il a plusieurs autres classes afin que vous puissiez le faire glisser de la droite, de la gauche, ou glisser vers le haut ou vers le bas tout en ajustant sa taille et son opacité.

jQuery ScrollFX

jQuery ScrollFX redimensionne le texte et modifie l'opacité de l'arrière-plan. La classe scrollfx est ajoutée à la section. Les modules de cette section s'affichent normalement lorsque vous faites défiler jusqu'à eux et lorsqu'ils sont à l'écran.

Au fur et à mesure que vous les dépassez, le contenu de la section diminue en taille et en opacité.

Déclencheur de défilement jQuery

Le déclencheur de défilement jQuery fait glisser un module sur le défilement de la page. Ajoutez la classe de déclencheur de défilement à la section. C'est la disposition du Resort. L'image de fond est automatiquement déplacée sur le côté lorsque la classe est ajoutée.

Tout le contenu, y compris les images, les boutons, le texte, etc., se met en place lorsque vous accédez à cette section.

Et puis ça s'installe une fois que tout est en place.

Zone de fin de page jQuery

jQuery End Page Box place une boîte qui reste au bas de l'écran. Il est créé en ajoutant du code à un module de texte à la fin d'une section.

Cela ajoute une boîte qui apparaît au bas de l'écran et change pour afficher le contenu différent que vous spécifiez pour chaque section.

Voici la section suivante. La boîte glisse vers l'extérieur et l'intérieur dans différentes directions ou avec différentes animations pour chacune des sections.

Chargement de l'en-tête pendant le défilement

Le chargement de l'en-tête pendant le défilement ajoute une barre au menu qui indique la quantité de page que vous avez vue. Il ne nécessite pas de classe CSS. Vous pouvez personnaliser la couleur de la barre de défilement. Vous avez le choix entre quatre styles.

C'est l'effet 1. Il ajoute une ligne de défilement en haut de l'écran. Sa taille augmente au fur et à mesure que vous faites défiler, indiquant la partie de la page que le visiteur a vue.

C'est l'effet 2. Il affiche une barre beaucoup plus large.

C'est l'effet 3. Il grandit verticalement au fur et à mesure que vous faites défiler, prenant la hauteur du logo. Il ne devient pas très grand, mais il montre toujours l'effet de défilement.

L'effet 4 prend la largeur du logo.

Révélateur

Revealator ajoute des animations déclenchées par défilement aux sections, lignes ou modules. Il a près de 40 options. J'ajoute à un texte de présentation dans la mise en page de la boulangerie. Le texte de présentation est manquant jusqu'à ce que le conteneur soit entièrement visible à l'écran.

Il s'anime à l'écran en fonction de la classe que vous choisissez. Celui-ci propose de nombreuses options d'animation, notamment un fondu, une rotation à gauche, une rotation à droite, un glissement à gauche, un glissement à droite, un glissement vers le haut, un glissement vers le bas, un zoom avant et un zoom arrière.

Lingettes Scroll Magic Section

Scroll Magic Section Wipes crée une animation qui efface le contenu sur l'écran lorsque vous faites défiler. Je pense que c'est mon préféré de tous les effets. Il est ajouté à la section.

Une fois que cette section est entièrement affichée à l'écran, elle se fige et la section suivante défile dessus. Vous pouvez l'ajouter à autant de sections pour créer une méthode de défilement intéressante pour toute la page. Si vous souhaitez que chaque section se chevauche, la fonctionnalité StickyStack vous intéressera.

Faites défiler l'écran

Scroll Reveal révèle les modules sur le défilement. Choisissez parmi 17 animations différentes. Vous pouvez l'ajouter à des sections, des lignes ou des modules. La section en bas zoome vers le lecteur lors du défilement.

C'est l'effet 1f. La rangée se met en place lorsque vous faites défiler jusqu'à elle.

StickyStack : effet d'empilement jQuery

StickyStack : jQuery Stacking Effect empile les panneaux lorsqu'ils atteignent le haut d'une fenêtre. En d'autres termes, chaque section se fige à l'écran lorsque vous faites défiler et la section suivante défile pour la chevaucher. Le résultat est incroyable au défilement. Il s'agit de la disposition Gestion des risques.

Voici une autre section de la même page. Les portions qui se chevauchent fonctionnent parfaitement.

Rotateur/ticker de texte super simple

Super Simple Text Rotator/Ticker vous permet d'ajouter des balises au texte et de faire pivoter plusieurs mots. Il a 5 styles d'animation. Celui-ci tourne entre les mots Simple et Personnalisable.

Ici, il est tourné pour afficher le deuxième mot. Les deux mots apparaissent et disparaissent.

Prix ​​des addons Ultimate Divi Builder

Ultimate Divi Builder Addons coûte 59 $ pour une utilisation sur des sites Web illimités et comprend des mises à jour à vie. Les mises à jour ajoutent souvent de nouvelles fonctionnalités. Vous pouvez essayer une démo gratuitement pour voir si vous l'aimez.

• Vous pouvez acheter des addons Ultimate Divi Builder sur DiviBuilderAddons.com.

Mettre fin aux pensées

Ultimate Divi Builder Addons a beaucoup à offrir et peut vous faire gagner beaucoup de temps dans le développement de fonctionnalités et d'animations. J'ai été impressionné par le nombre de fonctionnalités incluses et leur facilité d'utilisation.

Certains sont plus difficiles à montrer sans remplir cet article avec de gros GIF. Par exemple, Wow Animation propose 75 animations parmi lesquelles choisir et vous pouvez modifier le délai, la durée, la distance et le nombre de répétitions.

Le plugin nécessite que vous soyez à l'aise pour coller une classe CSS dans une section, une ligne ou un module. Heureusement, c'est facile à faire et il y a beaucoup d'informations dans la documentation Divi sur le collage dans les classes CSS.

Si vous êtes intéressé par un moyen simple d'ajouter de nombreuses fonctionnalités et animations à Divi, Ultimate Divi Builder Addons vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé les addons Ultimate Divi Builder ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via GoodStudio / shutterstock.com