1. Casa
  2. Knowledge Base
  3. Registrazione WC Vendors
  4. Come Stilizzare il Modulo di Login WC Vendors
  1. Casa
  2. Knowledge Base
  3. Stile
  4. Come Stilizzare il Modulo di Login WC Vendors

Come Stilizzare il Modulo di Login WC Vendors

La pagina di accesso del tuo venditore è spesso uno dei primi punti di contatto per i partner del tuo marketplace. È molto importante renderla curata e coerente con il tuo brand. Con il plugin WC Vendors Signup , non è necessario modificare i file del plugin o scrivere codice complicato per ottenere un design professionale.

Con poche righe di CSS, puoi trasformare il modulo di accesso predefinito di WC Vendors in un'interfaccia elegante e intuitiva che si allinea perfettamente allo stile visivo del tuo sito.

Dove aggiungere CSS personalizzato

Puoi aggiungere in sicurezza il codice di stile sottostante utilizzando uno dei metodi seguenti:

  • 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

Utilizza il seguente CSS per modernizzare l'aspetto del tuo modulo di accesso di WC Vendors. Stilizza i campi di input, i pulsanti e i link per creare un design coerente e professionale.

Come questi stili trasformano il tuo modulo di accesso venditore

Una volta applicato, questo CSS conferisce alla tua pagina di accesso un aspetto più pulito e coerente. Ecco cosa è cambiato:

  • Campi di input raffinati: bordi smussati, tonalità neutre e testo chiaro per una facile leggibilità.
  • Design moderno del pulsante: sfondo verde scuro con testo giallo tenue e transizione al passaggio del mouse fluida.
  • Link leggibili: chiaro contrasto tra sfondo e testo, che fa risaltare i link per password e registrazione.
  • Tipografia coerente: il font Verdana mantiene il design semplice e accessibile su tutti i browser.

La tua pagina di accesso sembrerà più curata e accogliente. Questo design migliorato aiuta i venditori ad accedere con fiducia.

Personalizza il modulo di accesso venditore per adattarlo al tuo brand

Fai in modo che la tua pagina di accesso venditore sembri parte del tuo brand regolando il CSS:

  • Colori: Aggiorna i codici colore (ad esempio, #00008B, #012b09) per adattarli alla tua palette di colori del brand.
  • Font: Sostituisci il font predefinito (ad esempio, Verdana) con il font del tuo brand per mantenere una tipografia coerente.
  • Layout e spaziatura: Regola gli spazi tra le colonne, i margini o le dimensioni dei font per creare un modulo più compatto o spazioso.
  • Pulsanti ed effetti al passaggio del mouse: Personalizza i pulsanti per adattarli ai colori del tuo brand e alle transizioni al passaggio del mouse.

Queste modifiche assicurano che il modulo di accesso si allinei visivamente al tuo marketplace, facendolo apparire professionale e coerente.

Migliora la tua pagina di accesso venditore utilizzando i blocchi Gutenberg

Consigliamo di utilizzare l'editor di pagine Gutenberg per aggiungere contenuti e struttura alla tua pagina di accesso venditore oltre alla semplice stilizzazione:

  • Immagine: Utilizza un blocco Immagine sopra il modulo di accesso per mostrare il logo del tuo marketplace o un banner personalizzato.
  • Messaggio di benvenuto: Aggiungi un blocco Titolo o Paragrafo per salutare i venditori e introdurre la voce del tuo brand.
  • Link utili: Utilizza un blocco Elenco per includere link al tuo Centro assistenza, informazioni di contatto del supporto o suggerimenti per la password.
  • Struttura e leggibilità: Aggiungi blocchi Spaziatore o Separatore per organizzare le sezioni e migliorare la leggibilità.
  • Call-to-Action: Aggiungi un blocco Pulsante o Call-to-Action che rimandi alla pagina di registrazione del tuo fornitore, stilizzato con i colori del tuo brand.

Anteprima delle modifiche

Dai un'occhiata alla differenza che queste personalizzazioni possono fare sul tuo modulo di accesso per fornitori

Prima dello stile personalizzato
Dopo lo stile personalizzato

Personalizzando il tuo modulo di accesso con CSS, puoi creare un'esperienza professionale e in linea con il tuo brand che rifletta immediatamente l'identità del tuo marketplace e faccia sentire i fornitori sicuri e benvenuti.

Questo articolo è stato utile?

Articoli Correlati

Completa il tuo acquisto