Tutoriel : Créer un appel à l'acte qui déchire dans WordPress, sans plugin !

avatar de baptiste pagès
Par Baptiste Pagès le 9 septembre 2021

Publié dans Tutoriel

Mis à jour le 9 septembre 2021

La qualité des appels à l'acte d'un site WordPress aura un énorme impact sur ses résultats. Aujourd'hui je vous montre comment créer des appels à l'acte attractifs directement dans l'éditeur Gutenberg de WordPress. Pas besoin de plugin 👌

Guide Vidéo

Le code CSS que nous allons utiliser

.wp-block-button .wp-block-button__link{
	border-style:none;
}
.wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container{
	z-index:3;
}
.mon-cta{
	position:relative;
	z-index:2;
	border-radius:14px;
	box-shadow:0 0 20px rgba(0,0,0,0.25);
	margin-bottom:25px;
	overflow:hidden;
	transition:0.2s linear all;
}
.mon-cta:after{
	content:"";
	display:block;
	height:300%;
	width:0px;
	background-color:#00000055;
	z-index:2;
	position:absolute;
	transform:rotate(45deg);
	transition:0.5s cubic-bezier(.21,-0.96,.6,1.95) all;
	backdrop-filter:blur(5px);
}
.mon-cta:hover:after{
	width:50%;
}
.mon-cta:hover{
	transform:scale(1.05);
}
.mon-bouton:hover > a{
	background-color:white !important;
	color:#ea37a5 !important;
	letter-spacing:2px;
}
.mon-cta h2{
	text-transform:uppercase;
}
.mon-cta h2 strong{
	background-color:#ea37a5 !important;
	padding-left:5px;
	padding-right:5px;
}
.mon-cta p{
	max-width:500px;
}

Résumé du tutoriel

1 - Créer une bannière dans Gutenberg

Notre appel à l'acte sera une bannière dans laquelle on insérera un bouton. Il faut donc aller dans "Ajouter", puis "Bannière". Il faut ensuite lui définir une image d'arrière-plan et écrire son titre. Pour une meilleure sémantique, vous pouvez transformer le texte de la bannière en titre Gutenberg. Par défaut, c'est un paragraphe.

Ajout d'une bannière dans Gutenberg
Ajout d'une bannière dans Gutenberg
Choisir l'image d'arrière plan de la bannière dans la médiathèque
Choisir l'image d'arrière plan de la bannière dans la médiathèque
Rédiger le titre de l'appel à l'acte

Vous pouvez ensuite ajuster la taille du texte mais aussi l'opacité de l'arrière-plan pour vous assurer que le texte soi lisible. Souvenez-vous que rien n'est plus important que la lisibilité de vos textes et que le contraste est un principe fondamental en webdesign.

2 - Ajouter un bouton

Une fois le titre défini, vous pouvez ajouter un bouton dans la bannière grâce au bouton "Plus" bleu en haut à gauche de l'interface. Il faut ensuite écrire le texte du bouton et définir le lien vers lequel il envoie (j'oublie de le faire dans la vidéo, pensez-y).

Ajouter un bouton à notre appel à l'acte
Ajouter un bouton à notre appel à l'acte
Définir le texte du bouton
Définir le texte du bouton

Il faudra ensuite le centrer et définir la couleur que vous souhaitez utiliser pour son texte et son arrière-plan. Si besoin vous pouvez définir un bouton secondaire.

3 - Définir les classes personnalisées

Notre appel à l'acte est déjà pas mal, mais pour le rendre super on va devoir faire du CSS. Et pour ça, il va falloir donner la classe "mon-cta" à la bannière, et la classe "mon-bouton" au bouton.

Ajouter une classe à la bannière
Ajouter une classe au bouton

4 - Ajouter du CSS additionnel

Maintenant, il ne nous reste plus qu'à ajouter du CSS personnalisé. Copiez-collez le code que je vous ai donné en début d'article, et le tour est joué ! Si vous avez besoin d'aide pour l'adapter à votre situation, n'hésitez pas à me contacter.

Merci !

Merci d'avoir lu cet article. J'espère qu'il vous aura été utile ! Si vous avez besoin d'aide avec la réalisation ou la refonte de votre site web, vous pouvez me contacter pour en discuter. À bientôt !

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉