Comment créer un effet de défilement de texte slashing dans Divi

Créer un effet de texte tranchant est une façon amusante de donner vie à votre contenu. L'idée est de donner l'illusion que le texte est coupé en deux et se sépare lorsque l'utilisateur fait défiler la page. Dans ce tutoriel, nous allons vous montrer à quel point cette conception est facile à construire dans Divi !

Commençons.

Aperçu

Voici un aperçu rapide de la conception 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 les fichiers

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.

TÉLÉCHARGER

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 :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Partie 1 : Conception de la section

Dans cette première partie, nous allons concevoir le fond de section pour notre mise en page de section.

Couleur de l'arrière plan

Pour commencer, ajoutez une couleur d'arrière-plan à la section par défaut comme suit :

• Couleur de fond dégradé à gauche : #29c4a9
• Couleur de fond dégradé à droite : #2b87da

Diviseur

Sous l'onglet Conception, ajoutez un séparateur supérieur comme suit :

• Style de séparateur supérieur : voir capture d'écran
• Couleur du diviseur: blanc
• Diviseur Flip: vertical

Espacement

Pour aider à tester les effets de défilement pour la conception, ajoutons une marge temporaire en haut et en bas de la section. Nous pouvons toujours le retirer lors de l'ajout de la section à une autre page. Nous devons également ajouter une quantité égale de rembourrage en haut et en bas.

• Marge : 80vh haut, 80vh bas
• Remplissage : 200 pixels en haut, 200 pixels en bas

Box Shadow pour un espace inférieur supplémentaire

Afin d'obtenir une couleur/un espace de conception supplémentaire au bas de la section sans compromettre l'espace réel de la section, nous pouvons ajouter une ombre de boîte comme suit :

• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 100px
• Couleur de l'ombre : #2b87da

Visibilité masquée

Définissez ensuite le débordement sur masqué afin que nos effets de défilement ne deviennent pas visibles lorsque vous vous déplacez en dehors de la section.

• Débordement horizontal : masqué
• Débordement vertical : caché

Partie 2 : Création de l'effet de texte slashing

Dans cette prochaine partie, nous allons créer l'effet de texte slashing. Nous allons empiler deux lignes l'une sur l'autre, chacune avec un module de texte contenant le même contenu de texte. Ensuite, en utilisant une marge négative, nous pousserons le texte du haut vers le bas, masquant la moitié inférieure du texte. Ensuite, nous utiliserons une marge négative pour pousser le texte du bas vers le haut, masquant la moitié supérieure du texte. Une fois cela fait, nous pouvons déplacer la ligne/colonne du haut en utilisant l'effet de défilement pour créer l'illusion du texte en train d'être coupé.

Ajouter une ligne pour la moitié supérieure du texte

Tout d'abord, ajoutons une ligne à une colonne.

Mettez ensuite à jour les paramètres de ligne comme suit :

• Largeur de gouttière : 1
• Remplissage : 0px en haut, 0px en bas

Visibilité de la colonne masquée

Ensuite, ouvrez les paramètres de la colonne et mettez à jour le débordement en masqué :

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter un module de texte

Dans la colonne, ajoutez un nouveau module de texte.

Contenu du texte

Dans la zone du corps du contenu, ajoutez le mot « Slash ».

Mise en forme du texte

Passez à l'onglet Conception et mettez à jour le style de texte comme suit :

• Police du texte : B612 Mono
• Poids de la police de texte : gras
• Style de police de texte : TT
• Texte Couleur du texte : #ffffff
• Taille du texte : 150px (ordinateur de bureau), 100px (tablette), 60px (téléphone)
• Espacement des lettres du texte : 0,1 em
• Alignement du texte : au centre

Marge de texte

Ici, nous devons nous assurer et ajouter une marge inférieure qui est exactement la moitié de la taille du texte.

• Marge : -75px en bas (ordinateur de bureau), -50px (tablette), -30px (téléphone)

Ajouter une ligne pour la moitié inférieure du texte

Ligne en double

Une fois la première rangée avec le texte en place, dupliquez toute la rangée pour créer la rangée du bas.

Mettre à jour la marge du module de texte

Mettez ensuite à jour la marge du module de texte dans la ligne dupliquée avec une marge supérieure négative au lieu d'une marge inférieure pour masquer la moitié supérieure du texte.

• Marge : -75 pixels en haut (ordinateur de bureau), -50 pixels en haut (tablette), -30 pixels en haut (téléphone)

Ajouter des effets de défilement à la colonne de la rangée supérieure

Ensuite, nous sommes prêts à ajouter l'effet de défilement à la colonne de la rangée supérieure. Nous ne pouvons pas ajouter l'effet de défilement au module de texte car le texte deviendrait masqué en raison de la valeur masquée de débordement de la colonne qui masque la partie inférieure du texte.

Ouvrez les paramètres de colonne pour la ligne supérieure et mettez à jour les éléments suivants :

Sous l'onglet mouvement vertical…

• Activer le mouvement vertical : OUI
• Décalage de départ : 0 (à 0 %)
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : -.02 (à 75 %)

Sous l'onglet Mouvement horizontal…

• Activer le mouvement horizontal : OUI
• Décalage de départ : 0 (à 0 %)
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : 0,2 (à 75 %)

Sous l'onglet Rotation…

• Activer la rotation : OUI
• Rotation de départ : 0 (à 0%)
• Rotation moyenne : 0 (à 50 %)
• Rotation finale : 1 degré (à 75 %)

Maintenant, notre effet de texte slash est terminé !

Partie 3 : Création du diviseur mobile

Une fois notre effet de texte tranchant terminé, nous pouvons ajouter un élément amusant supplémentaire : un petit séparateur volant qui tranche le texte ! Pour créer cela, nous allons utiliser un module de séparation qui se déplace au centre de la page de la section à l'endroit exact où se divise le module de texte.

Voici comment procéder.

Ajouter une rangée

Ajoutez une ligne à une colonne sous la deuxième ligne.

Ajouter un module diviseur

Dans la colonne, ajoutez un nouveau module diviseur.

Fond de diviseur

Sélectionnez ensuite PAS pour afficher le diviseur. Au lieu de cela, donnez au séparateur une couleur d'arrière-plan comme suit :

• Couleur d'arrière-plan du dégradé de gauche : transparent
• Dégradé d'arrière-plan à droite : #29c4a9

Échelle de transformation

Mettez ensuite à jour la hauteur et déplacez-la vers la gauche à l'aide de l'option de traduction de transformation.

• Hauteur : 4px
• Transformation Traduire Axe X : -100 %

Effet de défilement

Ajoutez maintenant l'effet de défilement pour déplacer le séparateur vers la droite.

Sous l'onglet mouvement horizontal…

• Activer le mouvement horizontal : OUI
• Décalage de départ : -18 (à 25 %)
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : 13 (à 75 %)

Paramètres de ligne

Pour s'assurer que le diviseur "barre" au centre du texte, nous devons mettre à jour les paramètres de ligne comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %
• Remplissage : 0px en haut, 0px en bas
• Position : Absolu
• Localisation : centre gauche
• Indice Z : 9

Maintenant, le diviseur se déplacera de gauche à droite en traversant le milieu du texte.

Partie 4 : Ajout du corps du texte

Pour cette dernière partie, nous allons ajouter un bloc de texte pour compléter la mise en page.

Ajouter une rangée

Ajoutez une nouvelle ligne à une colonne sous la ligne avec le séparateur.

Ajouter un module de texte

Ajoutez ensuite un nouveau module de texte à la ligne.

Contenu du texte

Collez ensuite le code HTML suivant dans la zone du corps :

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

Mise en forme du texte

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Texte Couleur du texte : #ffffff
• Couleur du texte du lien : #121212
• Taille du texte du lien : 20px

Paramètres de ligne

Ouvrez les paramètres de la ligne parent et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur maximale : 400 px
• Position : Absolu
• Emplacement : en bas au centre
• Décalage vertical : 20 px (ordinateur de bureau et tablette), -25 px (téléphone)

Résultat final

Voici le résultat final.

Dernières pensées

Pour cette conception, il est important de garder le texte sur une seule ligne sur tous les appareils afin que vous soyez limité à la quantité de texte qui sera réduite. Mais, cette technique d'effet de défilement slashing peut être appliquée à plus qu'un simple texte. Vous pouvez également facilement parcourir les images!

J'ai hâte de vous entendre dans les commentaires.

À votre santé!