Utiliser les ombres de texte en survol pour créer du contenu interactif avec Divi

Faire en sorte que votre site Web se démarque des sites Web similaires peut être difficile, mais une fois que vous y parvenez, cela vaut presque toujours la peine de l'effort et de la réflexion qui y ont été consacrés. Pour vous aider à vous inspirer, nous allons vous montrer comment créer du contenu interactif lors de la création de sites Web avec Divi.

L'exemple que nous allons recréer dans ce didacticiel fonctionnera particulièrement bien pour toute page à propos sur laquelle vous travaillez. Vous pourrez partager des faits ou des informations sur l'entreprise en survol en utilisant les options d'ombre de texte intégrées de Divi. Nous veillons également à ce que ces effets de survol ne s'appliquent pas sur des écrans plus petits afin que les informations et l'expérience mobile ne soient pas perdues.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement le résultat auquel vous pouvez vous attendre.

Bureau

Mobile

Nous veillons à ce que toutes ces interactions de survol ne s'appliquent pas sur des écrans plus petits. En utilisant la même section et les mêmes modules, nous obtiendrons plutôt le résultat simple suivant :

Approcher

• L'exemple que nous allons recréer est idéal pour les pages environ, mais vous pouvez le faire fonctionner avec n'importe quel mot de 5 ou 6 caractères (faites correspondre avec la structure des colonnes)
• Chacun des personnages sera dédié à un module de texte individuel
• Nous utilisons une ligne avec un nombre suffisant de colonnes pour relier les différents caractères du mot et les faire apparaître comme s'ils avaient été créés dans le même module
• Par défaut, nous ferons en sorte que la couleur du texte du module de texte corresponde à la couleur d'arrière-plan de la section
• Pour nous assurer que le caractère reste lisible, nous appliquerons également une ombre de texte blanche au caractère
• Une fois que vous survolez le personnage, l'ombre du texte disparaît et la couleur du texte change, ce qui vous donne l'impression que le texte se remplit
• En survolant un personnage, des informations supplémentaires s'afficheront également
• Sur des écrans plus petits, les faits et/ou informations sur l'entreprise seront là dès le début

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Couleur de l'arrière plan

Ouvrez une page nouvelle ou existante et ajoutez-y une section normale. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #03006d

Espacement

Ensuite, accédez aux paramètres d'espacement de la section et ajoutez un rembourrage haut et bas personnalisé.

• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et laissez la ligne occuper toute la largeur de l'écran. C'est une étape importante car elle va nous permettre de déterminer la distance manuellement, en utilisant les unités de la fenêtre.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

À l'étape précédente, nous nous sommes débarrassés de tous les paramètres de dimensionnement par défaut associés à une nouvelle ligne. Cependant, nous devons ajouter du remplissage manuellement. Ici, nous utilisons des unités de fenêtre pour nous assurer que le résultat reste le même dans toutes les tailles d'écran de bureau.

• Rembourrage gauche : 9vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Rembourrage droit : 5vw (tablette et téléphone)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Une fois que vous avez terminé de modifier les paramètres de ligne, vous pouvez continuer et ajouter le premier module de texte à la colonne 1. Ajoutez le premier caractère en tant que texte de paragraphe et le contenu que vous souhaitez afficher en survol en tant que texte de liste.

Paramètres de texte par défaut

Ensuite, accédez à l'onglet Conception et modifiez les paramètres de texte de paragraphe par défaut. Assurez-vous d'utiliser la même couleur pour le texte et l'arrière-plan de la section.

• Poids de la police de texte : ultra gras
• Couleur du texte : #03006d
• Taille du texte : 27vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Hauteur de la ligne de texte : 1,1 em
• Force du flou de l'ombre du texte : 0,01 em
• Couleur de l'ombre du texte : #ffffff
• Orientation du texte : à gauche

Paramètres de texte de survol

Pour créer l'effet de survol agréable, nous devrons modifier ces paramètres de texte de paragraphe lors du survol. Remarquez comment nous utilisons maintenant une couleur d'ombre de texte complètement transparente pour la faire disparaître.

• Couleur du texte : #ffffff
• Couleur de l'ombre du texte : rgba(255,255,255,0)

Paramètres de texte de liste par défaut

Continuez en allant dans la liste des paramètres de texte. Une partie importante de ces paramètres consiste à s'assurer que la taille du texte sur le bureau est de « 0px », mais en ajoutant « 18px » comme taille de texte pour les tailles d'écran plus petites. Cela garantira que le texte de la liste s'affiche sur des tailles d'écran plus petites, mais pas sur le bureau sans qu'il soit survolé.

• Poids de la police de liste non ordonnée : léger
• Couleur du texte de la liste non ordonnée : #ffffff
• Taille du texte de la liste non ordonnée : 0 px (ordinateur de bureau), 18 px (tablette et téléphone)
• Couleur de l'ombre du texte de la liste non ordonnée : rgba(255,255,255,0)
• Type de style de liste non ordonnée : cercle
• Position de style de liste non ordonnée : à l'extérieur
• Retrait d'élément de liste non ordonné : 0px

Paramètres de texte de la liste de survol

Nous voulons que le texte de la liste apparaisse au survol. C'est pourquoi nous allons modifier la taille du texte au survol. Assurez-vous que la taille du texte que vous utilisez en survol est la même que la taille du texte que vous utilisez sur des écrans plus petits. Cela aidera à s'assurer qu'il n'y a pas d'effet de survol sur des écrans de plus petite taille.

• Taille du texte de la liste non ordonnée : 18px

Espacement

Continuez en allant dans les paramètres d'espacement du module et apportez-y également quelques modifications.

• Marge inférieure : 50px (tablette et téléphone)
• Marge droite : -4vw (ordinateur de bureau), 0vw (tablette et téléphone)

Cloner le module de texte 4 fois et placer les doublons dans les colonnes restantes

Maintenant que nous avons terminé de modifier le premier module de la colonne 1, nous pouvons continuer et cloner le module quatre fois et placer chacun des doublons dans les colonnes restantes. Dans les étapes à venir, nous modifierons chacun des doublons pour qu'il corresponde au nouveau personnage.

Modifier le module de texte dans la colonne 2

Modifier le contenu

Ouvrez le doublon dans la colonne 2 et modifiez le contenu.

Changer l'espacement

Ensuite, accédez aux paramètres d'espacement et modifiez les valeurs de marge personnalisées.

• Marge inférieure : 50px (tablette et téléphone)
• Marge de gauche : -2vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Marge droite : -2vw (ordinateur de bureau), 0vw (tablette et téléphone)

Modifier le module de texte dans la colonne 3

Modifier le contenu

Modifiez également le contenu du doublon dans la colonne 3.

Changer l'espacement

Avec les paramètres d'espacement dans l'onglet Conception.

• Marge inférieure : 50px (tablette et téléphone)
• Marge de gauche : -5.5vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Marge droite : 1.5vw (ordinateur de bureau), 0vw (tablette et téléphone)

Modifier le module de texte dans la colonne 4

Modifier le contenu

Continuez en ouvrant le module de texte dans la colonne 4 et modifiez le contenu ici aussi.

Changer l'espacement

Accédez ensuite à l'onglet Conception et modifiez les valeurs de marge personnalisées dans les paramètres d'espacement.

• Marge inférieure : 50px
• Marge de gauche : -6vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Marge droite : 2vw (ordinateur de bureau), 0vw (tablette et téléphone)

Modifier le module de texte dans la colonne 5

Modifier le contenu

Passons au dernier doublon. Modifiez le contenu dans la zone de contenu.

Changer l'espacement

Avec les paramètres d'espacement personnalisés.

• Marge inférieure : 50px
• Marge de gauche : -7vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Marge droite : 3vw (ordinateur de bureau), 0vw (tablette et téléphone)

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

Nous savons à quel point il est important de faire en sorte que votre site Web se démarque des autres sites Web. Avec les options intégrées de Divi, vous pouvez être aussi créatif que vous le souhaitez. Cet article est un exemple de la façon dont vous pouvez créer du contenu interactif en survol tout en vous assurant que tout reste simple sur des écrans de plus petite taille. Vous pouvez utiliser l'exemple que nous avons recréé pour toute page à propos sur laquelle vous travaillez actuellement. C'est un excellent moyen de partager des faits et des informations supplémentaires sur votre entreprise tout en ayant une interaction avec vos visiteurs. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!