Aller au contenu principal

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

💡 Bon à savoir
Les landing pages sont disponibles avec les offres Business et BrevoPlus.

Cet article explique comment configurer les sections et les éléments de votre landing page. 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.

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

Paramètres communs

Les sections et les éléments partagent certains paramètres. Nous allons d’abord décrire ces paramètres communs, puis les paramètres spécifiques à chacun.

Alignement

mceclip0.png

Le paramètre Alignement vous permet de définir la façon dont vous souhaitez aligner un élément (horizontalement ou verticalement).

Espacement

mceclip1.png

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 permet d’ajuster l’espace autour de l’objet, à l’extérieur des bords définis.
  • L’espacement permet d’ajuster l’espace à l’intérieur de l’objet, entre la section ou l’élément et le bord.

Vous pouvez choisir entre différentes tailles d’espacement allant de XS (plus petit) à XL (plus grand).

Visibilité

mceclip5.png

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é. Vous pouvez choisir de masquer sur mobile ou de masquer sur ordinateur.
  • Lorsque vous choisissez de masquer une section sur un appareil spécifique, la section est grisée dans l’éditeur et le message suivant s’affiche : « Cette section n’est pas visible sur mobile/ordinateur » (selon l’option sélectionnée).
mceclip6.png

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é. Vous pouvez choisir de masquer sur mobile ou de masquer sur ordinateur.
  • Ce paramètre n’a aucun impact visuel dans l’éditeur et affecte uniquement les landing pages publiées afin que vous puissiez toujours accéder au contenu dans l’éditeur.

 

Couleur d’arrière-plan

mceclip7.png 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 modifier son opacité.
💡 Bon à savoir
La couleur du texte sera automatiquement modifiée en fonction de la couleur d’arrière-plan de la section.

Image d’arrière-plan

mceclip8.png

Le paramètre Image d’arrière-plan vous permet d’ajouter une image à partir de notre galerie, d’une URL ou de votre ordinateur afin de l’utiliser comme arrière-plan pour une section ou un élément :

  • Légende : ajouter une légende à l'image d'arrière plan.
  • Supprimer : supprimer l’image d’arrière-plan actuelle.
  • Remplacer : choisir une nouvelle image d’arrière-plan qui remplacera l’image actuelle
  • Taille d’arrière-plan : définir l’ajustement de l’image d’arrière-plan dans la section ou l’élément.
  • Répéter l’arrière-plan : répéter l’image d’arrière-plan à l’intérieur de la section ou de l’élément.
  • Couleur superposée : ajouter une couleur par-dessus le contenu de la section ou de l’élément et modifier son opacité.

Section

Propriétés

mceclip9.png

Le paramètre Propriétés vous permet de renommer la section. Le nom de vos sections s’affiche lorsque vous parcourez le menu Mise en page.
💡 Bon à savoir
Nous vous recommandons de donner un nom à vos sections afin d’en faciliter l’organisation et la navigation.

Style

mceclip10.png

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

  • 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 : 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.

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.

Ligne

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

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.

mceclip11.png

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é

mceclip12.png
  • Masquer la marge entre les colonnes : permet de définir la marge entre les colonnes de votre ligne.
  • Arrondi des bords : permet d’arrondir les angles de votre ligne. 

Colonne

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

Vous pouvez modifier les paramètres d’une colonne 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.

mceclip11.png

Style

mceclip13.png
  • Redimensionner : permet d’ajuster les dimensions de votre colonne.
  • Taille pour mobile : permet d’ajuster les dimensions de votre colonne sur mobile.
  • Arrondi des bords : permet d’arrondir les angles 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
mceclip14.png
Éditeur de landing page classique
mceclip15.png

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

Barre de formatage

mceclip16.png

La barre de formatage vous permet de modifier le style de votre texte. Sélectionnez le texte que vous souhaitez modifier pour afficher la barre de formatage et cliquez sur les 3 points sur la droite pour accéder à des options supplémentaires.

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
mceclip18.png
Éditeur de landing page classique
mceclip19.png

Les images sont idéales pour personnaliser votre landing page et la rendre plus attrayante. Vous pouvez sélectionner une image à partir de notre galerie, d’une URL ou de votre ordinateur.

Alignement et espacement

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

Image

mceclip21.png

Les paramètres Image vous permettent de sélectionner une image et de la redimensionner :

  • URL : saisir l’URL de l’image que vous souhaitez ajouter.
  • Supprimer : supprimer l’image actuelle.
  • Remplacer : choisir une nouvelle image qui remplacera l’image actuelle.
  • Redimensionner : permet d’ajuster les dimensions de votre image.

Style

mceclip22.png

Le paramètre Style vous permet de personnaliser l'apparence de l’image :

  • Ombre portée : ajouter une ombre à l’image.
  • Arrondi des bords : définir l’arrondi de l’image.
  • Style et couleur de la bordure : ajouter une bordure à votre image et définir une couleur.
  • Largeur de la bordure : définir la largeur de la bordure de l’image.
  • Arrondi des angles : définir l’arrondi des angles de l’image.

Logo

Nouvel éditeur de landing page
mceclip23.png
Éditeur de landing page classique
mceclip33.png

Les logos sont un excellent moyen de mettre votre marque en valeur 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

Les paramètres Image vous permettent de sélectionner un logo et de le redimensionner :

  • Légende : ajouter une légende au logo.
  • URL : saisir l’URL du logo.
  • Supprimer : supprimer le logo actuel.
  • Remplacer : choisir un nouveau logo qui remplacera le logo actuel.
  • Rogner le logo : rogner le logo à la taille souhaitée.
  • Alt : ajouter un texte alternatif pour décrire le logo.
  • Lien : ajouter un lien de redirection vers le logo.

Style

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

mceclip26.png

Le paramètre Style vous permet de personnaliser l'apparence du logo :

  • Style et couleur de la bordure : ajouter une bordure à votre logo et définir une couleur.
  • Largeur de la bordure : définir la largeur de la bordure du logo.
  • Arrondi des angles : définir l’arrondi des angles du logo.

Bouton

Nouvel éditeur de landing page

mceclip27.png

Éditeur de landing page classique
mceclip28.png

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

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

mceclip29.png

Les paramètres Propriétés vous permettent de définir la cible du bouton :

  • Call to action : saisir le texte qui s’affichera sur votre bouton.
  • Choisir une action : choisir parmi trois actions : rediriger vers une URL, ancrer à une section ou rediriger vers une page de ce funnel.
    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 : indiquer si le lien s’ouvrira dans la fenêtre actuelle ou dans un nouvel onglet.
  • URL (lien) : ajouter le lien de redirection de votre bouton.

Style

mceclip30.png

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

  • Couleur : sélectionner la couleur du bouton.
  • Style et couleur de la bordure : définir un type de bordure pour le bouton ainsi que sa couleur.
  • Largeur de la bordure : définir la largeur de la bordure du bouton.
  • Pleine largeur : indiquer si le bouton doit être aussi large que la page.
  • Remplissage : indiquer si le bouton doit être opaque ou transparent :
    mceclip0.png
  • Forme : choisir une forme rectangulaire, ronde ou à bords arrondis.
  • Ombre : ajouter une ombre claire ou foncée au bouton.
  • Icône du bouton : ajouter une icône au bouton et choisir sa position.

Séparateur

💡 Bon à savoir
Vous pouvez uniquement ajouter des séparateurs horizontaux.
Nouvel éditeur de landing page

mceclip31.png

Éditeur de landing page classique
mceclip32.png

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 rubrique Paramètres communs de cet article.

Style

mceclip38.png

Définissez l’épaisseur du séparateur : mince, épais ou très épais.

Couleur

mceclip39.png

Définissez la couleur du séparateur.

Formulaire

Nouvel éditeur de landing page

mceclip34.png

Éditeur de landing page classique
mceclip35.png

Vous pouvez utiliser un élément Formulaire pour créer une landing page de génération de leads. 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

mceclip37.png

Éditeur de landing page classique
mceclip24.png

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

Alignement et espacement

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

Paramètres

mceclip40.png

Les paramètres d’une icône vous permettent de sélectionner une icône et d’en personnaliser l’apparence :

  • Remplacer : choisir une nouvelle icône qui remplacera l’icône actuelle.
  • Redimensionner : permet d’ajuster les dimensions de l’icône.
  • Arrière-plan : ajouter une couleur d’arrière-plan à l’icône.
  • Premier plan : ajouter une couleur de premier plan à l’icône.
  • Style et couleur de la bordure : ajouter une bordure à l’icône et définir une couleur.
  • Largeur de la bordure : définir la largeur de la bordure de l’icône.
  • Arrondi des angles : définir l’arrondi des angles de l’icône.
  • Lien : ajouter un lien de redirection vers l’icône.

Vidéo

Nouvel éditeur de landing page

mceclip41.png

Éditeur de landing page classique
mceclip42.png

Vous pouvez utiliser un élément Vidéo à votre landing page afin de mettre en valeur votre marque ou vos produits en limitant le texte.

Espacement

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

URL

mceclip43.png Le paramètre URL vous permet de personnaliser l'apparence de la vidéo. Vous pouvez utiliser une vidéo hébergée sur YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku ou Coub.

Style

mceclip44.png

Le paramètre Style vous permet de personnaliser l'apparence de la vidéo :

  • Style et couleur de la bordure : ajouter une bordure à la vidéo et définir une couleur.
  • Largeur de la bordure : définir la largeur de la bordure de la vidéo.
  • Arrondi des angles : définir l’arrondi des angles de la vidéo.

Contenant

L'élément Contenant est disponible uniquement dans le nouvel éditeur de landing page.

mceclip45.png

Vous pouvez utiliser un élément Contenant afin de regrouper plusieurs éléments et de tous les déplacer ou les redimensionner simultanément.

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

mceclip46.png

Le paramètre Style vous permet de personnaliser l'apparence du contenant :

  • Couleur d’arrière-plan et transparence : ajouter une couleur d’arrière-plan au contenant et définir son opacité.
  • Style et couleur de la bordure : ajouter une bordure au contenant et définir une couleur.
  • Position de la bordure : indiquer de quel côté du contenant ajouter une bordure.
  • Largeur de la bordure : définir la largeur de la bordure du contenant.
  • Arrondi des angles : définir l’arrondi des angles du contenant.
  • Ombre portée : ajouter une ombre au contenant.

Code

Nouvel éditeur de landing page

mceclip47.png

Éditeur de landing page classique
mceclip48.png

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

💡 Bon à savoir
Le code inséré dans l’éditeur peut seulement être testé sur les landing pages publiées.

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

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

Utilisateurs qui ont trouvé cela utile : 0 sur 5