Hai mai pensato che creare un sito web con Elementor è una cosa lunga e difficile?
In questo articolo ti parlo della nuova funzione Theme Style introdotta da Elementor.
Come sviluppatore di siti web mi trovo spesso ad aiutare clienti che mi chiedono di risolvere i problemi più disparati.
All’inizio mi chiedevano di creare pagine per vendere lanciare i loro prodotti o servizi,
Per anni cercavo in rete come aiutarli e principalmente trovavo articoli di autori con competenze ma che non riuscivano alla fine a farmi capire come risolvere il problema.
Ho dunque creato questo blog per aiutare sviluppatori come me dando un valore pratico e non teorico per risolvere facilmente i problemi.
Sei pronto?
Partiamo
Fino all’introduzione di questa nuova funzione mantenere uno stile coerente in tutto il sito (specialmente se molto grande) era un lavoro abbastanza lungo.
Immagina di avere un sito pronto per essere consegnato ad un cliente e quest’ultimo ti chiede di cambiare il colore o un font.
Sei costretto a cambiare il colore o il font in tutte le pagine del sito, certo se hai usato alcune opzioni che già erano disponibili in Elementor il lavoro potrebbe essere più facile.
Ora con questa nuova opzione tutto diventa più semplice.
Sommario
Cos’è il Theme Style
Il Theme Style è la possibilità di configurare una sola volta non solo i font ed i colori ma anche il colore del pulsanti ed anche i campi dei form in modo da essere applicati in tutto il sito.
La novità è che mentre prima potevi impostare queste cose all’interno del tema ora puoi impostarle in Elementor.
Il vantaggio è che se decidi di cambiare tema queste impostazioni si applicheranno anche al nuovo tema.
Come utilizzare questa opzione
Per utilizzare questa opzione devi innanzitutto andare in Elementor>Impostazioni e nella tab Generale devi attivare:
- Disattiva i colori predefiniti
- Disattiva i font predefiniti
Fatto questo apri una pagine con Elementor e clicca sull’icona in alto a sinistra come indicato nell’immagine qui sotto.
Nel menu troverai la nuova voce Theme Style, cliccando su questa voce si aprirà una nuova schermata.
Come puoi notare dall’immagine qui sopra la nuova finestra ha colori diversi da quelle che siamo abituati a vedere con Elementor.
Impostazioni
Vediamo adesso le impostazioni che troviamo nella finestra Theme Style.
Innanzitutto possiamo impostare lo Sfondo
Qui le opzioni sono un po’ quelle che troviamo per le singole sezioni, quindi immagine di sfondo oppure colore o gradiente.
Tipografia
Con questo menu abbiamo il controllo della tipografia del sito, quindi possiamo stabilire le dimensioni e il colore dei font del testo, dei tag da h1 a h6 oltre allo spazio tra i paragrafi.
Buttons
Qui possiamo impostare le dimensioni ed i colore dei pulsanti che inseriremo nel sito
Possiamo anche stabilire qual sarà la forma dei pulsanti agendo sul campo raggio del bordo
Form Fields
Queste impostazioni ci consentono di configurare graficamente i campi dei form
Stessa cosa per le Immagini
CSS personalizzato
Qui puoi inserire il codice CSS che si applicherà a tutto il sito.
Una volta impostate le voci che ti interessano clicca su aggiorna così da salvare le impostazioni.
Conclusioni
Abbiamo visto come il Theme Style ci aiuta a velocizzare la creazione di un sito ed a mantenerlo graficamente uniforme.
Le impostazioni inserite in questa finestra non cambieranno anche se cambi il tema di WordPress e questo è importantissimo perchè ti consente di non dover perdere tempo a rifare le impostazioni.
Bene siamo arrivati alla fine di questo articolo, se hai dubbi puoi scriverlo nei commenti e io ti risponderò
A presto
