Comment créer une bannière CTA

Voici le code HTML & CSS vous permettant de créer une bannière CTA. Il faudra personnaliser avec l'image et les couleurs de la charte du client. Pour vous aider à créer le visuel, utilisez canva.

Exemple de rendu d'une bannière CTA

Capture d’écran 2021-02-05 à 11.59.31

Code HTML à mettre dans votre article
(Zone de texte : Advanced > Source code) :

<div class="zone-cta-template">
<div class="zone-cta-template-mockup"><img src="Lien vers l'image"></div>
<div class="zone-cta-template-text"><strong>Guide gratuit</strong>
<p>Développez votre stratégie de prospection & gagnez en efficacité commerciale</p>
VOTRE TOKEN DE CTA ICI
</div>
</div>

Exemple de CTA dans un article de blog

Capture d’écran 2021-02-05 à 11.52.36

Pour récupérer l'ID de votre CTA

  • Rendez-vous dans Marketing > Lead capture > CTAs

  • Sélectionnez votre CTA

  • Regarder l'URL de la page

  • L'ID se trouve à la fin de cette URL

Capture d’écran 2021-02-05 à 11.50.54

Dans cet exemple l'ID est : 6c5b0831-785f-4c7C-bb4f-0650819d27fd

Code CSS à mettre dans une feuille de style et à attacher à votre template (blog ou LP).

.zone-cta-template {
position: relative;
background: #ffce0b;
overflow: hidden;
}
.zone-cta-template > div {
float: left;
}
.zone-cta-template::after{
content: "";
display: block;
clear: both;
}
.zone-cta-template .zone-cta-template-mockup {
width: 200px;
position: absolute;
padding: 40px 0 0 40px;
}
.zone-cta-template-text {
margin-left: 200px;
padding: 40px;
}
.zone-cta-template-text strong {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 14px;
}
.zone-cta-template-text p {
color: #fff;
font-size: 22px;
}
.zone-cta-template-text span {
font-size: 14px;
font-weight: 600;
display: inline-block;
}
.zone-cta-template-text > span {
margin-top: 20px;
box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
border-radius: 10px;
}