Comment ajouter des CTA de la barre latérale collante à un modèle de publication de blog dans Divi

Les CTA de Sticky Sidebar sont extrêmement efficaces pour attirer l'attention des visiteurs sans être envahissants ou distrayants. L'astuce consiste à inclure un ou deux éléments dans la barre latérale qui « collent » ou restent fixés sur le côté du contenu de la publication lorsque l'utilisateur fait défiler la page. Il s'agit d'une alternative rafraîchissante à une disposition de barre latérale traditionnelle, car elle offre la sensation d'une disposition moderne pleine largeur (pas de barre latérale) avec l'avantage de présenter les CTA importants sur le côté de la page si nécessaire.

Dans ce didacticiel, nous allons vous montrer comment ajouter des CTA de barre latérale collante à un modèle de publication de blog à l'aide de Divi Theme Builder. L'application de cette disposition est de grande envergure. Cela fonctionnera pour presque n'importe quel modèle de page ou de publication. De plus, vous n'êtes pas obligé de vous limiter aux CTA ; vous pouvez choisir d'ajouter n'importe quel(s) module(s) Divi que vous aimez.

Commençons!

Téléchargez GRATUITEMENT le modèle CTA de Sticky Sidebar

Pour mettre la main sur le modèle de publication cta de la barre latérale collante de ce didacticiel, vous devez d'abord le 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 !

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 un post créé avec le Divi Builder à des fins de test afin de montrer le résultat escompté.

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

Aperçu

Voici un bref aperçu des CTA de la barre latérale collante qui ont été ajoutés à un modèle de publication de blog dans Divi.

Comment ajouter des CTA de barre latérale collante à votre modèle de publication de blog dans Divi

Ajout du modèle de générateur de thème

La première étape consiste à importer notre modèle prédéfini sur notre site. Nous allons utiliser le modèle de publication du Divi Theme Builder Pack #1.

Pour commencer, accédez à Divi > Générateur de thèmes. Cliquez sur l'icône de portabilité en haut à droite de la page. Dans le modal de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier divi-theme-builder-pack-1-post-template.json dans le dossier. Si des modèles sont actuellement installés sur votre site, assurez-vous de décocher toutes les options susceptibles de remplacer vos modèles actuels. Cliquez ensuite sur le bouton importer.

Construire le modèle d'article de blog

Une fois le modèle importé, nous sommes prêts à commencer à ajouter nos nouveaux CTA de barre latérale collante à la mise en page du modèle. Pour ce faire, cliquez sur l'icône de modification de la zone du corps personnalisée.

Ajout d'une disposition à double barre latérale pour contenir les CTA de la barre latérale

Dans l'éditeur de disposition de modèle, recherchez la ligne qui contient le module de contenu de publication et modifiez la disposition des colonnes en une structure de colonne un cinquième trois cinquièmes un cinquième (1/5 3/5 1/5). Cela nous permettra de garder la colonne centrée pour le contenu de la publication tout en fournissant deux sections de chaque côté pour nos CTA de barre latérale collante.

Une fois la structure de la colonne modifiée, faites glisser le module de contenu de publication vers la colonne centrale.

Mise à jour des paramètres de ligne

Ouvrez les paramètres de ligne et mettez à jour les options de conception suivantes :

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 2
• Largeur : 100 % (ordinateur de bureau), 90 % (tablette)
• Largeur maximale : 1500px

Cela nous donnera l'espace dont nous avons besoin pour notre configuration à double barre latérale.

Mise à jour des paramètres de la colonne 1

Ensuite, ouvrez les paramètres de la colonne 1 et attribuez à la colonne une classe CSS personnalisée :

• Classe CSS : sticky-cta

Ajout d'un CTA de la barre latérale à la colonne de gauche

Nous sommes maintenant prêts pour le premier appel à l'action. Ajoutez un module d'appel à l'action dans la colonne la plus à gauche.

Styliser le CTA de la barre latérale

Mettez à jour les paramètres comme suit :

Teneur

• Bouton : « Cliquez ici »
• Corps : « Votre contenu va ici. Modifiez ou supprimez ce texte en ligne ou dans les paramètres de contenu du module.
• URL du lien du bouton : #

Conception du corps du texte

• Police de caractère : Montserrat
• Poids de la police de caractères : semi-gras
• Alignement du corps du texte : à droite
• Couleur du corps du texte : #444444
• Taille du corps du texte : 22 px (ordinateur de bureau), 18 px (tablette)
• Hauteur de la ligne du corps : 1,3 em

Bouton

• Taille du texte du bouton : 14 px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #6148df
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 80px
• Poids de la police du bouton : gras
• Style de police des boutons : TT
• Remplissage des boutons : 12 pixels en haut, 12 pixels en bas, 22 pixels à gauche, 22 pixels à droite

Largeur, alignement, remplissage et bordures

• Largeur : 100 %
• Largeur maximale : 320px
• Alignement du module : à droite
• Remplissage : 10px à gauche, 10px à droite
• Largeur de la bordure supérieure : 10px
• Couleur de la bordure supérieure : #eeeeee
• Largeur de la bordure inférieure : 10px
• Couleur de la bordure inférieure : #eeeeee

Ajout du CTA de la barre latérale à la colonne de droite

Pour créer le CTA de la colonne de droite, copiez celui que nous venons de créer et collez-le dans la colonne la plus à droite. Mettez ensuite à jour les paramètres du doublon comme suit :

• Alignement du corps du texte : à gauche
• Alignement du module : à gauche

Mettre à jour les paramètres de la colonne 3

Pour ce CTA dans la colonne de droite, nous allons ajouter une marge supérieure à la colonne afin d'établir une position de départ du CTA de la barre latérale à un point plus bas sur la page.

Tout d'abord, ouvrez les paramètres de la colonne 3 et ajoutez la même classe CSS que nous avons ajoutée à la colonne 1 :

• Classe CSS : sticky-cta

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

Bureau

margin-top: 50%

Tablette

margin-top: 0%

Cela nous donnera un point de départ différent pour le CTA collant sur la colonne de droite qui est égal à 50% de la largeur de la ligne. N'hésitez pas à ajuster cette valeur au besoin pour votre propre article de blog.

Ajout du CSS personnalisé au modèle avec un module de code

Afin d'obtenir notre positionnement « collant » pour nos CTA de la barre latérale, nous devons ajouter du CSS personnalisé. Pour ce faire, créez un nouveau module de code sous le module de contenu de publication (ou n'importe où sur la page).

Collez ensuite le CSS suivant dans la zone de code :

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

Le décalage supérieur dans ce code est un calcul qui positionne le CTA verticalement centré sur la page lors du défilement. Le 50vh est essentiellement la moitié de la hauteur de la fenêtre du navigateur et le 130px est à peu près la moitié de la hauteur du CTA. Si vous avez un CTA qui a une hauteur supérieure/inférieure, vous devrez ajuster le 130px vers le haut ou vers le bas.

Enregistrer les paramètres

Une fois que vous avez terminé, enregistrez la mise en page du modèle.

Et puis enregistrez les paramètres du générateur de thème

Résultat final

Pour voir le résultat final, visitez un article de blog qui utilise le modèle.

Et c'est ainsi que les CTA de la barre latérale collante resteront collés au défilement. Vous pouvez voir comment cela fonctionnerait le mieux pour un contenu de publication plus long.

Et le voici sur écran mobile.

Dernières pensées

Ces CTA de barre latérale collante sont une alternative rafraîchissante à la barre latérale traditionnelle. Ils conviennent bien au design minimaliste car ils sont moins intrusifs et ne donnent pas au poste une sensation encombrée. De plus, vous pouvez positionner le CTA plus bas sur la page afin qu'il apparaisse progressivement et colle au défilement, le faisant ressortir un peu plus pour les visiteurs. Et n'oubliez pas. Vous pouvez remplacer le CTA par n'importe quel module Divi ou combinaison de modules pour créer à peu près tout ce que vous voulez. Vous pouvez également choisir de ne conserver qu'un seul CTA d'un côté. Il semble avoir beaucoup d'applications.

J'espère que cela vous aidera à améliorer la façon dont vous affichez les CTA sur vos modèles de publication à l'avenir.

Pour plus d'inspiration, consultez nos articles similaires sur les éléments collants.

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

À votre santé!