Nota bene: la traduzione in italiano 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.

Creare, modificare e allegare file CSS per creare lo stile del sito.

Ultimo aggiornamento: maggio 23, 2024

Disponibile con uno qualsiasi dei seguenti abbonamenti, tranne dove indicato:

Tutti i prodotti e i piani

I file CSS (Cascading Style Sheets) sono file codificati che selezionano gli elementi della pagina e ne controllano la presentazione. I file CSS non possono essere allegati alle e-mail o ai modelli di e-mail.

Questo articolo spiega come creare, pubblicare e allegare un file CSS in HubSpot. Si apprende come apportare semplici modifiche al design di una determinata pagina. Se utilizzate un modello di tema, imparate a modificare le impostazioni del tema.

Creare un nuovo file CSS

Nel tuo account HubSpot, passa a Contenuti > Design Manager.
Fare clic sull'icona della cartella folder nell'angolo superiore sinistro per espandere il menu laterale. Quindi fare clic su File > Nuovo file.

Nella finestra di dialogo, fare clic su Foglio di stile CSS. Inserire un nome per il foglio di stile CSS e fare clic su Crea.

Modificare il file CSS

Una volta creato o aperto un file CSS esistente, è possibile modificarlo nell'editor di codice. Oltre ai CSS standard, l'editor di codice supporta le variabili e le macro di HubL per facilitare la manutenzione dei CSS. Per visualizzare un'anteprima del rendering di HubL, fare clic per attivare l' interruttoreMostra output nella parte superiore dell'editor. Sulla destra si aprirà un pannello con l'anteprima del rendering.

Per vedere un elenco di selettori CSS standard per i template di HubSpot, consultate Boilerplate CSS.

Prima di pubblicare, verificare la presenza di errori HubL nel codice. Ci sono tre posti dove trovare errori o avvertimenti di HubL in un modulo personalizzato o in un file codificato:

Nella console degli errori in fondo all'editor di codice.
Nel riquadro degli errori sul lato sinistro dell'editor di codice.
Nella barra di scorrimento sul lato destro dell'editor.

Gli errori che impediscono la pubblicazione sono in rosso, mentre gli avvertimenti generali sono in giallo. Nella parte inferiore dell'editor di codice, fare clic su Mostra dettagli per visualizzare ulteriori informazioni sugli errori nella console degli errori e su Nascondi dettagli per chiudere la console degli errori.

Nella console degli errori, ci saranno collegamenti a tutti i punti in cui sono presenti errori o avvisi di HubL nel codice o nel modulo personalizzato. Passare il mouse sugli indicatori di errore rossi sul lato sinistro dell'editor di codice per visualizzare l'errore o l'avvertenza nel codice. Facendo clic sull'errore, il cursore si sposta su tutti gli errori o le avvertenze di quella riga. Facendo clic su un'annotazione della barra di scorrimento si accede a quella parte del file.

È anche possibile fare clic su un numero di riga all'interno dell'editor di codice e far sì che l'URL del file si aggiorni di conseguenza. In questo modo è possibile condividere un link al codice con altri utenti e indirizzarli esattamente al punto in cui si sta lavorando all'interno del file.

Dopo aver modificato il file, fare clic su Pubblica modifiche in alto a destra. Se si desidera richiamare questo foglio di stile in un altro modello codificato, copiare l'URL del foglio facendo clic su Azioni > Copia URL pubblico nel menu della barra laterale sinistra.

Allegare al modello

In HubSpot è possibile allegare i fogli di stile ai contenuti in diversi modi. Di seguito è riportato l'ordine in cui i fogli di stile allegati sono collegati al sito:

public_common.css*: foglio di stile utilizzato principalmente dall'applicazione di HubSpot, ma anche per alcune funzionalità del sito.
HTML dell'intestazione nelle impostazioni in Sito web > Pagine: tag di collegamento aggiunti all'<head> globale del sito.
Layout.css **: file CSS reattivo predefinito allegato a tutti i layout dei modelli trascinabili.
Fogli di stile allegati nelle impostazioni in Sito web > Pagine: fogli di stile allegati all'intero sito.
Fogli di stile allegati nelle impostazioni in Sito web > Blog: fogli di stile allegati al blog (sovrascrivono i fogli globali del sito).
Fogli di stile collegati***: fogli di stile allegati nel layout del modello.
Markup <head> aggiuntivo nel template: tag di collegamento aggiunti all'<head> di un particolare layout del template.
Fogli di stile specifici della pagina: fogli di stile allegati nelle impostazioni di una pagina.
HTML della testa della pagina: tag di collegamento aggiunti all'<head> di una particolare pagina nelle impostazioni della pagina stessa.

* Richiesto

** Richiesto per i layout drag and drop

*** Metodo consigliato per l'allegato del foglio di stile per i layout dei modelli

Per allegare i fogli di stile a un modello, aprire il modello nel design manager. Nel menu della barra laterale destra, sotto Opzioni testa e corpo, selezionare un file dal menu a discesa Aggiungi accanto a Fogli di stile collegati.

È possibile modificare o rimuovere un foglio di stile già allegato passandoci sopra e facendo clic su Modifica per apportarvi modifiche o sulla X per rimuoverlo.

Dopo aver aggiunto un foglio di stile, fare clic su Pubblica modifiche nell'angolo superiore destro per applicare le modifiche alle pagine live che utilizzano il modello.

Allegare o rimuovere fogli di stile in una pagina specifica( soloMarketing Hub Professional ed Enterprise )

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

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

Navigare verso il proprio contenuto:
- Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
- Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
Fare clic sul nome della pagina.
Nell'editor dei contenuti, fare clic sul menu Impostazioni e selezionare Avanzate.
Nella sezione Fogli di stile della pagina della finestra di dialogo, 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 su X accanto alfoglio di stile.
Per disattivare i fogli di stile ereditati dal modello o dal dominio, fare clic sul menu a discesa accanto al foglio di stile e selezionare Disattivato.

remove-or-turn-off-stylesheets-1

Allegare o rimuovere i fogli di stile del dominio( soloMarketing Hub Professional ed Enterprise )

Nota bene: imodelli di tema devono includere l'annotazione enableDomainStylesheets: true perpoter usare i fogli di stile a livello di dominio. Per saperne di più sulle annotazioni dei template.

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

Nel tuo account HubSpot, fai clic sulle settings icona delle impostazioni nella barra di navigazione principale.
Nel menu della barra laterale, fare clic su Sito web > Pagine.
Fare clic sul menu a discesa per selezionare il dominio per il quale si desidera aggiornare le impostazioni.
Nella schedaTemplate, scorrere fino a CSS e fogli di stile. Per aggiungere un foglio di stile, fare clic su + Aggiungi foglio di stile. Fare clic sulla X accanto a un foglio di stile allegato per rimuoverlo.
Fare clic su Salva.

Nota bene: quando si effettua il downgrade agli strumenti Starter o gratuiti di HubSpot, i fogli di stile allegati a livello di dominio rimangono attivi finché non vengono rimossi. Una volta rimossi tutti i fogli di stile, non è più possibile allegare fogli di stile a livello di dominio. Per saperne di più sul downgrade di un abbonamento.

L'articolo è stato utile? Sì No

Questo modulo viene utilizzato solo per il feedback della documentazione. Scopri come ottenere assistenza con HubSpot.