Comment ajouter des animations de blocs de texte CSS à votre titre avec Divi
Publié: 2020-01-25Votre titre est l'une des parties les plus importantes de votre page d'accueil. C'est généralement la première copie que les gens lisent, ce qui en fait leur 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 cet article. Dans ce tutoriel, nous allons vous montrer 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 !
Allons-y.
Aperçu
Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.
Bureau
Mobile
Téléchargez GRATUITEMENT la mise en page de l'animation du bloc de texte
Pour mettre la main sur la mise en page d'animation de bloc de texte gratuite, vous devrez d'abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Commençons à recréer !
Ajouter la section #1
Fond dégradé
Commencez par ajouter une section normale à 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 : #ff0f2b
- Couleur 2: #c10b1a
- Type de dégradé : Linéaire
- Direction du dégradé : 63 deg
Espacement
Passez à l'onglet de conception de la section et appliquez les valeurs de remplissage haut et bas personnalisées suivantes sur différentes tailles d'écran :
- Rembourrage supérieur : 7vw (ordinateur de bureau), 20vw (tablette), 25vw (téléphone)
- Rembourrage inférieur : 7vw (ordinateur de bureau), 20vw (tablette), 25vw (téléphone)
Frontière
Ajoutez également une bordure à la section.
- Largeur de la bordure : 2vw (haut, gauche, droite)
- Largeur de la bordure inférieure : 0vw
- Couleur de la bordure : #ffffff
Ajouter une nouvelle ligne
Structure des colonnes
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 maximale : 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
Basculez vers 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">Ready</div> <div id="word-2" class="display-state">to</div> <div id="word-3" class="display-state">Build</div> <div id="word-4" class="display-state">Beautiful</div> <div id="word-5" class="display-state">Websites?</div></h1>
Paramètres de texte H1
Passez à l'onglet conception du module et modifiez les paramètres du texte H1 en conséquence :
- Police de titre : Work Sans
- Poids de la police d'en-tête : moyen
- Couleur du texte du titre : #ffffff
- Taille du texte de l'en-tête : 4vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)
- Hauteur de la ligne de cap : 1,4 em
Espacement
Ensuite, modifiez les valeurs de marge sur différentes tailles d'écran.
- Marge de gauche : 20vw (ordinateur de bureau et tablette), 15vw (téléphone)
- Marge droite : 35vw (ordinateur de bureau), 20vw (tablette), 15vw (téléphone)
Ajouter un module de code à la colonne
Insérer le code CSS
Pour que l'animation du bloc de texte s'applique à notre titre, nous aurons besoin de code CSS. Nous allons ajouter 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 bouton à la colonne
Ajouter une copie
Le prochain module dont nous avons besoin est un module de bouton. Entrez une copie de votre choix.
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 (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
- Couleur du texte du bouton : #ffffff
- Couleur d'arrière-plan du bouton : #000000
- Largeur de la bordure du bouton : 0px
- Police des boutons : 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 (ordinateur de bureau),
- Marge de gauche : 20vw (ordinateur de bureau et tablette), 15vw (téléphone)
- Rembourrage supérieur : 1.2vw (ordinateur de bureau), 2vw (tablette), 4vw (téléphone)
- Rembourrage inférieur : 1.2vw (ordinateur de bureau), 2vw (tablette), 4vw (téléphone)
- Rembourrage gauche : 1.8vw (ordinateur de bureau), 3vw (tablette), 6vw (téléphone)
- Rembourrage droit : 1.8vw (ordinateur de bureau), 3vw (tablette), 6vw (téléphone)
Animation
Personnalisez également les paramètres d'animation.
- Style d'animation : Retourner
- 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 :
- 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 la section et supprimez le rembourrage supérieur par défaut.
- Rembourrage supérieur : 0px
Ajouter une nouvelle ligne
Structure des colonnes
Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur du conteneur de section.
- Largeur : 100 %
- Largeur maximale : 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 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 (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
- Hauteur de la ligne de texte : 2,6 em
Espacement
Ajoutez également des valeurs d'espacement personnalisées sur différentes tailles d'écran.
- Marge supérieure : -5vw (ordinateur de bureau), -20vw (tablette), -27vw (téléphone)
- Marge gauche : 20vw (ordinateur de bureau), 13vw (tablette), 8vw (téléphone)
- Marge droite : 20vw (ordinateur de bureau), 13vw (tablette), 8vw (téléphone)
- Rembourrage supérieur : 5vw (ordinateur de bureau), 7vw (tablette et téléphone)
- Rembourrage inférieur : 5vw (ordinateur de bureau), 7vw (tablette et téléphone)
- Rembourrage gauche : 3vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)
- Rembourrage droit : 3vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)
Boîte ombre
Et complétez les réglages du module en appliquant une subtile ombre de boîte. C'est ça!
- Force de flou d'ombre de boîte : 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.
Bureau
Mobile
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 commentaires ci-dessous.
Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.