Capire l'origine dello stile di una pagina

In HubSpot è possibile aggiungere lo stile dei contenuti in più punti, che vengono applicati in un ordine specifico in base al punto in cui sono stati aggiunti. Di seguito, scopriremo come si applica lo styling, come trovare lo styling in una pagina live e come ottenere assistenza per le modifiche al design.

Capire come vengono applicati gli stili

Lo stile CSS in HubSpot viene applicato in ordine in base alla posizione in cui è stato impostato in HubSpot, come elencato di seguito. Ad esempio, lo stile impostato in un foglio di stile globale viene sovrascritto dallo stile impostato in una pagina specifica.

1. CSS personalizzato del modulo
   1. Fogli di stile allegati a un modulo.
   2. CSS aggiunto alla sezione CSS di un modulo.
   3. CSS all'interno del markup HubL del modulo, all'interno di un blocco require_css.
2. Fogli di stile aggiunti a un template attraverso il blocco blocco require_css
3. Fogli di stile predefiniti di HubSpot (ad esempio, layout.css)
4. Fogli di stile allegati al template
   
   
   
   
5. Fogli di stile allegati nella scheda delle impostazioni della pagina
   
   
   
   
6. Fogli di stile allegati nelle impostazioni per tutti i domini
7. Fogli di stile allegati nelle impostazioni per un dominio specifico
8. CSS aggiunto all'interno dei tag <style>. Ad esempio, l'HTML della testa delle impostazioni del sito web, delle impostazioni della pagina o del modello.
   
   
   
   
9. Stili aggiunti tramite l'editor di pagina. HubSpot aggiungerà anche i tag !important a questi stili. Per saperne di più sui tag !important e su come influiscono sullo stile.

Trovare lo stile in un'anteprima o in una pagina live

È possibile utilizzare gli strumenti per sviluppatori del browser per esaminare gli stili applicati al sito web live o a una pagina di anteprima. Ogni browser varia leggermente per quanto riguarda la risoluzione dei problemi di stile.

Per trovare lo stile in Google Chrome:

• Nell'anteprima o nella pagina live, fate clic con il pulsante destro del mouse sull'elemento che desiderate esaminare, quindi selezionate Ispeziona.
• Nel riquadro Elementi a sinistra, verrà visualizzato l'HTML della pagina. È possibile fare clic sugli elementi per visualizzarne gli stili, oppure utilizzare l'icona del cursore in alto a sinistra del riquadro per fare clic sugli elementi della pagina.

  

• Nel riquadro Stili, a destra, si vedranno tutti gli stili applicati a quell'elemento. È possibile selezionare e deselezionare le caselle di controllo accanto a ogni stile per rimuoverlo e applicarlo. Questo aiuterà a restringere il campo delle regole di stile da modificare.
  
  
  
  
• A destra delle regole CSS è riportato il nome di origine dello stile, che indica la provenienza dello stile. Passare il mouse sul nome della fonte per visualizzare il nome completo:
  • Se lo stile proviene da un foglio di stile, il nome del foglio di stile apparirà accanto alla dichiarazione CSS nell'ispettore. È quindi possibile navigare nel design manager, trovare il foglio di stile e apportare le modifiche necessarie.
    
    
    
    
  • Se il nome sorgente inizia con module, è probabile che lo stile provenga dal CSS di un modulo. Passare il mouse sul nome della fonte per visualizzare il nome completo del modulo.
    
    
    
    
  • Se il nome di origine è foglio di stile dell'agente utente , il CSS fa parte dello stile predefinito del browser. Èpiù spesso per lo stile generale dei tag HTML come <p>, <h1>, <h2>, <span>, <div>, ecc. Questo stile viene applicato quando il browser non riesce a trovare regole di stile generali per l'elemento, ma può essere sovrascritto aggiungendo i propri stili all'elemento.
    
    
    
    
  • Se il nome sorgente è l'URL della pagina, il CSS proviene dai tag <style> della pagina. Ad esempio, lo stile potrebbe essere impostato nell'HTML della pagina o del modello.
    
    
    
    
  • Se il nome sorgente è l'URL della pagina e lo stile è indirizzato a #hs_cos_wrapper_module_number, è probabile che lo stile sia impostato nella scheda Stili dell'editor della pagina. HubSpot aggiungerà i tag !important a questi stili. Per saperne di più sui tag !important e su come influiscono sullo stile.
    
    
    
    
  • Se il nome di origine è <style>, è probabile che lo stile sia incluso automaticamente nell'elemento. Spesso ciò è dovuto allo stile impostato nell'editor di una risorsa HubSpot incorporabile, come una CTA o un widget di riunione.
    
    
    
    
  • Seelement.styleappare accanto alla dichiarazione nell'inspector, il CSS è stato impostato in linea. Lo stile in linea è uno stile aggiunto direttamente al codice sorgente HTML di una pagina o ai campi di stile in linea di un modello. Ad esempio, lo stile in linea nel codice sorgente appare come <p style="background:purple;">Hello world</p>.
    
    
    

Per ulteriori dettagli su come ispezionare una pagina, consultare la documentazione della guida del proprio browser web:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Chiedere aiuto per le modifiche al design

La migliore risorsa per apportare modifiche ai modelli o ai fogli di stile di HubSpot è il designer del modello originale. Tuttavia, esistono diverse risorse per ottenere ulteriore aiuto con lo stile dei contenuti, a seconda del vostro livello di confidenza con la risoluzione di problemi HTML e CSS.

• Se vi sentite a vostro agio nell'usare gli strumenti dell'ispettore per risolvere i problemi di progettazione del vostro modello:

• • Cercate e scrivete sul Forum di sviluppo del CMS nella Community per ottenere suggerimenti, consigli o per risolvere i problemi del vostro codice.
  • Consultare la documentazione di riferimento del CMS per esercitazioni, guide e una panoramica del framework CMS.
  • Connettersi con il team di prodotto di HubSpot e con altri sviluppatori che lavorano in HubSpot su Slack della CMS Developer Community.

• Se non vi sentite a vostro agio nel leggere o modificare l'HTML e il CSS nei vostri template:

• • Rivolgetevi a un partner certificato HubSpot con esperienza nella progettazione di siti web che vi aiuti a personalizzare i vostri template.
  • Utilizzate un modello iniziale o un modello di tema per modificare gli stili delle pagine senza scrivere alcun codice.
  • Se si utilizza un modello acquistato dal Marketplace delle risorse,contattate il designer del modelloper domande sul design della pagina.