skip to Main Content

Comment ajouter des CTA collantes à un modèle d’articles avec Divi Builder

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Les sidebars collantes sont extrêmement efficaces pour attirer l’attention des visiteurs sans être envahissants ou distraits. L’astuce consiste à inclure un ou deux éléments dans la barre latérale qui «restent visible» ou fixes 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 à la disposition de la barre latérale traditionnelle, car elle donne l’impression d’une disposition moderne en pleine largeur (sans barre latérale), avec l’avantage de présenter des appels à l’action importants sur le côté de la page lorsque cela est nécessaire.

Dans ce tutoriel, nous allons vous montrer comment ajouter des appels à l’action collantes à un modèle de publication de blog à l’aide de Divi Theme Builder. L’application de cette mise en page est considérable. Cela fonctionnera pour presque toutes les pages ou tous les modèles de publication. De plus, vous n’êtes pas obligé de vous limiter aux CTA; vous pouvez choisir d’ajouter le ou les modules Divi de votre choix.

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez installer et activer le thème Divi . Assurez-vous de disposer de la dernière version de Divi.

Vous aurez également besoin d’au moins un message créé avec Divi Builder à des fins de test afin d’afficher le résultat souhaité.

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

Aperçu

Voici un aperçu rapide des CTA collants qui ont été ajoutés à un modèle de publication de blog dans Divi.

Comment ajouter des Appels à l’action fixes dans 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, veillez à décocher toutes les options susceptibles de remplacer vos modèles actuels. Puis cliquez sur le bouton d’importation.

Construire le modèle de publication de blog

Une fois le modèle importé, nous sommes prêts à ajouter nos nouveaux CTA à la barre latérale adhésive à la présentation du modèle. Pour ce faire, cliquez sur l’icône d’édition de la zone de corps personnalisée.

Ajout d’une disposition à double barre latérale pour tenir les CTA de la barre latérale

Dans l’éditeur de présentation de modèle, recherchez la ligne contenant le module de publication de contenu et remplacez la disposition de colonne par une structure de colonne d’un cinquième sur trois cinquièmes sur un cinquième (1/5 3/5 1/5). Cela nous permettra de conserver la colonne centrée pour le contenu de la publication tout en fournissant deux sections de part et d’autre pour nos CTA collants.

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

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

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% (bureau), 90% (tablette)
  • Largeur maximale: 1500px

Cela nous donnera la pièce 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 donnez à cette colonne une classe CSS personnalisée:

  • Classe CSS: sticky-cta

Ajout d’une barre latérale CTA à la colonne de gauche

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

Styliser la barre latérale CTA

Mettez à jour les paramètres comme suit:

Contenu
  • 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
  • Corps Police: Montserrat
  • Poids de la police: semi-gras
  • Corps du texte: alignement à droite
  • La couleur du corps du texte: # 444444
  • Taille du corps du texte: 22px (bureau), 18px (tablette)
  • Hauteur du corps: 1.3em
CTA collants
Bouton
  • Taille du texte du bouton: 14px
  • Couleur du texte du bouton: #ffffff
  • Couleur de fond du bouton: # 6148df
  • Largeur de la bordure du bouton: 0px
  • Rayon du bouton: 80px
  • Poids de la police: Gras
  • Style de police des boutons: TT
  • Rembourrage de boutons: 12px en haut, 12px en bas, 22px à gauche, 22px à droite
Largeur, alignement, rembourrage et bordures
  • Largeur: 100%
  • Largeur maximale: 320px
  • Alignement du module: droit
  • Rembourrage: 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 de la barre latérale CTA à la colonne de droite

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

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

Mettre à jour les paramètres de la colonne 3

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

Commencez par ouvrir les paramètres de la colonne 3 et ajoutez la même classe CSS que celle que nous avons ajoutée à la colonne 1:

  • Classe CSS: sticky-cta

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

Bureau

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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, ce qui correspond à 50% de la largeur de la ligne. N’hésitez pas à ajuster cette valeur selon vos besoins 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 des CSS personnalisés. Pour ce faire, créez un nouveau module de code sous le module de publication de contenu (ou n’importe où sur la page).

Ensuite, collez 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 correspond à la moitié de la hauteur de la fenêtre du navigateur et le 130px à la moitié de la hauteur de la CTA. Si votre CTA a une hauteur supérieure ou inférieure, vous devrez ajuster les 130 pixels vers le haut ou le bas.

Enregistrer les paramètres

Une fois que vous avez terminé, enregistrez la disposition du modèle.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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

Résultat final

Pour afficher le résultat final, visitez un article de blog utilisant le modèle.

CTA collants

Et c’est ainsi que les CTA collants resteront collés au défilement. Vous pouvez voir comment cela fonctionnerait mieux pour un contenu plus long.

Dernières pensées

Ces appels à l’action latéraux collants sont une alternative rafraîchissante à la barre latérale traditionnelle. Ils conviennent bien au design minimaliste car ils sont moins intrusifs et ne confèrent pas à la poste une impression d’encombrement. De plus, vous pouvez positionner le CTA plus bas sur la page de sorte qu’il apparaisse progressivement et qu’il reste collé sur le parchemin, ce qui le rend plus visible des visiteurs. Et n’oublie 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.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez1
Tweetez
Enregistrer