Come personalizzare i colori del tuo tema WordPress

Vuoi imparare a personalizzare i colori dei temi di WordPress? Forse hai trovato un tema che ami, ma la tavolozza dei colori è completamente sbagliata per il tuo marchio. Ci sono alcuni modi in cui puoi regolare i colori del tema per soddisfare le tue esigenze.

In questo post vedremo come personalizzare i colori del tema WordPress con e senza codice.

Crea ora il tuo modulo WordPress

Come posso cambiare il colore di un modulo di contatto in WordPress?

Dopo aver personalizzato i colori del tema, vorrai che i moduli sul tuo sito corrispondano a stile e colori. Il modo più semplice per farlo è utilizzare WPForms.

Oltre a esaminare come personalizzare i colori del tema con e senza codice, esamineremo anche più da vicino come utilizzare WPForms per ottenere lo stile dei moduli. In breve, la nuova funzione Stili modulo rende estremamente semplice abbinare i moduli al tuo sito. Ti mostreremo come.

Come personalizzare i colori del tuo tema WordPress

Facciamo un salto e iniziamo a personalizzare!

Personalizzare i colori del tuo tema WordPress con il codice

Se sei esperto di CSS e ti senti a tuo agio con la modifica dei file e del foglio di stile del tuo sito Web, utilizzare il codice per personalizzare il tuo tema WordPress è un'opzione.

Tuttavia, non è consigliabile modificare il file esistente. Invece, suggeriamo di utilizzare un altro plug-in per creare e personalizzare temi figlio. I temi child sono, essenzialmente, copie del tuo tema con tutti gli stessi attributi.

La modifica di un tema figlio è la modifica di una copia. Se commetti degli errori, puoi invece tornare al tema principale. Ti aiuterà anche a evitare problemi se ci sono aggiornamenti al tema principale.

Passaggio 1: installa un plug-in del tema figlio

Ecco alcuni suggerimenti di plug-in che puoi utilizzare per creare temi figlio:

• Configuratore di temi figlio
• Procedura guidata del tema figlio
• Genera tema figlio
• Generatore di temi per bambini WP

Per il nostro esempio, useremo Child Theme Configurator.

Passaggio 2: configura il tuo tema figlio

Dopo aver installato e attivato il plug-in del tema figlio preferito, dovrai accedervi per le configurazioni.

La posizione in cui appare il plug-in del tema figlio in WordPress può variare a seconda del plug-in utilizzato. Abbiamo effettuato l'accesso al Child Theme Configurator facendo clic sul menu Strumenti nella barra laterale sinistra.

Una volta individuato il plug-in, dovresti vedere le impostazioni o le opzioni per creare un tema figlio.

Abbiamo scoperto che Child Theme Configurator ti guida attraverso il processo, il che è utile e semplifica un'attività altrimenti confusa.

Dopo aver fatto clic sul pulsante Analizza , sono apparsi altri passaggi. Scendi attraverso ciascuno di questi passaggi e, alla fine, sarai pronto per creare il tema figlio.

Passaggio 3: personalizza il tema del tuo bambino

Dopo aver creato il tuo nuovo tema figlio, fai clic su Aspetto »Editor file tema nel menu della barra laterale sinistra.

Una volta entrato nell'Editor file tema, vedrai un menu a discesa sul lato destro in cui puoi selezionare il tema da modificare. Il tuo tema figlio dovrebbe essere in quella lista.

Dopo aver selezionato il tema figlio, ci sono 2 modi per modificare i file.

Il primo modo è modificare il CSS direttamente nell'editor di file, come abbiamo mostrato sopra. Il secondo modo è utilizzare l'editor CSS integrato per visualizzare in anteprima le modifiche mentre le apporti.

Per accedere all'editor CSS integrato, vai su Aspetto »Personalizza nel menu della barra laterale sinistra.

In quella pagina, vedrai un'anteprima dal vivo del tuo sito Web WordPress, insieme alle opzioni per apportare modifiche.

Come puoi vedere nel menu delle opzioni, ci sono diverse modifiche di stile che puoi apportare senza alcun codice. Questo può dipendere dal tuo tema e da cosa è già stato configurato.

All'interno di queste opzioni, troverai le impostazioni per aggiornare i colori del tuo tema.

Ad esempio, puoi scegliere lo stile del pulsante che desideri venga utilizzato dal tuo sito.

E dopo aver selezionato lo stile, puoi selezionare opzioni di colore personalizzate per il testo, lo sfondo e il bordo del pulsante.

È inoltre possibile modificare le famiglie di caratteri dell'intestazione e del corpo.

Nota, tuttavia, che c'è un'opzione di menu per CSS aggiuntivi in ​​fondo. Potresti scoprire che il codice CSS è ancora necessario per alcune modifiche che desideri apportare ai colori del tema del tuo sito. In tal caso, dovresti inserire il codice CSS necessario sotto quel menu a discesa e visualizzare in anteprima le modifiche dal vivo mentre le apporti.

Personalizzare i colori del tuo tema WordPress senza codice

Se sei preoccupato di rompere qualcosa mentre cambi il CSS nel tuo tema, c'è un modo ancora più semplice per personalizzare i colori del tuo tema WordPress. Puoi utilizzare un plug-in senza codice come Thrive Themes.

Thrive Theme Builder è un personalizzatore di temi che ti consente di creare il tuo tema senza l'uso o la conoscenza di alcun codice. Ha un'interfaccia drag-and-drop per la personalizzazione del front-end e hai il controllo su tutti gli aspetti del design.

Passaggio 1: installa il plug-in e completa la procedura guidata del sito

Dopo aver registrato un account e aver installato il plug-in, si avvia la procedura guidata del sito.

Puoi anche accedere nuovamente alla procedura guidata del sito in qualsiasi momento dalla dashboard di Thrive Themes.

Quando avvii la procedura guidata del sito, ti chiede di caricare il tuo logo e ti mostra come apparirà su uno sfondo chiaro e scuro. Anche se utilizzi uno sfondo chiaro, lo sfondo scuro è importante perché le persone utilizzano la modalità oscura sui propri dispositivi.

Successivamente, puoi selezionare il colore del tuo marchio. Quando fai clic sulla casella del colore, hai la possibilità di selezionare un colore con il selettore di colori o utilizzando un codice colore esadecimale.

Durante ogni passaggio della procedura guidata, crei il tuo tema personalizzato.

Man mano che completi il ​​resto della procedura guidata del sito, personalizzi l'aspetto del tuo sito Web senza dover scrivere una riga di codice. Thrive Theme Builder rende semplicissimo creare un tema del sito che sia unicamente tuo.

Passaggio 2: apportare eventuali personalizzazioni aggiuntive dalla dashboard

Come accennato in precedenza, puoi sempre tornare alla procedura guidata se desideri apportare modifiche. Puoi anche accedere a queste funzionalità tramite la dashboard. Dopo aver completato la procedura guidata, fai clic sulle altre opzioni per apportare ulteriori personalizzazioni.

Se desideri apportare una rapida modifica ai colori e al logo del tuo sito o se desideri caricare una favicon per il tuo sito, puoi accedervi dalla procedura guidata o dalla sezione Branding sulla dashboard. Allo stesso modo, puoi aggiornare anche la tipografia qui.

Dopo aver personalizzato tutti gli aspetti della tua pagina, puoi salvare il tema e iniziare a usarlo immediatamente.

Modifica del colore del modulo di contatto in WordPress

Come accennato in precedenza, una volta che hai lavorato sull'aggiornamento dei colori del tuo tema, vuoi assicurarti che tutto il resto corrisponda.

Prendi i tuoi moduli, per esempio. Se hai una pagina con bordi arrotondati e colori tenui, una forma squadrata con pulsanti rettangolari e un forte contrasto sembrerà almeno un po' fuori posto.

Inserisci WPForms. Le opzioni di stile dei moduli semplificano la personalizzazione dei moduli in modo che corrispondano al tema.

Passaggio 1: installa e attiva WPForms

Forse siamo di parte, ma pensiamo che WPForms sia il miglior generatore di moduli in circolazione. La sua intuitiva interfaccia drag-and-drop ti consente di creare e pubblicare moduli belli e professionali in pochi minuti. Inoltre, le sue opzioni di stile del modulo ti consentono di abbinare facilmente i tuoi stili di modulo al tema del tuo sito WordPress.

Per iniziare con lo styling dei moduli in modo che corrispondano ai colori del tuo tema WordPress, installa e attiva WPForms. Se hai bisogno di una guida, dai un'occhiata a questa guida per principianti su come installare i plugin di WordPress.

Passaggio 2: crea un modulo in WPForms

Dopo aver installato e attivato WPForms, è il momento di creare il tuo modulo!

Usa il pulsante Aggiungi nuovo per iniziare.

Il generatore di moduli si aprirà in modo da poter creare il modulo perfetto per soddisfare le tue esigenze. Creane uno da zero o scegli tra centinaia di modelli personalizzabili.

Quando il modulo è completo, puoi utilizzare il pulsante Incorpora per incorporarlo in un post o in una pagina del tuo sito. Puoi scegliere di incorporare il modulo in una pagina esistente o creare una nuova pagina per esso.

Passaggio 3: modifica gli stili dei moduli nell'editor blocchi di WordPress

Quindi, apri la bozza della pagina nel generatore di pagine. Per questo passaggio, devi utilizzare l'editor di blocchi di WordPress per accedere alle opzioni di personalizzazione.

Fare clic sul modulo incorporato. Le opzioni di stile del modulo si apriranno nella barra laterale sul lato destro dell'editor di pagine. Vedrai che puoi cambiare gli stili di campi, etichette e pulsanti.

Quando modifichi gli stili di campo, puoi regolare le dimensioni e il raggio del bordo per l'area di testo. Maggiore è il raggio del bordo, più arrotondata sarà l'area di testo. Puoi anche scegliere i colori per lo sfondo, il bordo e il testo.

Successivamente, puoi modificare lo stile dell'etichetta. Decidi di che colore vuoi che sia l'etichetta, quindi scegli i colori per l'etichetta secondaria e il suggerimento, oltre al messaggio di errore.

Infine, puoi apportare modifiche allo stile del pulsante.

Per renderlo ancora più semplice, dopo aver effettuato le selezioni per lo stile del modulo, fai clic su Opzioni avanzate. Vedrai un campo contenente il codice CSS.

Questo è il codice personalizzato per il tuo modulo. WPForms lo genera automaticamente per te. Puoi copiarlo e incollarlo nel campo Avanzate in tutti i tuoi moduli in modo che corrispondano tutti agli stili.

E se vuoi ricominciare da capo, fai clic su Ripristina impostazioni stile per cancellare tutta la formattazione.

Successivamente, sei pronto per pubblicare il tuo modulo con stile completo.

Ora i tuoi moduli corrispondono ai colori del tuo tema WordPress e non hai bisogno di scrivere una sola riga di codice per realizzarlo.

Quindi, crea il modulo interattivo perfetto

Pronto a potenziare il tuo gioco di forma? Ora che sai come personalizzare i colori del tuo tema WordPress e lo stile dei tuoi moduli in modo che corrispondano, è tempo di passare al livello successivo. Abbiamo alcuni suggerimenti per creare il modulo interattivo perfetto per mantenere gli utenti coinvolti e aumentare le conversioni.

Vuoi inviare un irresistibile sondaggio tra i clienti? Dai un'occhiata a questi esempi di sondaggi per i clienti per ispirarti!

Crea ora il tuo modulo WordPress

Pronto a costruire il tuo modulo? Inizia oggi con il plug-in per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti ha aiutato, seguici su Facebook e Twitter per altri tutorial e guide WordPress gratuiti.