Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Landing Pages

Créer une page de destination avec un modèle de démarrage

Dernière mise à jour: avril 29, 2020

Disponible avec :

Hub Marketing Starter, Professional, Enterprise
Hub CMS Professional, Enterprise
Ancienne version Hub Marketing Basique

Grâce à un modèle de démarrage, vous pouvez rapidement et facilement créer une page de destination afin de proposer une offre de contenu aux visiteurs de votre site web. Vous recueillerez les coordonnées des visiteurs, puis leur enverrez un e-mail de suivi afin de leur proposer votre offre de contenu. Découvrez comment configurer une page de destination et en personnaliser la conception dans un modèle de démarrage.

Remarque : Pour découvrir comment créer une page de destination avec un modèle de démarrage dans un tutoriel vidéo, consultez ce module de HubSpot Academy.

Avant de commencer

Créer une page de destination avec un modèle de démarrage

Pour créer une nouvelle page de destination avec un modèle de démarrage :

  • Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de destination.
  • Dans l'angle supérieur droit, cliquez sur Créer > Page de destination.
  • Dans le menu latéral de gauche, cliquez sur Tous vos modèles.
  • Passez le curseur de la souris sur un modèle étiqueté avec une balise Démarrage, puis cliquez sur Aperçu dans l'angle supérieur droit.

starter-template-create-page

  • Pour créer une page avec ce modèle, cliquez sur Utiliser le modèle dans l'angle supérieur droit.

Modifier le contenu dans une zone glisser-déposer

Les modèles de démarrage contiennent des modules, qui sont des blocs de contenu de site web. Ces modules peuvent être organisés en lignes horizontales ou en colonnes verticales.

Ces lignes ou colonnes peuvent être regroupées en sections d'éléments. En regroupant des éléments, vous pouvez appliquer des styles d'arrière-plan à une zone entière de votre page. Vous pouvez également glisser et déposer ces éléments pour réorganiser la mise en page de votre page de destination. 

Découvrez comment modifier le contenu de la page dans une zone glisser-déposer

Personnaliser les polices, les couleurs et les boutons

Pour personnaliser les styles par défaut de votre modèle de démarrage, cliquez sur l'onglet Conception dans le panneau de gauche. Vous pouvez également personnaliser la couleur ou l'image d'arrière-plan pour une ligne, une colonne ou une section spécifique de la page.

edit-starter-theme-on-page

Typographie

Dans la section Typographie, modifiez les polices et les styles de police utilisés dans le corps et les titres de votre page. Toutes les polices Google sont prises en charge.
  • Corps du texte : personnalisez le style, la taille et la couleur de la police pour le corps de texte sur votre page :
    • Cliquez sur le menu déroulant Corps du texte pour sélectionner une police.
    • Cliquez sur les touches de direction pour choisir la taille de la police.
    • Cliquez sur le cercle coloré pour choisir la couleur de la police. Pour choisir une couleur personnalisée, cliquez sur l'onglet Avancé et saisissez une valeur hex.
  • En-têtes : personnalisez le style et la couleur de la police pour tout élément de texte dans vos modules comportant une balise de titre.
    • Cliquez sur le menu déroulant Titres pour sélectionner une police.
    • Cliquez sur le cercle coloré pour choisir la couleur de la police.
  • Texte du lien : personnalisez les polices et couleurs des liens sur votre page.
    • Cliquez sur le menu déroulant Texte du lien pour sélectionner une police.
    • Cliquez sur le cercle coloré pour choisir la couleur de la police.
    • Cliquez sur les boutons de styles ou le menu déroulant pour sélectionner les styles et l'éventuel sous-lignage du texte des liens sur votre page.
    • Pour personnaliser l'affichage du lien lorsque vos visiteurs interagissent avec votre page, vous pouvez modifier la couleur des liens et leur transparence.
      • Couleur du lien survolé : personnalisez la couleur et la transparence du texte de lien lorsqu'un visiteur passe son curseur sur les liens de votre page.
      • Couleur du lien actif : personnalisez la couleur et la transparence du texte du lien par défaut, avant que ce lien ne soit cliqué.
      • Couleur du lien visité : personnalisez la couleur et la transparence du texte du lien après qu'un visiteur a cliqué sur ce dernier.

Boutons

Dans la section Boutons, personnalisez le style des boutons simples et des boutons d'envoi de formulaire sur la page.
  • Couleur d'arrière-plan du bouton : personnalisez la couleur d'arrière-plan des boutons sur votre page.
    • Saisissez une valeur hex ou cliquez sur le cercle coloré pour choisir une couleur.
    • Saisissez un pourcentage ou cliquez sur les touches de direction pour régler la transparence de la couleur d'arrière-plan de votre bouton.
  • Couleur du texte du bouton : la couleur du texte sur les boutons de votre page.
    • Saisissez une valeur hex ou cliquez sur le cercle coloré pour choisir la couleur du texte.
    • Saisissez un pourcentage ou cliquez sur les touches de direction pour régler la transparence de la couleur du texte des boutons.
  • Angle des boutons : saisissez une valeur ou utilisez le curseur pour personnaliser la forme de vos boutons. Les boutons qui s'afficheront sur votre page auront une forme plus ronde si vous appliquez une valeur supérieure. Vos boutons seront de forme rectangulaire si la valeur est égale à zéro.

Remarque : Il est conseillé d'utiliser des couleurs, des polices et des styles cohérents en fonction des paramètres de l'onglet Conception. Si vous souhaitez remplacer les styles par défaut pour un élément spécifique de votre page, vous pouvez remplacer les styles par défaut pour un module dans l'onglet Options du panneau de gauche.

Étapes suivantes

Maintenant que vous êtes prêt à partager votre page de destination :

/fr/landing-pages/edit-a-page-using-a-starter-template