Con ActiveCampaign, puoi personalizzare i moduli in base ai colori del tuo marchio, aggiungere immagini, cambiare il tipo di carattere e altro ancora.
Guarda un video
Guarda questo video per scoprire come creare e personalizzare il modulo.
Opzioni di personalizzazione del modulo di Access
Le opzioni di personalizzazione di un modulo si trovano nella scheda "Stile" nel generatore di moduli.
Per accedere a questa scheda per qualsiasi modulo:
- Fai clic su "Sito Web" "Moduli" nel menu a sinistra.
- Modificare o creare un nuovo modulo.
- Verrà caricato il generatore di moduli. Tutte le opzioni di modifica e stile verranno visualizzate nel riquadro di destra. Fai clic sulla scheda "Stile" situata nel riquadro di destra.
Personalizzare un modulo in linea
Con il modulo in linea, è possibile scegliere un layout e personalizzare lo stile per il modulo e inviare il pulsante.
Generale
La casella "Stile barra" consente di personalizzare il modo in cui il modulo apparirà ai visitatori del sito Web. Di seguito è riportata una tabella che mostra tutte le opzioni di stile del modulo.
| Opzioni generali di personalizzazione | Descrizione |
|---|---|
| Layout | Fare clic su una delle opzioni per scegliere un layout orizzontale o verticale per il modulo. |
| Larghezza massima | Utilizzare questa opzione per regolare la larghezza del modulo. La larghezza è impostata come valore pixel. |
| Priorità bassa | Modificare il colore di sfondo del modulo o renderlo trasparente. Questo tipo di modulo non supporta le immagini di sfondo. |
| Bordi | Utilizzare questa opzione per aggiungere un bordo al modulo. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificare il colore del bordo e scegliere tra quattro tipi di bordo: Tinta unita, Punteggiata, Tratteggiata e Doppia. |
| Angoli | Utilizzare questa opzione per arrotondare o quadrare gli angoli del modulo. Il raggio d'angolo viene impostato come valore pixel. |
| Mostra il branding ActiveCampaign | Utilizza questa opzione per attivare o disattivare il branding di ActiveCampaign. |
Testo
La casella "Testo" ti consente di personalizzare l'aspetto del testo del modulo. Di seguito è riportata una tabella che mostra tutte le opzioni di personalizzazione del testo.
| Opzioni di personalizzazione del testo | Descrizione |
| Carattere | Potete scegliere tra circa 1.500 font per il vostro modulo, in modo che si adatti al vostro marchio. Il carattere selezionato qui si applica al blocco Header, al blocco Codice HTML, ai campi e al pulsante. |
| Header |
L'Header apparirà inizialmente nella parte superiore del modulo. Per questo blocco è possibile regolare quanto segue:
*La possibilità di mettere in grassetto il testo dipende dal tipo di carattere selezionato. |
| Paragrafo (codice HTML) |
Questo blocco appare inizialmente sotto l'Header e funge da testo "Paragrafo" del modulo. Per questo blocco è possibile regolare quanto segue:
*La possibilità di mettere in grassetto il testo dipende dal tipo di carattere selezionato. |
Pulsante
La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Di seguito è riportata una tabella che mostra tutte le opzioni di personalizzazione dei pulsanti.
| Opzioni di personalizzazione dei pulsanti | Descrizione |
|---|---|
| Priorità bassa | Modificare il colore di sfondo del pulsante "Invia". |
| Testo | Modificare il colore del testo del pulsante. |
| confine | Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificare il colore del bordo e scegliere tra quattro tipi di bordo: Tinta unita, Punteggiata, Tratteggiata e Doppia. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. |
| Spaziatura interna | La spaziatura interna è lo spazio intorno al pulsante. È possibile utilizzare questa opzione per aumentare o diminuire la spaziatura interna. Questo è impostato come valore pixel. |
Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).
Personalizzare un modulo pop-up modale
Con il modulo pop-up modale, è possibile scegliere un layout e personalizzare lo stile per il modulo, i campi di input e il pulsante invia.
Layout
Sono disponibili quattro opzioni tra cui scegliere per il modulo: nessuna immagine, immagine a sinistra, immagine nella parte superiore o immagine al centro.
Stile modale
La casella "Stile modale" ti consente di personalizzare il modo in cui il modulo apparirà ai visitatori del tuo sito web. Di seguito è riportata una tabella che mostra tutte le opzioni di personalizzazione modale:
| Opzioni di personalizzazione dello stile del modale | Descrizione |
|---|---|
| Priorità bassa | Fare clic sul selettore colori per modificare il colore del modulo o aggiungere un'immagine di sfondo. |
| Priorità bassa | Fare clic sul selettore colori per modificare il colore del modulo o aggiungere un'immagine di sfondo. |
| Carattere | Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. |
| Larghezza | Utilizzare questa opzione per regolare la larghezza del modulo. La larghezza è impostata come valore pixel. |
| Spaziatura interna | La spaziatura interna è lo spazio intorno al tuo modulo. È possibile utilizzare questa opzione per aumentare o diminuire la spaziatura interna. Questo è impostato come valore pixel. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli del modulo. Il raggio d'angolo viene impostato come valore pixel. |
| Ombra | Usare questa funzionalità per aggiungere un'ombreggiatura al modulo. In questo modo si contribuirà a distinguersi. È possibile scegliere tra le seguenti opzioni: Nessuno, Leggero, Medio e Pesante. |
Ingressi
Gli input si riferiscono ai campi che i visitatori del sito web utilizzeranno per inviarti le loro informazioni personali. Le opzioni di personalizzazione dell'input includono:
| Opzioni di personalizzazione dell'input | Descrizione |
|---|---|
| Priorità bassa | Fare clic sul selettore colori per modificare il colore dei campi di input. |
| Colore carattere | Fare clic sulla selezione colori per modificare il colore del testo del campo di input. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli dei campi di input. Il raggio d'angolo viene impostato come valore pixel. |
Pulsante
La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Le opzioni di personalizzazione dei pulsanti includono:
| Opzioni di personalizzazione dei pulsanti | Descrizione |
|---|---|
| Priorità bassa | Modificare il colore di sfondo del pulsante di invio. |
| Testo | Modificare il colore del testo del pulsante. |
| confine | Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. |
| Spaziatura interna | Utilizzare questa opzione per regolare la spaziatura interna del pulsante. La spaziatura interna è impostata come valore pixel. |
Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).
Personalizzare un modulo a box flottante
Con il modulo a box flottante, è possibile scegliere un layout e personalizzare lo stile per il modulo, i campi di input e il pulsante invia.
Layout
Sono disponibili quattro opzioni tra cui scegliere per il modulo: nessuna immagine, immagine a sinistra, immagine nella parte superiore o immagine al centro.
Stile scatola
La casella "Stile modulo" consente di personalizzare il modo in cui il modulo apparirà ai visitatori del sito Web. Le opzioni di personalizzazione dello stile del modulo includono:
| Opzioni di personalizzazione dello stile di casella | Descrizione |
|---|---|
| Priorità bassa | Fare clic sul selettore colori per modificare il colore del modulo o aggiungere un'immagine di sfondo. |
| Colore carattere | Modificare il colore del testo visualizzato nel modulo. |
| Carattere | Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. |
| Larghezza | Utilizzare questa opzione per regolare la larghezza del modulo. La larghezza è impostata come valore pixel. |
| Spaziatura interna | La spaziatura interna è lo spazio intorno al tuo modulo. È possibile utilizzare questa opzione per aumentare o diminuire la spaziatura interna. Questo è impostato come valore pixel. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli del modulo. Il raggio d'angolo viene impostato come valore pixel. |
| Ombra | Usare questa funzionalità per aggiungere un'ombreggiatura al modulo. In questo modo si contribuirà a distinguersi. È possibile scegliere tra le seguenti opzioni: Nessuno, Leggero, Medio e Pesante. |
Ingressi
Gli input si riferiscono ai campi che i visitatori del sito web utilizzeranno per inviarti le loro informazioni personali. Le opzioni di personalizzazione dell'input includono:
| Opzioni di personalizzazione dell'input | Descrizione |
|---|---|
| Priorità bassa | Fare clic sul selettore colori per modificare il colore dei campi di input. |
| Colore carattere | Fare clic sulla selezione colori per modificare il colore del testo del campo di input. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli dei campi di input. Il raggio d'angolo viene impostato come valore pixel. |
Pulsante
La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Le opzioni di personalizzazione dei pulsanti includono:
| Opzioni di personalizzazione dei pulsanti | Descrizione |
|---|---|
| Priorità bassa | Modificare il colore di sfondo del pulsante di invio. |
| Testo | Modificare il colore del testo del pulsante. |
| confine | Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. |
| Spaziatura interna | Utilizzare questa opzione per regolare la spaziatura interna del pulsante. La spaziatura interna è impostata come valore pixel. |
Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).
Personalizzare un modulo a barra flottante
Con il modulo a barra flottante, è possibile personalizzare lo stile del modulo e inviare il pulsante. Le opzioni di layout non sono disponibili con questo tipo di modulo.
Stile barra
La casella "Stile barra" consente di personalizzare il modo in cui il modulo apparirà ai visitatori del sito Web. Le opzioni di personalizzazione dello stile della barra includono:
| Opzioni di personalizzazione dello stile della barra | Descrizione |
|---|---|
| Priorità bassa | Modificare il colore di sfondo del modulo. Le immagini di sfondo non sono supportate da questo tipo di modulo. |
| Colore carattere | Modificare il colore del testo visualizzato nel modulo. |
| Carattere | Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. |
Pulsante
La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Le opzioni di personalizzazione dei pulsanti includono:
| Opzioni di personalizzazione dei pulsanti | Descrizione |
|---|---|
| Priorità bassa | Modificare il colore di sfondo del pulsante di invio. |
| Testo | Modificare il colore del testo del pulsante. |
| confine | Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. |
| Raggio d'angolo | Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. |
| Spaziatura interna | Utilizzare questa opzione per regolare la spaziatura interna del pulsante. La spaziatura interna è impostata come valore pixel. |
Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).
Modificare il testo del pulsante "Invia"
È possibile modificare il testo del pulsante "Invia" per qualsiasi modulo.
- Dalla pagina Moduli, fai clic sul pulsante "Modifica" per il modulo che desideri aggiornare.
- Fai clic sul pulsante "Invia" nel generatore di moduli.
- Il menu giusto mostrerà l'etichetta del pulsante e un campo. Digitare il testo che si desidera utilizzare per il pulsante.
Il nuovo testo del pulsante verrà salvato automaticamente.
Personalizzazione avanzata
Ogni tipo di modulo in ActiveCampaign ha un'opzione CSS personalizzata disponibile. Questo è per gli utenti avanzati che hanno familiarità con CSS e sono a proprio agio nell'usarlo. L'opzione CSS personalizzata si trova nella scheda "Stile" per ogni modulo e può essere utilizzata per aggiungere ulteriori modifiche a qualsiasi elemento del modulo. Ad esempio, è possibile utilizzare questa opzione per:
- Regolare la larghezza e l'altezza dei campi di input
- Regolare la larghezza e l'altezza del pulsante di invio
- Regolare le dimensioni del carattere
- Regolare il tipo di carattere per gli elementi singolari. Ad esempio, è possibile utilizzarlo per rendere il tipo di carattere del testo del pulsante diverso dal resto del modulo
Se vuoi saperne di più sull'uso di CSS, consulta questo tutorial CSS di w3schools.com.
Per usare l'opzione CSS personalizzata:
- Dal generatore di moduli, fai clic sulla scheda "Stile".
- Scorri verso il basso fino a visualizzare la casella "CSS personalizzato".
- Fare clic sul pulsante "Inspector", quindi fare clic sull'elemento del modulo che si desidera modificare.
- Una volta fatto clic sull'elemento che si desidera personalizzare, apparirà nella casella CSS personalizzato. Digitare il CSS in questa casella.
Il CSS aggiunto all'elemento modulo verrà salvato automaticamente.
Disattivare il branding ActiveCampaign
Se si ha un piano Plus, Professional o Enterprise, è possibile rimuovere il branding ActiveCampaign dal modulo. Gli utenti del piano Lite non sono in grado di disattivare il branding.
Disattivare il branding ActiveCampaign
- Dal generatore di moduli, fai clic sulla scheda "Stile".
- Scorri verso il basso fino alla fine della sezione "Generale".
- Fare clic sull'interruttore di branding CA per impostarlo sulla posizione "Off".
Questa impostazione verrà salvata automaticamente.