Toutes les collections
Landing Pages
Construire votre landing pages
Comment ajouter un CTA sur une landing page ?
Comment ajouter un CTA sur une landing page ?

Pour mettre un CTA sur vos landing page ou configurer une ancre

Andjie Pasquier avatar
Écrit par Andjie Pasquier
Mis à jour il y a plus d’une semaine

La fonctionnalité première d'une landing page est la soumission du formulaire par votre visiteur, ce qui explique l'absence du bloc de CTA dans l'éditeur.

Cependant vous avez été nombreux à formuler des demandes en ce sens, voici comment faire pour intégrer un CTA sur vos landing pages.

Dans cet article nous verrons :

Intégration du code dans un bloc HTML

1 - Sélectionner le bloc HTML et l'intégrer dans votre landing page

2 - Intégration du code dans le bloc HTML

  • Copier ce code :

<a href="lien" style="padding: 8px 14px; background: rgb(42, 219, 119); color: rgb(255, 255, 255); font-size: 16px; font-weight:bold; text-decoration:none; font-family:Arial, sans-serif; text-transform: uppercase; border-radius: 55px; width: 300px; display:block; margin:0 auto; margin-top: 0px; margin-bottom: 0px; text-align:center;"> Tapez votre texte ici!</a>

  • Supprimer le code existant par défaut et coller le code

Mise en forme du CTA

Nous vous proposons ici deux niveaux de personnalisation de votre CTA, une modification "simple" pour gérer les éléments de base de votre mise en forme (Option 1), une modification "avancée" proposant plus de possibilités en terme de personnalisation mais pour laquelle des connaissances CSS peuvent être nécessaires (Option 2).

1 - Mise en forme simple

Sont encadrées ci dessous les propriétés basiques de mise en forme de votre CTA :

  • Modification des couleurs

Les nombres pour la modification des couleurs sont indiqués ci dessus en RGB pour trouver la valeur de votre couleur vous pouvez utiliser le sélecteur de couleur Google vous pouvez également indiquer ces couleurs en hexadécimale.

Dans le code il faudra indiquer la valeur comme ceci :

  • Modification du texte

Il faudra venir remplacer la mention "Tapez votre texte ici !" dans le code et le remplacer par le libellé souhaité pour votre CTA.

  • Gestion des marges

Pour gérer l'espacement entre le CTA et les éléments se trouvant au-dessus et en dessous, il convient d'indiquer une valeur en pixel après les deux propriétés suivantes : margin-top et margin-bottom.

Par exemple pour une marge de 30 pixels le code devra être configuré comme ceci :

2 - Mise en forme avancée

Vous trouverez la liste de toutes propriétés CSS de votre CTA et leur explications techniques :

  • Lien = lien de la page vers lequel le CTA doit rediriger

  • Padding = Marge intérieure entre le bord du CTA et le texte, la valeur doit être indiqué en pixel (8 marge intérieure de gauche, 14 marge intérieure de droite)

  • Background = Couleur de fond du CTA (dans l’exemple c’est vert) Peut être indiqué en valeur rgb ou en hexadecimale.

  • Color = Couleur du texte dans le CTA. Peut-être indiqué en valeur rgb ou hexadecimale

  • Font-size = Taille de la police du texte (valeur en px)

  • Font-weight = Style de la police de caractère (au client de regarder les possibilités de font weight)

  • Text-decoration = Ajouter une decoration au texte (soulignement, texte barré etc.)

  • Font-family = Type de police de caractère. Attention l’interprétation de certaines polices de caractères peuvent ne pas être lues par certain navigateur.

  • Text-transform = Casse du texte (dans l’exemple c’est MAJ)

  • Border-radius = Degré d’arrondi de la bordure du CTA

  • Width = Largeur globale du CTA valeur en px (dans l’exemple 300px)

  • Display = Mode d’affichage du CTA (cette propriété n’a pas vocation a être modifiée)

  • Margin = Marge du CTA valeur en pixel, 0 = marge de gauche, auto = marge de droite

  • Margin-top = Marge du haut du CTA

  • Margin-bottom = Marge du bas du CTA

  • Text-align = Justification du texte

  • Tapez votre texte ici ! = Texte du CTA

Pour certaines de ces propriétés : Text-align, Display, Text-transform, Font-family, Text-decoration, Font-weight des valeurs spécifiques doivent être indiquées. Vous pouvez facilement trouver ces valeurs sur internet.

Vous pouvez également ajouter d'autres règles CSS afin de personnaliser le CTA, attention cependant à bien respecter la nomenclature du code (sinon cela ne fonctionnera pas).

Configuration du lien de votre CTA

1 - Configuration du lien vers une page

Si vous souhaitez que votre CTA redirige votre visiteur vers une autre page, remplacez dans le code la valeur "lien" par le lien de votre page en conservant les guillemets

Exemple pour un CTA dirigeant vers la page d'accueil de notre Happy Academy :

<a href="https://happy-academy.plezi.co/fr/"

❗️❗️Cette configuration est contraire à une bonne pratique marketing, le but premier d'une landing page est la rétention et la soumission du formulaire par le visiteur. Le rediriger vers une autre page sera contraire à cette logique.

2 - Configuration d'une ancre

Une ancre est un élément technique permettant à votre CTA de renvoyer vers un endroit précis (aimant) sur votre landing page.

  • Configuration du code

Dans le bloc de code de votre CTA, remplacer la valeur "lien" (après le a href =) par la valeur par laquelle vous souhaitez nommer votre ancre. Dans cet exemple nous la nommerons"aimant".

Le code débutera donc par :

<a href="aimant"

  • Configuration de l'aimant

Intégrer dans votre landing page un nouveau bloc HTML à l'endroit ou vous souhaitez que votre CTA renvoi (par exemple au-dessus ou au dessous de votre bloc formulaire)

Remplacer dans le bloc HTML le code par le code suivant :

<p id="aimant"></p>

Puis Enregistrer le bloc.

Finalisation

Enregistrer maintenant les modifications effectuées sur votre landing page.

Publier la landing page.

Avez-vous trouvé la réponse à votre question ?