Comment créer et modifier des pages de site web

Dernière mise à jour: August 10, 2018

Disponible avec :

Modules complémentaires: Site web

Pour créer et modifier le contenu d'une page de site web, il faut accéder à l'éditeur de contenu.

Suivez les étapes ci-dessous pour créer les pages d'un site web hébergé sur HubSpot.

Accéder à l'outil Pages de site web

Dans le tableau de bord HubSpot, accédez à Contenu > Pages de site web.

main-nav-content-website-pages-2016.png

Cliquer sur Créer une page web

Cliquez sur Créer une page web.

create-new-website-page---website-pages.png

Sélectionner un modèle

Sélectionnez maintenant le modèle qui servira de structure à la page. Vous pouvez parcourir les modèles existants sur votre compte, acheter un modèle Premium sur HubSpot Marketplace ou créer une nouvelle mise en page en convertissant une maquette. Pour savoir comment procéder, cliquez ici.

Une fois le modèle choisi, cliquez dessus, donnez un nom à la nouvelle page, puis cliquez sur Créer.

select-a-website-page-template.png

Ajouter du contenu à la page web

Une fois la page créée, vous accédez à l'écran d'édition, où vous pouvez ajouter du contenu ou le modifier. 

Pour modifier le contenu d'un module, passez le curseur de la souris dessus afin de faire apparaître l'icône Crayon, puis cliquez sur le module pour le modifier.

edit-module.gif

Vous pouvez aussi cliquer sur l'icône Cube située dans le menu latéral de gauche pour modifier les modules de la page. Lorsque vous cliquez sur cette icône, la liste des modules modifiables de la page apparaît. Cliquez sur le module de votre choix pour accéder aux options de modification correspondantes. Apportez vos modifications, puis cliquez sur Enregistrer et accéder à la liste des modules dans l'angle supérieur gauche. 

edit-module-left-sidebar.gif

Ajouter des modules à la mise en page (colonnes flexibles)

Si le modèle contient des colonnes flexibles, une icône + s'affiche dans le menu latéral de gauche. Cliquez sur cette icône pour afficher la liste des types de modules disponibles. Choisissez le type de module que vous souhaitez ajouter à la colonne flexible, puis faites glisser le module sur la mise en page.

REMARQUE : si le modèle ne contient pas de colonnes flexibles, l'icône + n'apparaît pas.

add-module-flex.gif

Appliquer un style aux modules

Les feuilles de style associées à la page sont appliquées aux modules par défaut, mais vous pouvez également appliquer des styles intraligne au niveau de la page. Pour cela, passez le curseur de la souris sur le module à modifier, puis cliquez sur l'icône Pinceau dans l'angle supérieur gauche du module. Un panneau contenant différentes options de style apparaît. 

style-module.gif

Modifier les paramètres de la page

Pour modifier les paramètres de la page, cliquez sur l'onglet Paramètres en haut de l'éditeur de pages de site web.
edit-page-settings.png

En haut de l'écran Paramètres, figure la section Informations de base. Renseignez ici les informations de base destinées aux moteurs de recherche et aux navigateurs. 

1. Nom de la page : nom interne de la page de site web. Vous pouvez modifier ici le nom saisi lors de la création de la page. Ce nom sert à organiser les pages en interne. Les visiteurs du site web n'y ont pas accès.
2. Titre de la page : ce titre s'affiche au sommet du navigateur lors du chargement de la page.
3. URL de la page : il s'agit de l'adresse URL de la page. Celle-ci apparaît dans la barre d'adresse du navigateur lorsqu'un visiteur accède à la page.
4. Méta-description : cette description apparaît dans les résultats de recherche, en-dessous du titre de la page.
5. Campagne : ce menu déroulant permet d'associer la page de site web à une campagne HubSpot. Vous pouvez également créer une nouvelle campagne en cliquant sur Ajouter nouveau.
HubSpot Help article screenshot

La section Options avancées contient les paramètres de la page, les paramètres de style, ainsi que ceux du modèle.

Cliquez sur les liens Modifier le HTML de l'en-tête ou Modifier le HTML du pied de page si vous souhaitez ajouter des snippets de code, du code d'intégration ou des scripts de suivi JavaScript aux balises et

de la page. Insérez le code dans la fenêtre contextuelle, puis cliquez sur Enregistrer. 
de la page. Insérez le code dans la fenêtre contextuelle, puis cliquez sur Enregistrer.

 

HubSpot Help article screenshot

Il est également possible de protéger la page par un mot de passe. Cette option s'avère utile dans les cas suivants :

  • Vous créez une page de site web à usage interne pour stocker des supports de vente et de marketing destinés à votre équipe.
  • Vous créez une page réservée aux clients pour publier des modèles et ressources exclusifs.
  • Vous mettez des ressources approfondies à disposition de vos revendeurs et partenaires en amont d'un lancement de produit.

Pour activer un mot de passe sur la page, cochez la case Protéger cette page par un mot de passe et saisissez un mot de passe dans le champ de texte qui s'affiche.

HubSpot Help article screenshot

Si vous le souhaitez, vous pouvez également attribuer une date et heure d'expiration à la page. Cette fonctionnalité est utile si la page porte sur une offre limitée ou un produit temporairement mis en avant. Pour activer cette fonctionnalité, cochez la case Définir une date et une heure d'expiration pour la page, sélectionnez une date et une heure d'expiration, puis indiquez la page de redirection à utiliser suite à l'expiration.

HubSpot Help article screenshot

Dans la section Paramètres de style, vous pouvez modifier les options suivantes :

  • Fichier CSS principal : le nom du fichier CSS principal s'affiche. Utilisez le menu déroulant pour l'activer, le désactiver ou sélectionner la valeur par défaut.
  • Feuilles de style de domaine : le nom du fichier CSS définit à l'échelle du domaine s'affiche. Utilisez le menu déroulant pour l'activer, le désactiver ou sélectionner la valeur par défaut.
  • Feuilles de style du modèle : le nom du fichier CSS associé au modèle s'affiche. Utilisez le menu déroulant pour l'activer, le désactiver ou sélectionner la valeur par défaut.
  • Feuilles de style spécifiques aux pages : les fichiers CSS spécifiquement appliqués à la page s'affichent. Cliquez sur Ajouter une feuille de style pour associer un autre fichier CSS à la page.

Pour en savoir plus sur l'ajout de feuilles de style, cliquez ici.

HubSpot Help article screenshot

La section Paramètres des modèles, vous permet de changer de modèle ou modifier le modèle si vous le souhaitez. Dans cette section sont affichés l'aperçu du modèle en cours d'utilisation ainsi que son nom.

template-settings.png

Optimisation SEO

Cliquez sur l'icône représentant un graphique dans le menu de gauche pour accéder aux paramètres d'optimisation. Saisissez les mots-clés à associer à la page dans le champ de texte. Une liste de tâches d'optimisation s'affiche en-dessous, par exemple :

seo-optimize-icon.png

Afficher un aperçu de la page

Cliquez sur l'icône œil dans le menu de gauche pour accéder à l'aperçu de la page. Les options d'aperçu suivantes sont disponibles :

  • Type d'appareil : cliquez sur les icônes pour vérifier l'affichage de la page sur tablette, smartphone, etc.
  • Aperçu intelligent : cochez la case Afficher en tant que contact spécifique, puis sélectionnez un contact dans le menu déroulant. L'aperçu vous montre comment le contact verra la page. Cette option est utile pour vérifier l'affichage du contenu intelligent.
  • Aperçu partageable : cliquez sur ce bouton pour obtenir un lien d'aperçu que vous pouvez partager avec votre équipe même si la page n'est pas encore publiée. 
HubSpot Help article screenshot

Publier la page ou planifier sa publication

Une fois que le contenu est prêt, que la page est optimisée pour les moteurs de recherche et que vous avez vérifié l'aperçu, accédez à l'onglet Publier ou planifier.

Sous cet onglet, vous pouvez sélectionner Publier maintenant ou Planifier pour plus tard. Sélectionnez l'option de votre choix (si vous décidez de planifier la publication, indiquez la date et heure souhaitée), puis cliquez sur le bouton bleu dans l'angle supérieur droit pour Planifier ou Publier la page. 

HubSpot Help article screenshot

Table des matières

    Article précédent:

    Measuring Your Performance Project

    Article suivant: