Générateur de Call-to-Action à intégrer dans tes articles de blog

Un article de blog est le parfait endroit pour faire la promotion de tes ressources ou de tes offres.

Avec cet outil, tes appels à l'action seront plus attrayants que jamais !

Finis les simples liens dans ton texte ou les images qui donnent l'illusion d'une section.

Tester le générateur

1/ Remplis bien tous les champs et clique sur "générer" :

générerEffacer
Check l'aperçu et si le rendu te plait, tu peux copier le code plus bas !
Oops! Something went wrong while submitting the form.

2/ Check si le rendu te convient :

Fixez vos objectifs SEO facilement

Calculez le trafic nécessaire pour atteindre vos objectifs de génération de leads, clients et chiffre d'affaires.

3/ Copie-colle ce code dans un custom code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	.cta-section {
		width: 100%;
		border: 4px solid #EA8713;
		border-radius: 24px;
		background-color: transparent;
		overflow: hidden;
		padding: 24px 40px;
	}
	.cta-content-div {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: center;
	}
	.cta-image {
		max-width: 20%;
		height: auto;
		max-height: 100%;
	}
	.cta-content {
		flex-grow: 1;
	}
	.cta-content h2 {
		font-family: 'Lexend', sans-serif;
		font-weight: 500;
		color: #000;
		font-size: 1.5rem;
		margin: 0;
	}
 .cta-content p {
		font-family: 'Montserrat', sans-serif;
		font-weight: normal;
		color: #000;
		font-size: 1rem;
		margin: 16px 0;
	}
	.cta-content a {
		text-decoration: none;
	}
	.cta-content button {
		font-family: 'Lexend', sans-serif;
		font-weight: 500;
		font-size: 1rem;
		color: #fff;
		background-color: #EA8713;
		padding: 12px 24px;
		border: none;
		border-radius: 24px;
	}
	@media (max-width: 768px) {
		.cta-section {
			padding: 24px;
		}
		.cta-content-div {
			flex-direction: column;
			align-items: center;
		}
		.cta-image {
			max-width: 100%;
		}
	}
</style>
</head>
<body>
<div class="cta-section">
	<div class="cta-content-div">
		<img class="cta-image" src="https://cdn.prod.website-files.com/63d92d8f7ec0d8d3dfd64774/65f8b2ed06ff7571603c2be6_icon-analyse-des-donnees.webp" alt="">
		<div class="cta-content">
			<h2>Fixez vos objectifs SEO facilement</h2>
			<p>Calculez le trafic nécessaire pour atteindre vos objectifs de génération de leads, clients et chiffre d'affaires.</p>
			<a href="https://www.grosse-hacker.com/ressources/calculatrice-objectifs-seo">
				<button class="cta-button">Télécharger la calculatrice</button>
			</a>
		</div>
	</div>
</div>
</body>
</html>