Come modificare il CSS di un sito WordPress.

Quante volte ti è capitato di voler modificare l'aspetto di un pulsante, il font o il colore di un testo? A me personalmente capita davvero molto spesso, perché WordPress è magnifico, ma non perfetto e, talvolta, alcune modifiche ci è impossibile farle tramite l'editor. Quindi, come possiamo modificare l'aspetto di qualsiasi cosa tramite CSS?
css

Prima cosa, quanta esperienza hai con il CSS?

Questa domanda è molto importante, perché se non hai mai messo mano al CSS di una qualsiasi applicazione dovrai prestare molta attenzione ai passi che sto per mostrarti.
Questa guida, d’altronde, l’ho creata principalmente per te, perché anche io come te sono partito da zero e tentare di capire qualcosa dalle migliaia di guide mi era impossibile, perché tutti danno per scontato qualcosa.

Guida passo-passo per modificare il CSS.

Partiamo dalla base, individua la sezione di cui l’aspetto ti piace poco e che con l’editor di WordPress ti viene impossibile modificare.
Una volta individuata, apri una nuova finestra e digita il dominio del tuo sito web (per esempio il mio è “thomasdonzella.com“), così facendo entrerai sul tuo sito web senza passare dalla dashboard del tuo sito web, nel caso così non dovesse essere, inserisci il tuo dominio in una finestra in incognito.
Molto bene, ora individua la sezione desiderata e segui questi passaggi :

1. “Seleziona la sezione”, scusa il giro di parole.

css

2. Premi il tasto destro del tuo mouse e seleziona la voce “Ispeziona elemento” se usi Safari, oppure, “Ispeziona” se usi Chrome.

css

3. Una volta selezionato ti si aprirà il pannello degli elementi (vedi immagini allegate), che ti mostrerà la riga di codice associata alla selezione che hai fatto. Se ci passerai sopra con il mouse, vedrai che si evidenzierà la sezione da te indicata.

css
css

4. Bene, vedi che c’è una colonna “Attributo Stile” (su Safari) e “Styles” (su Chrome)?
Ecco, la prima voce corrisponde esattamente alla voce che volete modificare, come in questo caso (in situazioni in cui volete fare una modifica generale, quindi non di una sezione specifica, dovete leggere il codice, che vi farò vedere meglio al termine della guida). Il prossimo passo è molto semplice, se provate a modificare una delle righe come ad esempio il colore (color) e il font (font-family), vi basterà andare a cambiare i valori, di seguito un esempio :

VALORE INIZIALE

				
					.elementor-1817 .elementor-element.elementor-element-3b161754 .elementor-heading-title {
color: var( --e-global-color-secondary );
font-family: "Jost", Sans-serif;
}
				
			

VALORE FINALE

				
					.elementor-1817 .elementor-element.elementor-element-3b161754 .elementor-heading-title {
color: #58BCB4;
font-family: "Baskerville";
}
				
			

5. Una volta modificato il codice, come qui sopra, vedrai in anteprima le modifiche (vedi immagini).

css
css
6. Ci siamo, questo è l’ultimo passaggio, per apportare le modifiche dovrai selezionare il CSS, copiarlo, e incollarlo in :
Dashboard -> Aspetto -> Personalizza -> CSS Aggiuntivo
Una volta incollato premi su “Pubblica” e il gioco è fatto!

Modificare il CSS non solo della selezione.

Partendo direttamente dal punto nr. 4, per modificare i testi di tutto il sito web come paragrafi, heading ecc., i pulsanti o le immagini (quando cito le modifiche alle immagini, intendo la loro forma, ad esempio il raggio del bordo).
In questo passaggio dovrete leggere attentamente l’elemento del CSS, di seguito l’esempio per farvi capire la differenza.

CSS SPECIFICO

				
					.elementor-1817 .elementor-element.elementor-element-3b161754 .elementor-heading-title {
color: #58BCB4;
font-family: "Baskerville";
}

				
			

CSS GENERALE

				
					
.elementor-heading-title {
padding: 0;
margin: 0;
line-height: 1;
}
				
			

Se hai trovato subito la differenza, complimenti.😎
Se non l’hai trovata, nessun problema, la guida serve per questo!😉

La differenza risiede nella scrittura, come puoi notare, nella prima tabella la scrittura è molto specifica, perché fa riferimento ad un blocco, una sezione e un heading specifico, quindi se modificherai quel CSS modificherai solo la sezione riportata.
Nella seconda tabella, invece, la scrittura è generica, quindi si riferirà a tutti gli heading.

* Se hai già modificato un CSS dello stesso tipo, dovrai prestare attenzione, perché potresti creare conflitti e non rendere più applicabile la modifica di un nuovo CSS. Quindi nel nostro caso, se modifico prima quello specifico e poi voglio farlo a livello generale, c’è la possibilità di creare conflitti!

Conclusione

Modificare il CSS all’apparenza può sembrare semplice, ma a volte per trovare la stringa corretta ci si può impiegare davvero parecchio tempo, per questo consiglio sempre di prestare molta attenzione per non commettere errori. Se questa mini-guida ti è stata utile fammelo sapere, se ti va, mi farebbe davvero piacere. Ci si vede in un prossimo articolo!

Vuoi ricevere un preventivo per fare una valutazione concreta?

Premi sul pulsante e compila il form indicando ciò di cui avresti bisogno, entro 24 ore riceverai il tuo preventivo.

Ultime Novità

Ultimi e fantastici post
FOLLOW US