Se stai utilizzando il modulo Iscrizione WC Vendors e desideri che corrisponda al branding del tuo sito o semplicemente che appaia più curato, puoi farlo facilmente utilizzando CSS personalizzato.
In questa guida, ti mostreremo come stilizzare il tuo modulo di registrazione venditore, inclusi il cambio di font, colori, stili dei pulsanti e layout del modulo, il tutto senza toccare alcun file principale del plugin.
Dove aggiungere CSS personalizzato
Puoi aggiungere il tuo CSS personalizzato in uno dei seguenti modi:
1. Tramite il Personalizzatore di WordPress (Consigliato)
- Naviga su Aspetto → Personalizza → CSS aggiuntivo nella tua dashboard.
- Incolla il codice e fai clic su Pubblica per vedere immediatamente le tue modifiche.
2. In un Child Theme
- Se stai utilizzando un child theme, apri il file
style.css. - Aggiungi lo snippet CSS lì per garantire che le tue personalizzazioni rimangano intatte anche dopo gli aggiornamenti del tema.
3. Utilizzo di un plugin CSS personalizzato
- Plugin come WPCode Lite ti consentono di inserire snippet in modo sicuro senza modificare i file del tema.
- Incolla semplicemente il codice nel tuo plugin di snippet di codice preferito e salva.
CSS personalizzato per il modulo di iscrizione WC Vendors
Ecco uno snippet CSS di esempio che darà al tuo modulo di registrazione WC Vendors un aspetto pulito e moderno con un layout a due colonne e campi di input stilizzati:
Come appare il modulo di iscrizione venditore dopo la stilizzazione personalizzata
Con questo CSS personalizzato applicato, il tuo modulo di registrazione venditore apparirà più pulito, moderno e facile da usare. Ecco esattamente cosa faranno queste modifiche:
- Dividi il modulo in due colonne per una migliore leggibilità su desktop.
- Rendi le etichette e i campi più puliti e coerenti utilizzando il font Verdana e colori di sfondo tenui.
- Stilizza il pulsante di invio con uno schema di colori verde professionale che cambia leggermente quando ci si passa sopra.
- Mantieni la compatibilità con i dispositivi mobili, tornando a un layout a colonna singola su schermi più piccoli.
Altri modi per personalizzare il tuo modulo di iscrizione venditore
- Modifica i codici colore (
#00008B,#012b09, ecc.) per abbinarli alla palette di colori unica del tuo brand. - Sostituisci la famiglia di font (ad es. Verdana) con il font del tuo brand per mantenere una tipografia coerente in tutto il tuo sito.
- Regola lo spazio del layout modificando i valori di
column-gap,marginofont-sizeper creare un design del modulo più compatto o spazioso. - Aggiungi il tuo logo o un banner personalizzato per l'iscrizione venditore sopra il modulo utilizzando un blocco Immagine nell'editor di WordPress per rendere la pagina visivamente accattivante.
- Includi testo personalizzato con un blocco Testo per introdurre il tuo programma venditori. Puoi evidenziare la storia del tuo brand, delineare il processo di iscrizione o mostrare i vantaggi chiave dell'adesione al tuo marketplace.
- Usa intestazioni o separatori per strutturare il contenuto della pagina e migliorare la leggibilità, specialmente se desideri condividere informazioni aggiuntive sui fornitori o FAQ.
Anteprima prima e dopo
Per aiutarti a visualizzare le modifiche, ecco come appare il modulo di iscrizione WC Vendors prima e dopo l'applicazione dello stile CSS personalizzato:
Applicando queste modifiche CSS, il tuo modulo di iscrizione WC Vendors non solo avrà un aspetto più professionale, ma comunicherà anche i valori del tuo brand e farà una forte prima impressione sui potenziali fornitori.