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 creare lo stile del sito.

Ultimo aggiornamento: giugno 28, 2022

Si applica a:

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

I CSS (Cascading Style Sheets) sono file codificati che selezionano gli elementi della pagina e ne controllano la presentazione. Considerate l'HTML del vostro modello personalizzato come le ossa del vostro sito web e il CSS come la pelle del vostro sito.

Questo articolo spiega come creare, pubblicare e allegare un file CSS in HubSpot. Qui potete apprendere 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, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Fare clic sull'icona dellacartella nell'angolo superiore sinistro per espandere il menu laterale. Quindi fare clic su File > Nuovo file.
New coded file
  • Nella finestra di dialogo, fare clic su Foglio di stile CSS. Immettere quindi un nome per il foglio di stile CSS e fare clic su Create.

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 levariabili e le macro di HubL per facilitare la manutenzione del CSS. Per vedere l'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.


design-manager-show-output-toggle

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 punti in cui 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 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 venga aggiornato 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 Actions > Copy public URL nel menu della barra laterale sinistra.

Edit CSS

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:

  1. public_common.css * - un foglio di stile utilizzato principalmente dall'applicazione di HubSpot, ma anche per alcune funzionalità del sito.
  2. HTML dell'intestazione nelle impostazioni sotto Sito web > Pagine - tag di collegamento aggiunti al <head> globale del sito.
  3. Layout.css ** -file CSS reattivo predefinito allegato a tutti i layout dei modelli trascinabili.
  4. Fogli di stile allegati nelle impostazioni in Sito web > Pagine - fogli di stile allegati all'intero sito.
  5. Fogli di stile allegati nelle impostazioni sotto Sito web > Blog - fogli di stile allegati al blog (sovrascrivono i fogli globali del sito).
  6. Fogli di stile collegati***- fogli di stile allegati nel layout del modello.
  7. Markup <head> aggiuntivo nel template - tag di collegamento aggiunti all'<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 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 Edit per apportarvi modifiche o su X per rimuoverlo.

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

HubSpot Help article screenshot

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 le pagine del sito web o le pagine di destinazione.
  • Passare il mouse sulla pagina e fare clic su Modifica.
  • Nell'editor della pagina, fare clic su Impostazioni nella parte superiore.
  • Scorrere verso il basso e fare clic su Opzioni avanzate.
  • In Fogli di stile della pagina, fare clic sul menu a discesa Allega un foglio di stile e selezionare il foglio che si desidera allegare. Fare clic sullaX accanto al foglio di stile che si desidera rimuovere.

  • Fare clic su Salva e pubblica nell'angolo superiore destro.

È inoltre possibile disabilitare i fogli di stile ereditati dalla pagina dal modello o dal dominio. Una volta disabilitati, questi fogli di stile non verranno applicati alla pagina:

  • Nella stessa scheda Settings nell'editor di pagina, selezionare Disabled dal menu a discesa accanto ai fogli di stile inclusi.
  • Fare clic su Salva e Pubblica nell'angolo superiore destro.

Allegare o rimuovere fogli di stile a livello di dominio( soloMarketing Hub Professional ed Enterprise)

Attenzione:i template dei temi devono includere l'annotazione enableDomainStylesheets: true per poter 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, clicca sull'icona delle impostazioni settings 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 ysi desidera aggiornare le impostazioni per il dominio.
  • 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 passa 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.

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

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.