Ignorer et passer au contenu principal
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 avec un modèle de démarrage

Dernière mise à jour: juillet 23, 2021

Disponible avec :

Tous les produits et les abonnements

Vous pouvez utiliser un modèle de démarrage pour créer un site web ou une page de destination simple. Cet article explique comment créer une nouvelle page, personnaliser le design de votre page et publier votre page en utilisant un modèle de démarrage. 

Remarque : Les modèles de démarrage ne prennent pas en charge le contenu intelligent, les modules personnalisés, la personnalisation, l'accès au code source des modules de texte enrichi, les pages protégées par mot de passe ou des options avancées telles que le changement de modèle et l'accès au HTML d'en-tête.


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

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

  • Dans votre compte HubSpot accédez à vos pages de destination ou à vos pages de site web
  • Dans l'angle supérieur droit, cliquez sur le menu déroulant Créer et sélectionnez Page de site web ou Page de destination
  • Dans le menu latéral de gauche de l'écran de sélection du modèle, cliquez sur Tous vos modèles.
  • Pour afficher vos modèles de démarrage disponibles, cliquez sur le menu déroulant Filtrer par source et sélectionnez Démarrage. 

select-a-starter-template

  • Passez le curseur de la souris sur un modèle, puis cliquez sur Aperçu dans l'angle supérieur droit.
  • Pour créer une page avec ce modèle, cliquez sur Utiliser le modèle dans l'angle supérieur droit.
  • Dans la boîte de dialogue, cliquez sur Continuer
  • Saisissez un nom interne pour votre page, puis cliquez sur Créer une page

Modifier le contenu de votre page

Les modèles de démarrage contiennent des blocs de contenu de site web appelés modules. Vous pouvez organiser ces modules en lignes horizontales ou en colonnes verticales.

Vous pouvez regrouper les lignes et les colonnes 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 faire glisser et déposer ces éléments pour réorganiser la disposition de votre page. Découvrez-en davantage sur la modification du contenu de la page dans une zone de glisser-déposer.

Pour personnaliser l'apparence de votre page sur les appareils mobiles, cliquez sur l'icône Modifier pour mobile mobile edit l'éditeur de barre latérale.

edit-page-for-mobile

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 l'éditeur de barre latérale. 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 et sélectionnez une police.
    • Cliquez sur les touches de direction pour ajuster la taille de police.
    • Cliquez sur le sélecteur de couleur et sélectionnez une couleur pour votre 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 l'élément de texte dans les modules comportant une balise de titre.
    • Cliquez sur le menu déroulant Titres pour sélectionner une police.
    • Cliquez sur le sélecteur de couleur et sélectionnez une couleur de police.  Pour choisir une couleur personnalisée, cliquez sur l'onglet Avancé et saisissez une valeur hex
  • Texte du lien : personnalisez les polices et couleurs des liens sur votre page.
    • Cliquez sur le menu déroulant Texte du lien et sélectionnez une police.
    • Cliquez sur le sélecteur de couleur et sélectionnez une couleur de lien.  Pour choisir une couleur personnalisée, cliquez sur l'onglet Avancé et saisissez une valeur hex
    • Cliquez sur le menu déroulant et sélectionnez un style à appliquer au texte de votre lien.
    • Personnalisez la couleur et la transparence de vos liens lorsqu'ils sont survolés, cliqués ou déjà visités : 
      • Couleur du lien survolé : cliquez sur le sélecteur de couleur et sélectionnez une couleur de lien lorsqu'un visiteur passe le curseur de la souris dessus. Pour modifier la transparence de la couleur, saisissez un pourcentage dans le champ de texte. 
      • Couleur du lien actif : cliquez sur le sélecteur de couleur et sélectionnez une couleur de lien lorsque le lien est cliqué. Pour modifier la transparence de la couleur, saisissez un pourcentage dans le champ de texte. 
      • Couleur du lien visité : cliquez sur le sélecteur de couleur et sélectionnez une couleur de lien lorsque le lien a déjà été cliqué par un visiteur. Pour modifier la transparence de la couleur, saisissez un pourcentage dans le champ de texte. 

edit-link-text

Formulaires et boutons

Dans la section Formulaires et 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 sélecteur de couleur pour choisir une couleur
    • Pour définir la transparence de votre couleur d'arrière-plan de bouton, saisissez un pourcentage dans le champ. 
  • Couleur du texte du bouton : personnalisez la couleur du texte sur les boutons de votre page.
    • Saisissez une valeur hex ou cliquez sur le sélecteur de couleur pour choisir la couleur du texte.
    • Pour définir la transparence de votre couleur d'arrière-plan de bouton, saisissez un pourcentage dans le champ. 
  • Angle du bouton : personnalisez l'apparence des boutons carrés ou arrondis sur votre page. 
    • Saisissez une valeur dans le champ ou faites glisser le curseur vers une nouvelle position. 
    • Une valeur plus élevée signifie que les boutons de votre page auront des bords ronds, tandis qu'une valeur de zéro signifie que les boutons seront carrés.

Remarque : HubSpot recommande de maintenir des couleurs, des polices et des styles cohérents en fonction des paramètres de l'onglet Conception. Vous pouvez remplacer les styles par défaut pour un module individuel dans l'onglet Options du panneau de gauche.


Prévisualiser et publier votre page

Avant de publier votre page, cliquez sur Aperçu dans l'angle supérieur droit pour tester l'affichage de votre page sur un ordinateur ou un appareil mobileUne fois que vous êtes satisfait de l'aperçu de votre page, cliquez sur Publier dans l'angle supérieur droit.