Guide HTML et CSS

5 Minutes

11/18/2022

Lors de la création d'une page d'atterrissage, vous pouvez ajouter n'importe quel code HTML ou CSS dans les zones de texte. Le guide suivant vous donne quelques idées sur les possibilités de style et sur la manière d'intégrer du contenu multimédia.

Comment intégrer des feuilles de style CSS

Vous pouvez intégrer des feuilles de style CSS personnalisées dans vos pages d'atterrissage, dans la section "branding" ou dans les champs "custom css". Voici quelques exemples d'extraits de code CSS.

<style>
/* Change Background Color */
body {background:#000}

/* Background Gradient */
body {background: linear-gradientto right, red , yellow}

/* Embed Background Image */
body {background: url"/img/background-example.jpg" no-repeat}

/* Fullscreen Background Image */
body {

  background-image: url"/img/background-example.jpg";

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Change Heading Text Color */
h1 {color:#f4f !important}

/* Change Type Font */
div {
    font-family: "Times New Roman", Georgia, Serif;
}
</style>

Pour en savoir plus sur les CSS, consultez le tutoriel CSS des écoles W3.

Style des éléments de la page d'atterrissage

L'inspecteur de votre navigateur vous permet de sélectionner un élément dans la page d'atterrissage. Après avoir sélectionné un élément, la balise et la classe de l'élément seront affichées dans la fenêtre de l'inspecteur ci-dessous.

Dans la section "branding" d'une landing page, vous pouvez désormais définir votre propre style pour cet élément dans le champ "Custom CSS". L'exemple suivant montre comment vous pouvez modifier la taille de la police de l'élément d'en-tête sélectionné h1.headline.

Si vous souhaitez réutiliser votre code CSS pour d'autres pages d'atterrissage, vous pouvez enregistrer le code CSS dans un modèle CSS en cliquant sur le bouton Ajouter.

Intégrer les polices Google

<style>
@import url'//fonts.googleapis.com/css?family=Open+Sans';
body{font-family: 'Open Sans', sans-serif;}
</style>

Utilisez la directive @import toujours au tout début de votre css. En savoir plus sur les polices Google

Veuillez noter qu'en Europe, depuis le 25 mai 2018, le nouveau règlement général sur la protection des données s'applique. Si vous intégrez du contenu provenant de serveurs externes comme Google Fonts sur vos pages de destination, vous devez inclure un avis dans votre politique de confidentialité avec chaque service. Vous pouvez mettre un lien personnalisé vers votre politique de confidentialité sur chaque page de destination dans la section GDPR.

Intégrer vos propres polices dans les pages d'atterrissage

Pour intégrer vos propres polices dans vos pages d'atterrissage, rendez-vous dans la section médias et téléchargez la police que vous souhaitez inclure en cliquant sur le bouton Télécharger la police.

Veuillez noter que les formats de polices suivants sont acceptés : woff, woff2, ttf et eot.

Tous les fichiers de polices téléchargés sont répertoriés dans la section médias. Pour utiliser la police dans votre page d'atterrissage, veuillez ouvrir l'onglet des polices en cliquant sur l'icône du stylo de la police correspondante.

Dans l'onglet, vous pouvez choisir entre un lien source et un lien url. Pour copier le lien de police, cliquez sur l'icône de copie.

Allez sur la page d'atterrissage que vous avez créée, puis ouvrez la section "branding" de la page d'atterrissage et insérez le lien dans le champ "Custom CSS" comme indiqué dans la capture d'écran ci-dessous. Sauvegardez l'entrée.

Coller le lien de la police dans la section des marques

<style>
@font-face {
  font-family: "YOUR FONT";
  src: url'https://DOMAIN/resources/FOLDER/3.woff' format'woff2',
       url'https://DOMAIN/resources/FOLDER/2.woff' format'woff',
       url'https://DOMAIN/resources/FOLDER/1.ttf' format'truetype';
  font-style: normal;
  font-weight: normal;
}

#main, p {
  font-family: "YOUR FONT", sans-serif;
}
</style>

Testez toujours votre code CSS

Avant d'insérer du code CSS dans votre page, vérifiez toujours qu'il est correct à l'aide du validateur CSS.

Comment intégrer des éléments multimédias

Images

Bibliothèque de médias — Les images de la bibliothèque de médias peuvent être intégrées dans n'importe quelle page d'atterrissage

Dans la médiathèque, vous pouvez télécharger des images ou des documents PDF. Après avoir téléchargé un fichier, vous pouvez cliquer sur l'icône crayon de l'image et vous verrez un extrait HTML pour intégrer le document sur n'importe laquelle de vos pages d'atterrissage, par exemple.

<img alt="qr icon" src="/img/qr-icon32.png"/>

Vidéos YouTube

Vidéo Youtube intégrée sur une page de renvoi

Intégrez facilement des vidéos de YouTube, Vimeo ou toute autre plateforme vidéo. L'extrait de code suivant montre comment intégrer une vidéo YouTube via une iFrame dans votre page d'atterrissage. La vidéo est automatiquement redimensionnée en fonction de la largeur de l'écran.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>

Attention : Veuillez toujours utiliser le lien d'intégration de YouTube //youtube.com/embed/1234 et ne pas utiliser le lien de la barre d'adresse //youtube.com/watch?v=1234

Vidéos Vimeo

L'extrait de code suivant montre comment intégrer une vidéo Vimeo via iFrame dans votre page d'atterrissage. La vidéo est automatiquement redimensionnée en fonction de la largeur de l'écran.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>

Vidéos MP4

Vous pouvez également utiliser la balise vidéo HTML5 pour intégrer une vidéo au format mp4.

Plus d'informations et de paramètres supplémentaires sur l'intégration de vidéos HTML5.

<video width="100%" controls>
  <source src="/resources/sample.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Google Maps

Vous pouvez intégrer une iframe réactive avec un emplacement Google Maps.

Recherchez votre emplacement sur Google Maps et copiez le code HTML "Partager > Intégrer une carte" iframe.
Utilisez le code suivant sur vos pages d'atterrissage pour afficher la carte Google réactive.

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Intégrer JavaScript

Vous pouvez inclure du code JavaScript dans les zones de texte. Veillez toutefois à insérer le code en une seule ligne. Les sauts de ligne provoqueront des erreurs JavaScript.

<script>alert'hello';</script>

Intégrer des iFrames

Incluez des iFrames, par exemple dans la section "À propos de moi" de votre carte de visite mobile.

<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>

Intégrer des sites web externes

Si vous voulez inclure un site web externe dans votre page d'atterrissage personnalisée, vous devez tirer toutes les ressources externes comme js, css et images dans votre page d'atterrissage. Pour ce faire, il existe un outil utile sur Github - Inliner

Formulaires personnalisés

Page d'atterrissage pour les prospects

Pour créer un formulaire sur une page d'atterrissage et envoyer les données à notre serveur, vous pouvez créer une page d'atterrissage pour les prospects .

Formulaire d — Formulaire personnalisé pour collecter des données

Récupérer les données du formulaire

Vous pouvez ensuite interroger collectivement les données de formulaire transmises pour une page d'atterrissage sous l'élément de menu Leads ou via l'API.

Comment créer un formulaire personnalisé avec HTML et JavaScript

Cependant, vous pouvez également créer un formulaire et envoyer facilement les données du formulaire à notre serveur en utilisant l'extrait suivant sur une page d'atterrissage personnalisée.

<script>
    $function {
        $'#submit'.on'click', function {
            $.post"/api/post", $"form".serialize.done
                functiondata {
                    alert'Thank you for registration!';
                };
            return false;
        };
    };
</script>
<form>
    <label>Your Name</label>
    <input name="name">
    <label>Your E-Mail</label>
    <input name="email">    
    <a href="#" id="submit">Register</a>
</form>

Champs de formulaire facultatifs

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://yourwebsite.com/api/webhook/lead">
<input name="rewardurl" type="hidden" value="https://yourwebsite.com/resources/test.pdf">

Le champ notify permet d'activer ou de désactiver les notifications par courrier électronique lorsqu'une nouvelle piste a été générée.
Le champ webhook permet de définir une URL externe à laquelle le nouveau lead généré sera soumis.
Le champ rewardurl permet de définir une URL externe que l'utilisateur recevra par e-mail après s'être abonné.

<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">

Les champs lng, lat et accuracy peuvent être remplis avec l'extrait JS suivant si la fonction GPS est activée.

<script>
    $function {
        const urlParams = new URLSearchParamswindow.location.search;
        $'input[name=lng]'.valurlParams.get'lng';
        $'input[name=lat]'.valurlParams.get'lat';
        $'input[name=accuracy]'.valurlParams.get'accuracy';
    };
</script>

Appel-2-Actions

Ajouter un bouton d'appel à l'action à une page d'atterrissage

Vous pouvez ajouter des boutons d'appel à l'action sur n'importe quelle page d'atterrissage directement à partir de l'éditeur de la page d'atterrissage en cliquant sur l'icône Ajouter. Un bouton d'appel à l'action peut renvoyer à un site web ou à un document PDF, déclencher un appel ou envoyer un courrier électronique. Pour en savoir plus, consultez notre tutoriel intitulé Qu'est-ce qu'un bouton d'appel à l'action C2A.