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.