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. Qui di seguito vi spieghiamo come vengono applicati gli stili, come trovarli in una pagina reale e come ottenere assistenza per le modifiche al design.

Capire come si applica lo styling

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. Modulo CSS personalizzato
   1. Fogli di stile allegati a un modulo.
   2. CSS aggiunti 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 tramite il 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 dal vivo 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, fare clic con il pulsante destro del mouse sull'elemento che si desidera esaminare, quindi selezionare Ispeziona.
• Nel riquadro Elementi, a sinistra, viene 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, sono visualizzati tutti gli stili applicati a quell'elemento. È possibile selezionare e deselezionare le caselle di controllo accanto a ogni stile per rimuovere e applicare lo stile. Questo aiuterà a restringere il campo delle regole di stile da modificare.
  
  
  
  
• A destra delle regole CSS, si trova la voce nome della fonte per quello stile, che indica la provenienza dello stile. Passare il mouse sul simbolo 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. Si può quindi 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 sorgente è User agent stylesheet , il CSS fa parte dello stile predefinito del browser. Lo si vede 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 per le riunioni.
    
    
    
    
  • Se element.style appare accanto alla dichiarazione nell'inspector, il CSS è stato impostato inline. Lo stile inline è uno stile aggiunto direttamente al codice sorgente HTML di una pagina o ai campi dello stile inline di un modello. Ad esempio, lo stile inline nel codice sorgente appare come <p style="background:purple;">Hello world</p>.
    
    
    

Per maggiori documenti su come ispezionare una pagina, consultare la documentazione della guida del browser web:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Chiedete aiuto per le modifiche al design

La migliore risorsa per apportare modifiche ai modelli o ai fogli di stile di HubSpot è il progettista del modello originale. Tuttavia, esistono diverse risorse per ottenere ulteriore aiuto con lo styling 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:

• • Cercare e postare sul forum di sviluppo del CMS nella Community per ottenere suggerimenti, consigli o risolvere i problemi del codice.
  • Consultare la documentazione di riferimento del CMS per esercitazioni, guide e una panoramica del framework CMS.
  • Connettiti con il team di prodotto di HubSpot e con altri sviluppatori che lavorano in HubSpot sulla Community di HubSpot.

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

• • Rivolgetevi a un partner certificato HubSpot con esperienza nella progettazione di siti web che vi aiuti a personalizzare i vostri modelli.
  • Utilizzate un modello Starter 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, contattare il designer del modello per domande sul design della pagina.