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 600.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.

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

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)

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

Ajouter une nouvelle ligne

Structure de colonne

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

Dimensionnement

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

  • Largeur: 100%
  • Largeur max: 100%

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 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 ]

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

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)

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>

Espacement

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

  • Marge inférieure: 0px

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.

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]

Paramètres des boutons

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

  • 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
  • Police du bouton: Work Sans

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)

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

Ajouter la section # 2

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

Espacement

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

  • Rembourrage supérieur: 0px

Ajouter une nouvelle ligne

Structure de colonne

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

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%

Ajouter un module de texte à la colonne

Ajouter du contenu

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

Couleur de l’arrière plan

Ajoutez une couleur de fond blanc.

  • Couleur d’arrière-plan: #ffffff

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

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)

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)

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.

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
2 Partages
Partagez2
Tweetez
Enregistrer