Une animation titre avec Divi

Si vous désirez faire une animation sur votre titre Divi ou sous-titres, c’est très simple.

Vous pourrez alors réaliser ce genre d’effets sur texte :

Petit bémol, il faut acheter un plugin pour Divi mais il comprend d’autres effets de texte bien sympathiques.

  1. Télécharger et installer Divi Next Text
  2. Comment ça marche ?
  3. Paramétrer le titre et l’animation

Le plugin coûte $29 soit environ 27,55 € à l’heure où j’écris cet article.

Télécharger et installez le plugin Divi Next Text Plugin

Rendez-vous sur divinext.com et téléchargez le fichier d’archive.

Dans votre back-office WordPress, allez sur Extensions puis Ajouter, puis cliquez sur Téléverser une extension :

Choisissez l’archive sur votre pc ou mac. Et installez.

Activez le plugin.

Comment marche le plugin Divi Next Text ?

Ensuite, c’est très facile. De nouveaux modules sont apparus dans la bibliothèque de modules de Divi.

Il suffit alors de cliquer sur le module Text Animation :

Paramétrer votre module Text Animation

Vous pouvez ajouter du texte avant et après l’animation. Ce sera du côté de Before Text et After Text.

Les textes qui doivent être animés se trouvent dans la partie Animation Text, cliquez sur le + afin d’ajouter de nouveaux textes à afficher. C’est donc ici vous trouverez l’animation du titre Divi.

Pour la partie SEO, faites bien attention à choisir le bon type de texte (Titre, sous-titre ou paragraphe).

Il y a plein d’animations différentes, choisissez dans le menu déroulant Select Animation Effect l’effet qui vous plaît le plus :

Retrouvez sur cette page toutes les animations comme exemple.

Concernant les marges internes ou externes (padding ou margin), il faudra mettre un peu de CSS. Comment ? Mettez un id dans la partie avancée de votre module Text Animation. Ensuite, dans le CSS de votre page, vous pouvez aller jouer sur le children de votre module.

Exemple :

#titreAnime H2 {
    margin-top: 10px;
    margin-bottom: 0px;
}

D’autres effets sur les textes sont possibles avec ce module, ils feront l’objet d’autres articles.

Pour comprendre la différence entre Divi et Elementor, c’est ici.