Comment concevoir un masque de texte avec une animation d'arrière-plan sur le défilement dans Divi
Publié: 2020-08-16Les conceptions de masque de texte sont étonnamment faciles à créer à l'aide des options intégrées de Divi. Le générateur a tous les ingrédients pour créer un effet de masque de texte, y compris des options pour les styles de texte, les arrière-plans et les modes de fusion. En fait, nous avons déjà créé des masques de texte en utilisant des modes de fusion. Mais, avec les effets de défilement, nous pouvons amener les conceptions de masques de texte à un tout nouveau niveau.
Dans ce tutoriel, nous allons vous montrer comment concevoir un masque de texte avec animation de fond au défilement dans Divi. Le design est unique et l'effet de défilement le rend vraiment vivant.
Commençons!
Aperçu
Voici un aperçu des conceptions que nous allons construire dans ce tutoriel.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le 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 !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Concevoir un masque de texte avec animation de fond dans Divi
Ajouter une rangée
Pour lancer les choses, ajoutez une ligne à deux colonnes à la section régulière par défaut.
Mettre à jour les paramètres de la section
Avant d'ajouter des modules, ouvrez les paramètres de la section et mettez à jour la couleur d'arrière-plan et le remplissage comme suit :
- Couleur d'arrière-plan : #750046
- Remplissage : 0px en haut, 0px en bas
Mettre à jour les paramètres de ligne
Une fois les paramètres de section définis, ouvrez les paramètres de la ligne et mettez à jour les paramètres de conception suivants :
- Largeur de gouttière : 1
- Largeur : 100 %
- Largeur maximale : 100 %
- Remplissage : 0px en haut, 0px en bas
Il est important de définir la largeur de la gouttière sur 1 et la largeur sur 100% car nous allons utiliser l'unité de longueur vw pour notre texte lors de la création de la conception du masque de texte. Étant donné que l'unité de longueur vw est basée sur la largeur du navigateur, il est important que les conteneurs parents (section et ligne) aient la même largeur que le navigateur, qui est de 100 %.
Mettre à jour les paramètres de la colonne 1
Notre masque de texte et notre image vont être ajoutés à la colonne de gauche (colonne 1). Nous devons ajouter une couleur d'arrière-plan à la colonne afin que les modes de fusion que nous ajoutons à l'image et au texte mélangent/révèlent cette couleur. Nous devons également définir le débordement sur masqué afin que lorsque nous animons l'image lors du défilement, nous ne voyions pas l'image qui déborde en dehors de la colonne.
Ouvrez les paramètres de la colonne 1 et mettez à jour les éléments suivants :
- Couleur d'arrière-plan : #750046
- Débordement horizontal : masqué
- Débordement vertical : caché
Création du masque de texte
Pour créer le masque de texte, ajoutez un module de texte à la colonne 1.
Le contenu du texte
Ajoutez ensuite le mot « divi » au contenu du corps. Nous utilisons un mot de 4 lettres afin qu'il s'empile uniformément pour un design carré.
Arrière-plan du texte
Ensuite, ajoutez une couleur d'arrière-plan blanche au module de texte.
- Couleur d'arrière-plan : #ffffff
Mise en forme du texte
Ensuite, sous l'onglet Conception, mettez à jour les éléments suivants :
- Police du texte : Rubik Mono One
- Style de police de texte : TT
- Texte Couleur du texte : #000000
- Taille du texte : 25vw (ordinateur de bureau), 50vw (tablette et téléphone)
- Hauteur de la ligne de texte : 0,8 em
- Alignement du texte : au centre
- Rembourrage: haut 8vw, bas 8vw
Mode de fusion de texte
Pour terminer la conception du masque de texte, ajoutez le mode de fusion suivant :
- Mode de fusion : écran
Jusqu'à présent, les quatre ingrédients clés de cet effet de masque de texte sont les suivants :
- Arrière-plan de la colonne
- Fond de texte blanc
- Texte noir
- Mode de fusion d'écran sur le module de texte
Le mode de fusion d'écran multiplie les couches et produit une version plus légère du mélange. Avec le mode de fusion d'écran, le texte noir devient complètement transparent, révélant ce qu'il y a derrière, qui dans ce cas est une couleur d'arrière-plan.
Ajouter une image d'arrière-plan
Pour ajouter l'image d'arrière-plan au masque de texte, créez un nouveau module d'image et téléchargez une image d'environ 1700px par 2500px. La taille de l'image est importante pour que l'image couvre la hauteur et la largeur de la colonne.
Conception d'images
Mettez ensuite à jour les paramètres de conception suivants :
- Forcer la pleine largeur : OUI
- Mode de fusion : écran
Ce mode de fusion n'est pas nécessaire pour l'effet de masque de texte, mais il fusionne l'image avec la couleur d'arrière-plan afin qu'elle corresponde mieux à la conception.
Position de l'image
Ensuite, donnez à l'image une position absolue et mettez à jour l'index Z afin qu'il se trouve derrière le module de texte.
- Position : Absolu
- Indice Z : -1
Effets de défilement d'image
Une fois que la conception de l'image est prête, accédez à l'onglet avancé et mettez à jour les options d'effet de défilement comme suit :
Sous l'onglet Mouvement vertical,
- Décalage de départ : -1 (à 0 %)
- Décalage moyen : 0 (à 50 %)
- Décalage de fin : 1 (à 100 %)
Sous l'onglet Mouvement horizontal,
- Décalage de départ : -0,5 (à 0 %)
- Décalage moyen : 0 (à 50 %)
- Décalage de fin : 0,5 (à 100 %)
Sous l'onglet Mise à l'échelle vers le haut et vers le bas,
- Échelle de départ : 110 % (à 0 %)
- Échelle moyenne : 125 % (à 50 %)
- Échelle finale : 140 % (à 100 %)
Résultat
Vous pouvez ajouter des marges supérieure et inférieure à la section afin de pouvoir vérifier le résultat jusqu'à présent.
Création du texte fictif
Dans la colonne de droite, ajoutez un nouveau module de texte.
Mettez à jour le contenu du corps avec les éléments suivants :
<h2>Lorem Ipsum Dolor Sit Amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
Ensuite, mettez à jour les paramètres de conception de texte comme suit :
- Couleur du texte : clair
- Police de titre 2 : Rubik
- Titre 2 Taille du texte : 4vw
- Rembourrage (bureau): haut 16vw, 5vw gauche, 5vw droite
- Rembourrage (tablette): 16vw en haut, 16vw en bas, 5vw à gauche, 5vw à droite
Résultat
Ajustements facultatifs
Fond noir / Texte blanc
Si vous souhaitez utiliser un fond noir pour le masque de texte, il vous suffit de mettre à jour les trois options clés qui composent l'effet de masquage de texte.
Ouvrez les paramètres du module de texte et modifiez les éléments suivants :
- Couleur de fond : #000000 (noir)
- Texte Couleur du texte : #ffffff (blanc)
- Mode de fusion : multiplier
Et voici le résultat…
Rotation PNG Image
Et vous pouvez changer l'image animée en une image avec un arrière-plan transparent (un PNG) pour un autre effet sympa. Voici un exemple d'image PNG que j'ai utilisée avec un effet de défilement rotatif ajouté.
Résultats finaux
Voici un autre aperçu de tous les modèles.
Dernières pensées
Espérons que ces conceptions de masques de texte avec animation d'arrière-plan sur défilement donneront l'avantage créatif dont votre site avait besoin. Une fois que vous connaissez les ingrédients de base de la création de l'effet de masquage de texte, vous n'aurez aucun problème à créer d'innombrables versions de cette conception pour répondre à vos besoins.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!