Comment concevoir un portail de bienvenue pour votre page dans Divi

Un portail de bienvenue est un moyen efficace d'augmenter les conversions de tout appel à l'action sur votre site. En fait, les portes de bienvenue sont une fonctionnalité populaire avec des plugins comme OptinMonster pour créer des optins de courrier électronique à conversion élevée. L'idée de base derrière une porte de bienvenue est de masquer le contenu de la page Web avec un appel à l'action en plein écran. Cela oblige l'utilisateur à interagir avec le CTA avant d'afficher la page souhaitée.

Dans ce didacticiel, nous allons vous montrer un moyen rapide et facile d'ajouter une porte de bienvenue personnalisée à votre page Web sans utiliser de plugin. Cela peut être utile pour augmenter les conversions de vos CTA sur les pages de destination.

Vérifiez-le!

Aperçu

Voici un bref aperçu de la porte d'accueil 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 ou ne recevrez pas 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 sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Allons 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. Sélectionnez l'option « Choisir une mise en page prédéfinie ».
   
4. Sélectionnez le pack de mise en page Bistro et, dans la fenêtre contextuelle Charger à partir de la bibliothèque, sélectionnez la mise en page de la page de renvoi Bistro et cliquez sur le bouton « Utiliser cette mise en page » pour importer la mise en page sur la page.
   

Après cela, vous disposez d'une page de destination à utiliser lors de la création de la porte d'accueil personnalisée.

Création de la porte d'accueil

Ajouter une nouvelle section

Tout d'abord, créez une nouvelle section régulière et faites-la glisser vers le haut de la page. Ajoutez ensuite une ligne d'une colonne à la section.

Concevoir la section

Avant de commencer à ajouter des modules/contenus à la section, ajoutons un design personnalisé afin que nous ayons une belle toile à partir de laquelle travailler.

Fond

Pour commencer, ajoutez un dégradé d'arrière-plan et une image comme suit :

• Couleur d'arrière-plan du dégradé gauche : rgba (0,17,38,0,7)
• Dégradé de fond à droite : #001126
• Position de départ : 68 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : OUI
• Image d'arrière-plan : [insérer l'image]

Remplissage et animation

Ensuite, passez à l'onglet Conception et mettez à jour les paramètres de remplissage et d'animation suivants :

• Rembourrage (bureau): haut 28vh, bas 28vh
• Rembourrage (tablette): haut 18vh, bas 18vh
• Rembourrage (téléphone): haut 10vh, bas 10vh
• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Opacité de démarrage de l'animation : 100 % ;

Positionner la section Welcome Gate

Nous sommes maintenant prêts à donner à notre section une position fixe avec un indice z plus élevé afin que la porte d'accueil remplisse l'écran du navigateur jusqu'à ce que l'utilisateur clique sur le bouton « Non merci ».

Avant d'ajouter notre CSS de positionnement, ajoutons un identifiant CSS personnalisé comme suit :

• ID CSS : welcome-gate

Cela sera utilisé pour cibler la section avec jQuery pour la déplacer vers le haut hors de vue lorsque l'utilisateur clique sur le bouton "Non merci".

Ajoutez le CSS personnalisé suivant à l'élément principal :

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Ensuite, mettez à jour l'index Z comme suit :

• Indice Z : 11

REMARQUE : si vous souhaitez que la porte d'accueil masque également l'en-tête, vous pouvez ajouter un index Z plus élevé comme « 99999 ».

Création du contenu du portail de bienvenue

Maintenant que notre section est prête, commençons à ajouter le contenu du portail de bienvenue. Vous pouvez ajouter n'importe quel contenu à ce portail de bienvenue. Pour l'instant, créons un simple CTA avec deux boutons. Le bouton de gauche sera celui sur lequel vous souhaitez que les utilisateurs cliquent. Le bouton à droite sera le bouton « Non merci » qui fermera la porte d'accueil.

Module de texte

À l'intérieur de la ligne d'une colonne, ajoutez un nouveau module de texte avec le contenu suivant :

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Mise en forme du texte

Ensuite, mettez à jour la conception du texte comme suit :

• Police du texte : cabine
• Texte Couleur du texte : #ffffff
• Taille du texte : 24px (bureau), 18px (téléphone)
• Alignement du texte : Centre
• Police de la rubrique 2 : Cabine
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 66 px (ordinateur de bureau), 26 px (tablette)

Ajouter une ligne à deux colonnes

Pour nos boutons, créons une ligne de deux colonnes sous le texte.

Ajouter le bouton gauche

Dans la colonne de gauche, ajoutez un module de boutons et mettez à jour les paramètres comme suit :

• Texte du bouton : «                                                       Réservons-le”

• Alignement des boutons : centre
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #bd8f52
• Largeur de la bordure du bouton : 0px
• Poids de la police du bouton : gras

Ajoutez ensuite le CSS personnalisé suivant pour que le bouton s'étende sur toute la largeur de la colonne :

display: block !important;

Ajouter le bouton droit « Non merci »

Pour créer le bouton « Non merci », copiez d'abord le bouton de gauche et collez-le dans la colonne de droite.

Mettez ensuite à jour le contenu comme suit :

• Texte du bouton : non merci
• URL du lien du bouton : # (ceci est important pour que le bouton n'actualise pas la page)

Ensuite, mettez à jour la conception du bouton comme suit :

• Couleur du texte du bouton : #333333
• Couleur d'arrière-plan du bouton : rgba (255,255,255,0.4)

Ajoutez ensuite la classe CSS suivante au bouton non merci :

• Classe CSS : non merci

Ce sera notre sélecteur dans le jQuery qui fermera la porte de bienvenue au clic.

Ajouter le code personnalisé

Ajoutons maintenant l'extrait de code personnalisé nécessaire pour ajouter la fonctionnalité qui ferme la porte de bienvenue lorsqu'un utilisateur clique sur le bouton « Non merci ». Pour ce faire, ajoutez un module de code sous le module de bouton non merci.

Collez ensuite le code suivant dans la zone de code du module de code :

Pour une dernière touche, rapprochons les boutons en donnant à la rangée contenant nos boutons une largeur maximale. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur maximale : 600 px

Résultat final

Voici à quoi ressemble la conception finale.

Et voici à quoi ressemble la porte d'accueil lors de l'actualisation de la page.

Et voici à quoi ressemble le portail d'accueil sur mobile.

Dernières pensées

Espérons que ce tapis de bienvenue sera un ajout utile à votre page ou modèle. Divi facilite la conception et le positionnement du tapis de bienvenue à l'aide du constructeur visuel et il suffit d'un petit extrait de jQuery pour compléter la fonctionnalité. Donc, si vous recherchez un tapis de bienvenue rapide pour votre page sans utiliser de plugin, cela devrait vous être utile.

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

À votre santé!