🎉 Nouveau : découvrez Cleo, l'IA qui vit dans vos QR codes.Découvrez Cleo, l’IA de vos QR codesDécouvrir Cleo →

Comment utiliser le HTML pour personnaliser une landing page

Utilisez le HTML pour ajouter des séparateurs, des call-to-actions et plus encore à la landing page

Vous pouvez entièrement personnaliser votre landing page en utilisant l'éditeur HTML.

Ajoutez-en un à votre landing page.

Cliquez sur son menu à trois points et cliquez sur l'icône </> pour passer à la vue HTML.

Voici quelques exemples de ce que vous pouvez ajouter :

Séparateurs

Vous pouvez ajouter des lignes ou des séparateurs entre les différents contenus.

Ajoutez la chaîne suivante :

<style>.line {border-top: 3px solid #000000;width: 100%;margin: 0;}</style><div class="line"><br></div>

Avec "border-top:", vous pouvez définir l'épaisseur de la ligne en pixels.

Avec "solid #", vous pouvez définir sa couleur à l'aide de codes de couleur hexadécimaux.

Lien pour appeler un numéro de téléphone

Vous pouvez créer un lien permettant aux utilisateurs de lancer un appel téléphonique directement depuis leurs appareils.

Ajoutez un attribut "href" avec le numéro de téléphone cible au texte (Call us) qui ouvrira l'application de téléphone. Par exemple :

<a href="tel:+1234567890">Call us</a>

Remplacez "+1234567890" par le numéro de téléphone correspondant. Le signe "+" indique l'indicatif international.

Lien pour envoyer un e-mail

Vous pouvez créer un lien permettant aux utilisateurs d'envoyer un e-mail à une adresse spécifique directement depuis leurs appareils.

Ajoutez un attribut "href" avec l'adresse cible au texte (Send Email) qui ouvrira l'application de messagerie. Par exemple :

<a href="mailto:abc@example.com">Send Email</a>

Remplacez "abc@example.com" par l'adresse e-mail correspondante.

Lien pour envoyer un message sur WhatsApp

Vous pouvez créer un lien permettant aux utilisateurs d'envoyer un message à un numéro WhatsApp spécifique directement depuis leurs appareils.

Ajoutez un attribut "href" avec le numéro WhatsApp cible au texte (Contact us on WhatsApp) qui ouvrira l'application WhatsApp. Facultativement, vous pouvez ajouter un message à envoyer (This is a message) après "?text=". Par exemple :

<a href="https://wa.me/+1234567890?text=This is a message">Contact us on WhatsApp</a>

Remplacez "+1234567890" par le numéro WhatsApp correspondant.

Lien vers une partie spécifique

Vous pouvez créer un lien permettant aux utilisateurs d'accéder directement à une section spécifique de votre landing page.

1) Ajoutez un attribut "id" à l'élément cible (Section 1). Nous recommandons que le nom de l'élément soit le même que l'id (section1). Par exemple :

<a id="section1">Section 1</a>

2) Ajoutez un attribut "href" en utilisant l'id créé à l'étape 1 (#section1) au texte qui mènera à l'élément cible (Go to Section 1). Par exemple :

<a href="#section1">Go to Section 1</a>

Intégrer une vidéo

Vous pouvez afficher des vidéos de YouTube, Vimeo et d'autres plateformes de vidéo en ligne sur votre landing page à condition qu'elles disposent d'une option d'intégration (balise "iframe"). Après l'avoir copiée, allez sur votre landing page et collez la balise "iframe". Par exemple :

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO-URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Intégrer une carte Google

Vous pouvez afficher plusieurs cartes Google en recherchant les adresses dans Google Maps, en cliquant sur Share > Embed a map et en copiant la balise "iframe". Ensuite, allez sur votre landing page et collez la balise "iframe". Par exemple :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Toujours bloqué ? Nous sommes là.

Dites-nous ce que vous essayez de faire et une personne vous répond.

Un QR code dynamique entouré du contenu qu’il peut héberger