Come personalizzare il divisore di sezione di WPForms usando CSS

Panoramica

Desideri personalizzare il campo modulo Divisore di sezione di WPForms? Utilizzando un po' di CSS puoi cambiare lo stile non solo del divisore stesso, ma anche del testo utilizzato con il divisore. In questo articolo, ti illustreremo i passaggi necessari per personalizzare lo stile del campo modulo Divisore di sezione.

Creazione del modulo

Per iniziare, creeremo un modulo, aggiungeremo i nostri campi e poi divideremo questi campi con il Divisore di sezione.

Se hai bisogno di assistenza nella creazione del tuo modulo, consulta questa documentazione.

Ai fini di questa documentazione, stiamo creando un modulo che acquisirà informazioni personali, anamnesi medica e informazioni sull'assicurazione primaria. Poiché il modulo sarà molto lungo, vogliamo dividerlo in sezioni che definiscano chiaramente cosa sia ciascuna sezione e per farlo, utilizzeremo i Divisori di sezione per suddividere il modulo.

Aggiunta del CSS

Ora è il momento di aggiungere il CSS che personalizzerà lo stile del Divisore di sezione.

Per ricevere aiuto nell'aggiunta di CSS al tuo sito, consulta questo tutorial.

form#wpforms-form-220 .wpforms-field-divider h3 {
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
}

form#wpforms-form-220 .wpforms-field-divider {
    padding: 20px;
    background-color: #e27730;
    border-radius: 3px;
}

Stiamo prendendo di mira l'ID del modulo 220. Dovrai aggiornare questo ID per farlo corrispondere al tuo ID modulo. Per assistenza nel trovare questo ID, consulta questo tutorial.

Ora, con il CSS aggiunto, il nostro Divisore di sezione ha un aspetto completamente diverso.

E questo è tutto ciò che ti serve per personalizzare il Divisore di sezione. Desideri anche personalizzare lo stile degli elementi Checkbox? Dai un'occhiata al nostro articolo su Come personalizzare i campi Casella di controllo e Radio per farli sembrare pulsanti.

FAQ

D: Cosa succede se volessi apportare questa modifica a tutti i miei moduli?

R: Per utilizzare questo CSS per tutti i WPForms, aggiungi semplicemente il tuo CSS al tuo sito e rimuovi l'ID del modulo prefissato.

.wpforms-field-divider h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
}

.wpforms-field-divider {
    padding: 20px !important;
    background-color: #e27730 !important;
    border-radius: 3px !important;
}