skip to Main Content

Comment créer une zone super hero ayant un texte animé

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

Ce tutoriel, viens en complément à un tutoriel que nous avons réalisé il y’a de cela quelque jours. Nous vous avons en effet montré comment ajouter un texte défilant dans une colonne sur Divi. Aujourd’hui, nous allons vous montrer comment utiliser la même technique, pour ajouter sur une section « super hero » (expression utilisée pour décrire une grande zone d’une page web conçu pour attirer de l’attention et mettre certains éléments en avant).

Commençons.

Ajouter la mise en page prédéfinie

Pour ajouter la mise en page à votre page, ouvrez le menu des paramètres au bas du constructeur Divi et cliquez sur le symbole plus. Dans la fenêtre contextuelle de chargement depuis la bibliothèque, sélectionnez le pack de disposition de recruteur de travaux. Cliquez ensuite pour utiliser la présentation de la page d’accueil.

Supprimer du contenu supplémentaire avec la mise en page

Une fois que la présentation a été chargée sur la page, déployez le mode d’affichage filaire et supprimez tout le contenu de la présentation, à l’exception de l’en-tête pleine largeur et de la section située juste en dessous.

Création de l’animation de texte de sélection

Comme vous pouvez le constater, le mot «embauché» est déjà utilisé comme élément de conception de texte volumineux dans un module de texte de la deuxième section. Nous allons transformer ce module de texte en un élément de conception de haut-parleur de texte réactif. La clé pour que le rectangle de texte soit réactif est de s’assurer que la ligne et le module de texte couvrent toute la largeur de la fenêtre du navigateur. Nous pouvons le faire en utilisant une largeur de 100%. Ensuite, nous pouvons utiliser l’unité de longueur vw pour la taille du texte. Cela rendra le texte bien adapté à la largeur du navigateur. Après cela, nous appliquerons les mêmes principes que ceux utilisés précédemment pour illustrer notre exemple de texte défilant simple.

Voici comment le faire.

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

Mettre à jour les paramètres de la ligne

Comme mentionné précédemment, la ligne doit avoir une valeur de 100% pour que la conception de cette sélection de texte réactive puisse fonctionner. Cela permet à notre module texte d’utiliser des unités de longueur vw relatives à la largeur du navigateur. Puisque notre mise en page prédéfinie a déjà une ligne avec 100% de largeur, nous n’avons rien à faire.

Cependant, nous devons ajuster le reste des paramètres comme suit.

  • Marge: -24vw en bas
  • Transformer traduire l’axe Y: -24vw
  • Débordement horizontal: masqué
  • Débordement vertical: masqué

La marge inférieure négative consiste à supprimer l’espace négatif qui reste chaque fois que nous déplaçons la ligne à l’aide de la commande transform translate. Et nous devons masquer le débordement de la ligne pour notre effet de texte de sélection.

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 ]

Mettre à jour la conception de texte du module de texte

Maintenant, il ne vous reste plus qu’à mettre à jour le module de texte pour le convertir en un grand élément de conception de texte.

Ouvrez le module de texte et mettez à jour les éléments suivants:

  • Couleur du texte du texte: rgba (255,255,255,0.16)
  • Taille du texte du texte: 36vw
  • Marge: -100% à gauche, 100% à droite

La taille du texte utilise une unité de longueur vw, de sorte que le texte s’adapte bien à la largeur du navigateur.

Ajouter une animation au module de texte

  • Style d’animation: Slide
  • Direction d’animation: gauche
  • Durée de l’animation: 10000ms
  • Intensité de l’animation: 100%
  • Animation de la courbe de vitesse: linéaire
  • Animation Repeat: Boucle

Conception finale

Maintenant, vérifiez la conception finale.

Dernières pensées

Les zones de texte peuvent être un outil pratique pour la conception Web. Ils ne sont pas limités à fonctionner uniquement comme téléscripteurs. Ils peuvent également ajouter un élément d’animation intéressant à votre conception Web. Et le meilleur, c’est que Divi facilite la création et la conception de toutes sortes de belles choses. J’espère que ce didacticiel vous aidera à créer des textes de sélection simples chaque fois que vous en aurez besoin.

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]

J’espère avoir de vos nouvelles dans les commentaires.

À votre santé !

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