Comment ajouter un appel à l'action coulissant fermable à n'importe quel coin de votre modèle de page dans Divi

Avoir un appel à l'action sur votre site est l'un des moyens les moins intrusifs d'attirer l'attention de vos visiteurs. La plupart du temps, ils ignoreront simplement le CTA ou le fermeront pour continuer à parcourir la page, mais parfois vous les gagnerez. Un appel à l'action coulissant fonctionnera très bien pour promouvoir à peu près n'importe quoi sur une page de destination.

Dans ce didacticiel, nous allons concevoir un appel à l'action pouvant être fermé et pouvant être ajouté à n'importe quel coin d'une page à l'aide de Divi Theme Builder. Une fois cela fait, vous aurez la possibilité de promouvoir vos produits et offres spéciales n'importe où sur la page sans avoir à utiliser de plugin.

Commençons!

Aperçu

Voici un bref aperçu des quatre CTA coulissants que nous ajouterons aux quatre coins du modèle de page. Bien sûr, vous n'aurez pas besoin de déployer les quatre en même temps. Remarquez comment chacun peut être fermé en cliquant sur l'icône « x », puis vous pouvez choisir de réouvrir le CTA en cliquant sur l'icône « plus ».

Téléchargez GRATUITEMENT le modèle de page d'appel à l'action Divi

Pour mettre la main sur le modèle de page 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 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 ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du générateur de thème.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.

Vous aurez également besoin d'au moins une page créée avec le Divi Builder à des fins de test afin d'attribuer le nouveau modèle à cette page pour afficher le résultat.

Après cela, vous êtes prêt à partir.

Création d'une incitation à l'action coulissante fermable pour chaque coin de votre modèle de page dans Divi

Création d'un nouveau modèle

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur la case « Ajouter un nouveau modèle » pour créer un nouveau modèle.

Attribuez le modèle à la ou aux pages sur lesquelles vous souhaitez afficher la barre de promotion.

Sur le nouveau modèle, cliquez sur la zone « Ajouter un corps personnalisé » puis sélectionnez « Créer un corps personnalisé ».

Sélectionnez ensuite l'option « Construire à partir de zéro ».

Création de la section Contenu de l'article

La section contenu de la publication est une partie nécessaire de tout modèle de page afin d'afficher le contenu réel de la page ou de la publication construite dans Divi ou WordPress. Nous l'ajouterons à notre modèle avant de créer notre premier appel à l'action coulissant.

Ajouter une ligne à une colonne

Pour commencer, ajoutez une ligne à une colonne à la section normale.

Ajouter un module de contenu de publication

Ajoutez ensuite un module de contenu de publication à la ligne.

Paramètres de ligne

Après cela, mettez à jour les paramètres de ligne comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %
• Remplissage : 0px en haut, 0px en bas

Création de l'appel à l'action coulissant en haut à gauche

Maintenant que notre module de contenu de publication est en place, nous sommes prêts à commencer à ajouter notre premier appel à l'action coulissant dans le coin supérieur gauche du modèle de page.

Ajouter une section

Chaque nouvel appel à l'action sera créé avec une toute nouvelle section. Cela vous permettra d'ajouter n'importe quelle mise en page ou module nécessaire pour concevoir l'appel à l'action.

Ajoutez une nouvelle section régulière à la mise en page du modèle.

Ajouter une ligne à une colonne

Ensuite, donnez à la section une ligne d'une colonne.

Paramètres de section

Faites glisser (ou déplacez) la section au-dessus de la section de contenu de la publication et mettez à jour les paramètres de la section comme suit :

• Couleur d'arrière-plan du dégradé de gauche :
• Dégradé d'arrière-plan à droite :
• Afficher le dégradé au-dessus de l'image : OUI
• Image d'arrière-plan : [insérer l'image]
• Largeur : 320px
• Marge : 320px restants
• Remplissage : 0px en haut, 0px en bas
• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 2000 ms

Sautez ensuite sur l'onglet avancé et ajoutez la classe CSS et l'index Z suivants :

• Classe CSS : slide-in-cta
• Indice Z : 999

Et ajoutez l'extrait de code CSS personnalisé suivant à l'élément principal :

position: fixed;
top: 80px;
left: -320px;

La classe CSS est nécessaire pour que nous puissions cibler la section avec du code plus tard. Le CSS personnalisé positionnera la section en haut à gauche du modèle de page dans une position fixe (ou collante). La position « gauche : -320 pixels » doit déplacer toute la section (qui fait 320 pixels de large) en dehors de la fenêtre du navigateur. Mais nous avons la marge de gauche de 320px pour le ramener à la vue. La raison pour laquelle cela est construit de cette façon est que nous pouvons activer et désactiver la valeur de la marge en cliquant sur l'icône "x". Cela fera glisser le CTA dans et hors de vue.

Paramètres de ligne

Mettons maintenant à jour les paramètres de ligne comme suit :

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 1
• Largeur : 100 %
• Remplissage : 0px en haut, 0px en bas

Ajouter un module d'appel à l'action

À l'intérieur de la ligne, ajoutez un module d'appel à l'action.

Paramètres d'incitation à l'action

Mettez ensuite à jour les paramètres de l'appel à l'action.

Teneur

• Titre : [entrez le texte de votre choix]
• Bouton : [entrez le texte de votre choix]
• Corps : [entrez le texte de votre choix]
• URL du lien du bouton : [entrez l'URL réelle ou le #]

Ensuite, supprimez la couleur d'arrière-plan par défaut pour révéler l'arrière-plan de la section que nous avons ajoutée précédemment.

Paramètres de conception (texte, bouton et remplissage)

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Police du titre : Lato
• Poids de la police du titre : lourd
• Hauteur de la ligne de titre : 1,3 em
• Police de caractère : Lato
• Poids de la police de caractères : gras
• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 15 px
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 1px
• Police des boutons : Lato
• Poids de la police du bouton : lourd
• Style de police des boutons : TT
• Remplissage des boutons : 12 px en haut, 12 px en bas, 32 px à gauche, 32 px à droite
• remplissage : 40 px en haut, 40 px en bas, 40 px à gauche, 40 px à droite

Ajouter une icône d'ouverture et de fermeture avec un module Blurb

Une fois l'appel à l'action terminé, nous devons créer le bouton d'icône utilisé pour ouvrir et fermer l'appel à l'action coulissant. Pour créer cela, ajoutez un module de présentation sous le module d'appel à l'action.

Paramètres de présentation

Mettez à jour les paramètres de conception suivants.

Teneur

• supprimer le titre et le corps du texte par défaut
• Utiliser l'icône : OUI
• Icône : plus (voir capture d'écran)

Concevoir

• Couleur de l'icône : #000000
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 40 px
• Largeur : 40px
• Hauteur : 40px
• Coins arrondis : 50 %
• Transformer l'axe Z de rotation : 135 deg

Réglages avancés

Sous l'onglet avancé, ajoutez la classe CSS suivante :

• Classe CSS : slide-in_target

Ajoutez ensuite ce CSS personnalisé à l'élément principal.

position: absolute;
bottom: 0px;
right: -40px;

Ajoutez le CSS personnalisé suivant à l'image Blurb.

margin-bottom: 0px;

Résultat

Voici le résultat à ce jour.

Gardez à l'esprit que nous devons encore ajouter du code pour ajouter la fonctionnalité de fermeture et d'ouverture lorsque vous cliquez sur l'icône « x ». Nous ajouterons le code après avoir créé un appel à l'action dans chacun des quatre coins du modèle.

Création de l'appel à l'action coulissant en haut à droite

Avec le premier appel à l'action coulissant créé, nous pouvons accélérer le processus de création du reste des CTA en dupliquant la section déjà créée. Ensuite, nous allons créer un appel à l'action coulissant pour le coin supérieur droit.

Section en double

Déployez le mode d'affichage filaire, puis dupliquez la section CTA en haut à gauche.

Mettre à jour les paramètres de la section

Mettez ensuite à jour les nouveaux paramètres de section comme suit :

• marge : 320px à droite
• sens de l'animation : gauche

Mettez ensuite à jour le CSS personnalisé dans l'élément principal en remplaçant « gauche » par « droite ». Voici l'extrait complet :

position: fixed;
top: 80px;
right: -320px;

Mettre à jour les paramètres du module Blurb

Ensuite, ouvrez les paramètres du module de présentation et mettez à jour l'extrait CSS personnalisé dans l'élément principal en remplaçant « right » par « left ». Voici l'extrait complet :

position: absolute;
bottom: 0px;
left: -40px;

Résultat

Vous verrez maintenant un appel à l'action coulissant en haut à droite du modèle de page.

Création de l'appel à l'action coulissant en bas à gauche

Section en double

Pour créer un appel à l'action coulissant dans le coin inférieur gauche du modèle de page, dupliquez la section CTA en haut à gauche en haut de la mise en page. Étiquetez la section en double « CTA en bas à gauche », puis déplacez-la sous la section du contenu de la publication.

Mettre à jour les paramètres de la section

Ensuite, ouvrez la section Paramètres, mettez à jour l'élément principal CSS en remplaçant "top: 80px" par "bottom: 0px". Voici l'extrait final :

position: fixed;
bottom: 0px;
left: -320px;

Mettre à jour les paramètres du module Blurb

Ensuite, mettez à jour l'élément principal CSS du module Blurb en remplaçant « bottom : 0px » par « top : 0px ». Voici l'extrait final :

position: absolute;
top: 0px;
right: -40px;

Résultat

Découvrez maintenant l'appel à l'action coulissant en bas à gauche sur la page en direct.

Création de l'appel à l'action coulissant en bas à droite

Section en double

Pour créer l'appel à l'action coulissant en bas à droite, dupliquez la section CTA en haut à droite et déplacez la section dupliquée sous la section du contenu de la publication.

Mettre à jour les paramètres de la section

Ouvrez les paramètres de la section et mettez à jour l'élément principal CSS en remplaçant « top : 80px ; » avec « bas : 0px ; ». Voici l'extrait final :

position: absolute;
bottom: 0px;
right: -320px;

Mettre à jour les paramètres du module Blurb

Ensuite, ouvrez les paramètres du module de présentation et mettez à jour l'élément principal CSS en remplaçant "bottom: 0px;" avec « haut : 0px ; ». Voici l'extrait final :

position: absolute;
top: 0px;
right: -40px;

Résultat

Découvrez maintenant l'appel à l'action en bas à droite sur la page en direct.

Ajout des extraits de code jQuery et CSS personnalisés à l'aide d'un module de code

Pour la dernière étape, nous devons ajouter du jQuery et du CSS personnalisés afin que nous puissions obtenir la fonctionnalité d'ouverture et de fermeture de chacun des CTA coulissants.

Ajouter un module de code

Ajoutez un module de code à l'une des sections de la mise en page.

Coller le code

Ensuite, ouvrez les paramètres du code et collez le code suivant dans la zone de code.

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

Dernières pensées

Avec Divi, créer un appel à l'action n'est pas difficile du tout. Et puisque vous pouvez utiliser le générateur de thème pour ajouter un appel à l'action à un modèle de page, vous aurez plus de contrôle sur les pages qui afficheront ces CTA. N'hésitez pas à augmenter le délai d'animation de la section CTA afin que l'utilisateur puisse voir l'animation du slide-in CTA un peu plus tard (ou plus tôt) après le chargement de la page. Vous pouvez également utiliser les leads Divi et activer les tests fractionnés pour améliorer les conversions de ces CTA et découvrir quel coin aura la meilleure conversion.

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

À votre santé!