Comment personnaliser ma landing page ?

Vous avez créé une Landing page et souhaitez la personnaliser et y ajouter des détails ? Map, vidéo, favicon, localisation...

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

Vous avez crée une Landing page pour l'inscription à un événement et souhaitez y ajouter des détails, comme la localisation, une vidéo, du responsive ? 

C'est très simple !
Dans cet article, on vous guidera sur plusieurs points pour ajouter des choses à votre landing page :

  • Intégrer un bloc de texte sur deux colonnes ;

  • Intégrer une Map ;

  • Intégrer une vidéo ;

  • Avoir une image responsive ;

  • Ajouter une favicon ;

  • Ajouter un CTA renvoyant vers le haut de la page.

  • Supprimer le soulignement d'un lien hypertexte

Comment intégrer un texte sur plusieurs colonnes côte-à-côte ?

Vous souhaitez avoir un rendu tel quel ?

  1. Mettre un bloc "Texte" simple

2. Sur la gauche, dans le menu déroulant, sélectionner l'onglet rose de personnalisation du bloc puis renseigner le nombre de colonnes souhaitées

Comment intégrer une map ?

  1. Récupérer le code d'intégration

Dans Google Maps, renseignez votre adresse.
Puis cliquez sur "Partager" et dans la pop up, sélectionnez "Intégrer une carte"

Vous trouverez là le contenu HTML à récupérer

Vous obtenez un code qui ressemble à ceci :

2. Intégrer le code dans votre Landing Page

Dans votre éditeur de Landing Page, sélectionnez le bloc HTML.

Cliquez sur </> Code, puis remplacer le code donné en exemple par celui que vous avez récupéré. 

Et voilà ! En quelques clics, vous avez intégré votre map à votre landing page. 

Pour aller + loin : 

La map va naturellement s'aligner sur votre LP. Pour la mettre au centre, il vous fait ajouter / modifier quelques fragments de codes :

Ainsi, pour la centrée, voici le code reformulé : 

<div style="text-align:center">
                    <p> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1518619513145!2d2.3505876154926337!3d48.87438147928909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fbe448dd087%3A0x6b19709e22838330!2sPlezi!5e0!3m2!1sfr!2sfr!4v1534941422720" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe></p>
​                    </div>

Pour cela 🤓 : 

  • Ajouter en début de code : <div style="text-align:center">

  • Remplacer : "width="600" par width="100%"

  • Vous avez ajouté une <div>, donc en codeur consciencieux, vous devez la fermer ensuite en ajoutant </div>

Comment intégrer une vidéo ?

Dans votre éditeur de landing page, vous avez la possibilité d'ajouter une vidéo, grâce à du code HTML. Il faut donc bien que cette vidéo soit disponible en ligne (YouTube, Vimeo, etc.).

Voici les étapes : 

  1. Selectionez le bloc HTML et placez le dans le corps de votre landing page ; 

2. Dans le bloc nouvellement créé, cliquer sur le bouton "</> Code" ;

3. Une fenêtre s'ouvre : insérez ici le code HTML de votre video à la place du code existant, puis cliquez sur "Sauvegarder" ; 

La majorité des lecteurs de vidéos en ligne vous permettent de récupérer ce code en faisant un clic droit sur votre video : 

4. Le lecteur de votre vidéo s'affiche sur votre landing page ! 

Votre vidéo n'est pas centrée sur votre landing page ?

Voici une vidéo qui pourra vous être utile (sous réserves d'intégration d'un code préexistant spécifique sur votre page).

Il ne reste plus qu'à finaliser l'édition de votre landing page, puis de la publier ! 

Comment ajouter une favicon ?

Rendez-vous dans Configuration > Configuration de Plezi

Puis ajoutez votre logo & la version favicon sur "Apparence"

Comment avoir une image responsive ?

Le look de votre landing page peut varier en fonction de la taille du navigateur sur lequel vous la consultez ; Plezi répond à cette contrainte en vous proposant des blocs 'responsive'. Tandis qu'un fond de couleur unie ne créera aucune surprise de mise en page, une image utilisée comme fond pourrait être tronquée sur différemment si vous ne demandez pas à la rendre responsive. Voici comment faire :

  1. Placez un bloc image sur votre landing page ; 

2. Choisissez l'image à insérer en sélectionnant le bloc, et dans l'onglet vert "Personnaliser l'élément sélectionné" ;

3. Une fois l'image insérée, cliquez dessus, et dans "Personnaliser l'élément sélectionné", choisissez l'option : "Width étendue" pour que l'image s'étende sur le cadre ; 

4. Puis dans "Personnaliser le bloc sélectionné", cochez la case "Largeur relative" pour rendre le le bloc responsive : 

5. Sauvegardez et observer le resultat sur le preview : 

6. Si la landing page est publiée, n'oubliez pas de publier les changements : 

Comment ajouter un CTA renvoyant vers le haut de la page ?

Afin d'inciter à une certaine action, notamment la soumission d'un formulaire, vous pouvez ajouter un CTA dans vos landing pages redirigeant vers le haut de votre page.

Pour cela, il faut : 

  • Ajouter un bloc HTML ; 

  • Y ajouter ce code :

 <a href="#haut" style="padding: 15px 15px; background: rgb(232, 62, 111); 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;text-align:center;">Télécharger le livre blanc&nbsp;!</a>

Un CTA apparaîtra sur votre landing page.
Vous pouvez modifier les propriétés de ce CTA via ce code :

Si vous avez déjà un CTA, alors seule l'information qui permet de créer un lien envoyant vers le haut de votre page vous intéresse, c'est-à-dire :
<a href="#haut" </a>

  • Sauvegarder votre bloc.

  • Afin d'indiquer où la redirection doit se faire, ajouter un nouveau bloc HTML tout en haut de la page :

  • Dans ce bloc, ajouter uniquement :<a class="ancre" name="haut"></a>

Enregistrer les modifications apportées à la landing page, et le tour est joué ! 😃

Comment supprimer le soulignement d'un lien hypertexte ?

Vous souhaitez supprimer le soulignement d'un lien sur Plezi ?

Voici la vidéo explicative. 😊

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