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 la fonte dello stile di una pagina

Ultimo aggiornamento: agosto 3, 2021

Si applica a:

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

Ci sono più posti dove lo stile del contenuto può essere aggiunto in HubSpot, e viene applicato in un ordine specifico in base a dove viene aggiunto. Di seguito, scopri come viene applicato lo stile, come trovare lo stile su una pagina dal vivo e come ottenere aiuto per le modifiche al design.

Capire come viene applicato lo stile

Lo stile CSS in HubSpot viene applicato in ordine in base a dove è impostato in HubSpot, come elencato di seguito. Per esempio, lo stile impostato in un foglio di stile globale è sovrascritto dallo stile impostato su una pagina specifica.

  1. CSS del modulo personalizzato
    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 attraverso il pulsante blocco require_css
  3. Fogli di stile predefiniti di HubSpot (per esempio, layout.css)
  4. Fogli di stile allegati al modello

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

    page-editor-attach-stylesheet
  6. Fogli di stile allegati nelle impostazioni per tutti i domini
  7. Fogli di stile allegati nelle tue impostazioni per un dominio specifico
  8. CSS aggiunto all'interno dei tag <style>. Per esempio, l'head HTML delle impostazioni del tuo sito web, le impostazioni della pagina o il template.

    page-editor-head-html
  9. Stili aggiunti attraverso l'editor di pagina. HubSpot aggiungerà anche i tag !important a questi stili. Scopri di più sui tag !important e su come influenzano lo stile.

page-editor-styles-tab

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

Puoi usare gli strumenti di sviluppo nel tuo browser per esaminare gli stili applicati al tuo sito web live o a una pagina di anteprima. Ogni browser varia leggermente nel modo di risolvere i problemi di stile.

Per trovare lo stile in Google Chrome:

  • Nell'anteprima o nella pagina live, clicca con il tasto destro sull'elemento che vuoi esaminare, quindi seleziona Ispeziona.
  • Nelpannello Elementi a sinistra, vedrai l'HTML della pagina. Puoi cliccare sugli elementi per vedere i loro stili, oppure puoi usare l'icona del cursore in alto a sinistra del pannello per cliccare sugli elementi della pagina.

    inspect-live-page-cursor

  • Nel pannello degli stili sulla destra, vedrai tutti gli stili che sono applicati a quell'elemento. Puoi selezionare e deselezionare le caselle di controllo accanto ad ogni stile per rimuovere e applicare lo stile. Questo ti aiuterà a restringere quale regola di stile cambiare.

    inspect-live-page
  • A destra delle regole CSS, vedrai il nome sorgente per quello stile, che ti dice da dove viene lo stile. Passa il mouse sul nome della fonte per vedere il nome completo:
    • Quando lo stile proviene da un foglio di stile, il nome del foglio di stile apparirà accanto alla dichiarazione CSS nell'ispettore. Puoi quindi navigare nel tuo design manager, trovare il foglio di stile e fare le modifiche necessarie.

      inspect-css-stylesheet-name
    • Se il nome sorgente inizia con module, allora lo stile proviene probabilmente dal CSS di un modulo. Passa il mouse sul nome della fonte per vedere il nome completo del modulo.

      inspect-css-module-name
    • Se il nome sorgente è User agent stylesheet , il CSS fa parte dello stile predefinito del browser. Tu'Lo vedremo 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 a quell'elemento.

      inspect-css-user-agent
    • Se il nome sorgente è l'URL della pagina, il CSS proviene dall'interno dei tag <style> della pagina. Per esempio, lo stile potrebbe essere impostato nella pagina o nell'head HTML del template.

      inspect-css-page-url
    • Se il nome sorgente è l'URL della pagina e lo stile è mirato a #hs_cos_wrapper_module_number , lo stile è probabilmente impostato nella scheda Styles dell'editor della pagina. HubSpot aggiungerà i tag !important a questi stili. Per saperne di più sui tag !important e su come influenzano lo stile.

      inspect-css-styles-tab
    • Seelement.style appareaccanto 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 distile in linea di un template. Per esempio, lo stile inline nel codice sorgente apparirebbe come <p style="background:purple;">Hello world</p>.

      inspect-css-element-style

Per maggiori dettagli su come ispezionare una pagina, consulta la documentazione di aiuto del tuo browser web:

Chiedi aiuto per le modifiche al design

La migliore risorsa per apportare modifiche ai tuoi modelli o fogli di stile HubSpot è il progettista del modello originale. Tuttavia, ci sono una varietà di risorse per ottenere ulteriore aiuto con lo stile dei contenuti, a seconda del tuo livello di comfort con la risoluzione dei problemi HTML e CSS.

  • Se sei a tuo agio nell'usare gli strumenti dell'ispettore per risolvere i problemi di design del tuo template:
  • Se non sei a tuo agio nel leggere o modificare HTML e CSS nei tuoi modelli: