Riferimento alle impostazioni dello Stile del modulo
In Questo Documento
Tempo di lettura: 4 minuti | Difficoltà: Intermedio
Panoramica
Questa è una guida completa di ogni impostazione di Stile Modulo disponibile in WP Simple Pay. Usala insieme alla guida principale dello Stile Modulo per istruzioni di configurazione dettagliate.
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)
Predefiniti Tema
| ID Tema | Nome | Primario | Secondario | Testo | Sfondo |
|---|---|---|---|---|---|
predefinito |
Predefinito | #0f8569 |
#0e7c62 |
#32325d |
#ffffff |
tramonto |
Tramonto | #e74c3c |
#c0392b |
#2c3e50 |
#ecf0f1 |
foresta |
Foresta | #27ae60 |
#219955 |
#2c3e50 |
#f9f9f9 |
oceano |
Oceano | #3498db |
#2980b9 |
#2c3e50 |
#ecf0f1 |
monocromatico |
Monocromatico | #333333 |
#555555 |
#333333 |
#ffffff |
soleggiato |
Sole | #f1c40f |
#f39c12 |
#34495e |
#ffffff |
corallo |
Corallo | #e67e22 |
#d35400 |
#2c3e50 |
#f9f9f9 |
minimale |
Minimale | #bdc3c7 |
#95a5a6 |
#2c3e50 |
#ffffff |
Quando selezioni un tema, il colore primario viene mappato allo sfondo del pulsante e al colore d'accento, il colore secondario viene mappato allo stato di hover del pulsante, il colore del testo viene mappato ai colori generali del testo e delle etichette, e il colore di sfondo viene mappato agli sfondi sia del modulo che dell'input.
Impostazioni colore
Tutte le impostazioni colore accettano:
- Colori esadecimali:
#0f8569,#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - Valore vuoto (eredita il predefinito o ripiega su un'impostazione padre)
| Impostazione | Descrizione | Comportamento di fallback |
|---|---|---|
| Sfondo modulo | Sfondo contenitore modulo | Trasparente (eredita lo sfondo della pagina) |
| Sfondo input | Sfondo campo di input | Trasparente |
| Colore testo generale | Tutti gli elementi di testo | Predefinito del browser |
| Colore testo etichetta | Solo etichette dei campi | Torna al Colore testo generale |
| Colore testo input | Testo all'interno degli input | Torna al Colore testo generale |
| Colore titolo | Titolo del modulo | Torna al Colore testo generale |
| Colore descrizione | Descrizione del modulo | Torna al Colore testo generale |
| Colore primario (accento) | Stati di focus, evidenziazioni | Predefinito del tema |
| Colore bordo | Bordi degli input e degli elementi | Predefinito del tema |
| Colore bordo errore | Bordi di errore di convalida | Rosso predefinito |
| Colore testo errore | Testo del messaggio di errore | Rosso predefinito |
| Sfondo pulsante | Sfondo pulsante di invio | Colore primario |
| Testo pulsante | Testo pulsante di invio | Bianco |
| Sfondo pulsante al passaggio del mouse | Stato al passaggio del mouse del pulsante di invio | Primario più scuro |
Impostazioni tipografiche
| Impostazione | Descrizione | Valori accettati | Predefinito |
|---|---|---|---|
| Dimensione carattere etichetta | Dimensione etichetta campo | Intero positivo (pixel) | 14 |
| Peso carattere etichetta | Peso etichetta campo | normale, grassetto, 100–900 |
— |
| Dimensione carattere input | Dimensione testo input | Intero positivo (pixel) | 16 |
| Dimensione carattere titolo | Dimensione titolo modulo | Intero positivo (pixel) | 24 |
| Peso carattere titolo | Peso titolo modulo | normale, grassetto, 100–900 |
— |
| Dimensione carattere descrizione | Dimensione descrizione modulo | Intero positivo (pixel) | 16 |
| Peso carattere descrizione | Peso descrizione modulo | normale, grassetto, 100–900 |
— |
Impostazioni di progettazione e layout
| Impostazione | Descrizione | Valori accettati | Predefinito |
|---|---|---|---|
| Raggio del bordo del modulo | Arrotondamento angoli contenitore modulo | Intero positivo (pixel) | 0 |
| Raggio del bordo di input e pulsanti | Arrotondamento angoli input/pulsante | Intero positivo (pixel) | 4 |
| Spaziatura del modulo | Spaziatura interna contenitore modulo | Intero positivo (pixel) | 0 |
Applicabilità
| Tipo di modulo | Stili applicati? |
|---|---|
| Incorporato sul sito | Sì |
| Overlay sul sito (Modal) | Sì |
| Stripe Checkout (Esterno) | No |
| Pagina di pagamento (Interno) | Sì |
Cosa fare dopo?
- Styling dei moduli di pagamento con Stile modulo – Guida all’impostazione passo passo
- Tipi di visualizzazione metodo di pagamento – Scegli tra layout a schede e fisarmonica
Hai ancora domande? Siamo qui per aiutarti!
Ultima modifica: