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

Dernière mise à jour: March 5, 2018

Disponible avec :

L'outil Gestionnaire de conception de HubSpot permet aux designers de créer et de mettre à jour des feuilles de style en toute facilité. 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. Si les modèles que vous créez et leur code HTML représentent l'ossature de votre site web, alors la CSS en est l'aspect visuel.

Cet article explique comment créer, publier et ajouter un fichier CSS dans HubSpot. Si vous hésitez à modifier vous-même une CSS ou si vous souhaitez simplement apporter de petites modifications de design à une page précise, consultez cet article sur l'utilisation de l'onglet Style.

 

Accéder au Gestionnaire de conception

Pour créer ou modifier un fichier CSS, accédez au gestionnaire de conception (Contenu > Gestionnaire de conception).

Navigate to Design Manager
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. Au besoin, votre designer peut les modifier afin de peaufiner l'aspect de votre site. Les noms des fichiers ajoutés par l'équipe technique, ainsi que leur explication, sont disponibles ici. Après avoir trouvé le fichier voulu, vous pouvez passer à l'étape 3.

Créer un nouveau fichier codé

Cliquez sur le dossier Fichiers codés, puis sur le bouton bleu indiquant Nouveau fichier codé.

New coded file

Cliquez sur l'option Éditeur de code et sur l'option Page. Cliquez ensuite sur Créer.

Nommer et enregistrer le fichier

Sélectionnez le dossier dans lequel vous souhaitez enregistrer votre nouvelle feuille de style CSS. Vous pouvez également créer un nouveau dossier : sélectionnez le dossier principal, puis cliquez sur Nouveau dossier et attribuez-lui un nom. Donnez à votre fichier CSS un nom comportant une extension .css, puis cliquez sur Enregistrer pour le créer. 

Name and save file

Modifier le fichier

Dès que vous avez créé ou ouvert un fichier CSS, vous pouvez le modifier dans l'éditeur de code. Outre la CSS standard, l'éditeur de code de HubSpot peut gérer les variables et les macros HubL afin de faciliter la mise à jour de votre CSS. 

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

Edit CSS

Publier le fichier

Cliquez sur Publier les modifications pour compiler et comprimer votre fichier CSS. 

Publish changes

Ajouter à un modèle

Pour ajouter des feuilles de style à la mise en page d'un modèle, ouvrez le modèle voulu et cliquez sur Actions > Modifier l'en-tête. Dans la section Ajouter une feuille de style, vous pouvez supprimer n'importe quelle feuille existante en cliquant sur le X présent à sa droite. 

Pour ajouter votre nouvelle feuille de style, cliquez sur Ajouter une feuille de style. Sélectionnez la feuille voulue, puis cliquez sur Ajouter. Cliquez sur Enregistrer, et enfin sur Publier les modifications.

HubSpot Help article screenshot
Vous pouvez ajouter des fichiers CSS au niveau d'un domaine ou d'une page, mais il est conseillé de les ajouter au niveau des modèles. Envisagez également de désactiver les feuilles de style de vos domaines pour réduire les risques de conflits entre codes. Pour en savoir plus sur les éléments auxquels peuvent être ajoutés des fichiers CSS, consultez cet article.

Fichier CSS principal

HubSpot Academy

Meilleures pratiques

Ce que votre fichier CSS principal inclura au final dépendra de la complexité du design de votre site, mais voici déjà quelques conseils :
  • CSS au design adaptatif : vous pouvez inclure le code HubSpot required_base.css pour créer des modèles au design adaptatif.
  • CSS normalisée : tout code à intégrer à l'ensemble de vos pages pour permettre aux utilisateurs de les afficher de manière consistante peut être ajouté au fichier CSS principal.  
  • Positionnement de la largeur maximum : les éléments créés dans COS de HubSpot bénéficient par défaut d'un design adaptatif, néanmoins il est nécessaire d'indiquer la largeur maximum des zones de contenu de vos pages.  Consultez cet article pour en savoir plus sur la définition d'une largeur maximum.
  • Code média fluide : ce code permet aux images et aux vidéos d'être elles aussi adaptatives. La CSS prévue à cet effet pour les images est disponible ici.
  • Code de tableau au design adaptatif : tableaux et design adaptatif étant sujets à des problèmes de compatibilité, chaque code ajouté aux données tabulaires pour en définir la mise en forme peut également être ajouté au fichier CSS principal.
  • Style des autres modules standard : la modification du style des modules standard est abordée dans la dernière section de ce guide.  Vous pouvez, par exemple, ajouter un style pour le module de slider dans le fichier CSS principal afin d'harmoniser sa mise en forme et son fonctionnement dans tous vos modèles.
En savoir plus

Le fichier CSS principal est un fichier CSS inclus automatiquement dans tous les modèles, sauf s'il est désactivé. Il permet aux designers de gagner du temps, surtout lorsqu'une entreprise prévoit de créer plusieurs thèmes à utiliser dans différents outils de HubSpot.

Si vous devez créer plusieurs versions de l'interface utilisateur de votre site ou si vous avez besoin de différents types de campagnes, il est possible que vous deviez rédiger le code de base à de multiples reprises. Dans ce cas de figure, un fichier CSS principal pourra regrouper l'ensemble de votre code général, tandis que des feuilles de style supplémentaires permettront de définir différentes options de mise en forme pour des campagnes précises.

Article précédent:

Article suivant: