Salta al contenuto
Nota bene: la traduzione in olandese di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Landing Pages

Capire l'origine dello stile di una pagina

Ultimo aggiornamento: giugno 15, 2022

Si applica a:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Legacy Marketing Hub Basic

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 è 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. I fogli di stile aggiunti a un modello tramite la funzione blocco require_css
  3. Fogli di stile predefiniti di HubSpot (ad esempio, layout.css).
  4. Fogli di stile allegati al modello

    design-manager-linked-stylesheet
  5. Fogli di stile allegati nella scheda delle impostazioni della pagina

    page-editor-attach-stylesheet
  6. Fogli di stile allegati nelle impostazioni per tutti i domini
  7. Fogli di stile allegati nelle impostazioni per un dominio specifico
  8. CSS aggiunti all'interno dei tag <style>. Ad esempio, l'HTML della testa delle impostazioni del sito web, delle impostazioni della pagina o del modello.

    page-editor-head-html
  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.

page-editor-styles-tab

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 selezionateIspeziona.
  • Nel riquadroElementi 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.

    inspect-live-page-cursor

  • 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 rimuovere e applicare lo stile. Questo aiuterà a restringere il campo delle regole di stile da modificare.

    inspect-live-page
  • A destra delle regole CSS si trova il nome di origine dello stile, che indica la provenienza dello stile. Passare il mouse sul nome dell'origine 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 proprio design manager, trovare il foglio di stile e apportare le modifiche necessarie.

      inspect-css-stylesheet-name
    • Se il nome sorgente inizia per modulo, è probabile che lo stile provenga dal CSS di un modulo. Passare il mouse sul nome sorgente per visualizzare il nome completo del modulo.

      inspect-css-module-name
    • Se il nome di origine è Foglio di stile dell'agente utente, il CSS fa parte dello stile predefinito del browser. Tu'Questo è il caso più frequente dello 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.

      inspect-css-user-agent
    • 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.

      inspect-css-page-url
    • 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.

      inspect-css-styles-tab
    • 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.

      page-styling-style-tag0
    • Seelement.styleappare accanto alla dichiarazione nell'ispettore, il CSS è stato impostato in linea. Lo stile in linea è uno stile aggiunto direttamente al codice sorgente HTML di una pagina o ai campi dello stile in linea di un modello. Ad esempio, lo stile in linea nel codice sorgente appare come <p style="background:purple;">Hello world</p>.

      inspect-css-element-style

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

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:
  • Se non vi sentite a vostro agio nel leggere o modificare l'HTML e il CSS nei vostri template:
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.