Creazione di un modulo di accesso WordPress personalizzato con un'interfaccia utente piatta

Ultimo aggiornamento - 8 luglio 2021

WordPress è in circolazione da molto tempo. Quello che era iniziato come un portale per blogger, è ora diventato un sistema di gestione dei contenuti responsabile della gestione di quasi la metà dei siti Web totali del mondo. La sua interfaccia semplice ma intuitiva e i design personalizzabili lo hanno reso la scelta numero uno per sviluppatori Web e designer di tutto il mondo che desiderano creare i propri siti Web da zero.

Chiunque utilizzi WordPress ha un occhio per i dettagli e l'originalità per migliorare l'esperienza dell'utente e aumentare la percentuale di clic. La maggior parte degli sviluppatori si concentra principalmente solo sui temi, ma per i siti di abbonamento e altre piattaforme, il punto di partenza è una pagina di accesso. Immagina questo, se sei un membro appena registrato su un sito Web e accedi a una schermata simile ai membri non registrati, l'impatto è leggermente attenuato e ti fa sentire piuttosto insoddisfatto. Tuttavia, avere una pagina di accesso di WordPress personalizzata per soddisfare i requisiti e l'estetica della tua attività lascia un'impressione migliore sui visitatori e suscita il loro interesse.

Per aiutarti in questo, abbiamo riassunto alcune semplici linee guida per includere i tuoi stili per una pagina di accesso WordPress personalizzata che si integri visivamente con lo schema di progettazione del tuo sito web.

Costruire una pagina di accesso WordPress personalizzata senza plug-in

È possibile apportare diverse modifiche alla pagina di accesso di WordPress aggiornando il codice sorgente nel file function.php del tema scelto. Tuttavia, una volta aggiornato WordPress, queste modifiche andranno perse. Questo perché il foglio di stile del tuo tema per la pagina di accesso non fa parte della configurazione del tema di WordPress, che richiede la creazione di un altro foglio di stile per la pagina di accesso personalizzata.

Inizia creando una cartella chiamata "Login" nella cartella del tuo tema e aggiungi un file .txt con il nome custom-login-style.css . Da lì in poi, puoi procedere ad apportare alcune modifiche di base per personalizzare e aggiungere unicità alla pagina di accesso.

Cambia lo sfondo

Per aggiornare il colore di sfondo della pagina o un pulsante specifico, dovrai selezionare il colore di sfondo: #222222 e modificare il codice esadecimale con il colore che preferisci. Prendi l'aiuto di una tavolozza di colori per selezionare un colore che si adatti all'estetica della tua attività e sia visivamente accattivante.

Inoltre, se desideri modificare l'immagine di sfondo della tua pagina di accesso, seleziona la riga di codice background-image: url(logo_login.png') e sostituisci logo_login.png , che è il nome del file con l'URL del tuo file immagine aggiornato .

Le aziende che vogliono che i loro clienti ricordino il loro marchio possono cambiare il logo di WordPress con il loro logo personalizzato. Dopo aver salvato il file dell'immagine del logo personalizzato nella cartella Login, sostituisci il nome del file con il tuo logo personalizzato nell'immagine di sfondo: codice url('logo_login') .

Personalizzazione del modulo di accesso regolando il riempimento e il margine

Gli sviluppatori possono modificare il modulo di accesso per rendere la loro pagina attraente e adattata in modo appropriato all'aspetto del loro sito. Dal riempimento dei pulsanti al colore e alla dimensione del carattere delle etichette, ecc. È possibile aggiungere più spazio all'interno del pulsante in modo che il testo non appaia schiacciato aumentando il riempimento; basta aumentare i numeri nel riempimento del codice : 12px 12px 12px 12px. Se desideri creare più spazio all'esterno del pulsante in modo tale che gli elementi circostanti non siano strettamente imballati, puoi farlo aumentando lo spazio del margine nel margine del codice: 12px 12px 12px 12px. Anche qualcosa di semplice come l'aggiunta di alcuni spazi bianchi può avere un impatto sull'aspetto finale della tua pagina di accesso e farla sembrare più assemblata.

Modifica della dimensione e del colore del carattere

Puoi modificare la dimensione del carattere del testo del paragrafo, dei collegamenti o dei campi del modulo utilizzando il codice font-size: 15px adattando il numero alla dimensione che preferisci. Lo stesso può essere fatto per il colore del carattere aggiornando il colore nel codice colore: #222222 e sostituendo il colore.

Modifica del messaggio di errore di accesso

Con l'aumento dei crimini informatici e delle truffe su Internet, gli sviluppatori Web e gli imprenditori non possono correre rischi sui loro siti Web e perdere dati riservati. Quando un utente inserisce frettolosamente le credenziali di accesso errate, viene generato automaticamente un messaggio di errore predefinito. Sebbene questo sia per segnalare agli utenti questo errore, può essere una lacuna per gli hacker provare a decifrare i dati di accesso. Quindi, il modo migliore per tenere a bada gli hacker è alterare il messaggio di errore nel file function.php .

Per concludere, coloro che hanno una vasta conoscenza dei CSS possono avere il controllo definitivo sullo stile e sulla personalizzazione del proprio modulo di accesso a WordPress. Ma se la tua mancanza di capacità di programmazione e limita la tua capacità di creare una pagina di accesso personalizzata, non preoccuparti! Ci sono una varietà di opzioni di plug -in disponibili nel repository di WordPress per semplificare il processo di sviluppo web di WordPress e abbiamo elencato i più popolari per te.

Plugin di personalizzazione dell'accesso

Login Customizer è uno dei plugin più intuitivi e ti consente di apportare modifiche direttamente dal tuo WordPress Customizer. Dopo un semplice processo di installazione, puoi accedervi facilmente dalla dashboard di WordPress nella scheda Aspetto . Fai clic su Avvia personalizzazione e ti reindirizzerà alla schermata di personalizzazione in cui riprogetterai tutte le aree in base alle tue preferenze.

Personalizzazione dell'accesso a Colorlib

Colorlib Login Customizer è uno strumento pieno di risorse e flessibile che offre tutte le funzionalità che si trovano in un plug-in premium ma le offre gratuitamente. La sua vasta gamma di funzionalità uniche lo rende la scelta definitiva per gli sviluppatori Web che desiderano creare una soluzione personalizzata per i propri utenti. Anche questo consente la personalizzazione tramite Personalizzatore di WordPress in modo da poter navigare facilmente e rimodellare la tua pagina di accesso.

In sintesi

Alla fine, esiste più di un approccio alla personalizzazione di una pagina di accesso e gli sviluppatori di tutti i livelli di esperienza sono invitati a provarli. Ciò che conta è che la pagina di accesso personalizzata di WordPress corrisponda e integri l'estetica del sito reale per migliorare l'esperienza dell'utente. Personalizzare la pagina di accesso del tuo sito è un modo semplice ma efficace per deliziare i clienti e costruire un'identità di marca. Iniziare in modo semplice e costruire sulle basi può trasformare un semplice schermo in qualcosa di spettacolare e offrire ai clienti un'esperienza online personalizzata che non hanno mai visto prima.