skip to Main Content

Comment ajouter une animation bloc de texte à vos titres sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 701.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Votre titre est l’une des parties les plus importantes de votre page d’accueil. C’est généralement ce que l’on voit en premier, et donc ce qui determine la première impression. Comme toute autre première impression, vous voulez qu’elle soit bonne. Maintenant, si vous cherchez un moyen créatif de présenter votre titre, vous apprécierez ce tutoriel, car nous vous montrerons comment ajouter des animations de blocs de texte CSS à votre titre et vous pourrez également télécharger gratuitement le fichier JSON de la mise en page!

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d’œil au résultat sur différentes tailles d’écran.

Titre animé apercu tutoriel divi

Commençons la conception

Ajouter la section # 1

Fond dégradé

Commencez par ajouter une section régulière à une nouvelle page ou à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et appliquez l’arrière-plan dégradé suivant:

  • Couleur 1: # f0f2b
  • Couleur 2: #c10b1a
  • Type de dégradé: linéaire
  • Direction du dégradé: 63deg
Configuration des sections divi

Espacement

Passez à l’onglet de conception de la section et appliquez les valeurs de remplissage supérieur et inférieur personnalisées suivantes sur différentes tailles d’écran:

  • Rembourrage supérieur: 7vw (bureau), 20vw (tablette), 25vw (téléphone)
  • Rembourrage inférieur: 7vw (bureau), 20vw (tablette), 25vw (téléphone)
Configuration espacement section divi

Frontière

Ajoutez également une bordure à la section.

  • Largeur de bordure: 2vw (haut, gauche, droite)
  • Largeur de bordure inférieure: 0vw
  • Couleur de la bordure: #ffffff
Configuration bordure section divi

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante:

Configuration mise en page colonne divi

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence:

  • Largeur: 100%
  • Largeur max: 100%
Configuration largeur colonne divi

Ajouter un module de texte à la colonne

Ajouter du contenu H1

Ensuite, ajoutez un module de texte avec un titre H1 de votre choix.

Ajouter un module texte à la colonne 1 divi

Ajouter des balises Div à chaque mot dans le titre H1

Passez à l’onglet texte de votre copie de titre et ajoutez un div différent à chaque mot de votre titre. L’ID CSS doit être différent pour chaque mot.

<h1> <div id = ”word-1 ″ class =” display-state ”> Prêt </div>
<div id =” word-2 ″ class = ”display-state”> à </div>
<div id = « Word-3 ″ class = » display-state « > Build </div>
<div id = » word-4 ″ class = « display-state »> Beau </div>
<div id = « word-5 ″ class = « display-state »> Sites Web? </div> </h1>

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Ajouter des balises module texte divi

Paramètres de texte H1

Passez à l’onglet de conception du module et modifiez les paramètres de texte H1 en conséquence:

  • Police de titre: Work Sans
  • Poids de la police de titre: moyen
  • Couleur du texte de l’en-tête: #ffffff
  • Taille du texte de l’en-tête: 4vw (bureau), 5vw (tablette), 6vw (téléphone)
  • Hauteur de la ligne de tête: 1,4 em
Parametre titre 1 divi

Espacement

Ensuite, modifiez les valeurs de marge sur différentes tailles d’écran.

  • Marge gauche: 20vw (bureau et tablette), 15vw (téléphone)
  • Marge droite: 35vw (bureau), 20vw (tablette), 15vw (téléphone)
Configuration espacement module texte divi

Ajouter un module de code à la colonne

Insérer du code CSS

Pour que l’animation de bloc de texte s’applique à notre titre, nous aurons besoin de code CSS. Nous ajouterons ce code CSS à un nouveau module de code.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Coller du code css divi

Espacement

Passez à l’onglet de conception du module et supprimez tout le rembourrage inférieur par défaut.

  • Marge inférieure: 0px
Personnaliser les mages module divi

Ajouter un module de boutons à la colonne

Ajouter une copie

Le prochain module dont nous avons besoin est un module de boutons. Entrez une copie de votre choix.

Faire une copie du module boton divi

Paramètres des boutons

Passez à l’onglet de conception du module et modifiez les paramètres des boutons en conséquence:

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 000000
  • Largeur de bordure de bouton: 0px
Paramètre du module bouton divi
  • Police du bouton: Work Sans
Modifier police bouton divi

Espacement

Ensuite, accédez aux paramètres d’espacement et appliquez des valeurs de marge et de remplissage personnalisées sur différentes tailles d’écran.

  • Marge supérieure: 3vw (bureau),
  • Marge gauche: 20vw (bureau et tablette), 15vw (téléphone)
  • Rembourrage supérieur: 1.2vw (bureau), 2vw (tablette), 4vw (téléphone)
  • Rembourrage inférieur: 1.2vw (bureau), 2vw (tablette), 4vw (téléphone)
  • Rembourrage gauche: 1.8vw (bureau), 3vw (tablette), 6vw (téléphone)
  • Rembourrage droit: 1.8vw (bureau), 3vw (tablette), 6vw (téléphone)
Configuration espacement bouton divi

Animation

Personnalisez également les paramètres d’animation.

  • Style d’animation: Flip
  • Direction de l’animation: vers le bas
  • Délai d’animation: 2000 ms
  • Intensité de l’animation: 100%
  • Opacité de démarrage de l’animation: 100%
  • Courbe de vitesse d’animation: facilité-in-out
  • Répétition de l’animation: une fois
Personnalisation animation module texte divi

Ajouter la section # 2

Continuez en ajoutant une nouvelle section régulière juste en dessous de la précédente.

Ajouter une nouvelle section divi

Espacement

Ouvrez les paramètres de section et supprimez le rembourrage supérieur par défaut.

  • Rembourrage supérieur: 0px
Configurer espacement section divi

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante:

Ajouter une nouvelle colonne section divi

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et laissez la ligne occuper toute la largeur du conteneur de section.

  • Largeur: 100%
  • Largeur max: 100%
Dimensionnement section divi

Ajouter un module de texte à la colonne

Ajouter du contenu

Ensuite, ajoutez un module de texte avec un contenu de description de votre choix.

Réglages texte module divi

Couleur de l’arrière plan

Ajoutez une couleur de fond blanc.

  • Couleur d’arrière-plan: #ffffff
Conifguration couleur police divi

Paramètres de texte

Passez à l’onglet de conception du module et modifiez les paramètres de texte en conséquence:

  • Police du texte: Work Sans
  • Couleur du texte: # 9b9b9b
  • Taille du texte: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Hauteur de la ligne de texte: 2.6em
Configuration police titre divi

Espacement

Ajoutez également des valeurs d’espacement personnalisées sur différentes tailles d’écran.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

  • Marge supérieure: -5vw (bureau), -20vw (tablette), -27vw (téléphone)
  • Marge gauche: 20vw (bureau), 13vw (tablette), 8vw (téléphone)
  • Marge droite: 20vw (bureau), 13vw (tablette), 8vw (téléphone)
  • Rembourrage supérieur: 5vw (bureau), 7vw (tablette et téléphone)
  • Rembourrage inférieur: 5vw (bureau), 7vw (tablette et téléphone)
  • Rembourrage gauche: 3vw (bureau), 5vw (tablette), 6vw (téléphone)
  • Rembourrage droit: 3vw (bureau), 5vw (tablette), 6vw (téléphone)
Configuration espacement section module divi

Boîte ombre

Et complétez les paramètres du module en appliquant une ombre subtile de boîte. C’est ça!

  • Box Shadow Blur Strength: 50px
  • Couleur de l’ombre: rgba (0,0,0,0,1)
Configuration ombre module texte divi

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Resultat final divi tutoriel

Dernières pensées

Dans cet article, nous vous avons montré comment ajouter des animations de blocs de texte CSS à votre titre. Il est important de vous assurer que votre titre est visible et lu depuis le début, l’ajout d’une animation à votre titre peut certainement vous aider! Vous avez également pu télécharger gratuitement le fichier JSON de la mise en page. Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

Traduit Depuis : ElegantThemes

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top