Comprendre la source du style d'une page

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é. Dans cet article, découvrez comment appliquer le style, comment trouver le style sur une page en ligne et comment obtenir de l’aide pour modifier le design.

Comprendre comment les styles sont appliqués

Les styles sont appliqués dans un ordre spécifique en fonction de l’endroit où ils sont ajoutés dans HubSpot. Par exemple, les styles ajoutés dans une feuille de style globale sont remplacés par des styles ajoutés sur une page spécifique. 

Utilisez cette liste pour connaître la source du style d’une page, en commençant par les styles appliqués en premier et en terminant par les styles appliqués en dernier.

1. CSS de module personnalisé
   • Feuilles de style attachées à un module dans l’éditeur de mise en page.

• • CSS ajouté à la section module.css d’un module dans l’éditeur de modules.

1. • CSS à l’intérieur du balisage HubL du module dans un require_css block.
2. Feuilles de style ajoutées à un modèle via dans require_css block l’éditeur de code.
3. Feuilles de style par défaut de HubSpot (par exemple, layout.css) dans le gestionnaire de conception .
4. Feuilles de style attachées au modèle dans l’éditeur de mise en page.

5. Feuilles de style jointes dans l’onglet Paramètres de votre page.

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

9. Styles ajoutés via l’éditeur de page. HubSpot ajoutera !important également des balises à ces styles. Découvrez-en davantage sur les balises !important et leur influence sur le style.

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

Utilisez les outils de développeur dans votre navigateur pour trouver les styles appliqués à votre site web en ligne ou à une page d’aperçu. Chaque navigateur varie légèrement dans la gestion des styles. Dans l’exemple suivant, Google Chrome est utilisé.

1. Accédez à votre contenu :
   • Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Cliquez sur le nom de votre page.
3. Dans l'éditeur de contenu, cliquez sur Aperçu dans l'angle supérieur droit.
4. Sur la page d’aperçu, cliquez sur Ouvrir dans un nouvel onglet.
5. Dans l’aperçu, cliquez avec le bouton droit de la souris sur l’élément que vous souhaitez examiner, puis sélectionnez Inspecter.
6. Dans le volet Éléments , vous verrez le code HTML de la page. Cliquez sur les éléments pour afficher leurs styles.
7. Dans le volet Styles , examinez les règles CSS appliquées à cet élément. Sélectionnez et désélectionnez les cases à cocher à côté de chaque style pour supprimer ou ajouter temporairement des styles. Cela aidera à identifier quelle règle affecte l’élément.

8. À droite des règles CSS, vous verrez le nom source de ce style. Cela confirme l’emplacement de la source du style. Passez le curseur de la souris sur le nom de la source pour afficher le nom complet :
   • Si le style provient d’un fichier CSS, le nom de la feuille de style apparaîtra à côté de la déclaration CSS. Accédez au gestionnaire de conception, recherchez la feuille de style et apportez les modifications nécessaires.

• • Si le nom de la source commence par module, le style provient de la CSS d’un module. Passez le curseur de la souris sur le nom de la source pour afficher le nom complet du module.

• • Si le nom de la source est User agent stylesheet , le style fait partie du style par défaut du navigateur.
    • En général, vous le verrez pour le style de balise HTML (par exemple, <p>, <h1>, <span> etc.), lorsque le navigateur n’est pas en mesure de trouver les règles de style pour l’élément. 
    • La feuille de style de l’agent utilisateur peut être remplacée en ajoutant vos propres styles à cet élément.

• • Si le nom de la source est l’URL de la page, le style provient des balises de <style> la page. Par exemple, le style peut être défini dans le HTML de l’en-tête de page ou de modèle.

• • Si le nom de la source est l’URL de la page et que le style est # hs_cos_wrapper_module_number, le style est ajouté dans l’onglet Styles de l’éditeur de page. HubSpot ajoutera !important des balises à ces styles. Découvrez-en davantage sur les balises !important et leur influence sur le style.

• • Si le nom de la source est <style>, le style est automatiquement inclus dans l’élément. Cela s’explique souvent par le fait que le style dans l’éditeur d’une ressource HubSpot intégrable, telle qu’un CTA ou un widget de réunion.

• • Si element.style apparaît à côté de la déclaration dans l’inspecteur, la CSS a été définie en ligne. Le style en ligne est un style ajouté directement au code source HTML d’une page ou aux champs de style en ligne d’un modèle. Par exemple, le style en ligne dans le code source apparaîtrait comme <p style="background:purple;">Hello world</p>.

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

• Chrome
• Firefox
• Microsoft Edge
• Safari

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 :

• • Recherchez et publiez sur le forum de développement du CMS sur la Communauté afin d'obtenir des astuces, des conseils ou de résoudre des problèmes de code.
  • Consultez la documentation de référence de CMS pour bénéficier de tutoriels, de guides et d'une présentation du cadre CMS.
  • Contactez l'équipe produit de HubSpot et d'autres développeurs travaillant pour HubSpot sur la communauté Slack des développeurs de CMS.

• Si vous n'êtes pas en mesure de lire ou de modifier les codes HTML et CSS dans vos modèles :

• • Contactez un partenaire HubSpot certifié et expert en conception de sites web qui vous aidera à personnaliser vos modèles.
  • Utilisez un modèle de thème pour modifier des styles de page sans écrire de code.
  • Si vous utilisez un modèle acheté sur le marketplace des ressources, contactez le concepteur du modèle pour toute question relative à la conception de votre page.