Comment ajouter une barre latérale collante CTA à un modèle de billet de blog dans Divi

Largeur, alignement, remplissage et largeur du bord: 100% largeur maximale: 320 Px alignement du module: remplissage à droite: 10px à gauche, 10px à droite largeur du bord supérieur: 10 Px couleur du bord supérieur: # eeeeeeee largeur du bord inférieur: 10 Px couleur du bord inférieur: # eeeeeeee couleur du bord inférieur: # eeeeeeeeee Ajoutez une invitation à l’action de la barre latérale à la colonne de droite pour créer le CTA de la colonne de droite, copiez le CTA que vous venez de créer et collez – le dans la colonne de droite. Ensuite, mettez à jour les paramètres de la copie comme suit: alignement du corps du texte: alignement du formulaire de gauche: gauche Mettre à jour les paramètres de la colonne 3 de ce CTA dans la colonne de droite, et nous ajouterons une marge au – dessus de la colonne pour établir la position de départ du CTA de la barre latérale à un point au – dessous de 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 puis ajouter les CSS personnalisés suivants à l’élément principal: marge de bureau en haut: 50% marge en haut tableau: 0% Cela 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. Vous pouvez ajuster cette valeur pour votre billet de blog au besoin. Utilisez le formulaire de code pour ajouter des CSS personnalisés au modèle afin d’obtenir le positionnement « collant » du CTA dans la barre latérale, nous devons ajouter des CSS personnalisés. Pour ce faire, créez un nouveau formulaire de code sous le formulaire de contenu Post (ou n’importe où sur la page). Ensuite, collez le CSS suivant dans la zone de code: Écran média seulement et (largeur minimale: 980px)
Conteneur de page
Débordement y: visible! Important;}
– Oui. CTA visqueux
Position: collant! Important
Position: – webkit collant! Important
Type T
Calcul: calcul (50vh – 130px)! Important
}
}

L’offset supérieur dans ce code est un calcul qui place le CTA centré verticalement sur la page pendant le défilement. 50vh est en fait la moitié de la hauteur de la fenêtre du navigateur, et 130 Px est environ la moitié de la hauteur du CTA. Si votre CTA a une hauteur plus élevée \ plus basse, vous devez ajuster 130 pixels vers le haut ou vers le bas. Lorsque vous avez terminé d’enregistrer les paramètres, sauvegardez la disposition du modèle. Puis enregistrez les paramètres du générateur de thème Résultats finaux pour voir les résultats finaux, consultez le billet de blog qui utilise ce modèle. C’est ainsi que le CTA adhésif de la barre latérale est collé à la barre de défilement. Vous pouvez voir comment il s’adapte le mieux aux messages plus longs. C’est sur l’écran mobile. Ces CTA collants de la barre latérale sont une alternative rafraîchissante à la barre latérale traditionnelle. Ils sont parfaits pour un design minimaliste parce qu’ils sont moins perturbateurs et n’apportent pas un look désordonné aux poteaux. De plus, vous pouvez placer le CTA au bas de la page pour l’afficher progressivement et le coller sur la barre de défilement afin qu’il so it plus visible pour les visiteurs. N’oublie pas. Vous pouvez remplacer le CTA par n’importe quel module Divi ou combinaison de modules pour créer 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 visualisez le CTA dans les futurs modèles de post. Pour plus d’inspiration, consultez nos articles similaires sur les éléments collants. J’ai hâte d’entendre vos commentaires. Bonjour!