Come stilizzare i tuoi moduli di pagamento con lo Stile del modulo

Panoramica

WP Simple Pay include una funzionalità integrata di Stile Modulo che ti consente di personalizzare l'aspetto dei tuoi moduli di pagamento sul sito, senza bisogno di CSS personalizzato. Scegli tra 8 preset di temi predefiniti o affina i singoli colori, la tipografia e le impostazioni di layout per adattarli al tuo marchio.

Le impostazioni di Stile Modulo sono configurate per modulo, quindi puoi stilizzare ogni modulo di pagamento in modo indipendente.

Nota: Gli stili dei moduli si applicano solo ai moduli di pagamento sul sito (tipi di visualizzazione Incorporato e Overlay). Se il tuo modulo utilizza Stripe Checkout (esterno al sito), queste impostazioni non avranno effetto. Per utilizzare gli stili dei moduli, cambia il tipo di modulo in "Modulo di pagamento sul sito" nella scheda delle impostazioni Generali.

Prerequisiti

• WP Simple Pay Pro con una licenza Plus o superiore
• Un modulo di pagamento che utilizza il tipo di modulo sul sito (Incorporato o Overlay)

Accesso alla Scheda Stile Modulo

1. Naviga su WP Simple Pay > Moduli di Pagamento nella tua bacheca WordPress.
2. Fai clic su un modulo esistente per modificarlo, o creane uno nuovo.
3. Fai clic sulla scheda Stile Modulo nell'editor del modulo.

La scheda Stile Modulo contiene quattro sottoschede: Temi, Colori, Tipografia e Design e Layout.

Scelta di un Tema Predefinito

I temi predefiniti applicano istantaneamente un set completo e coordinato di stili al tuo modulo. Dopo aver applicato un tema, puoi personalizzare ulteriormente le singole impostazioni nelle altre schede.

1. Nella scheda Stile Modulo, seleziona la sottoscheda Temi (selezionata per impostazione predefinita).
2. Sfoglia i temi disponibili. Ogni scheda tema mostra un'anteprima della palette di colori e un'anteprima del mini modulo.
3. Fai clic su una scheda tema per selezionarla.
4. Fai clic su Pubblica o Aggiorna per salvare.

I seguenti temi sono disponibili:

Tema	Descrizione	Colore Primario
Predefinito	Lo stile predefinito di WP Simple Pay	Teal
Tramonto	Accenti rosso caldo con sfondo chiaro	Rosso
Foresta	Tema verde fresco con sfondo pulito	Verde
Oceano	Rilassante palette blu	Blu
Monocromatico	Tema semplice in bianco e nero	Nero
Sole	Accenti gialli luminosi e allegri	Giallo
Corallo	Calda palette arancione	Arancione
Minimale	Design pulito e minimalista	Grigio

Importante: La selezione di un tema aggiorna tutte le impostazioni di colore e stile ai valori del tema. Qualsiasi modifica personalizzata apportata alle singole impostazioni verrà sovrascritta.

Personalizzazione dei colori

Fai clic sulla sottoscheda Colori per ottimizzare le singole impostazioni di colore. I colori sono organizzati in sezioni.

Colori di sfondo

• Sfondo modulo — Colore di sfondo dell'intero contenitore del modulo.
• Sfondo input — Colore di sfondo dei campi di input, dei selettori e dei menu a discesa.

Colori del testo

• Colore testo generale — Colore predefinito per tutti gli elementi di testo nel modulo.
• Colore testo etichetta — Colore per le etichette dei campi. Sostituisce il colore del testo generale solo per le etichette.
• Colore testo input — Colore per il testo all'interno dei campi di input. Sostituisce il colore del testo generale solo per gli input.

Colori titolo e descrizione

• Colore titolo — Colore per il titolo del modulo. Torna al colore del testo generale se non impostato.
• Colore descrizione — Colore per la descrizione del modulo. Torna al colore del testo generale se non impostato.

Colori accento e bordo

• Colore primario (accento) — Utilizzato per gli stati di focus, le evidenziazioni e altri elementi di accento.
• Colore bordo — Colore del bordo per i campi di input e altri elementi con bordo.

Colori stato di errore

• Colore bordo errore — Colore del bordo applicato ai campi con errori di convalida.
• Colore testo errore — Colore del testo per i messaggi di errore.

Colori dei pulsanti

• Sfondo del pulsante — Colore di sfondo del pulsante di invio.
• Testo del pulsante — Colore del testo del pulsante di invio.
• Sfondo al passaggio del mouse sul pulsante — Colore di sfondo quando si passa il mouse sul pulsante di invio.

Tutti i campi colore supportano colori hex (es. #0f8569) e colori rgba con trasparenza (es. rgba(15, 133, 105, 0.8)). Fai clic sul campione di colore accanto a qualsiasi campo per aprire il selettore di colori.

Personalizzazione della tipografia

Fai clic sulla sotto-scheda Tipografia per regolare le dimensioni e il peso dei caratteri.

Tipografia delle etichette

• Dimensione carattere etichetta — Dimensione delle etichette dei campi in pixel. Predefinito: 14px.
• Peso carattere etichetta — Peso delle etichette dei campi. Opzioni: Normale, Grassetto o valori numerici (100–900).

Tipografia dell'input

• Dimensione carattere input — Dimensione del testo all'interno dei campi di input in pixel. Predefinito: 16px.

Tipografia titolo e descrizione

• Dimensione carattere titolo — Dimensione del titolo del modulo in pixel. Predefinito: 24px.
• Peso carattere titolo — Peso del titolo del modulo. Opzioni: Normale, Grassetto o valori numerici (100–900).
• Dimensione carattere descrizione — Dimensione della descrizione del modulo in pixel. Predefinito: 16px.
• Peso carattere descrizione — Peso della descrizione del modulo. Opzioni: Normale, Grassetto o valori numerici (100–900).

Personalizzazione design e layout

Fai clic sulla sotto-scheda Design e Layout per regolare le impostazioni di spaziatura e raggio dei bordi.

Raggio dei bordi

• Raggio bordo modulo — Controlla quanto sono arrotondati gli angoli del contenitore del modulo, in pixel. Imposta a 0 per angoli squadrati.
• Raggio bordo input e pulsante — Controlla quanto sono arrotondati gli angoli dei campi di input e dei pulsanti, in pixel.

Un'anteprima live accanto a ogni impostazione mostra l'effetto del valore corrente.

Spaziatura

• Padding modulo — Controlla la spaziatura interna (padding) del contenitore del modulo, in pixel.

Ripristino degli stili predefiniti

Per ripristinare tutte le impostazioni di stile ai loro valori predefiniti:

1. Nella scheda Stile modulo, scorri fino in fondo a qualsiasi sotto-scheda.
2. Fai clic sul pulsante Ripristina stili.
3. Conferma il ripristino quando richiesto.
4. Fai clic su Pubblica o Aggiorna per salvare il modulo.

Ciò reimposta tutte le impostazioni di colore, tipografia e layout. Non modifica il tema selezionato.

Domande frequenti

Perché non vedo la scheda Stile modulo?

La scheda Stile modulo richiede una licenza Plus o superiore. Se hai una licenza Personal, vedrai invece un invito all'aggiornamento.

Perché c'è un avviso sui moduli esterni al sito?

Gli stili dei moduli si applicano solo ai moduli di pagamento sul sito. Se il tuo modulo è impostato per utilizzare Stripe Checkout (esterno al sito), le impostazioni di Stile modulo non avranno effetto. Cambia il tipo di modulo in “Modulo di pagamento sul sito” nella scheda Generale dell'editor del modulo.

Posso usare stili diversi per ogni modulo?

Sì. Le impostazioni di Stile modulo vengono salvate per modulo, quindi ogni modulo di pagamento può avere il proprio stile unico.

Gli stili dei moduli funzionano con i moduli overlay (modali)?

Sì. Gli stili dei moduli si applicano sia ai moduli incorporati che ai moduli overlay/modali. Per i moduli overlay, il colore di sfondo del modulo controlla lo sfondo dell'area di contenuto modale.

Posso ancora usare CSS personalizzato insieme a Stile modulo?

Sì. Il CSS personalizzato verrà applicato sopra le impostazioni di Stile modulo.

Gli stili dei moduli influiscono sull'anteprima del blocco Gutenberg?

Sì. Quando inserisci un modulo di pagamento utilizzando il blocco WP Simple Pay nell'editor a blocchi, l'anteprima del blocco riflette le impostazioni di stile correnti del modulo.

Cosa succede se lascio vuoto un campo colore?

I campi vuoti ereditano impostazioni predefinite sensate. Ad esempio, i colori del testo dell'etichetta e dell'input tornano al colore del testo generale. I colori dei pulsanti tornano al colore primario del tema.

Cosa fare dopo?

• Riferimento impostazioni Stile modulo – Riferimento completo di ogni impostazione e del suo valore predefinito
• Tipi di visualizzazione metodo di pagamento – Scegli tra layout a schede e fisarmonica