Comment créer une Landing Page
Landing pages
Actualisé le septembre 9, 2022
Découvrez ce que notre éditeur de Landing Pages peut faire pour votre entreprise. Créez des Landing Pages comme un PRO et faites atterrir vos utilisateurs sur des pages incroyables.
Sélectionnez un sujet pour lequel vous souhaitez en savoir plus :
Premiers pas : créer votre Landing Page
Que la fête commence, pour créer votre première Landing Page, connectez-vous à votre compte Benchmark et suivez les étapes ci-dessous :
- Depuis votre tableau de bord, cliquez sur Landing Pages, puis sélectionnez Landing Pages.
- Cliquez sur le bouton Créer une nouvelle Landing Page.
- Ajoutez un nom pour votre Landing Page. Ce nom est pour une référence pour vous, vos visiteurs ne pourront pas le voir. Cliquez sur Suivant lorsque vous avez terminé.
Pour dupliquer une Landing Page précédente, cliquez sur l’icône plus d’options 
de la Landing Page que vous souhaitez dupliquer. Donnez un nouveau nom à votre doublon ou laissez le nom par défaut, puis cliquez sur Sauvegarder.
Dupliquer une Landing Page ne permet de copier que son contenu d’origine, tel que le texte, les images et les liens. Par la suite, vous devrez finir de compléter l’inventaire de contrôle de la Landing Page pour pouvoir la publier.
- Vous pouvez maintenant voir un Inventaire de contrôle. Vous remarquerez que le bouton Publier n’est pas actif. Il ne sera activé qu’une fois la liste de contrôle terminée.
- Remplissez les informations de la page avec le titre et la description de votre Landing Page. Ces derniers peuvent aider à améliorer les performances de votre page, cliquez ici pour en savoir plus.
Remarque : lorsqu’un point de la liste a toutes ses informations complétées, la coche devient verte.
- Maintenant, concentrons-nous sur l’étape du Design.
Il est temps de personnaliser votre Landing Page. Dans la liste de contrôle, cliquez sur le bouton Élaborer le Design de votre Landing Page.
L’éditeur de Landing Pages est une quasi-réplique de notre éditeur d’emails, si vous êtes familier avec ce dernier, la création d’une Landing Page sera un jeu d’enfant. Si ce n’est pas le cas, veuillez continuer à lire ci-dessous pour savoir comment utiliser l’éditeur Drag&Drop.
En haut à gauche, vous verrez trois onglets. Le premier sélectionné par défaut est Mises en page. Vous pouvez démarrer votre Landing Page à partir de zéro en choisissant parmi nos Modèles vierges, ou vous pouvez accéder à notre section Templates et choisir l’un de nos modèles prédéfinis. Les deux options sont adaptées aux mobiles et faciles à utiliser.
Une fois la mise en page sélectionnée, voici l’écran qui s’affiche.
- Mises en page : c’est l’option de mise en page : soit utiliser un modèle prédéfini ou alors partir d’un modèle vierge. Si vous choisissez de modifier les modèles, vous aurez définitivement perdu tout le contenu créé sur votre Landing Page actuelle. Cette action est irréversible.
- Blocs : Dans cet onglet, vous trouverez deux options :
- Sections
- Contenus
- Styles généraux : dans cet onglet, vous pouvez trouver l’option Couleur de fond. Ici, vous pouvez modifier la couleur d’arrière-plan de votre Landing Page.
- Bouton Montrer les zones : ce bouton permet d’afficher les sections de votre Landing Page ainsi que le nombre de colonnes pour chaque section.
- Bouton Montrer les blocs : cliquer sur ce bouton surlignera d’un cadre vert chacun des blocs que vous avez placés. Vous aurez les options de Déplacer, Copier ou Supprimer vos blocs.
- Bouton Aperçu sur le téléphone mobile : vous travaillez avec un éditeur réactif qui organise automatiquement les blocs pour optimiser la vue de votre Landing Page sur les appareils mobiles. Toutefois, cette option vous permet de contrôler la façon dont votre page est affichée sur un téléphone mobile. Si vous n’aimez pas la mise en page mobile, vous pouvez personnaliser les sections pour mieux adapter votre contenu. Gardez à l’esprit que les modifications apportées ici se répercuteront au niveau de l’Aperçu sur l’ordinateur.
- Barre de titre : dans le coin supérieur droit, vous verrez le nom de votre Landing Page, ce n’est pas le titre de la page.
- Retourner à l’inventaire : en sélectionnant cette option, vous reviendrez à la liste de contrôle principale, où vous pourrez compléter les autres sections.
- Disposition de la Landing Page : c’est là que se déroule l’aménagement de votre Landing Page. Faites un simple glisser/déposer de blocs dans cette zone pour personnaliser votre page de destination.
- Barre de Sauvegardes : Benchmark protège votre travail en faisant des copies de sauvegarde. Vous pouvez voir l’heure de la dernière copie enregistrée dans cette barre.
- Aperçu : cette option vous permet de voir à quoi ressemblera votre Landing Page sur votre navigateur.
- Sauvegarder et Suivant : en cliquant sur cette option, vous enregistrez votre travail et revenez à votre inventaire principale pour publier votre Landing Page ou la modifier ultérieurement.
Masquer du contenu
Cette option de masquer certains éléments dans certains appareils est disponible en cliquant sur l’élément que vous souhaitez masquer. Sur le menu de gauche, descendez jusqu’aux options de Cacher sur le téléphone mobile ou de Cacher sur l’ordinateur.
Retour en haut
Sections
Les sections sont les différentes parties qui composent la mise en page de votre Landing Page. Cette dernière peut avoir plusieurs sections et chaque section peut avoir différents blocs.
Vous pouvez trouver l’option Sections dans l’onglet Blocs. Vous pouvez ajouter autant de sections que vous le souhaitez à votre Landing Page.
Les sections disponibles sont divisées en colonnes, d’une à quatre colonnes.
Pour ajouter une section à votre Landing Page, faites un simple glisser/déposer du bloc de colonnes souhaité, comme indiqué dans le gif suivant.
Pour voir les sections de votre mise en page, cliquez sur le bouton Montrer les zones.
En cliquant sur Montrer les zones, vous pouvez voir la Landing Page divisée en sections, et chaque section donnera des informations sur le nombre de colonnes ainsi les options suivantes :
- Flèches : vous permettra de déplacer une section vers le haut ou vers le bas.
- Roue dentée : ouvre la Configuration des sections où vous pouvez changer la couleur de fond de la section spécifiquement.
- Copier : vous permettra de copier une section entière.
- Corbeille : cette option supprime toute la section. Cette action est irréversible.
Pour quitter le mode section, cliquez sur le bouton Masquer les zones.
Retour en haut
Comment ajouter une Image de fond
Les images de fond sont disponibles dans la zone des sections et dans l’onglet Styles généraux. Pour ajouter une image de fond, suivez les étapes suivantes :
Pour ajouter une image de fond dans une section
Cette option permet d’ajouter une image de fond dans une section spécifique de votre Landing page.
- Dans le Design de votre Landing page, cliquez sur l’option Montrer les zones.
- Repérez la section pour laquelle vous souhaitez ajouter une image de fond et cliquez sur la roue dentée.
- Les paramètres de la section seront affichés à gauche. Cliquez sur Ajouter un fond.
Pour ajouter une image de fond à l’ensemble du design
En ajoutant une image de fond à partir de l’onglet Styles généraux, vous ajouterez une image de fond à l’ensemble du design de votre Landing page.
- Dans le Design de votre Landing page, cliquez sur l’option Montrer les zones.
- Cliquez sur l’option Image de fond.
- Puis sélectionnez Ajouter un fond.
Dans les deux cas :
Votre Galerie d’images va alors s’ouvrir. Vous pouvez y choisir une image déjà existante ou en ajouter une nouvelle.
Une fois l’image insérée, de nouveaux paramètres seront affichés.
Styles d’arrière-plan.
- Remplissage. L’image couvrira l’ensemble de la section. Lors du défilement, l’image reste immobile.
Exemple de Landing page utilisant le Remplissage pour son style de fond. Pour cette Landing page, nous avons utilisé un fond au début et un autre à la fin de la page. Dans la partie centrale, nous avons ajouté une couleur qui correspond à la fin de la première image et au début de la dernière image, créant ainsi un effet de dégradé.
- Mosaïque. L’image sera carrelée en fonction de sa taille et le rendu ressemblera à un mur en mosaïque. Le nombre de copies sera ajusté en fonction de la taille de l’écran.
- Parallaxe. Cette option fixera votre image et donnera l’effet d’un mouvement dynamique lors du défilement de votre Landing page. L’image occupera 100% de l’écran, vous pouvez également définir sa position.
A noter : L’effet de parallaxe est le plus apprécié lors du défilement vers le haut et vers le bas. Vous pouvez passer d’une section à l’autre avec l’impression que l’image précédente disparaît tandis que la nouvelle image la recouvre complètement. Comme le vin dans cet exemple.
- Alignement Image. Ces contrôles vous permettent de changer la position de l’image très facilement. Sélectionnez l’option qui vous convient le mieux.
- Option Éditer
- Éditer : Utilisez notre éditeur d’images pour redimensionner votre image ou lui ajouter un effet.
- Remplacer : Si l’image ne vous convient pas et que vous souhaitez la remplacer.
- Réinitialiser : Cette option supprimera l’image, vous permettant ainsi d’utiliser une autre image ou une autre couleur de fond.
- Mise en page du contenu
- Fond encadré : L’option Framed Background comporte un rembourrage sur les côtés ainsi qu’une couleur de fond qui lui est appliquée. Le contenu sera centré.
- Fond Largeur totale : L’option Full Width Background permet d’afficher le contenu sans ajouter de rembourrage autour de lui.
- Lorsque vous avez terminé, n’oubliez pas de cliquer sur Sauvegarder et Fermer.
Retour en haut
Blocs
Les blocs peuvent être des éléments de conception et également des fonctionnalités. En cliquant sur l’onglet Blocs, vous aurez deux options : Sections et Contenus. Pour trouver les blocs disponibles, cliquez sur l’option Contenus.
Pour ajouter un bloc à votre mise en page, cliquez sur le bloc désiré et faites-le glisser à l’endroit souhaité, comme indiqué dans le gif suivant.
Voici les blocs disponibles. Continuez à lire pour comprendre comment les utiliser.
Retour en haut
Blocs Image et Carte image
Avec ces blocs, vous pouvez télécharger une image ou sélectionner parmi les images déjà dans votre galerie. Pour utiliser ces blocs, faites-les glisser dans votre Landing Page, puis procédez à l’ajout de l’image.
Un bloc Image ajoutera une image à votre mise en page, tandis que le bloc Carte image ajoutera à votre mise en page une image et du texte dans un cadre.
Ci-dessous, vous pouvez voir un bloc Image à gauche et un bloc Carte image à droite.
Lequel utiliser ?
Utilisez le bloc Image lorsque vous devez ajouter une image simple.
Utilisez le bloc Carte image lorsque vous devez ajouter une description à votre image. Si vous déplacez ce bloc, la description se déplacera également.
Pour savoir comment ajouter un bloc Carte image, cliquez ici. Pour un bloc Image, cliquez ici.
Cela peut vous intéresser :
Retour au menu des blocs
Blocs Légende image
Un bloc Légende image est un bloc qui vous permet d’ajouter un texte dans une image. La principale différence entre les blocs Légende image et les bloc Carte image est que le bloc Légende Image n’a pas de cadre ou de conteneur, vous pouvez ajuster le remplissage au bord de votre mise en page comme dans l’exemple ci-dessous (bloc Légende Image à gauche et bloc de Carte image à droite).
Pour savoir comment ajouter un bloc Légende image, cliquez ici.
Retour au menu des blocs
Bloc Texte
Vous pouvez ajouter du texte à votre Landing Page via le bloc Texte. Pour utiliser ce bloc, faites-le simplement glisser à l’endroit souhaité. Puis cliquez dessus et remplacez le texte par défaut par votre texte.
Voici quelques éléments à prendre en compte sur l’utilisation du bloc Texte.
Copier et Coller
Si vous souhaitez copier et coller du texte sur votre Landing Page, nous vous recommandons d’utiliser l’option Coller 
. En faisant cela, vous éliminerez tous les caractères cachés dans votre texte qui pourraient interférer avec le design de ce dernier.
Code Source
Pour ajouter un code source, cliquez sur l’icône
de code et collez votre code.
Si vous ne voyez pas les options mentionnées ci-dessus, veuillez cliquer sur l’icône Plus de votre barre d’outils.
Retour au menu des blocs
Bloc Video
Les vidéos sont des outils visuels très efficaces. Grâce à la vidéo, vous pouvez montrer les qualités d’un produit ou les raisons pour lesquelles on doit vous choisir plutôt que vos concurrents. Ne manquez pas l’opportunité d’utiliser des vidéos sur votre Landing Page.
Si vous souhaitez savoir comment télécharger une vidéo dans votre galerie de vidéos et comment l’ajouter à votre mise en page, cliquez ici.
Retour au menu des blocs
Bloc Diviseur
Utilisez des séparateurs pour créer des espaces entre les éléments de votre Landing Page, les séparations ne doivent pas nécessairement être des espaces vides. Pour ajouter un bloc Diviseur, faites-le glisser dans la section souhaitée. Découvrez toutes les possibilités de séparation ici.
Retour au menu des blocs
Bloc Bouton
Le CTA (Call To Action) est la partie la plus intéressante de votre Landing Page. C’est là que tout se joue, vous verrez si la conception de la Landing Page et l’ensemble du travail ont été fructueux. Pour ajouter un bouton, faites-le glisser à l’emplacement souhaité. Dans le panneau de gauche, vous verrez les options pour personnaliser votre bouton. Continuez à lire pour configurer le bouton Contenus.
- Dans ce champ, ajoutez le texte du bouton, plus connu sous le nom de CTA (Call To Action). Votre Landing Page a un objectif et le CTA vous aidera à y parvenir. Créer un texte accrocheur pour attirer l’attention de vos visiteurs.
- Ajoutez l’URL où vous souhaitez rediriger vos visiteurs. Notez qu’il peut s’agir d’une URL externe ou d’un emplacement sur la Landing Page même. Par exemple, si le bouton indique ENREGISTREZ-VOUS, le visiteur peut être redirigé vers un formulaire d’inscription sur la même Landing Page. Pour ajouter un lien alternatif :
- Cliquez sur l’option de lien dans la barre d’édition de texte.
- Dans le pop-up, cliquez sur le menu déroulant du type de lien et sélectionnez l’option souhaitée. Remarque : Vous devez d’abord créer l’Ancre de lien. Pour ajouter une ancre, cliquez ici.
- Barre d’édition de texte. Trouvez dans cette barre les options pour personnaliser votre texte ainsi que l’option d’insérer un lien.
- Si vous avez plusieurs boutons sur votre Landing Page de destination, vous n’avez pas besoin de les personnaliser un par un. Personnalisez un bouton, puis cochez simplement Appliquer le style à tous les boutons. Le reste des boutons de votre Landing Page copiera le même style.
Retour au menu des blocs
Bloc Barre de Navigation
La barre de navigation permettra à vos visiteurs d’en savoir plus sur votre business.
- Pour ajouter un lien, cliquez simplement sur l’icône Plus. Pour personnaliser un lien, cliquez dessus et les options du lien s’afficheront sur le panneau de gauche. Vous pouvez ajouter jusqu’à six liens. Il existe deux options de lien : texte ou image, vous pouvez choisir n’importe quelle option.
- Il existe trois types de dispositions disponibles pour vos liens de barre de navigation. Vous pouvez combiner des images et du texte. Cliquez sur tous les styles et choisissez celui qui convient le mieux à votre design.
- Utilisez les options d’alignement vertical et horizontal pour formater votre barre. La taille de la gouttière détermine l’espace entre chaque lien.
- Avec le Style Mobile, vous pouvez choisir entre les options par défaut, pile verticale ou pile verticale et centre. Vous pouvez choisir l’apparence de votre design sur un appareil mobile.
Retour au menu des blocs
Formulaire d’inscription
Utilisez les Landing Pages pour collecter des abonnés. Plus vous avez d’abonnés, plus votre message sera répandu et plus vous obtiendrez de ventes.
Suivez ces instructions si vous avez déjà créé votre formulaire d’inscription intégré. Pour créer un formulaire d’inscription intégré,
cliquez ici.
- Faites glisser l’icône du Formulaire d’inscription sur votre mise en page à l’endroit souhaité.
- Accédez au panneau de gauche et sélectionnez un formulaire d’inscription existant dans le menu déroulant.
REMARQUE : seuls les formulaires d’inscription intégrés sont autorisés sur les Landing Pages.
- Votre formulaire d’inscription s’affichera dans la zone sélectionnée. Dans l’éditeur de Landing Page, vous pouvez personnaliser la largeur du formulaire d’inscription en faisant glisser le curseur Personnaliser largeur du gris au bleu. Si vous devez personnaliser le formulaire d’inscription, cliquez sur Ouvrir l’éditeur de formulaire. Cela ouvrira une nouvelle fenêtre dans laquelle vous pourrez apporter des modifications à votre formulaire. Une fois terminé, cliquez sur Sauvegarder & Publier puis Confirmer.
- Les modifications ne seront pas encore reflétées dans votre Landing Page. Pour voir les nouvelles modifications, supprimez le formulaire d’inscription de votre Landing Page (pour supprimer, passez la souris sur le formulaire, puis cliquez sur l’icône de suppression).
- Maintenant, ajoutez à nouveau le même formulaire en répétant les étapes.
Remarque : vous pouvez modifier votre formulaire d’inscription à tout moment en sélectionnant un nouveau formulaire dans le menu déroulant.
Retour au menu des blocs
Bloc Ecommerce
Le bloc Ecommerce peut être utilisé pour promouvoir et vendre des produits dans vos landing pages.
Le bloc Ecommerce comprend les éléments suivants :
- Placement d’image
- Description du produit
- Prix du produit
- Section bouton
Pour utiliser le bloc produit, cliquez sur le bloc et faites-le glisser vers une section de votre landing pages.
Pour personnaliser votre bloc Ecommerce, suivez les étapes ci-dessous :
Pour personnaliser votre bloc Ecommerce, suivez les étapes ci-dessous :
- Commencez par ajouter une image du produit.
- Ajoutez une description du produit ; elle doit être courte et descriptive.
- Mettez à jour le prix de votre produit.
- Ensuite, personnalisez le bouton du produit avec les éléments suivants :
- Bouton texte.
- Bouton URL, ajoutez une URL vers laquelle vos contacts peuvent se diriger pour compléter leur achat.
- Enfin, donnez au bouton un style correspondant à l’identité de votre marque. Pour vous éviter un travail répétitif, vous pouvez définir le même style pour tous les boutons de votre email. Pour en savoir plus sur les options de style des boutons, cliquez ici.
Si vous préférez ne pas utiliser l’un des éléments du bloc, il suffit de les désactiver dans l’onglet Contenu.
- Lorsque vous avez terminé, cliquez sur Sauvegarder, puis sur Sauvegarder et Suivant (ou cliquez simplement en dehors de la landing pages pour enregistrer votre travail).
Voici quelques exemples de la façon dont le bloc Ecommerce peut être utilisé et stylisé.
Retour au menu des blocs
Bloc Produit Shopify
Pour commencer, cliquez sur le bloc et faites-le glisser vers la section souhaitée de votre landing page.
Pour utiliser le bloc Produits Shopify, vous devez disposer d’un compte Shopify payant et actif. Lorsque vous utilisez ce bloc pour la première fois, vous devez intégrer Shopify à votre compte Benchmark. Pour en savoir plus sur l’intégration de votre boutique Shopify à Benchmark, cliquez ici.
Une fois que vous avez intégré avec succès votre compte Shopify à Benchmark, vous verrez une liste de vos produits disponibles Shopify.
Sélectionnez l’un de vos produits disponibles. Les blocs rempliront automatiquement les informations sur ce produit en utilisant les données de Shopify.
Le bloc Produits Shopify inclut les éléments suivants :
- Photo du produit
- La photo du produit est tirée de l’URL du produit Shopify. Cette image ne sera pas enregistrée dans votre Galerie d’images Benchmark. Toutefois, si l’image est modifiée à l’aide de l’éditeur d’images de Benchmark, l’image modifiée sera enregistrée comme une nouvelle image dans la Galerie.
- Description du produit
- La description du produit reprendra le titre du produit dans Shopify.
- Prix du produit
- Le prix du produit est le montant attribué dans la boutique Shopify.
- Bouton Produit
- Le Bouton Produit renvoie automatiquement à l’URL du produit dans votre boutique Shopify.
Important
- Si votre compte Shopify n’est pas le compte administrateur, vous aurez besoin des autorisations relatives aux produits. Pour en savoir plus sur les autorisations des utilisateurs Shopify, cliquez ici.
- ous ne pouvez vous connecter qu’à une seule boutique Shopify à la fois. L’utilisation de l’option Changer de boutique supprime tous les produits de la boutique précédente.
- Les informations du produit sont automatiquement remplies avec les informations fournies par Shopify. Par conséquent, tout détail modifié dans Benchmark ne sera pas mis à jour dans Shopify.
- Si un produit a déjà été sélectionné pour un email ou une landing page et qu’il est ensuite mis à jour dans Shopify, les informations sur le produit ne seront pas automatiquement mises à jour dans Benchmark.
- Les produits archivés n’apparaîtront pas dans votre liste de produits disponibles.
- Suivez les clics effectués à partir d’une URL de produit Shopify dans l’email en utilisant le Rapport Email.
- Dupliquer un bloc vous permet de conserver tout formatage précédemment ajouté au bloc d’origine. Toutefois, si vous sélectionnez un autre produit, le formatage précédent sera supprimé et vous devrez le reformater.
Voici quelques exemples de la façon dont le bloc Produits Shopify peut être utilisé et stylisé.
Retour au menu des blocs
Bloc Sauvegardé
Diminuez le temps consacré au design en utilisant les Blocs Sauvegardés. Les blocs peuvent être sauvegardés et stockés en vue d’être réutilisés pour vos futures créations. Le style, le texte et les images du bloc sont enregistrés lorsque vous sauvegardez un bloc. Une fois le bloc ajouté à votre design, vous pourrez en changer le contenu sans que le bloc sauvegardé à l’origine ne soit modifié.
Pour sauvegarder un bloc, passez la souris sur le bloc dans votre Landing pagel et cliquez sur l’option sauvegarder bloc. Donnez un nom au bloc puis cliquez sur Sauvegarder et Fermer.
Pour utiliser un Bloc Sauvegardé
- Faites glisser le Bloc Sauvegardé dans votre Landing pagel et déposez-le dans la section souhaitée.
- Sélectionnez un bloc à utiliser et poursuivez l’édition du bloc ou enregistrez et fermez.
- En passant la souris sur chaque bloc sauvegardé, vous obtiendrez un aperçu du contenu du bloc.
Suppression des Blocs Sauvegardés
- Faites glisser le Bloc Sauvegardé vers n’importe quelle section de votre Landing page. Vous verrez une liste de vos blocs précédemment sauvegardés sur le côté gauche.
- Cliquez sur l’icône de la corbeille et confirmez votre choix en sélectionnant Supprimer.
S’il n’y a plus de blocs sauvegardés, vous pouvez supprimer le Bloc Sauvegardé de votre design.
Retour au menu des blocs
Typographie
Utilisez les polices de Google dans vos Landing pages et donnez de la personnalité à vos créations.
Pour accéder aux polices de Google, suivez les étapes suivantes :
- Aller à l’étape du design de la Landing page
- Cliquez sur l’onglet Styles généraux
- Localisez l’option Typographie et cliquez dessus.
- Vous pouvez maintenant sélectionner la police que vous souhaitez pour les en-têtes et le corps du texte.
Retour en haut
Animer le Bloc
Impressionnez vos lecteurs en animant des blocs dans votre Landing page, cela la rendra beaucoup plus dynamique et sympa.
Pour animer vos blocs, suivez les étapes suivantes :
- Rendez-vous sur le Design de votre Landing page.
- Faites glisser n’importe quel bloc dont vous avez besoin dans la mise en page de votre Landing page. L’option « Animer le bloc » est disponible dans tous les blocs.
- Une fois le bloc placé dans votre mise en page, vous verrez les paramétrages du bloc sélectionné sur la gauche.
- Cherchez l’option « Animer le Bloc » en bas et sélectionnez-la.
Les animations disponibles seront affichées. Sélectionnez le type d’animation que vous souhaitez utiliser, puis la Durée de celle-ci. Vous pouvez également ajouter un Délai (temps qu’il faut pour que l’animation s’affiche) et un Décalage (permet de choisir à quelle distance du bas de votre navigateur votre objet doit se trouver avant que l’animation ne commence.
Retour en haut
Si vous avez des questions concernant les Landing Pages, n’hésitez pas à contacter notre support par Email, Chat ou par Téléphone.
Landing pages 