Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Une porte de bienvenue est un moyen efficace d’augmenter les conversions d’incitation à l’action sur votre site Web. En fait, Welcome Gates est une fonctionnalité populaire avec des plugins comme OptinMonster pour créer des options de messagerie à conversion élevée. L’idée de base derrière une porte de bienvenue est de masquer le contenu du site Web avec un appel à l’action en mode plein écran. Cela oblige l’utilisateur à interagir avec le CTA avant que la page prévue ne s’affiche.

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

Écouter!

Avant goût

Voici un aperçu de la porte de bienvenue que nous allons créer dans ce didacticiel.

Porte de bienvenue Divi

Porte de bienvenue Divi

Porte de bienvenue Divi

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger à l’aide du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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.

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 didacticiel.

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez effectuer les opérations suivantes:

  1. Si vous ne l’avez pas déjà Installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et éditez la page dans le frontend avec le Divi Builder (Visual Builder).
  3. Sélectionnez l’option «Choisir une mise en page prédéfinie».
    Porte de bienvenue Divi
  4. Sélectionnez le package de mise en page Bistro, sélectionnez la mise en page de la page de destination Bistro dans la fenêtre contextuelle «Charger à partir de la bibliothèque» et cliquez sur le bouton «Utiliser cette mise en page» pour importer la mise en page sur la page.
    Porte de bienvenue Divi

Après cela, vous aurez une page de destination que vous pourrez utiliser lors de la création de la porte d’accueil personnalisée.

Créer la porte de bienvenue

Ajouter une nouvelle section

Commencez par créer une nouvelle section régulière et faites-la glisser vers le haut de la page. Ajoutez ensuite une seule ligne de colonne à la section.

Porte de bienvenue Divi

Concevoir la section

Avant d’ajouter des modules / contenu à la section, ajoutons un design personnalisé afin que nous ayons une belle surface de travail à partir de maintenant.

Contexte

Tout d’abord, ajoutez un dégradé d’arrière-plan et une image comme ceci:

  • Couleur de fond dégradé gauche: rgba (0,17,38,0,7)
  • Couleur de fond dégradé droite: # 001126
  • Position de départ: 68%
  • Placez le dégradé sur l’image d’arrière-plan: OUI
  • Image de fond: [insert image]

Porte de bienvenue Divi

Rembourrage et animation

Ensuite, allez dans l’onglet Conception et mettez à jour les paramètres de remplissage et d’animation suivants:

  • Rembourrage (bureau): 28vh ci-dessus, 28vh ci-dessous
  • Rembourrage (tablette): 18vh ci-dessus, 18vh ci-dessous
  • Rembourrage (téléphone): 10vh ci-dessus, 10vh ci-dessous
  • Style d’animation: diapositive
  • Direction de l’animation: vers le bas
  • Opacité de début de l’animation: 100%;

Porte de bienvenue Divi

Positionnez la zone Welcome Gate

Maintenant, nous pouvons donner à notre zone une position fixe avec un z-index plus élevé afin que la porte de bienvenue 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 ID CSS personnalisé comme celui-ci:

Ceci est utilisé pour aligner la section avec jQuery afin qu’elle ne soit plus visible 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:

REMARQUE: Si vous souhaitez que la porte de bienvenue masque également l’en-tête, vous pouvez ajouter un z-index supérieur tel que « 99999 ».

Porte de bienvenue Divi

Création du contenu Welcome Gate

Maintenant que notre section est terminée, il est temps d’ajouter le contenu de la porte de bienvenue. Vous pouvez ajouter le contenu de votre choix à cette porte de bienvenue. Commençons par créer un simple CTA à deux boutons. Le bouton de gauche est le bouton sur lequel les utilisateurs doivent cliquer. Le bouton à droite est le bouton «Non merci» qui ferme la porte de bienvenue.

Module de texte

Ajoutez un nouveau module de texte avec le contenu suivant dans la ligne à une seule colonne:

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

Porte de bienvenue Divi

Mise en forme du texte

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

  • Police du texte: cabine
  • Couleur du texte du texte: #ffffff
  • Texte Taille du texte: 24px (bureau), 18px (téléphone)
  • Alignement du texte: centre
  • Police de titre 2: cabane
  • Titre 2 Taille de la police: gras
  • Couleur du texte du titre 2: #ffffff
  • Taille du texte du titre 2: 66 px (bureau), 26 px (tablette)

Porte de bienvenue Divi

Ajouter une ligne avec deux colonnes

Créons une ligne à deux colonnes sous le texte de nos boutons.

Porte de bienvenue Divi

Ajouter le bouton gauche

Ajoutez un module de boutons dans la colonne de gauche et mettez à jour les paramètres comme suit:

  • Texte du bouton: «Miam! Réservez-le « 

Porte de bienvenue Divi

  • Orientation clé: centre
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # bd8f52
  • Largeur du cadre du bouton: 0px
  • Poids du clavier: gras

Porte de bienvenue Divi

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

display: block !important;

Porte de bienvenue Divi

Ajoutez le bon bouton « Non merci »

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

Ensuite, mettez à jour le contenu comme suit:

  • Texte du bouton: non merci
  • URL de raccourci du bouton: # (Ceci est important pour que le bouton ne mette pas à jour la page.)

Porte de bienvenue Divi

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)

Porte de bienvenue Divi

Ajoutez ensuite la classe CSS suivante au bouton non merci:

Porte de bienvenue Divi

C’est notre sélecteur dans jQuery qui ferme la porte de bienvenue lorsque vous cliquez.

Ajouter le code personnalisé

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

Porte de bienvenue Divi

Collez ensuite le code suivant dans le champ de code du module de code:

Porte de bienvenue Divi

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

Porte de bienvenue Divi

En bout de ligne

Voici à quoi ressemble le design final.

Porte de bienvenue Divi

Et voici à quoi ressemble la porte de bienvenue lorsque la page est actualisée.

Porte de bienvenue Divi

Et voici à quoi ressemble la porte d’accueil sur le téléphone mobile.

Porte de bienvenue Divi

Dernières pensées

Espérons que ce tapis de bienvenue soit 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 seul un petit extrait de jQuery est nécessaire pour compléter la fonctionnalité. Donc, si vous recherchez un tapis de bienvenue rapide à mettre sur votre page sans utiliser de plugin, cela devrait vous être utile.

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

De bas en haut!





Source link

Recent Posts