Création d'un CTA « Commencer » qui révèle plusieurs options au survol
Publié: 2019-06-26De nombreuses entreprises incluront un CTA « démarrage » sur leur page d'accueil. C'est généralement le principal appel à l'action sur la page, car il guidera l'utilisateur à travers une sorte de processus prévu. Il peut s'agir d'un simple bouton « démarrer maintenant » qui renvoie à une autre page. Ou il peut s'agir d'une section d'une page qui comprend des instructions de « démarrage » et/ou différentes options que l'utilisateur peut prendre pour démarrer le processus prévu par l'entreprise.
Dans ce didacticiel, nous allons vous montrer comment créer un CTA « Commencer » qui révélera plusieurs options « Démarrer » au survol. À l'aide de Divi, nous allons concevoir une section qui apparaîtra sous la forme d'un gros bouton. Ensuite, lorsque vous survolez le bouton, les options apparaîtront un peu comme un curseur vertical révélerait la diapositive suivante.
Le design est élégant et la fonctionnalité peut être utile à bien des égards.
Commençons.
Aperçu
Voici un aperçu du CTA « Commencer » que nous allons construire dans ce didacticiel.
Téléchargez GRATUITEMENT la mise en page CTA Divi «Commencer»
Pour mettre la main sur le design 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 sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Images à utiliser pour le contenu fictif
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Implémentation de la conception CTA « Commencer ici » dans Divi
L'idée de base derrière cette conception est de déplacer le contenu d'une section vers le haut lorsque vous survolez la section. Pour ce faire, nous devons nous assurer que notre section a une hauteur fixe avec un débordement caché. Cela masquera les options CTA avant l'état de survol. Ensuite, nous pouvons utiliser la marge pour positionner nos modules et le rembourrage supérieur pour déplacer le contenu en vue au survol.
Commençons par la section.
Création de la rubrique
Pour commencer, créez une section régulière avec une ligne à une colonne. Ensuite, avant d'ajouter des modules, mettons à jour les paramètres de la section.
Ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Couleur d'arrière-plan : #2b87da
Largeur: 90%
Largeur maximale : 1100px
Alignement de la section : centre
Marge : 6vw haut, 6vw bas (juste pour lui donner un peu d'espace pour respirer)
Rembourrage (bureau) : 300 pixels en haut, 0 pixels en bas
Rembourrage (tablette) : 0px en haut, 15 % en bas
Ajoutez ensuite des coins arrondis. Cela créera notre conception en forme de bouton chaque fois que nous donnerons à la section une hauteur maximale.
Coins arrondis : 140 pixels (ordinateur de bureau), 20 pixels (survol), 10 pixels (tablette)
Ensuite, donnez-lui une ombre de boîte (voir capture d'écran).
Nous n'allons pas ajouter tous les paramètres nécessaires à la conception finale à ce stade. Nous devrons revenir et lui donner une hauteur fixe et un effet de survol. Mais pour l'instant, ajoutons le contenu.
Création de la première ligne de contenu
Ouvrez les paramètres de la ligne de colonne que vous avez créée et mettez à jour les éléments suivants :
Largeur : 100 %
Remplissage : 0px en haut, 0px en bas, 5 % à gauche, 5 % à droite
À l'intérieur de la ligne d'une colonne, ajoutez un module de texte.
Ajoutez ensuite l'en-tête h2 suivant au contenu du corps.
<h2>Get Started Here...</h2>
Mettez à jour les paramètres de conception comme suit :
Police du titre 2 : Nunito
Poids de la police de l'en-tête 2 : gras
Titre 2 Couleur du texte : #ffffff
Titre 2 Taille du texte : 78 px (ordinateur de bureau et tablette), 46 px (téléphone)
Largeur maximale : 500 px
Hauteur : 300 px (ordinateur de bureau), automatique (tablette et téléphone)
Marge : -300px top (bureau), 0px top (tablette et téléphone)
Rembourrage : 7% haut
La hauteur de 300 px et la marge supérieure de -300 px amènent le module de texte à remplir le rembourrage supérieur de 300 px de la section. Plus tard, chaque fois que nous supprimons le rembourrage de la section supérieure au survol, le module de texte défilera vers le haut au-dessus de la section.
Création de la deuxième ligne de contenu
La deuxième ligne de contenu est l'endroit où nous ajouterons nos options CTA. Allez-y et ajoutez une nouvelle ligne avec une disposition à trois colonnes.
Mettez ensuite à jour les paramètres de ligne comme suit :
Largeur : 100 %
Largeur maximale : 100 %
Remplissage : 0px en haut, 0px en bas
Ajoutez ensuite un module de présentation dans la colonne 1.
Mettez ensuite à jour les paramètres du texte de présentation comme suit :
Retirez le corps du texte par défaut et laissez le titre.
Ajoutez ensuite une icône d'image (90 X 90). Ou vous pouvez utiliser une icône Divi ordinaire si vous le souhaitez.
Ajoutez un arrière-plan et mettez à jour la conception du texte du titre.
Couleur d'arrière-plan : #ffffff
Police du titre : Nunito
Poids de la police du titre : ultra gras
Style de police du titre : TT
Alignement du texte du titre : Centre
Titre Couleur du texte : #2b87da
Taille du texte du titre : 14 px
Avant de pouvoir rendre les textes de présentation circulaires, nous devons d'abord donner au texte de présentation une hauteur et une largeur égales. Ensuite, nous pouvons utiliser l'espacement pour aligner le texte de présentation et le contenu du texte de présentation au centre.
Largeur du contenu : 200 px (ordinateur de bureau), 250 px (tablette)
Largeur : 250 px (ordinateur de bureau), 300 px (tablette)
Alignement du module : centre
Hauteur : 250 px (ordinateur de bureau), 300 px (tablette)
Marge : 25px en haut, 0px en bas
Rembourrage : dessus 50px (ordinateur de bureau), dessus 75px (tablette et téléphone)
Pour compléter la conception du cercle, donnez au texte de présentation un coin arrondi et une ombre de boîte.
Coins arrondis : 50 %
Box Shadow : voir capture d'écran
Cela s'occupe de notre premier texte de présentation. Pour créer les deux suivants. Copiez le texte de présentation et collez-le dans les colonnes 2 et 3. Ensuite, mettez à jour l'icône de l'image pour chacun. Il devrait ressembler à ceci :
Touches finales à la section
Pour terminer la conception du CTA « Commencer », nous devons mettre à jour la section un peu plus. Mettez à jour les paramètres de section suivants :
Hauteur : 300 px (ordinateur de bureau), automatique (tablette et téléphone)
Débordement horizontal : masqué
Débordement vertical : masqué
Cela gardera la section à la même hauteur que le contenu des rangées 1 et 2. Masquer le débordement gardera le contenu de la rangée 2 caché jusqu'à ce que nous l'affichions au survol.
Pour afficher le contenu de la ligne 2, nous devons retirer le rembourrage supérieur de la section en survol.
Remplissage (survol): 0px haut
Maintenant, vérifiez le résultat jusqu'à présent. Le contenu défilera vers le haut pour révéler le contenu de la ligne 2 qui affiche les trois options CTA.
Pour que la section apparaisse davantage comme un bouton, nous pouvons utiliser les options de transformation pour la réduire, puis la ramener à la taille normale au survol. Mettez à jour les options de transformation suivantes pour la section.
Échelle de transformation (ordinateur de bureau) : 70 %
Échelle de transformation (survol) : 100 %
Échelle de transformation (tablette) : 100 %
Ajoutez maintenant un graphique d'image d'arrière-plan (500 X 500) pour prendre la bonne taille de la section.
Image d'arrière-plan : insérer une image
Taille de l'image d'arrière-plan : taille réelle
Position de l'image d'arrière-plan : au centre à droite (ordinateur de bureau), en haut à droite (tablette), en haut à gauche (téléphone)
Ajouter des URL de liens aux Blurbs et les mettre à l'échelle au survol
Étant donné que nos textes de présentation servent vraiment de boutons de cercle, nous devons ajouter des URL de lien de module à chacun des textes de présentation. Vous devrez bien sûr ajouter le vôtre pour répondre à vos besoins.
Étant donné que les textes de présentation sont masqués dans le générateur visuel, basculez le mode d'affichage filaire et mettez à jour chacun des paramètres de présentation avec l'URL du lien du module.
Ensuite, restez en mode d'affichage filaire et utilisez la sélection multiple pour sélectionner les trois textes de présentation. Et ouvrez les paramètres de l'un des textes de présentation pour mettre à jour les paramètres des éléments pour les trois. Mettez ensuite à jour l'option de transformation comme suit :
Échelle de transformation (survol): 105%
C'est ça!
Le résultat final
Jetons un coup d'œil à la conception finale du CTA « Commencer ».
Et voici le design sur tablette et téléphone.
Dernières pensées
Le CTA « Commencer » est courant sur le Web aujourd'hui. Espérons que ce tutoriel vous aidera à passer au niveau supérieur. Et n'ayez pas peur de penser à d'autres façons d'utiliser cette fonctionnalité. Pensez-y. Vous pouvez ajouter n'importe quel contenu à la section !
N'hésitez pas à partager vos réflexions dans les commentaires ci-dessous.
Je suis dans l'attente de votre réponse.
À votre santé!