Crea, modifica e allega file CSS

I fogli di stile a cascata (CSS) controllano la presentazione visiva delle pagine del tuo sito selezionando e applicando stili agli elementi delle pagine. Utilizza il gestore del design per creare nuovi file CSS, modificare quelli esistenti e associarli a modelli, pagine specifiche o interi domini.

Per apportare semplici modifiche al design di una pagina specifica, scopri di più su come modificare il contenuto delle pagine nell’editor di contenuti. Se stai utilizzando un modello di tema, scopri di più su come modificare le impostazioni del tema.

Crea un nuovo file CSS

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
2. Nel Finder, fare clic su File > Nuovo filein alto a sinistra.
3. Nella finestra di dialogo, fare clic sul menu a discesa e selezionare CSS + HubL. 
4. Fare clic su Avanti.
5. Inserisci un nome per il tuo file nel campo Nome file.
6. Per modificare la posizione del file, fai clic su Modifica. Nella finestra a comparsa, seleziona una nuova posizione per il file. 
7. Al termine, fai clic su Crea.

Modifica un file CSS

Dopo aver creato o aperto un file CSS esistente, apporta le modifiche nell’editor di codice. Oltre al CSS standard, l’editor di codice supporta le variabili e le macro HubL per semplificare la gestione del CSS.

Per visualizzare un elenco dei selettori CSS standard per i modelli HubSpot, consulta Boilerplate CSS.

1. { local.navDesignManager }}
2. Nel Finder, fai clic su File > Nuovo file oppure apri un file CSS esistente.
3. Nell'editor di codice, inserisci o aggiorna il codice CSS per apportare le modifiche. 

Per visualizzare in anteprima come verrà visualizzato il tuo HubL, fai clic sull’interruttore Mostra output nella parte superiore dell’editor. Si aprirà un pannello sulla destra con l’anteprima visualizzata.

Verifica la presenza di errori

Prima di pubblicare, controlla che il codice non contenga errori HubL. Gli errori vengono visualizzati nella console in basso, nel margine degli errori a sinistra e nella barra di scorrimento a destra dell’editor di codice.

Gli errori che impediscono la pubblicazione saranno in rosso, mentre gli avvisi generali saranno in giallo. Nella parte inferiore dell’editor di codice, clicca su “Mostra dettagli” per visualizzare ulteriori informazioni sugli errori nella console degli errori e su “Nascondi dettagli” per comprimere la console degli errori.

Pubblicare un file CSS

Dopo aver modificato il file CSS, fai clic su Pubblica modifiche in alto a destra. Per richiamare questo foglio di stile in un altro modello codificato, fai clic sul menu a discesa Azioni nel Finder e seleziona Copia URL pubblico. 

Allega fogli di stile alle risorse

Allega i fogli di stile ai tuoi modelli, alle singole pagine o a un intero dominio. I fogli di stile vengono applicati in un ordine specifico in base a dove sono allegati. L’elenco riportato di seguito riflette l’ordine in cui vengono applicati sul tuo sito:

1. public_common.css (obbligatorio): un foglio di stile utilizzato principalmente dall’app di HubSpot, ma anche per alcune funzionalità del sito.
2. HTML dell’intestazione: tag di collegamento aggiunti al <head> globale del tuo sito in Contenuto > Impostazioni pagina.
3. Layout.css (obbligatorio per i layout drag-and-drop): file CSS responsive predefinito associato a tutti i layout dei modelli drag-and-drop.
4. Fogli di stile allegati (Pagine): fogli di stile allegati all’intero sito in Contenuto > Impostazioni pagina.
5. Fogli di stile allegati (Blog): fogli di stile allegati al tuo blog (sovrascrivono i fogli globali del sito) in Contenuto > Impostazioni blog.
6. Fogli di stile collegati(consigliati per i layout dei modelli): fogli di stile collegati nel layout del modello.
7. Markup <head> aggiuntivo nel modello: tag di collegamento aggiunti al <head> di un particolare layout del modello.
8. Fogli di stile specifici per pagina:fogli di stile allegati nelle impostazioni di una pagina.
9. HTML dell’intestazione della pagina:tag di collegamento aggiunti al <head> di una pagina specifica nelle impostazioni della pagina.

Aggiungere fogli di stile ai modelli

I fogli di stile possono essere associati ai modelli "trascina e rilascia " nell’ispettore all’interno del Gestore del design. Per i modelli codificati, i fogli di stile vengono aggiunti direttamente nell’editor di codice.

Modelli drag-and-drop

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
2. Nel Finder, fai clic sul nome del file del modello che desideri trascinare.
3. Nell’inspector, clicca sul menu a tendina Aggiungi nella sezione Fogli di stile collegati e seleziona il tuo foglio di stile. Per rimuovere un foglio di stile, clicca sulla X.
4. Al termine, clicca su Pubblica modifiche in alto a destra per applicare le modifiche alle pagine liveche utilizzano il modello.

Modelli codificati

Per i modelli codificati, i fogli di stile vengono allegati direttamente nell’editor di codice utilizzando i tag <link> o il tag HubL nel tag <head> del file. Scopri di più sui modelli codificati nella documentazione per sviluppatori.

Allegare fogli di stile a una pagina specifica

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

Per allegare un foglio di stile specifico per una pagina dalla sezione delle impostazioni dell’editor di contenuti:

1. Accedi ai tuoi contenuti:

   • Pagine del sito web: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Pagine del sito web. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Pagine del sito web.
   • Pagine di destinazione: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Landing page. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Landing page.
2. Fai clic sul nome della tua pagina.
3. Nell'editor di contenuti, fare clic sulmenu Impostazioni e selezionare Avanzate. 
4. Nella finestra di dialogo, nella sezione Fogli di stile, fare clic sul menu a discesa Allega un foglio di stile e selezionare un foglio di stile. Per rimuovere un foglio di stile, fare clic sulla X accanto al foglio di stile.
5. Per disattivare i fogli di stile ereditati dal modello o dal dominio, fare clic sul menu a discesa accanto al foglio di stile e selezionareDisabilitato.

Aggiungere fogli di stile di dominio

Nota:i modellidi temadevono includere l’annotazione enableDomainStylesheets: true per poter utilizzare fogli di stile a livello di dominio. Scopri di più sulle annotazioni dei modelli.

Per associare un foglio di stile a un intero dominio:

1. Nel tuo account HubSpot, fai clic sulle icona delle impostazioni nella barra di navigazione principale.
2. Nel menu laterale, fare clic su Contenuto > Pagine.
3. Fai clic sul menu a discesa per selezionare il dominio di cui desideri aggiornare le impostazioni.
4. Nella scheda Modelli, nella sezione CSS e fogli di stile, fare clic su + Aggiungi foglio di stile. Per rimuovere un foglio di stile, fare clic sulla X accanto al foglio di stile associato.
5. Fai clic su Salva.

Nota bene: quando si passa a un piano Starter o agli strumenti gratuiti di HubSpot, i fogli di stile a livello di dominio allegati rimarranno attivi finché non li rimuovi. Una volta rimossi tutti i fogli di stile, non potrai più allegare fogli di stile a livello di dominio. Scopri di più sul downgrade di un abbonamento.