Modifier les paramètres des éléments d'une landing page

Vue d’ensemble

Ce tutoriel vous explique comment modifier les paramètres des éléments de votre landing page :

• Texte
• Image, image d'arrière-plan et logo
• Couleur d'arrière-plan
• Bouton
• Séparateur
• Icône
• Vidéo
• Code
• Espacement
• Alignement

Vous apprendrez également à modifier des paramètres d'éléments spécifiques :

• Paramètres d'une section
• Paramètres d'une ligne
• Paramètres d'une colonne

Dans la partie gauche de l'outil de création de pages, l'onglet Gérer la présentation (Manage layout) vous permet de réorganiser les différents éléments d'une page.

Si vous cliquez sur la roue dentée, un encadré apparaît sur le côté droit qui vous permet de modifier les paramètres.

Bon à savoir : les landing pages sont disponibles pour les offres Premium et supérieures.

Texte

Typographie du texte

• Style de police (Font Style) : le style de police défini à l'étape 1 : configuration, sous Styles de police (Font Styles) s'affiche ici. Vous pouvez changer le style (Font Style), la famille (Font Family) et la taille de la police (Font Size) de votre texte selon vos besoins.
• Style de liste (List Style)
  
  • À puces (Bulleted) : ajouter une liste à puces
  • Numérotée (Ordered) : ajouter une liste numérotée
• Hyperlien (Hyperlink) : si vous souhaitez rediriger vers un lien, indiquez une URL ici.
• Format
  • 1. Votre texte apparaît en gras : exemple.
  • 2. Votre texte apparaît en italique : exemple.
  • 3. Votre texte apparaît souligné : exemple.
  • 4. Votre texte apparaît barré : exemple.
  • 5. Supprime le format du texte.

Image, image d'arrière-plan et logo

Pour ajouter une image, saisissez l'URL ou cliquez sur AJOUTER (ADD) ou REMPLACER (REPLACE) dans le menu de droite. Une pop-up de gestion de fichiers apparaît.

• Importer un fichier à partir de votre ordinateur.
• Choisir une image dans la galerie : dans la partie gauche de l'outil de création, un menu apparaît vous permet de sélectionner des images libres de droit. Vous pouvez rechercher une image par catégorie (business, formation, consultation, fitness, marketing, bureau, services).
• Rechercher des images de l'entreprise.

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

• Redimensionner (Resize) : définissez la grandeur d'affichage de votre image.
• ALT : ajoutez un texte alternatif pour apporter des informations descriptives sur votre image.
• Lien (Link) : ajoutez un lien de redirection.

Styliser votre image

• Ombre portée (Drop Shadow) : ajoutez une ombre à votre image.
• Arrondi (Border Radius) : définissez l'arrondi des angles de votre image.

Couleur d'arrière-plan

Cliquez sur Couleur d'arrière-plan (Background Color) pour afficher les paramètres de la couleur d'arrière-plan.

Vous pouvez choisir une couleur prédéfinie, effacer la couleur ou ajouter une nouvelle couleur.

La fonction Transparence vous permet de définir le degré de transparence de votre couleur d'arrière-plan.

Bon à savoir : la couleur de votre texte change automatiquement en fonction de la couleur d'arrière-plan.

Bouton

Propriétés du bouton

• Texte : entrez le texte qui apparaîtra sur votre bouton CTA.
• Action : choisissez l'une des trois actions (lien vers une URL, ancrer à une section ou lien vers une page de ce funnel).

Si vous choisissez l'option de lien vers une URL, définissez les paramètres suivants :

• S'ouvre dans (Opens in) : la fenêtre actuelle ou un nouvel onglet.
• URL (lien) : indiquez une URL ici.

Si vous choisissez l'option Ancrer à une section, sélectionnez la section de votre choix dans la liste déroulante.

Si vous choisissez l'option de lien vers une page de ce funnel, sélectionnez la page de votre choix dans la liste déroulante.

Styliser votre bouton

Cliquez sur Style pour modifier le style de votre bouton.

• Pleine largeur (Full width) : choisissez si le bouton doit occuper toute la largeur de la colonne ou non.
• Remplissage (Fill) : choisissez si le bouton doit être plein ou vide.
• Taille (Size) : déterminez la grandeur de votre bouton.
• Forme (Shape) : choisissez si le bouton doit être carré, rond ou à angles arrondis.
• Ombre (Shadow) : ajoutez une ombre claire ou sombre.

Séparateur

Sous l'onglet Style, déterminez si votre séparateur doit être fin, épais ou très épais

Bon à savoir : seul un séparateur horizontal peut être ajouté.

Icône

Paramètres de votre icône

• Redimensionner (Resize) : vous pouvez redimensionner l'icône selon vos préférences.
• Lien (Link) : indiquez une URL ici.
• Remplacer l'icône (Replace icon) : si vous cliquez sur l'icône ou sur le bouton Remplacer (Replace), une pop-up s'affiche avec une bibliothèque d'icônes. Vous pouvez choisir 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 type.

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 être testé uniquement dans les pages d'aperçu et publiées.

Espacement

Cliquez sur Espacement (Spacing) pour afficher et modifier les paramètres d'espacement.

D'abord, choisissez si vous souhaitez éditer le remplissage et la marge verticaux ou horizontaux.

La marge correspond à l'espace à l'extérieur d'un objet, tandis que le remplissage correspond à l'espace à l'intérieur de l'objet.

• Marge (Margin) : crée un espace autour de votre élément, en dehors des bordures définies.
• Espacement (Remplissage) : crée un espace à l'intérieur de votre élément, entre l'icône et la bordure.

Alignement

Cliquez sur Alignement pour aligner votre élément à gauche, au centre ou à droite.

Modifier les paramètres d'une section

Propriétés de la section

Nommez votre section afin de naviguer plus facilement entre les différentes sections.

Style

Cliquez sur Style pour afficher les paramètre de style.

• Bord à bord (Edge to Edge) : affecte l'espacement horizontal sur les côtés de la section.
• Pleine hauteur (Full Height) : affiche l'image sur toute sa grandeur.
• Masquer sur tablette (Hide on Tablet) : pour chaque section de votre landing page, vous pouvez contrôler sa visibilité selon l'appareil dans la section de modification. Référez-vous à la partie Personnaliser l'affichage sur mobile du tutoriel Utiliser l'outil de création de landing page.
• Masquer sur mobile (Hide on Mobile) : pour chaque section de votre landing page, vous pouvez contrôler sa visibilité selon l'appareil dans la section de modification. Référez-vous à la partie Personnaliser l'affichage sur mobile du tutoriel Utiliser l'outil de création de landing page.
• Défilement parallaxe en arrière-plan (Background Parallax) : le défilement parallaxe est une technique utilisée en infographie qui consiste à faire défiler l'image d'arrière-plan plus lentement que le contenu au premier plan.
  • Lorsque le défilement parallaxe en arrière-plan est ACTIVÉ
  • Lorsque le défilement parallaxe en arrière-plan est DÉSACTIVÉ

Modifier les paramètres d'une ligne

Paramètres avancés de votre ligne

Cliquez sur Avancé (Advanced) pour afficher les paramètres avancés.

• Masquer les espaces entre les colonnes (Hide gutters between columns) : détermine la largeur de l'espace entre les colonnes de votre ligne.
• Arrondi (Border radius) : arrondit les angles de votre ligne.

Modifier les paramètres d'une colonne

Sous l'onglet Style, vous trouverez les options suivantes :

• Redimensionner (Resize) : définit la grandeur de la colonne.
• Taille sur mobile (Mobile size) : définit la grandeur de la colonne sur mobile.
• Arrondi (Border radius) : arrondit les angles de la colonne.