Maintenant que vous avez organisé les sections de votre landing page, il est temps de les remplir avec des éléments tels que du texte, des images ou des boutons. Cet article vous explique comment configurer vos sections, lignes, colonnes et éléments pour créer la meilleure landing page possible !

Nous avons créé une série d’articles pour vous aider à créer des landing pages. 

• Préface : Qu’est-ce qu’une landing page ?
• Partie 1 : Configurer votre landing page
• Partie 2 : Définir la structure de votre landing page 
• Partie 3 : Modifier les paramètres de tous les éléments de votre landing page – VOUS ÊTES ICI
• Partie 4 : Ajouter un formulaire et utiliser des options avancées 
• Partie 5 : Publier votre landing page

Points abordés dans ce tutoriel :

Paramètres communs Sections Lignes Colonnes Texte Image, image d’arrière-plan et logo Couleur d’arrière-plan

Bouton Séparateur Icône Vidéo Code Espacement Alignement

Paramètres communs

Les sections, les lignes et les colonnes (et même les éléments) partagent certains paramètres. Nous allons d’abord décrire ces paramètres communs, puis les paramètres plus spécifiques.

Espacement

Tout d’abord, indiquez si vous souhaitez modifier la marge verticale ou horizontale.  La marge extérieure correspond à l’espacement à l’extérieur d’un objet, tandis que la marge intérieure correspond à l’espacement à l’intérieur de l’objet. Marge extérieure : ajustez l’espace autour de l’objet, à l’extérieur des bords définis. Marge intérieure : ajustez l’espace à l’intérieur de l’objet, entre l’icône et le bord. Vous pouvez choisir entre différents types d’espacements allant de XS (plus petit) à XL (plus grand).

Visibilité

Ces paramètres n’ont aucune répercussion visuelle dans l’éditeur. Afin d’éviter toute confusion dans l’éditeur, ils sont uniquement visibles sur les pages publiées.

• Masquer sur mobile : vous pouvez contrôler l’affichage de chaque section de votre landing page selon l’appareil utilisé dans la zone des modifications. 
• Masquer sur ordinateur : vous pouvez contrôler l’affichage de chaque section de votre landing page selon l’appareil utilisé dans la zone des modifications.

Couleur et image d’arrière-plan

Cette section vous permet d’ajouter une couleur d’arrière-plan et d’ajuster l’opacité.

Pour ajouter une image d’arrière-plan, vous pouvez l’importer à partir de votre ordinateur ou de notre galerie d’images, ou en indiquant une URL. Notre galerie d’images contient des centaines de photos en réserve (libres de droits) que vous pouvez utiliser pour illustrer votre landing page.

Sections

Propriétés de votre section

Vous pouvez donner un nom à votre section ici. Ce nom s’affiche lorsque vous naviguez dans l’onglet Mise en page, dans le menu de gauche.

Style

Cliquez sur Style pour afficher les paramètres de style :

Bord à bord : cette option permet de modifier l’espacement horizontal de chaque côté de la section. Pleine hauteur : cette option permet d’afficher l’image entière. Défilement parallaxe : le défilement parallaxe est une technique utilisée en infographie et qui permet à l’image d’arrière-plan de défiler plus lentement que le contenu au premier plan.

Lignes

Vous pouvez modifier les paramètres d’une ligne en navigant dans l’onglet Mise en page dans le menu de gauche, comme décrit dans l’article Landing pages – Partie 2 : Définir la structure de votre landing page. Vous pouvez également utiliser le fil d’Ariane qui s’affiche en haut de l’écran lorsque vous cliquez sur un élément.

Couleur d’arrière-plan, espacement et visibilité

Les premiers paramètres sont les mêmes que ceux décrits dans la section Paramètres communs ci-dessus. 

Avancé

Masquer la marge entre les colonnes : cette option vous permet de définir la taille de la marge entre les colonnes de votre ligne. Arrondi des bords : cette option vous permet d’arrondir les angles de votre ligne.

Colonnes

Style

L’onglet Style vous permet d’ajuster les paramètres suivants :

Redimensionner : définissez la largeur de la colonne. Taille pour mobile : définissez la largeur de la colonne sur les appareils mobiles. Arrondi des bords : cette option vous permet d’arrondir les angles de votre colonne.

Couleur/Image d’arrière-plan, espacement et visibilité

Les autres paramètres sont les mêmes que ceux décrits dans la section Paramètres communs ci-dessus. 

Texte

Vous pouvez modifier le style de votre texte à l’aide de la barre de mise en forme. Il vous suffit de sélectionner le texte que vous souhaitez modifier pour afficher la barre. Cliquez sur les trois points sur la droite pour accéder à des options supplémentaires.

Image et logo

Les images et les logos sont parfaits pour personnaliser vos emails et les rendre plus attrayants.

Pour ajouter une image ou un logo, saisissez l’URL correspondante ou cliquez sur AJOUTER (ou REMPLACER) dans la barre de droite. Une fenêtre contextuelle de gestion des fichiers s’affiche.

• Sélectionnez un fichier sur votre ordinateur.
• Choisissez une image dans la galerie : sur la gauche de l’éditeur, un menu s’affiche vous permettant de chercher des images libres de droits. Vous pouvez parcourir les images par catégorie (business, coaching, consulting, fitness, marketing, bureau, services).

Une fois que vous avez sélectionné votre image, plusieurs options s’offrent à vous :

Redimensionner : ajustez les dimensions de votre image. ALT : saisissez un texte alternatif pour décrire votre image. Lien : ajoutez un lien de redirection.

Modifier le style de vos images et logos

• Ombre portée : ajoutez une ombre à votre image.
• Arrondi des angles : définissez l’arrondi des angles de votre image.
• Alignement : positionnez votre image à gauche, au centre ou à droite.

Bouton

Vous pouvez utiliser notre élément Bouton pour créer un lien vers un site Web ou une autre section. Les boutons vous permettent de mettre en valeur des liens spécifiques sur votre landing page qui incitent vos abonnés à cliquer. 

Propriétés

Call to action : saisissez le texte qui s’affichera sur votre bouton. Choisir une action : choisissez parmi trois actions : rediriger vers une URL, ancrer à une section ou rediriger vers une page de cet entonnoir de conversion. Si vous ancrez à une section, sélectionnez dans la liste déroulante la section à laquelle le bouton est ancré. Si vous redirigez vers une page de cet entonnoir de conversion, sélectionnez dans la liste déroulante la page de redirection. Choisir une cible : indiquez si le lien s’ouvrira dans la fenêtre actuelle ou dans un nouvel onglet. URL (lien) : ajoutez le lien de redirection de votre bouton.

Modifier le style de votre bouton

Cliquez sur Style pour modifier le style de votre bouton.

Couleur : sélectionnez la couleur de votre bouton. Pleine largeur : indiquez si le bouton s’étend sur toute la largeur de la colonne. Remplissage : indiquez si votre bouton est opaque ou transparent : Taille : choisissez une taille pour votre bouton. Forme : choisissez une forme rectangulaire, ronde ou à bords arrondis. Ombre : ajoutez une ombre claire ou foncée.

Espacement et visibilité

Les autres paramètres sont les mêmes que ceux décrits dans la section Paramètres communs ci-dessus. 

Séparateur

Sous l’onglet Style, définissez l’épaisseur du séparateur : fin, épais ou très épais.

Formulaire

Veuillez consulter notre section dédiée dans la prochaine partie : Partie 4 : Ajouter un formulaire et utiliser des options avancées.

Icône

Paramètres de votre icône

Remplacer : si vous cliquez sur l’icône ou sur le bouton Remplacer, la bibliothèque d’icônes s’ouvre dans une fenêtre contextuelle. Choisissez parmi plus de 1 400 icônes différentes. Vous pouvez rechercher des icônes par nom grâce à la barre de recherche. Vous pouvez aussi filtrer par groupes d’icônes. Redimensionner : redimensionnez l’icône selon vos préférences. Alignement : positionnez votre image à gauche, au centre ou à droite. Lien : ajoutez une URL ici.

Espacement

Les autres paramètres sont les mêmes que ceux décrits dans la section Paramètres communs ci-dessus. 

Vidéo

Sous l’onglet URL, ajoutez un lien vers votre vidéo. Vous pouvez utiliser une vidéo hébergée sur YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku et Coub.

Code

Ajoutez votre propre code HTML. Le code inséré dans l'éditeur peut uniquement être testé sur les pages prévisualisées et publiées.

⏩ Et après ?

• Partie 4 : Ajouter un formulaire et utiliser des options avancées 
• Partie 5 : Publier votre landing page
• Les landing pages sont-elles adaptées au SEO ?
• Dupliquer une landing page existante
• Gérer les pages de votre landing page

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.