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é. 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
   
   
5. Feuilles de style jointes à l'onglet Paramètres de votre page
   
   
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.
   
   
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.

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.

  

• 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.
  
  
• À 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.
    
    
  • 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.
    
    
  • 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.
    
    
  • 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.
    
    
  • 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.
     
    
  • Si le nom de la source est<style>, le style est probablement automatiquement inclus avec l'élément. Souvent, cela est dû à un style défini dans l'éditeur d'une ressource HubSpot intégrable, telle qu'un CTA ou un widget de réunion (Meeting Widget).
    
    
  • 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>.
    
    

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 démarrage ou un modèle de thème pour modifier les styles de page sans modifier le code.
  • Si vous utilisez un modèle acheté à partir du marketplace des ressources, contactez le concepteur de modèles pour les questions concernant le design de votre page.