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

Comprendre la source du style d'une page

Dernière mise à jour: avril 30, 2021

Disponible avec :

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

Il existe plusieurs endroits où le style de contenu peut être ajouté dans HubSpot. Celui-ci est appliqué dans un ordre spécifique en fonction de l'endroit où il est ajouté. Découvrez comment le style est appliqué, comment trouver le style sur une page en ligne et comment obtenir de l'aide concernant les modifications de conception.

Comprendre l'application d'un style

Le style CSS dans HubSpot est appliqué en fonction de l'emplacement dans HubSpot, comme indiqué ci-dessous. Par exemple, le style défini dans une feuille de style globale est remplacé par le style défini sur une page spécifique. 

  1. CSS de module personnalisé
    1. Feuilles de style jointes à un module.
    2. CSS ajouté à la section CSS d'un module.
    3. CSS dans le balisage HubL du module dans un bloc require_css
  2. Feuilles de style ajoutées à un modèle via le bloc require_css
  3. Feuilles de style par défaut HubSpot (par exemple, layout.css)
  4. Feuilles de style jointes au modèle

    design-manager-linked-stylesheet
  5. Feuilles de style jointes à l'onglet Paramètres de votre page

    page-editor-attach-stylesheet
  6. Feuilles de style jointes à vos paramètres pour tous les domaines
  7. Feuilles de style jointes à vos paramètres pour un domaine spécifique
  8. CSS ajouté dans les balises <style>. Par exemple, le code HTML d'en-tête de vos paramètres de site web, de vos paramètres de page ou de votre modèle.

    page-editor-head-html
  9. Styles ajoutés via l'éditeur de page. HubSpot ajoutera également les balises !important à ces styles. Découvrez-en davantage sur les balises !important et leur impact sur les styles.

page-editor-styles-tab

Trouver le style sur un aperçu ou une page en ligne

Vous pouvez utiliser des outils de développement dans votre navigateur pour examiner les styles utilisés sur votre site web ou une page d'aperçu. Chaque navigateur varie légèrement dans la gestion des styles.

Pour trouver le style dans Google Chrome :

  • Sur votre aperçu ou page en ligne, effectuez un clic-droit sur l'élément que vous souhaitez examiner, puis sélectionnez Inspecter.
  • Dans le volet Éléments à gauche, vous verrez le code HTML de la page. Vous pouvez cliquer sur les éléments pour afficher leurs styles ou utiliser l'icône du curseur dans l'angle supérieur gauche de la fenêtre pour cliquer sur les éléments de page.

    inspect-live-page-cursor

  • Dans la fenêtre Styles à droite, vous verrez tous les styles appliqués à cet élément. Vous pouvez sélectionner et désélectionner les cases à cocher à côté de chaque style pour supprimer et appliquer le style. Cela permet d'affiner la règle de style à modifier.

    inspect-live-page
  • À droite des règles CSS, vous verrez le nom de la source pour ce style, ce qui vous indique d'où le style provient. Passez le curseur de la souris sur le nom de la source pour afficher le nom complet :
    • Si le style provient d'une feuille de style, le nom de la feuille de style apparaitra à côté de la déclaration CSS dans l'inspecteur. Vous pouvez ensuite accéder à votre gestionnaire de conception, trouver la feuille de style et apporter les modifications nécessaires.

      inspect-css-stylesheet-name
    • Si le nom de la source commence par module, le style provient probablement du CSS d'un module. Passez le curseur de la souris sur le nom de la source pour afficher le nom complet du module.

      inspect-css-module-name
    • Si le nom de la source est Feuille de style de l'agent utilisateur, le CSS fait partie du style par défaut du navigateur. Vous le verrez le plus souvent pour des styles de balises HTML plus larges, comme <p>, <h1>, <h2>, <span>, <div>, etc. Ce style est appliqué lorsque le navigateur ne peut pas trouver de règles générales de style pour l'élément, mais il peut être écrasé en ajoutant vos propres styles à cet élément.

      inspect-css-user-agent
    • Si le nom de la source est l'URL de la page, le CSS provient des balises <style> sur la page. Par exemple, le style peut être défini dans le code HTML d'en-tête de la page ou du modèle.

      inspect-css-page-url
    • Si le nom de la source est l'URL de la page et que le style est ciblé par #hs_cos_wrapper_module_number, le style est probablement défini dans l'onglet Styles de l'éditeur de page. HubSpot ajoutera les balises !important à ces styles. Découvrez-en davantage sur les balises !important et leur impact sur les styles.
       

      inspect-css-styles-tab
    • S'il est marqué element.style à côté de la déclaration dans l'inspecteur, c'est que le CSS a été défini en ligne. Le style en ligne est ajouté directement au code source HTML d'une page ou aux champs Style en ligne d'un modèle. Par exemple, le style en ligne du code source serait <p style="background:purple;">Hello world</p>.

      inspect-css-element-style

Pour plus de détails sur la façon d'inspecter une page, consultez la documentation d'aide pour votre navigateur web :

Obtenir de l'aide sur les modifications de conception

La meilleure ressource pour apporter des modifications à vos modèles ou feuilles de style HubSpot est le concepteur à l'origine du modèle. Toutefois, il existe une variété de ressources pour obtenir des informations supplémentaires sur le style de contenu, en fonction de votre maîtrise des codes HTML et CSS.

  • Si vous utilisez aisément les outils de l'inspecteur pour résoudre les problèmes de conception sur votre modèle :
  • Si vous n'êtes pas en mesure de lire ou de modifier les codes HTML et CSS dans vos modèles :