skip to Main Content

Tutoriel Divi : Comment utiliser les actions de survol – Première Partie

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

Chaque semaine, Elegant Theme propose de nouveaux packs de disposition Divi gratuits que vous pourrez utiliser pour votre prochain projet. Pour l’un des packs de présentation, ils partagent également un cas d’utilisation qui vous aidera à faire passer votre site Web au niveau supérieur. Cette semaine, dans le cadre de l’initiative de conception Divi en cours, nous allons vous montrer comment utiliser de manière créative les options de survol de Divi pour mettre en valeur les CTA dans vos pages. Nous utilisons le pack de services de blanchisserie de Divi et nous traiterons trois exemples différents de mise en lumière de votre appel à l’action.

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement ce que nous allons créer, pour vous faire une idée.

realisation animation divi.gif

Ajouter une nouvelle page à l’aide de la mise en page du service de blanchisserie ou Laundry

Commencez par ajouter une nouvelle page à votre site Web et téléchargez la page d’accueil du service de blanchisserie. Les trois exemples que nous allons créer seront basés sur cette disposition. Une fois que vous avez l’approche, vous pouvez appliquer ces exemples à n’importe quelle mise en page sur laquelle vous travaillez.

laundry demo.jpg

Cloner le module de texte

Commençons par le premier exemple! Nous transformons un module de texte existant en une incitation en vol stationnaire. Cette approche n’apparaîtra que sur le bureau. C’est pourquoi nous clonons le module initial pour lui permettre d’apparaître sur des écrans plus petits sans effets de survol.

cloner le module text.jpg

Visibilité

Module de texte n ° 1

Continuez en masquant le premier module sur tablette et téléphone.

visibilité element divi.jpg

Module de texte n ° 2

Et cache le second module sur le bureau.

visibilité desktop divi.jpg

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]

Ajouter un effet de survol au module de texte de bureau

Ajouter un titre de contenu 3

Nous n’éditons que le premier module de texte, qui sera celui qui apparaît sur le bureau. Ouvrez le module et ajoutez du contenu de la rubrique 3 à la zone de contenu.

modification du premier module texte.jpg

Survolez les paramètres du texte

Ensuite, allez dans les paramètres de texte et « cachez » le texte du paragraphe de votre module en ajoutant 0px à la taille du texte au survol.

  • Taille du texte: 0px

parametres texte module divi.jpg

Survolez les paramètres de texte 2

Faites de même pour les paramètres de texte de l’en-tête 2 en survol.

  • Titre 2 Taille du texte: 0px

configuration en-tete 2 divi.jpg

Titre du texte par défaut 3

Accédez ensuite aux paramètres de texte de la rubrique 3 et apportez des modifications.

  • Rubrique 3 Police: Josefin Sans
  • Titre 3 Polices: Semi Gras
  • Titre 3 Taille du texte: 0px

configurtion en-tete 3 polices.jpg

Survolez l’en-tête 3 Paramètres de texte

Modifier la taille du texte en survol.

  • Titre 3 Taille du texte: 40px

configuration en-tete 3 divi.jpg

Paramètres d’espacement par défaut

Ensuite, accédez aux paramètres d’espacement et assurez-vous que les valeurs de remplissage personnalisées suivantes s’appliquent:

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 ]

  • Top rembourrage: 80px
  • Rembourrage inférieur: 50px
  • Rembourrage gauche: 40px
  • Rembourrage Droite: 40px

options de rembourrage.jpg

Paramètres d’espacement de survol

Ajoutez également une marge personnalisée en survol.

  • Marge supérieure: 50px
  • Marge de gauche: -53.5vw

configuration du rembourage au survol.jpg

Paramètres de bordure par défaut

Nous ajoutons également une bordure inférieure sans bordure.

  • Largeur de la bordure inférieure: 0px
  • Couleur de bordure inférieure: # ff947f
  • Style de bordure inférieure: pointillé

configuration des borders divi.jpg

Paramètres de bordure de survol

Changer la largeur de la bordure en vol stationnaire.

  • Largeur de la bordure inférieure: 5px

mettre l'accent sur les ctas

Paramètres d’ombre de la boîte par défaut

Ensuite, ajoutez une ombre de boîte.

  • Box Shadow Position verticale: 50px
  • Box Shadow Blur Force: 54px
  • Force de propagation de l’ombre de la boîte: -32px
  • Couleur de l’ombre: rgba (255,255,255,0)

option dombres divi.jpg

Paramètres de l’ombre de la boîte de survol

Et changez la couleur de l’ombre de la boîte en vol stationnaire.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

  • Couleur de l’ombre: rgba (0,0,0,0,2)

configuration border au survol divi.jpg

Les transitions

Pour créer une transition en douceur, augmentez la durée de la transition dans les paramètres de transition.

  • Durée de la transition: 750ms

transition divi builder bloc texte.jpg

Résumé

Pour terminer, dans ce tutoriel il était question de nous de créer une animation qui met en surbrillance une section sur notre page Divi. Les possibilités avec Divi sont presque illimitées, en utilisant les différentes options (combinaisons de plusieurs options différentes), vous pourrez créer des interfaces avec une animation dynamique et attrayante. N’étant pas terminée, nous aborderons la deuxième partie de ce tutoriel ultérieurement. Jusque-là, si vous avez des questions, n’hésitez pas à les poser dans la section des commentaires.

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
1 Partages
Partagez1
Tweetez
Enregistrer