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.
CMS-General

Créer, modifier et ajouter des fichiers CSS pour formater le style d'un site web

Dernière mise à jour: septembre 12, 2019

Disponible avec :

Hub Marketing Professional, Enterprise
Basique

Les CSS (Cascading Style Sheets, en anglais) sont des fichiers codés qui sélectionnent des éléments d'une page pour en contrôler la présentation. Le code HTML du modèle personnalisé est en quelque sorte le squelette du site web, tandis que le code CSS en est la peau. 

Cet article explique comment créer, publier et joindre un fichier CSS dans HubSpot. Pour apporter des modifications simples au design d'une page particulière, cliquez ici.

Remarque : si l'équipe technique de HubSpot s'est chargée de la migration de votre site, des fichiers CSS par défaut ont déjà été créés pour vous. Si nécessaire, consultez votre designer pour modifier ces fichiers afin d'ajuster l'apparence de votre site.

Créer un fichier CSS

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Cliquez sur l'icône du dossier folder dans l'angle supérieur gauche de l'écran pour étendre le menu latéral. Cliquez ensuite sur Fichier > Nouveau fichier.
Nouveau fichier codé
  • Dans la boîte de dialogue, cliquez sur Feuille de style CSS. Saisissez ensuite un nom pour la feuille de style CSS et cliquez sur Créer.

Modifier le fichier CSS

Après avoir créé ou ouvert un fichier CSS existant, vous pouvez le modifier dans l'éditeur de code. Outre le code CSS standard, l'éditeur de code prend en charge les variables et les macros de HubL afin de faciliter la mise à jour du fichier CSS. Pour afficher la façon dont votre HubL apparaîtra, cliquez sur le bouton Afficher le résultat en haut de l'éditeur. Un panneau s'ouvrira à droite avec l'aperçu du rendu.


design-manager-show-output-toggle

Pour voir la liste des sélecteurs CSS standard pour les modèles HubSpot, consultez la page Boilerplate CSS

Avant de publier, vérifiez que le code ne contient pas d'erreurs HubL. Dans un fichier codé ou un module personnalisé, les erreurs ou avertissements HubL sont indiqués à trois endroits :

  • Dans la console d'erreur située en bas de l'éditeur de code.
  • Dans la colonne d'erreurs située à gauche de l'éditeur de code.
  • Dans la barre de défilement située à droite de l'éditeur.

Les erreurs empêchant la publication sont affichées en rouge, tandis que les avertissements généraux sont indiqués en jaune. En bas de l'éditeur de code, cliquez sur Afficher les détails pour afficher davantage d'informations concernant les erreurs dans la console d'erreur et sur Masquer les détails pour réduire la console d'erreur. 

La console d'erreur contient des liens vers les différents avertissements ou erreurs HubL dans le code ou le module personnalisé. Sur la gauche de l'éditeur de code, passez le curseur de la souris sur les indicateurs d'erreur rouges pour afficher l'erreur ou l'avertissement dans le code. Lorsque vous cliquez sur l'erreur, le curseur fait défiler l'ensemble des erreurs et avertissements de cette la ligne. Lorsque vous cliquez sur une note de la barre de défilement, vous accédez directement à cette partie du fichier.

Vous pouvez également cliquer sur un numéro de ligne dans l'éditeur de code pour que l'URL du fichier soit mise à jour en conséquence. Cela vous permet de partager un lien vers votre code, avec accès direct à la partie du fichier sur laquelle vous travaillez.  

Après modification du fichier, cliquez sur Publier les modifications dans l'angle supérieur droit. Pour utiliser cette feuille de style dans un autre modèle codé, copiez l'URL de la feuille en cliquant sur Actions > Copier l'URL publique dans le menu latéral de gauche.

Modifier le CSS

Joindre à un modèle

Dans HubSpot, il existe différentes façons de joindre des feuilles de style à votre contenu. Les feuilles de style jointes sont liées sur votre site dans l'ordre suivant :

  1. public_common.css * : feuille de style principalement utilisée par l'application HubSpot, mais aussi pour certaines fonctionnalités de site.
  2. En-tête HTML dans les paramètres sous Site web > Pages : balises de lien ajoutées à l'en-tête global  du site.
  3. Layout.css ** : fichier CSS adaptatif attaché par défaut à toutes les mises en page de type glisser-déposer du modèle.
  4. Feuilles de style jointes dans les paramètres sous Site web > Pages : feuilles de style jointes à l'ensemble du site.
  5. Feuilles de style jointes dans les paramètres sous Site web > Blog - : feuilles de style jointes au blog (remplacent les feuilles globales du site).
  6. Feuilles de style liées ***- feuilles de style jointes dans la mise en page du modèle.
  7. Balisage supplémentaire dans le modèle : balises de lien ajoutées à l' d'un modèle particulier. 
  8. Feuilles de style spécifiques à la page : feuilles de style jointes aux paramètres d'une page.
  9. HTML de l'en-tête de page : balises de lien ajoutées à l' d'une page particulière dans les paramètres de page.

* Obligatoire

** Obligatoire pour les mises en page de type glisser-déposer

***Méthode de liaison de feuille de style recommandée pour les mises en page du modèle 

Pour joindre des feuilles de style à un modèle, ouvrir le modèle dans le gestionnaire de conception. Dans le menu latéral de droite, sous Options de l'en-tête et du corps, sélectionnez un fichier dans le menu déroulant Ajouter à côté des Feuilles de style liées.

Vous pouvez modifier ou supprimer une feuille de style qui est déjà liée en la survolant avec la souris et en cliquant sur Modifier pour lui apporter des modifications ou sur X pour la supprimer.

Après avoir ajouté une feuille de style, cliquez sur Publier les modifications dans l'angle supérieur droit de l'écran pour appliquer les modifications aux pages en direct en utilisant le modèle. 

Capture d'écran d'un article de support HubSpot

Joindre ou supprimer des feuilles de style sur une page spécifique

Pour ajouter ou supprimer une feuille de style spécifique à une page dans la section Paramètres de l'éditeur de la page :

  • Accédez aux pages du site web ou aux pages de destination
  • Placez le curseur sur la page et cliquez sur Modifier
  • Dans l'éditeur de page, cliquez sur Paramètres au sommet.
  • Faites défiler la page et cliquez sur Options avancées
  • Sous Feuilles de style de page, cliquez sur le menu déroulant Joindre une feuille de style et sélectionnez la feuille que vous souhaitez joindre. Cliquez sur le X figurant à côté de la feuille de style que vous souhaitez supprimer.

  • Cliquez sur Enregistrer et Publier dans l'angle supérieur droit de l'écran.  

Vous pouvez également désactiver les feuilles de style héritées par la page du modèle ou du domaine. Ces feuilles de style ne sont alors pas appliquées à la page :

  • Sur le même onglet Paramètres de l'éditeur de page, sélectionnez Désactivée dans le menu déroulant situé à côté des feuilles de style incluses.
  • Cliquez sur Enregistrer et Publier dans l'angle supérieur droit de l'écran.

Joindre ou supprimer des feuilles de style au niveau d'un domaine

Pour ajouter ou supprimer une feuille de style de tous les contenus d'un domaine : 

  • Depuis votre compte HubSpot, accédez à l'icône Paramètres settings dans l'angle supérieur droit.
  • Dans le menu latéral, cliquez sur Site web > Pages
  • Sur l'onglet Modèles, défiler vers CSS & feuilles de style. Pour ajouter une feuille de style, cliquez sur + Ajouter une feuille de style. Cliquez sur le X à côté d'une feuille de style jointe pour le supprimer. 
  • Cliquez sur Enregistrer