Appels à l'action

Conseils

Un appel à l’action est un bouton ou un lien qui encourage l’utilisateur à mener une action précise. Il faut utiliser les appels à l’action avec modération et s’assurer qu’ils sont pertinents et appropriés en fonction des contextes dans lesquels ils sont utilisés. L’utilisation excessive ou inappropriée des appels à l’action peut être irritante ou déroutante pour les utilisateurs et peut ainsi nuire à leur efficacité. Les exemples d’appels à l’action appropriés incluent l’inscription à un bulletin d’information, le téléchargement d’un fichier ou encore le lancement d’une application.

Appel à l'action

Le composant d’appel à l’action par défaut est inséré dans le contenu de la page. Il est redimensionné en fonction de la colonne ou du conteneur parent et peut être utilisé dans une barre latérale. Appliquez les titres <h2>, <h3> ou <h4> aux appels à l’action, en fonction de la structure de contenu de la page.

<div class="gnb-call-to-action">
	<h3>Lorem ipsum dolor</h3>
	<p>Sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem.</p>
	<p>
		<a href="#" class="gnb-btn">Bouton principal</a>
	</p>
</div>

Section d’appel à l’action

Il s’agit d’un composant pleine largeur. Vous devez fermer toutes les sections et tous les conteneurs précédents dans la page HTML avant d’utiliser une section d’appel à l’action. Comme ce composant commence une nouvelle section, appliquez une balise de niveau <h2>.

<section class="gnb-call-to-action-section">
	<div class="container">
		<h2>Lorem ipsum dolor</h2>
		<p>Sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem.</p>
		<p>
			<a href="" class="gnb-btn">Bouton principal</a>
		</p>
	</div>
</section>

Section d’appel à l’action avec image

Il s’agit d’un composant pleine largeur. Vous devez fermer toutes les sections et tous les conteneurs précédents dans la page HTML avant d’utiliser une section d’appel à l’action avec image.

Ajoutez l’image de fond personnalisée à l’aide de code CSS intraligne. L’image sera redimensionnée en fonction de la largeur de l’écran. La taille d’image idéale a une largeur comprise entre 1440 et 1920 pixels, une hauteur maximale de 1080 pixels et est optimisée pour ne pas dépasser 160 ko. Ce composant ajoutera une couche noire pour s’assurer qu’il y a suffisamment de contraste entre l’image et le texte. Toutefois, les images pâles ou lumineuses ne sont pas recommandées. Votre image personnalisée ne doit pas contenir de texte, de logo ou d’illustration ni apparaître floue, déformée ou pixelisée.

Vous pouvez utiliser un outil en ligne gratuit et accessible en source libre comme Squoosh pour rogner, optimiser et redimensionner vos images.