Comment ajouter un bandeau promotionnel au dessus du header avec Divi ?

Une annonce exceptionnelle à faire sur votre site ou votre boutique e-commerce Woocommerce ? Alors il vous faut un bandeau promotionnel placé au dessus du header. Hélas, Divi ne propose pas cette option. De façon générale, les paramètres pour modifier le header de Divi sont restreintes au strict minimum.  Alors comment faire ? Je vous propose une solution sans plugin (moins on en a, mieux c’est)  et assez simple à implémenter. Suivez-moi !

Code pour ajouter un bandeau promotionnel à Divi

Vous devez utiliser le code à télécharger ici. Vous prendrez soin de modifier les zones de textes XXX YYY et ZZZ selon vos besoins. J’ai récupéré ce code via le générateur développé sur le site Divilife. Il a l’avantage de s’afficher au dessus du header et non pas par dessus.

Vous devrez ajouter ce code dans Divi > Options du thème > Intégration > Balise Body puis sauvegarder.

Mettre en page la bannière promo

Le seul problème du code ci-dessus réside ans le fait que le texte a de fortes chance de s’afficher de façon disproportionnée selon vos réglages globaux CSS. Pour y contrevenir, vous devrez ajouter le bout de code CSS suivant dans Divi > Options du thème > Personnaliser CSS (tout en bas de l’écran).

.promo-slide-in-content p {
font-size: 16px !important;
margin-top: 17px;
}

@media (max-width: 380px) {
.promo-slide-in-content p {
font-size: 10px !important;
width: 50% !important;
}
}

Il a pour effet de forcer une taille de police de votre choix sur l’affichage PC et mobile. Vous pouvez modifier le paramètre font-size pour trouver la taille de police qui vous convient. 16ps et 10 ps sur pc et smartphone me semblent de bons choix.

Bonnes promotions Divi à vous !