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.
Design Manager

Creare, modificare e allegare file CSS per dare stile al tuo sito

Ultimo aggiornamento: marzo 22, 2021

Si applica a:

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

I CSS (Cascading Style Sheets) sono file codificati che selezionano gli elementi della tua pagina e controllano la loro presentazione. Pensa all'HTML del tuo template personalizzato come alle ossa del tuo sito web e ai CSS come alla pelle del tuo sito.

Questo articolo spiega come creare, pubblicare e allegare un file CSS in HubSpot. Puoi imparare come fare semplici modifiche al design di una particolare pagina qui. Se stai usando un modello di tema, impara come modificare le impostazioni del tema.

Creare un nuovo file CSS

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Fai clic sull'icona della cartella cartella nell'angolo in alto a sinistra per espandere il menu della barra laterale. Poi clicca su File > Nuovo file.
New coded file
  • Nella finestra di dialogo, clicca su Foglio di stile CSS. Poi inserisci un nome per il tuo foglio di stile CSS e clicca su Create.

Modifica il file CSS

Una volta creato o aperto un file CSS esistente, fai le tue modifiche nell'editor di codice. Oltre al CSS standard, l'editor di codice supporta HubL variabili e macro per rendere la manutenzione del tuo CSS più facile. Per vedere in anteprima come il tuo HubL sarà reso, clicca per attivarel ' interruttoreShow outputin cima all'editor. Si aprirà un pannello sulla destra con l'anteprima del rendering.


design-manager-show-output-toggle

Per vedere una lista di selettori CSS standard per i template HubSpot, controlla Boilerplate CSS.

Prima di pubblicare, controlla il tuo codice per gli errori HubL. Ci sono tre posti per trovare errori o avvertimenti HubL in un modulo personalizzato o in un file codificato:

  • Nella console degli errori in fondo all'editor di codice.
  • Nella grondaia degli errori lungo il lato sinistro dell'editor di codice.
  • Nella barra di scorrimento sul lato destro dell'editor.

Gli errori che ti impediscono di pubblicare saranno in rosso, mentre gli avvisi generali saranno in giallo. In fondo all'editor di codice, clicca su Show details per vedere più informazioni sugli errori nella console degli errori e Hide details per far collassare la console degli errori.

Nella console degli errori, ci saranno dei link ovunque ci siano errori o avvertimenti HubL nel tuo codice o modulo personalizzato. Passa sopra gli indicatori di errore rossi sul lato sinistro dell'editor di codice per vedere l'errore o l'avvertimento nel tuo codice. Cliccando sull'errore il tuo cursore passerà a tutti gli errori o avvertimenti su quella linea. Cliccando su un'annotazione della barra di scorrimento ti porterà a quella parte del file.

Puoi anche cliccare su un numero di linea all'interno dell'editor di codice e fare in modo che l'URL del file si aggiorni di conseguenza. Questo ti permette di condividere un link al tuo codice con gli altri e indirizzarli esattamente dove stai lavorando nel file.

Dopo aver modificato il file, fai clic su Publish changes in alto a destra. Se vuoi chiamare questo foglio di stile in un altro modello codificato, copia l'URL del foglio cliccando Actions > Copy public URL nel menu della barra laterale sinistra.

Edit CSS

Allegare al modello

In HubSpot, puoi allegare i fogli di stile al tuo contenuto in alcuni modi diversi. Di seguito è riportato l'ordine in cui i fogli di stile allegati sono collegati al tuo sito:

  1. public_common.css * - un foglio di stile usato principalmente dall'applicazione di HubSpot, ma anche per alcune caratteristiche del sito.
  2. Header HTML nelle impostazioni sotto Website > Pages - tag di collegamento aggiunto al <head> globale del sito.
  3. Layout.css ** -file CSS responsive di default allegato a tutti i layout dei template drag-and-drop.
  4. Fogli di stile allegati nelle impostazioni sotto Website > Pages - fogli di stile allegati all'intero sito.
  5. Fogli di stile allegati nelle impostazioni sotto Website > Blog - fogli di stile allegati al tuo blog (sovrascrive i fogli globali del sito).
  6. Fogli di stile collegati***- fogli di stile allegati nel layout del template.
  7. Markup <head> aggiuntivo nel template - tag di collegamento aggiunti al <head> di un particolare layout del template.
  8. Fogli di stile specifici della pagina - fogli di stile allegati nelle impostazioni di una pagina.
  9. HTML di testa della pagina - tag di collegamento aggiunti al <head> di una particolare pagina nelle impostazioni della pagina stessa.

Richiesto

Richiesto per i layout di trascinamento

*** Metodo raccomandato per l'allegato del foglio di stile per i layout dei template

Per collegare i fogli di stile a un modello, apri il modello nel tuo gestore di design. Nel menu della barra laterale destra sotto Head and Body Options, seleziona un file dal menu a discesa Add accanto a Linked stylesheets.

Puoi modificare o rimuovere un foglio di stile che è già allegato passando il mouse su di esso e cliccando su Edit per apportarvi delle modifiche o su X per rimuoverlo.

Dopo aver aggiunto un foglio di stile, clicca su Publish changes nell'angolo in alto a destra per applicare le tue modifiche alle pagine live che utilizzano il modello.

HubSpot Help article screenshot

Allegare o rimuovere i fogli di stile in una pagina specifica

Nota: questa opzione non è disponibile per i modelli di tema. Scopri come modificare le impostazioni del tuo tema.

Per aggiungere o rimuovere un foglio di stile specifico della pagina dalla sezione delle impostazioni dell'editor di pagina:

  • Naviga verso le pagine del sito web o le pagine di destinazione.
  • Passa sopra la tua pagina e clicca su Modifica.
  • Nell'editor di pagina, clicca su Impostazioni in alto.
  • Scorri verso il basso e clicca su Opzioni avanzate.
  • Sotto Page Stylesheets, clicca su Attach a stylesheet menu a discesa e seleziona il foglio che vuoi allegare. Fai clic su X accanto al foglio di stile che vuoi rimuovere.

  • Clicca su Salva e pubblica nell'angolo in alto a destra.

Puoi anche disabilitare i fogli di stile che sono ereditati dalla pagina dal modello o dal dominio. Quando sono disabilitati, questi fogli di stile non saranno applicati alla tua pagina:

  • Sotto la stessa scheda Settings nell'editor di pagina, seleziona Disabled dal menu a discesa accanto ai tuoi fogli di stile inclusi.
  • Clicca su Save e Publish nell'angolo in alto a destra.

Allegare o rimuovere fogli di stile a livello di dominio

Nota: questa funzione è disponibile solo per gli account Marketing Hub Enterprise.

Per aggiungere o rimuovere un foglio di stile da tutti i contenuti di un dominio:

  • Nel tuo account HubSpot, clicca sull'icona delle impostazioni settings nella barra di navigazione principale.
  • Nel menu della barra laterale, clicca su Website > Pages.
  • Fare clic sul menu a discesa per selezionare il dominio yvuoi aggiornare le impostazioni.
  • Nella schedaTemplates , scorri fino a CSS & Stylesheets. Per aggiungere un foglio di stile, fai clic su + Add style sheet. Fai clic su X accanto a un foglio di stile allegato per rimuoverlo.
  • Fare clic su Save.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.