Comprendre la source du style d’une page

Il existe plusieurs endroits où des styles de contenu peuvent être ajoutés dans HubSpot, et ils sont appliqués dans un ordre spécifique en fonction de l’endroit où ils sont ajoutés. 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. Module personnalisé CSS
   1. Feuilles de style attachées à un module.
   2. CSS ajouté à la section CSS d’un module.
   3. CSS à l’intérieur de la 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 des 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, le HTML d’en-tête des paramètres de votre 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 les outils de développement dans votre navigateur pour examiner les styles appliqués à votre site web en ligne ou à une page de prévisualisation. La façon de résoudre les problèmes de style varie légèrement d’un navigateur à l’autre.

Pour trouver des styles dans Google Chrome :

• Sur votre page d’aperçu ou de publication, cliquez avec le bouton droit de la souris 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 soit cliquer sur les éléments pour afficher leur style, soit utiliser l’icône du curseur en haut à gauche du volet pour cliquer sur des éléments qui se trouvent sur la 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 vous aidera à affiner la règle de style à modifier.
  
  
  
  
• À droite des règles CSS, vous verrez le nom source de ce style, qui vous indique d’où vient le style. 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 de la CSS d’un module. Déplacez le curseur sur le nom de la source pour afficher le nom complet du module.
    
    
    
    
  • Si le nom source est Feuille de style de l’agent utilisateur, la CSS fait partie du style par défaut du navigateur. Vous verrez cela le plus souvent pour le style de balise HTML général comme <p>, <h1>, <h2>, <span> <div>, , etc. Ce style est appliqué lorsque le navigateur ne trouve pas de règles de style générales 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, la CSS provient des balises de <style> la page. Par exemple, le style peut être défini dans l’en-tête HTML de la page ou du modèle.
    
    
    
    
  • Si le nom de la source est l’URL de la page et que le style cible #hs_cos_wrapper_module_number, le style est probablement défini dans l’onglet Styles de l’éditeur de page. HubSpot ajoutera des balises !important à ces styles. En savoir plus sur les balises !important et leur influence sur le style.
     
    
    
  • Si le nom de la source est <style> il est probable que le style soit automatiquement inclus dans l'élément. Cela est souvent dû à un style défini dans l’éditeur d’une ressource HubSpot intégrable, tel qu’un CTA ou un widget de réunion.
  • Si element.style apparaît à côté de la déclaration dans l’inspecteur, la valeur CSS a été définie en ligne. Le style intraligne est un style ajouté directement au code source HTML d’une page ou aux champs de style intraligne d’un modèle. Par exemple, le style en ligne dans le code source s’affiche sous la forme <p style="background:purple;">Hello world</p>.
    
    

Pour plus d’informations sur l’inspection d’une page, consultez la documentation d’aide de 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 du CMS pour obtenir des tutoriels, des guides et une vue d’ensemble de l’infrastructure du CMS.
  • Entrez en contact avec l’équipe produit de HubSpot et d’autres développeurs travaillant dans HubSpot sur le canal Slack de la communauté des développeurs CMS.

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

• • Entrez en contact avec un partenaire HubSpot certifié qui dispose d'une expertise en matière de conception de sites Web pour vous aider à personnaliser vos modèles.
  • Utilisez un modèle de thème pour modifier les styles des pages sans écrire de code.
  • Si vous utilisez un modèle acheté sur le marketplace des ressources, contactez le concepteur du modèle si vous avez des questions sur la conception de votre page.