Volete far risaltare il vostro modulo sul vostro sito web aggiungendo un bordo personalizzato? Con un semplice snippet di codice, potete aggiungere un elegante bordo intorno al vostro modulo per migliorarne l'aspetto visivo e renderlo più evidente sulla vostra pagina.
Questa guida vi mostrerà come aggiungere e personalizzare un bordo intorno ai vostri WPForm.
Impostazione del modulo
Per iniziare, è necessario identificare l'ID del modulo. Questo è essenziale, poiché il codice si rivolgerà a un modulo specifico utilizzando questo ID. Se avete bisogno di aiuto per trovare l'ID del vostro modulo, consultate la nostra guida per trovare gli ID dei moduli e dei campi.
Aggiunta del codice del confine
Successivamente, è necessario aggiungere lo snippet di codice che creerà il bordo intorno al modulo. Se avete bisogno di aiuto per aggiungere snippet di codice al vostro sito, consultate questo tutorial sull'aggiunta di CSS personalizzati.
Il codice qui sopra aggiunge un bordo al modulo con alcuni elementi di stile aggiuntivi per migliorare l'aspetto visivo. Ecco cosa fa ogni riga:
- Alla riga 2, sostituire 1234 con l'ID effettivo del modulo.
- Alla riga 3, è possibile modificare la larghezza del bordo (2px), lo stile (solido) e il colore (#333333).
- Alla riga 4, il padding crea spazio tra gli elementi del modulo e il bordo.
- Alla riga 5, border-radius aggiunge angoli arrotondati al modulo.
- Alla riga 6, background-color imposta uno sfondo bianco per il modulo.
- Alla riga 7, box-shadow aggiunge un sottile effetto ombra intorno al modulo.
Se volete applicare lo stesso CSS a tutti i vostri moduli, utilizzate invece questo CSS.
E questo è tutto ciò di cui avete bisogno per posizionare un bordo intorno al vostro modulo! Volete anche centrare i vostri moduli? Consultate la nostra guida su Come centrare un modulo.