Stile del tuo modulo incorporato su pagine esterne
Ultimo aggiornamento: giugno 28, 2023
Disponibile con uno qualsiasi dei seguenti abbonamenti, tranne dove indicato:
|
Dai uno stile al tuo modulo incorporato HubSpot nelle tue pagine esterne in due modi: nell'editor dei moduli o con i CSS nel tuo foglio di stile esterno.
Nell'editor dei moduli
Tema
Se vuoi stilizzare i tuoi moduli senza scrivere alcun codice personalizzato, puoi applicare temi preimpostati al tuo modulo incorporato o alla pagina del modulo indipendente. I temi aggiungono più opzioni di personalizzazione ai tuoi moduli, oltre a qualsiasi impostazione globale dello stile del modulo.
- Nel tuo account HubSpot, vai a Marketing > Acquisizione lead > Form.
- Fare clic sul nome di un modulo.
- Nell'editor del modulo, clicca sulla scheda Stile e anteprima.
- Nel pannello di sinistra, sezione Theme, deseleziona la casella di controllo Keepold theme .
Nota: deselezionando la casella Mantieni il vecchio tema , verrà rimosso lo stile predefinito precedente HubSpot applicato a questo modulo. Qualsiasi CSS o JavaScript personalizzato che hai aggiunto al modulo non funzionerà più. Questa casella di controllo è disponibile solo per i moduli precedenti e non sarà disponibile in nessun nuovo modulo creato nel tuo account.
- Seleziona uno dei quattro temi.
Stile(solo Marketing HubStarter, Professional, Enterprise o Legacy Marketing Hub Basic)
Oltre ai temi, puoi dare uno stile ai moduli incorporati ad un livello più granulare.
- Nel tuo account HubSpot, vai a Marketing > Acquisizione lead > Form.
- Fare clic sulnome di un modulo.
- Nell'editor dei moduli, clicca sullascheda Style & Preview .
- Nel pannello di sinistra, clicca sulla sezione > Style per espanderla. Qui puoi dare uno stile alla larghezza dei campi del modulo, alla famiglia dei caratteri, alle dimensioni dei caratteri, ai colori dei caratteri e al pulsante del modulo.
Questi stili sono impostati su una base individuale del modulo e sovrascrivono le impostazioni globali dello stile del modulo.
Per favore nota: i temi e gli stili impostati nell'editor dei moduli si applicano solo ai moduli incorporati o alle pagine dei moduli indipendenti. I moduli sulle tue pagine HubSpot possono essere stilizzati solo con le opzioni di stile del modulo modulo nell'editor dei contenuti.
Con i CSS nel tuo foglio di stile esterno (Marketing Hub Professional, Enterprise, o Legacy Marketing Hub solo Basic )
- Nel tuo account HubSpot, vai a Marketing > Acquisizione lead > Form.
- Fai clic sul nome del modulo.
- Nell'editor del modulo, clicca sulla scheda Stile e anteprima.
- Clicca per attivare l'interruttore Imposta come modulo HTML grezzo . Il modulo verrà reso come un elemento HTML grezzo sulla tua pagina esterna invece che all'interno di un iframe, e qualsiasi stile predefinito HubSpot applicato al modulo verrà rimosso.
- In alto a destra, clicca su Share.
- Nella finestra di dialogo, fai clic su Copy per copiare il codice embed del modulo.
- Aggiungi il codice di incorporamento del modulo alla tua pagina esterna. Se hai già incorporato il tuo modulo, devi sostituire il codice incorporato esistente con questa nuova versione senza stile.
- Dopo aver incorporato il tuo modulo, puoi stilizzare il modulo nel tuo foglio di stile esterno con i CSS.
- In alternativa, è possibile modificare il codice incorporato del modulo per fare ulteriori personalizzazioni del modulo. Poiché i moduli HubSpot sono costruiti con JavaScript, non HTML,la personalizzazione del codice incorporato del modulo richiede l'aiuto di uno sviluppatore che sappia lavorare con JavaScript.