Capire l'origine dello stile di una pagina

In HubSpot è possibile aggiungere lo stile dei contenuti in diversi punti e questo viene applicato in un ordine specifico in base alla posizione in cui viene aggiunto. In questo articolo scoprirai come viene applicato lo stile, come trovare lo stile su una pagina live e come ottenere assistenza per le modifiche al design.

Comprendere come vengono applicati gli stili

Gli stili vengono applicati in un ordine specifico in base alla posizione in cui vengono aggiunti in HubSpot. Ad esempio, gli stili aggiunti in un foglio di stile globale vengono sovrascritti dagli stili aggiunti su una pagina specifica. 

Utilizza questo elenco per comprendere l'origine dello stile di una pagina, iniziando dagli stili applicati per primi e terminando con quelli applicati per ultimi.

1. CSS del modulo personalizzato
   • Fogli di stile allegati a un modulo nell'editor di layout.

• • CSS aggiunto alla sezionemodule.css di un modulo nell'editor dei moduli.

1. • CSS all'interno del markup HubL del modulo all'interno di un blocco require_css.
2. Fogli di stile aggiunti a un modello tramite il blocco blocco require_cssnell'editor di codice.
3. Fogli di stile predefiniti di HubSpot (ad es. layout.css) nel gestore di design.
4. Fogli di stile allegati al modello nell 'editor di layout.

5. Fogli di stile allegati nella scheda delle impostazioni della tua 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 aggiunti all'interno dei tag <style>. Ad esempio, l'HTML dell'intestazione delle impostazioni del tuo sito web, delle impostazioni della pagina o del modello.

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

Trova lo stile su una pagina di anteprima o live

Utilizza gli strumenti di sviluppo del tuo browser per trovare gli stili applicati al tuo sito web live o a una pagina di anteprima. Ogni browser varia leggermente nel modo in cui risolvere i problemi di stile. Nell'esempio seguente viene utilizzato Google Chrome.

1. Passa al tuo contenuto:
   • Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Nel tuo account HubSpot, passa a Contenuti > Landing Page.
2. Clicca sul nome della tua pagina.
3. Nell'editor dei contenuti, clicca su Anteprima in alto a destra.
4. Nella pagina di anteprima, clicca su Apri in una nuova scheda.
5. Nell'anteprima, fai clic con il pulsante destro del mouse sull 'elemento che desideri esaminare, quindi selezionaIspeziona.
6. Nel riquadroElementi, vedrai l'HTML della pagina. Clicca sugli elementi per visualizzarne gli stili.
7. Nel riquadro Stili, esamina le regole CSS applicate a quell'elemento. Seleziona e deseleziona le caselle di controllo accanto a ciascuno stile per rimuovere o aggiungere temporaneamente gli stili. Questo ti aiuterà a identificare quale regola sta influenzando l'elemento.

8. A destra delle regole CSS, vedrai il nome della fonte di quello stile. Questo conferma dove si trova la fonte dello stile. Passa con il mouse sul nome della fonte per visualizzare il nome completo:
   • Se lo stile proviene da un file CSS, il nome del foglio di stile apparirà accanto alla dichiarazione CSS. Passa al gestore di progettazione, trova il foglio di stile e apporta le modifiche necessarie.

• • Se il nome della fonte inizia con modulo, lo stile proviene dal CSS di un modulo. Passa con il mouse sul nome della fonte per visualizzare il nome completo del modulo.

• • Se il nome della fonte è Foglio di stile dell'agente utente , lo stile fa parte dello stile predefinito del browser.
    • In genere, questo accade per lo stile dei tag HTML (ad esempio <p>, <h1>, <span> ecc.), quando il browser non è in grado di trovare regole di stile per l'elemento. 
    • Il foglio di stile dell'agente utente può essere sovrascritto aggiungendo i propri stili a quell'elemento.

• • Se il nome dell'origine è l'URL della pagina, lo stile proviene dai tag <style> presenti nella pagina. Ad esempio, lo stile potrebbe essere impostato nell'HTML dell'intestazione della pagina o del modello.

• • Se il nome della fonte è l'URL della pagina e lo stile è destinato a #hs_cos_wrapper_module_number, lo stile viene aggiunto nella scheda Stili dell'editor della pagina. HubSpot aggiungerà !important a questi stili. Scopri di più sui tag !important e su come influenzano lo stile.

• • Se il nome della fonte è <style>, lo stile viene automaticamente incluso nell'elemento. Spesso ciò è dovuto allo stile nell'editor di una risorsa HubSpot incorporabile, come un CTA o un widget di riunione.

• • Se element.style appare 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 campidi stile in linea di un modello. Ad esempio, lo stile in linea nel codice sorgente apparirebbe come <p style="background:purple;">Hello world</p>.

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

• Chrome
• Firefox
• Microsoft Edge
• Safari

Ottieni assistenza per le modifiche al design

La risorsa migliore per apportare modifiche ai modelli o ai fogli di stile HubSpot è il progettista del modello originale. Tuttavia, esistono diverse risorse che offrono ulteriore assistenza per lo stile dei contenuti, a seconda del tuo livello di familiarità con la risoluzione dei problemi relativi a HTML e CSS.

• Se ti senti a tuo agio nell'utilizzare gli strumenti di ispezione per risolvere i problemi di progettazione del tuo modello:

• • Cerca e pubblica sul forum di sviluppo CMS nella community per ottenere suggerimenti, consigli o risolvere i problemi relativi al tuo codice.
  • Consulta la documentazione di riferimento CMS per tutorial, guide e una panoramica del framework CMS.
  • Entra in contatto con il team di prodotto di HubSpot e altri sviluppatori che lavorano in HubSpot sulla CMS Developer Community Slack.

• Se non hai dimestichezza con la lettura o la modifica di HTML e CSS nei tuoi modelli:

• • Entra in contatto con un partner HubSpot certificato con esperienza nella progettazione di siti web per aiutarti a personalizzare i tuoi modelli.
  • Utilizza un modello di tema per modificare gli stili delle pagine senza scrivere codice.
  • Se utilizzi un modello acquistato dall'Asset Marketplace,contatta il designer del modelloper domande sul design della tua pagina.