Landing pages - Partie 3 : Modifier les paramètres de tous les éléments de votre landing page

clickable_banner-pricing_5_en-us.png

Dans cet article, nous allons vous expliquer comment configurer les sections et éléments sur votre landing page. Maintenant que vous avez organisé vos sections sur votre landing page, il est temps de les remplir avec des éléments tels que du texte, des images ou des boutons.

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

Paramètres communs

Certains paramètres sont communs entre les sections et les éléments. Nous allons d’abord décrire les paramètres communs, puis ceux qui sont propres aux sections et aux éléments.

Alignement

Le paramètre Alignement vous permet de choisir comment vous souhaitez aligner un élément (horizontalement et verticalement).

Espacement

Le paramètre Espacement vous permet de définir l’espace vertical et horizontal autour et à l’intérieur des sections et des éléments :

  • La Marge crée de l'espace autour d'un composant, en dehors des bordures définies.
  • La Marge intérieure crée de l'espace à l'intérieur d'un composant, entre la section ou l'élément et ses bordures.

Vous pouvez choisir entre différentes tailles d'espacement, du XS (plus petit) au XL (plus grand).

Visibilité

Pour les sections :

  • Le paramètre Visibilité vous permet de contrôler la visibilité des sections de votre landing page en fonction de l’appareil utilisé pour les visualiser. Vous pouvez choisir l'option Masquer sur mobile et/ou Masquer sur bureau.
  • Lorsque vous choisissez de masquer une section sur un appareil donné, celle-ci apparaît barrée dans l'éditeur et le message suivant apparaît : "Cette section n'est pas visible sur mobile/bureau" selon l'option sélectionnée.

Pour les éléments :

  • Le paramètre Visibilité vous permet de contrôler la visibilité de certains éléments de votre landing page en fonction de l’appareil utilisé pour les visualiser. Vous pouvez choisir l'option Masquer sur mobile et/ou Masquer sur bureau.
  • Ce paramètre n’a pas d’impact visuel dans l’éditeur et affecte uniquement les landing pages publiées pour vous éviter de perdre la trace du contenu dans l’éditeur.

 

Couleur d'arrière-plan

Le paramètre Couleur d'arrière-plan vous permet d’ajouter une couleur d’arrière-plan à une section ou à un élément et de gérer sa transparence.
💡 Bon à savoir
La couleur du texte change automatiquement en fonction de la couleur d'arrière-plan de la section.

Image d’arrière-plan

Le paramètre Image d’arrière-plan vous permet d’ajouter une image depuis notre bibliothèque d’images, une URL ou votre ordinateur comme arrière-plan d’une section ou d’un élément :

  • Légende : ajoutez une légende à l'image d'arrière-plan.
  • Supprimer : supprimez l'image d'arrière-plan actuelle.
  • Remplacer : choisissez une nouvelle image d'arrière-plan pour remplacer l'image actuelle.
  • Taille du fond : sélectionnez la manière dont l'image d'arrière-plan doit s'adapter à la section ou à l'élément.
  • Répétition du fond : sélectionnez si vous voulez répéter l'image d'arrière-plan dans la section ou l'élément.
  • Superposition de couleurs : sélectionnez la couleur à ajouter au-dessus du contenu de la section ou de l'élément et gérez sa transparence.

Section

Propriétés

Le paramètre Propriétés vous permet de renommer la section. Le nom de vos sections apparaît lorsque vous naviguez dans le panneau Disposition.
💡 Bon à savoir
Nous vous recommandons de donner un nom à vos sections pour vous aider à les suivre et à les parcourir plus facilement.

Couleur d'arrière-plan, Image d’arrière-plan et Espacement

Les paramètres Couleur d'arrière-plan, Image d’arrière-plan et Espacement sont décrits dans la section Paramètres communs de cet article.

Style

Le paramètre Style vous permet de personnaliser l’apparence de la section :

  • Bord à bord : influez sur l'espacement horizontal sur les côtés de la section.
  • Pleine hauteur : affichez l'image sous forme d'image complète.
  • Parallaxe de fond : utilisez le défilement parallaxe pour que l'image d'arrière-plan de la section défile plus lentement que le contenu au premier plan.

Signet

lp_bookmark_en-us.png

Le bouton Signet vous permet d’enregistrer une section pour la réutiliser dans vos autres landing pages. Cela peut être utile pour les en-têtes et les pieds de page que vous utilisez tout le temps dans vos landing pages. 

Vous trouverez les sections que vous avez enregistrées dans Sections > Signet, dans le panneau de gauche de l'éditeur. 

Ligne

Les lignes sont uniquement disponibles dans l'éditeur de landing page classique.

Vous pouvez modifier les paramètres d’une ligne en naviguant vers l’onglet Mise en page depuis le panneau de gauche, comme nous l’avons vu dans Landing pages - Partie 2 : Définir la structure de votre landing page. Vous pouvez également utiliser le fil d’Ariane qui apparaît en haut de votre écran lorsque vous cliquez sur un élément.

Couleur d'arrière-plan, Image d’arrière-plan, Espacement et Visibilité

Les paramètres Couleur d’arrière-plan, Image d’arrière-plan, Espacement et Visibilité sont décrits dans la section Paramètres communs de cet article.

Avancé

  • Masquer les gouttières entre les colonnes : fixez la taille de l'espace (gouttière) entre les colonnes de votre ligne.
  • Arrondi des angles : arrondissez les coins de votre ligne. 

Colonne

Les colonnes sont uniquement disponibles dans l'éditeur de landing page classique.

Vous pouvez modifier les paramètres d’une colonne en naviguant vers l’onglet Mise en page depuis le panneau de gauche, comme nous l’avons vu dans Landing pages - Partie 2 : Définir la structure de votre landing page. Vous pouvez également utiliser le fil d’Ariane qui apparaît en haut de votre écran lorsque vous cliquez sur un élément.

mceclip11.png

Style

  • Redimensionner : choisissez la largeur de votre colonne.
  • Taille mobile : choisissez la largeur de votre colonne sur mobile.
  • Arrondi des angles : arrondissez les coins de votre colonne. 

Couleur d'arrière-plan, Image d’arrière-plan, Espacement et Visibilité

Les paramètres Couleur d’arrière-plan, Image d’arrière-plan, Espacement et Visibilité sont décrits dans la section Paramètres communs de cet article.

Texte

Nouvel éditeur de landing page
Éditeur de landing page classique

Vous pouvez utiliser un élément Texte pour ajouter et mettre en forme du texte sur votre landing page. 

Barre de mise en forme

La barre de mise en forme vous permet de modifier le style de votre texte. Sélectionnez le texte que vous souhaitez modifier pour afficher la barre de mise en forme et cliquez sur les 3 points à l’extrémité droite pour accéder à davantage d’options.

Alignement et Espacement

Les paramètres Alignement et Espacement sont décrits dans la section Paramètres communs de cet article.

Image

Nouvel éditeur de landing page
Éditeur de landing page classique

Les images sont un moyen idéal de personnaliser le design de votre landing page et de le rendre plus attrayant. Vous pouvez sélectionner une image dans notre bibliothèque d'images, depuis une URL ou depuis votre ordinateur.

Alignement et Espacement

Les paramètres Alignement et Espacement sont décrits dans la section Paramètres communs de cet article.

Image

Les paramètres Image vous permettent de sélectionner une image et d’en modifier la taille :

  • URL de l'image : entrez l’URL de l’image que vous souhaitez ajouter.
  • Supprimer : supprimez l'image actuelle.
  • Remplacer : choisissez une nouvelle image pour remplacer l'image actuelle.
  • Redimensionner : choisissez la largeur de l'image.

Style

Le paramètre Style vous permet de définir l’apparence de l’image :

  • Ombre portée : ajoutez une ombre à l'image.
  • Arrondi des angles : définissez l'arrondi de l'image.
  • Style et couleur de la bordure : ajoutez une bordure à l'image et sélectionnez sa couleur.
  • Largeur de la bordure : définissez la largeur de la bordure de l'image.
  • Arrondi des angles : sélectionnez l'arrondi de la bordure de l'image.

Logo

Nouvel éditeur de landing page
Éditeur de landing page classique

Les logos sont un moyen idéal d’afficher votre marque sur votre landing page.

Alignement et Espacement

Les paramètres Alignement et Espacement sont décrits dans la section Paramètres communs de cet article.

Image

mceclip1.png

Le paramètre Image vous permet de sélectionner un logo et d’en modifier la taille :

  • Légende : ajoutez une légende au logo.
  • URL de l'image : entrez l’URL du logo.
  • Supprimer : supprimez le logo actuel.
  • Remplacer : choisissez un nouveau logo pour remplacer le logo actuel.
  • Rogner le logo : rognez le logo à la taille souhaitée.
  • Alt : ajoutez une balise alt pour donner des informations descriptives sur le logo.
  • Lien : ajoutez un lien de redirection au logo.

Style

Le paramètre Style est uniquement disponible dans le nouvel éditeur de landing page.

Le paramètre Style vous permet de définir l’apparence du logo :

  • Style et couleur de la bordure : ajoutez une bordure au logo et sélectionnez sa couleur.
  • Largeur de la bordure : définissez la largeur de la bordure du logo.
  • Arrondi des angles : sélectionnez l'arrondi de la bordure du logo.

Bouton

Nouvel éditeur de landing page

Éditeur de landing page classique

Vous pouvez utiliser un élément Bouton pour créer un lien vers un site web ou une autre sous-page de votre landing page. L’ajout de boutons à votre landing page est idéal pour mettre en évidence des liens spécifiques sur lesquels vous souhaitez que les personnes cliquent. 

Alignement, Espacement et Visibilité

Les paramètres Alignement, Espacement et Visibilité sont décrits dans la section Paramètres communs de cet article.

Propriétés

Le paramètre Propriétés vous permet de définir avec quoi doit être associé le bouton :

  • Call-to-action : entrez le texte que vous souhaitez afficher dans le bouton call-to-action.
  • Choisissez une action : choisissez entre les trois actions suivantes : Lien vers une URL, Ancrer à une section ou Lien vers une page de ce funnel.
    Si vous choisissez Ancrer à une section, sélectionnez dans la liste déroulante à quelle section il est ancré.
    Si vous choisissez Lien vers une page de ce funnel, sélectionnez dans la liste déroulante la page à laquelle il est lié.
  • Choisissez une cible : choisissez d’ouvrir le lien dans un nouvel onglet.
  • URL (lien) : ajoutez le lien vers lequel le bouton doit pointer.

Style

Le paramètre Style vous permet de personnaliser l’apparence du bouton :

  • Couleur : choisissez la couleur du bouton.
  • Style et couleur des contours : choisissez un type de contour pour le bouton et sa couleur.
  • Largeur des contours : définissez la largeur des contours du bouton.
  • Pleine largeur : choisissez si le bouton doit être aussi large que votre page.
  • Remplir : choisissez si le bouton doit être plein ou creux :
    mceclip0.png
  • Forme : choisissez si le bouton doit être carré, rond ou en forme de pilule.
  • Ombre : ajoutez une ombre claire ou foncée au bouton.
  • Icône du bouton : ajoutez une icône au bouton et choisissez sa position.

Séparateur

💡 Bon à savoir
Il est uniquement possible d'ajouter un séparateur horizontal.
Nouvel éditeur de landing page

Éditeur de landing page classique

Vous pouvez utiliser un élément Séparateur pour ajouter une séparation visuelle entre les différents éléments et sections de votre landing page. 

Espacement

Le paramètre Espacement est décrit dans la section Paramètres communs de cet article.

Style

Choisissez le niveau d'épaisseur du séparateur : Fin, Épais ou Le plus épais.

Couleur

Choisissez la couleur du séparateur.

Formulaire

Nouvel éditeur de landing page

Éditeur de landing page classique

Vous pouvez utiliser un élément Formulaire pour créer une landing page génératrice de lead. Pour en savoir plus sur les formulaires dans une landing page, consultez notre article dédié Partie 4 : Ajouter un formulaire et utiliser des options avancées.

Icône

Nouvel éditeur de landing page

Éditeur de landing page classique
mceclip24.png

Vous pouvez utiliser un élément Icône pour ajouter du contenu visuel et illustrer votre landing page.

Alignement et Espacement

Les paramètres Alignement et Espacement sont décrits dans la section Paramètres communs de cet article.

Paramètres

Les Paramètres d’une icône vous permettent de sélectionner une icône et de personnaliser son apparence :

  • Remplacer : choisissez une nouvelle icône pour remplacer l'icône actuelle.
  • Redimensionner : choisissez la largeur de l'icône.
  • Arrière-plan : ajoutez une couleur d'arrière-plan à l'icône.
  • Premier plan : ajoutez une couleur de premier plan à l'icône.
  • Style et couleur de la bordure : ajoutez une bordure à l'icône et sélectionnez sa couleur.
  • Largeur de la bordure : définissez la largeur de la bordure de l'icône.
  • Arrondi des angles : sélectionnez l'arrondi de la bordure de l'icône.
  • Lien : ajoutez un lien de redirection à l'icône.

Vidéo

Nouvel éditeur de landing page

Éditeur de landing page classique

Vous pouvez utiliser un élément Vidéo dans votre landing page pour présenter votre marque ou vos produits sans utiliser trop de texte.

Espacement

Le paramètre Espacement est décrit dans la section Paramètres communs de cet article.

URL

Le paramètre URL vous permet d’ajouter le lien vers la vidéo. Vous pouvez utiliser une vidéo hébergée sur YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku ou Coub.

Style

Le paramètre Style vous permet de gérer l’apparence de la vidéo :

  • Style et couleur de la bordure : ajoutez une bordure à la vidéo et sélectionnez sa couleur.
  • Largeur de la bordure : définissez la largeur de la bordure de la vidéo.
  • Arrondi des angles : sélectionnez l'arrondi de la bordure de la vidéo.

Conteneur

L’élément Conteneur est uniquement disponible dans le nouvel éditeur de landing page.

Vous pouvez utiliser un élément Conteneur pour regrouper plusieurs éléments et les déplacer ou les redimensionner tous en même temps.

Image d'arrière-plan, Espacement et Visibilité

Les paramètres Image d'arrière-plan, Espacement et Visibilité sont décrits dans la section Paramètres communs de cet article.

Style

Le paramètre Style vous permet de personnaliser l’apparence du conteneur :

  • Couleur d'arrière-plan et transparence : ajoutez une couleur d’arrière-plan au conteneur et gérez sa transparence.
  • Style et couleur de la bordure : ajoutez une bordure au conteneur et sélectionnez sa couleur.
  • Position de la bordure : définissez de quel côté du conteneur ajouter une bordure.
  • Largeur de la bordure : définissez la largeur de la bordure du conteneur.
  • Arrondi des angles : sélectionnez l'arrondi de la bordure du conteneur.
  • Ombre portée : ajoutez une ombre au conteneur.

Code

Nouvel éditeur de landing page

Éditeur de landing page classique

Vous pouvez utiliser un élément Code pour ajouter des extraits de code à votre landing page, comme une section de commentaires Facebook

💡 Bon à savoir
Vous pouvez tester le code inséré dans l’éditeur sur les landing pages publiées uniquement.

⏩ Et après ?

🤔 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.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec une agence partenaire Brevo.

💬 Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 0 sur 16