Questo articolo ti mostra come personalizzare i tuoi moduli ActiveCampaign. Imparerai a cambiare colori, font e layout per adattarli al tuo branding. Parla anche di opzioni avanzate come il CSS personalizzato e la rimozione del branding ActiveCampaign.
Prendi nota
Usare HTML e CSS con il tuo modulo è consigliato solo agli utenti avanzati: dovresti sentirti a tuo agio con questi linguaggi. Se non hai familiarità con HTML o CSS, ti consigliamo di collaborare con qualcuno del tuo team che conosce questi linguaggi, oppure puoi lavorare con uno dei nostri Certified Consultants.
Il nostro team di supporto non può aiutarti a creare o correggere il codice HTML o CSS che aggiungi al tuo modulo.
Guarda un video
Guarda questo video per imparare a creare e personalizzare il tuo modulo.
Accedi alle opzioni di personalizzazione del modulo
Le opzioni di personalizzazione di un modulo si trovano nella scheda "Stile" del generatore di moduli.
Per accedere a questa scheda per qualsiasi modulo:
- Fai clic su Website > Forms nel menu a sinistra.
- Fai clic sul pulsante "Modifica modulo" oppure crea un nuovo modulo.
- Il generatore di moduli verrà caricato. Tutte le opzioni di modifica e di stile appariranno nel pannello a destra. Fai clic sulla scheda "Stile" che si trova nel pannello di destra.
Scegli un layout
Puoi scegliere un layout per i moduli inline, modali e i moduli pop-up. Le opzioni di layout non sono disponibili per i moduli a barra.
Opzioni di layout del modulo inline
Per il tuo modulo inline puoi scegliere tra due opzioni: layout orizzontale oppure verticale per il modulo:
Opzioni di layout per i moduli modali e i moduli pop-up
Hai quattro opzioni tra cui scegliere per il tuo modulo modale o modulo pop-up: nessuna immagine, immagine a sinistra, immagine in alto oppure immagine al centro:
Personalizzare un modulo
Le opzioni di stile in "Layout" ti permettono di personalizzare come il modulo verrà visualizzato ai visitatori del tuo sito. Qui sotto trovi le tabelle con tutte le opzioni di personalizzazione:
Generale
| Opzioni generali di personalizzazione | Descrizione |
|---|---|
| Larghezza massima | Usa questa opzione per regolare la larghezza del tuo modulo. La larghezza è impostata come valore in pixel. |
| Spaziatura interna | La spaziatura interna è lo spazio intorno al tuo modulo. Puoi usare questa opzione per aumentare o ridurre la spaziatura interna. Questo è impostato come valore in pixel. |
| Sfondo del modulo | Fai clic sul selettore colore per cambiare il colore del tuo modulo o aggiungere un'immagine di sfondo. |
| Sfondo della pagina | Fai clic sul selettore colori per cambiare il colore del tuo modulo o aggiungere un'immagine di sfondo. |
| Colore dei bordi | Fai clic sul selettore colore per cambiare il colore dei bordi del modulo. |
| Traccia bordi |
Usa questa opzione per aggiungere un bordo al tuo pulsante. I bordi sono impostati come valore in pixel. Puoi aumentare o ridurre lo spessore del bordo, cambiarne il colore e scegliere tra quattro tipi di bordo diversi: pieno, puntinato, tratteggiato e doppio. Fai clic su personalizzato per scegliere una larghezza e uno stile diversi per ogni bordo del modulo. |
| Bordi angoli | Usa questa opzione per rendere gli angoli del tuo modulo arrotondati o squadrati. Il raggio degli angoli è impostato come valore in pixel. |
Input
I campi di input sono i campi che i visitatori del sito useranno per inviarti i loro dati personali. Le opzioni di personalizzazione dell’input includono:
| Opzioni di personalizzazione dell’input | Descrizione |
|---|---|
| Sfondo del campo | Fai clic sul selettore colori per cambiare il colore dei campi di input. |
| Bordo del campo | Fai clic sul selettore colori per cambiare il colore dei bordi del campo. |
| Angoli | Usa questa opzione per rendere gli angoli dei campi di input arrotondati o squadrati. Il raggio degli angoli viene impostato come valore in pixel. |
Campi
La casella "Campi" ti permette di personalizzare l'aspetto dei campi del tuo modulo. Le opzioni di personalizzazione dei campi includono:
| Opzioni di personalizzazione dei campi | Descrizione |
|---|---|
| Colore del font dell'header | Fai clic sul selettore colore per cambiare il colore del font dell’header. |
| Stile del testo dell’header | Seleziona uno stile e una dimensione del font dell’header e scegli se vuoi che il testo sia in grassetto, corsivo o sottolineato. |
| Colore del paragrafo | Fai clic sul selettore colori per cambiare il colore del font del paragrafo. |
| Stile del testo del paragrafo | Seleziona uno stile di paragrafo, la dimensione del font e se vuoi che il testo sia in grassetto, corsivo o sottolineato. |
Pulsante
Il riquadro "Button" ti permette di personalizzare l’aspetto del pulsante di invio del tuo modulo. Le opzioni di personalizzazione del pulsante includono:
| Opzioni di personalizzazione dei pulsanti | Descrizione |
|---|---|
| Sfondo layout | Modifica il colore di sfondo del pulsante di invio. |
| Testo layout | Cambia il colore del testo del pulsante. |
| Spaziatura interna del layout | Usa questa opzione per regolare la spaziatura interna del tuo pulsante. La spaziatura interna è impostata come valore in pixel. |
| Larghezza layout | Modifica la larghezza del pulsante di invio. |
| Colore dei bordi | Clicca sul selettore colore per cambiare il colore del bordo del pulsante. |
| Tratto dei bordi |
Usa questa opzione per aggiungere un bordo al tuo pulsante. I bordi sono impostati come valore in pixel. Puoi aumentare o ridurre lo spessore del bordo, cambiarne il colore e scegliere tra quattro tipi di bordo diversi: Solid, Dotted, Dashed e Double. Fai clic su personalizzato per scegliere una larghezza e uno stile diversi per ogni bordo del modulo. |
| Angoli dei bordi | Usa questa opzione per rendere gli angoli del tuo pulsante arrotondati o squadrati. Il raggio d’angolo è impostato come valore in pixel. |
Modifica il testo del pulsante "Invia"
Puoi modificare il testo del pulsante "Invia" per qualsiasi modulo.
- Dalla pagina Moduli, fai clic sul pulsante "Modifica design" per il modulo che vuoi aggiornare.
- Fai clic sul pulsante "Invia" nel generatore di moduli.
- Nel menu a destra vedrai l’etichetta del pulsante e un campo. Digita il testo che vuoi usare per il pulsante.
Il nuovo testo del pulsante verrà salvato automaticamente.
Personalizzazione dello stile avanzata
Ogni tipo di modulo in ActiveCampaign ha un’opzione CSS personalizzata disponibile. Questa sezione è pensata per utenti Avanzato che conoscono il CSS e si sentono a loro agio a usarlo.
Tieni presente che il CSS richiede un’implementazione avanzata, che può essere complessa per chi non ha familiarità con il codice. Il team di Assistenza Clienti non potrà risolvere problemi legati al codice CSS, quindi ti consigliamo di contattare uno sviluppatore per farti aiutare con l’implementazione.
L’opzione CSS personalizzato si trova nella scheda "Stile" di ogni modulo e può essere usata per aggiungere ulteriori modifiche a qualsiasi elemento del modulo. Per esempio, puoi usare questa opzione per:
- Regola larghezza e altezza dei campi di input
- Adatta la larghezza e l’altezza del pulsante di invio
- Regola la dimensione del font
- Modifica il tipo di carattere per i singoli elementi. Per esempio, puoi usarlo per rendere il font del testo del pulsante diverso dal resto del modulo
Per usare l’opzione CSS personalizzato:
- Dal generatore di moduli, in alto a destra, attiva l’interruttore "Code Editor".
- Un editor HTML apparirà in fondo al generatore di moduli. Digita il CSS in questa casella.
Il CSS che aggiungi al modulo verrà salvato automaticamente.
Disattiva il branding ActiveCampaign
Se hai un piano Plus, Professional o Enterprise, puoi rimuovere il branding ActiveCampaign dal tuo modulo. Gli utenti del piano Starter non possono disattivare il branding.
Per disattivare il branding ActiveCampaign:
- Dal generatore di moduli, fai clic sulla scheda "Stile".
- Scorri verso il basso fino alla fine della sezione "Generale".
- Clicca sull'interruttore del branding AC per impostarlo su "Off".
Questa impostazione verrà salvata automaticamente.
Scopri di più sul branding di ActiveCampaign nei moduli.
Opzioni di personalizzazione aggiuntive
Le opzioni disponibili in "Options" ti permettono di scegliere quando visualizzare sul tuo sito i moduli Modal, modulo pop-up e moduli flottanti, come mostrare i messaggi dopo l’invio del modulo, le azioni del modulo e le impostazioni del modulo. Questa sezione spiega come usare le opzioni di personalizzazione nella scheda "Opzioni".
Se hai bisogno di aggiornare le dimensioni di un modulo su un dispositivo mobile, puoi farlo con CSS e media query.
Tieni presente che il CSS richiede un livello di implementazione Avanzato, che può essere complesso per chi non ha familiarità con il codice. Il team di Assistenza Clienti non potrà risolvere problemi di codice legati al CSS, quindi ti consigliamo di rivolgerti a uno sviluppatore per farti aiutare con l’implementazione.
Altre opzioni di personalizzazione per i moduli Modal, modulo pop-up e modulo a barra
Questi tipi di modulo offrono opzioni di personalizzazione extra che determinano quando e come il modulo viene mostrato ai visitatori del sito. Queste impostazioni si trovano in "Opzioni" > "Effetto popup" nel menu di destra del generatore di moduli.
| Tipo di modulo | Opzioni |
| Modal |
|
| Modulo pop-up |
|
| Modulo a barra |
|
Risorse aggiuntive per la scheda "Opzioni":
- Scopri di più su "On Submit"
- Scopri di più sull’"azione del modulo"
- Scopri di più sulle "impostazioni del modulo"