Comment mettre en valeur votre bouton collant dans une magnifique section CTA avec Divi

Lorsque la fonctionnalité d'options persistantes Divi a été publiée, la publication sur notre blog était accompagnée de démos en direct qui vous montrent la polyvalence de cette nouvelle fonctionnalité. Pour vous aider à mieux comprendre les options persistantes et commencer à les utiliser dans votre conception, nous vous montrerons comment recréer l'une des conceptions de démonstration en direct de ce didacticiel. Le design que nous recréons met l'accent sur l'accent mis sur votre bouton collant. C'est une section CTA basée sur du texte qui vous permet de mettre en évidence votre appel à l'action d'une belle manière. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page de la section CTA

Pour mettre la main sur la mise en page gratuite de la section CTA, vous devrez d'abord la télécharger à l'aide du 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 !

1. Construire la structure des éléments

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Il peut s'agir d'une nouvelle page ou d'une page existante, mais nous vous recommandons de l'ajouter à une page qui contient déjà du contenu, afin qu'il y ait suffisamment d'espace de défilement pour que vous puissiez réellement voir les effets prendre vie. Ouvrez les paramètres de la section et appliquez une couleur d'arrière-plan de votre choix.

• Couleur d'arrière-plan : #00965a

Dimensionnement

Passez à l'onglet de conception de la section et appliquez une hauteur maximale. Cette hauteur maximale nous aidera à nous assurer que la hauteur de la section est limitée.

• Hauteur maximale : 100 vh

Débordements

Étant donné que nous appliquerons des effets de défilement plus tard dans le didacticiel, nous devrons également masquer les débordements de la section pour nous assurer que rien ne dépasse le conteneur de la section.

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

Ajouter une nouvelle ligne

Structure des colonnes

Une fois les paramètres de section en place, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez des paramètres de dimensionnement personnalisés. Ces paramètres de dimensionnement permettront au conteneur de lignes d'occuper toute la largeur de la ligne, ce qui donnera à notre conception un effet plein écran.

• Largeur : 100 %
• Largeur maximale : aucun

Paramètres de la colonne 2

Espacement

Ouvrez ensuite les paramètres de la colonne 2 et appliquez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage inférieur : 60px
• Rembourrage gauche :
  • Tablette et téléphone : 5 %
• Rembourrage droit :
  • Ordinateur de bureau : 10vw
  • Tablette et téléphone : 5 %

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules, en commençant par un module de texte dans la colonne 1. Ajoutez du contenu de votre choix. Pour créer exactement le même design que dans l'aperçu de cet article, insérez quelques mots pertinents qui aident à renforcer le CTA que nous placerons dans la colonne 2 plus tard dans le didacticiel. Assurez-vous également de placer chaque mot dans sa propre ligne.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte. Vous remarquerez que nous utilisons la largeur de la fenêtre comme unité de taille de texte. L'utilisation de l'unité de largeur de la fenêtre nous aidera à garder le texte réactif sur toutes les tailles d'écran.

• Police du texte : Work Sans
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 10vw
• Hauteur de la ligne de texte : 0,2 em

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne. Là, ajoutez un module de texte avec une copie d'appel à l'action de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police du texte : Work Sans
• Couleur du texte : #ffffff
• Taille du texte : 56 px
• Hauteur de la ligne de texte : 1,2 em

Dimensionnement

Attribuez également une largeur maximale au module de texte.

• Largeur maximale : 400 px

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans notre conception est un module de bouton dans la colonne 2. Ajoutez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton :
  • Par défaut : #ffffff
  • Survol : rgba(255,255,255,0.7)
• Largeur de bordure de bouton : 5px
• Couleur de la bordure du bouton : rgba(0,0,0,0)

• Rayon de bordure de bouton : 5px
• Police des boutons : Work Sans
• Afficher l'icône du bouton : Non

2. Appliquer des effets de défilement et de collage

Ajouter un mouvement vertical au module de texte dans la colonne 1

Maintenant que les bases de notre conception ont été posées, il est temps d'appliquer les effets de défilement et de collage ! Ouvrez le module de texte dans la colonne 1 et appliquez un mouvement vertical réactif.

• Activer le mouvement vertical : Oui
• Décalage de départ :
  • Bureau : 10
  • Tablette et téléphone : 0
• Décalage moyen : 0
• Décalage de fin :
  • Bureau : -10
  • Tablette et téléphone : 0
• Déclencheur d'effet de mouvement : haut de l'élément

Ajouter un effet collant à la colonne 2

Ensuite, nous allons ouvrir les paramètres de la colonne 2 et appliquer un effet collant sur le bureau. Étant donné que les colonnes et les modules sur des tailles d'écran plus petites sont placés les uns au-dessous des autres, au lieu d'être côte à côte, nous ramènerons les paramètres collants à "Ne pas coller" sur des tailles d'écran plus petites.

• Position collante :
  • Bureau : coller au sommet
  • Tablette et téléphone : ne collez pas
• Décalage supérieur collant: 80px
• Limite collante inférieure : section
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Ajouter un style collant au bouton dans la colonne 2

Maintenant que la colonne 2 est devenue collante, nous allons pouvoir appliquer un style collant à la colonne elle - même et aux modules à l'intérieur de la colonne. Les seuls changements persistants que nous apporterons, cependant, sont concentrés sur le bouton. Ouvrez le module, accédez aux paramètres des boutons et inversez les couleurs du texte et des boutons. C'est ça! Une fois que vous avez enregistré la mise en page et quitté le générateur visuel, vous pouvez regarder le magnifique design en direct sur votre site Web.

• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000

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

Dans cet article, nous vous avons montré comment recréer l'une des conceptions qui ont été utilisées comme démo dans la publication de mise à jour des fonctionnalités d'options collantes. Cette conception se concentre sur la mise en évidence de votre bouton collant en changeant le style une fois que l'état collant est activé. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.