In questo articolo imparerai come modificare facilmente i CSS su un sito WordPress con l'aiuto di strumenti gratuiti. Per WordPress hai 2 plugin a pagamento con cui puoi modificare i CSS, vale a dire Yellow Pencil e CSS Hero, ma non ci concentreremo su di loro in questo testo.
Lo strumento che utilizzeremo è Ispettore visivo CanvasFlip. Non lo installiamo sul sito, perché non è un plugin, ma un'estensione di Google e funziona solo su Chrome. Puoi usarlo in modo molto facile e semplice, a differenza dei 2 plugin sopra menzionati, che sono più complessi. CanvasFlip è gratuito e basta installarlo sul tuo browser come estensione e puoi iniziare a modificare.

Per quanto riguarda CanvasFlip, esiste anche una versione a pagamento, all'interno della quale hai più opzioni. Puoi salvare più progetti contemporaneamente sul loro cloud, puoi vedere immediatamente quali modifiche hai apportato al sito, in questo modo più persone possono modificare un sito contemporaneamente, il che è molto utile per le agenzie di web design e per alcuni progetti in cui lavorano più persone.
Uno degli svantaggi di questa estensione è che non è possibile modificare le versioni responsive per telefoni cellulari e tablet, ma è piuttosto utile per apportare modifiche alla versione desktop del sito. La prima cosa da fare è trovare l'estensione su Google e installarla. Dopo averlo fatto devi fare clic su di esso nel tuo browser e apparirà come nell'immagine qui sotto.

Quando si fa clic sul pulsante Ispezionare e inizi a muovere il mouse sulla pagina, noterai come puoi selezionare diverse sezioni e modificarle in tempo reale sul sito. Quando fai clic su una sezione, hai la possibilità di modificarne le dimensioni, i margini, la spaziatura, il colore, il carattere e molte altre cose. Naturalmente, puoi modificare tutto questo all'interno di Elementor e del tema che hai utilizzato per creare il sito, ma alcune cose potresti non essere in grado di modificare, come la spaziatura delle intestazioni, o semplicemente vuoi vedere la modifica in tempo reale sul sito giusto lontano. Quindi sarà più semplice per te utilizzare questa estensione.

Puoi modificare tutto ciò che è stato menzionato sopra in Elementor, ma ci sono cose che non puoi, di cui parleremo nel resto del testo. Se fai clic su un articolo specifico nella sezione degli articoli recenti della pagina, vedrai che puoi anche modificare l'ombreggiatura dell'elemento, cosa che non è il caso in Elementor. Puoi modificare tutto ciò che desideri dal vivo sul sito e poi puoi scaricare il file con le modifiche CSS. Per fare ciò, è necessario fare clic sull'opzione Informazioni e quindi fare clic sul pulsante Esporta modifiche come nell'immagine qui sotto e scaricherete il file con le modifiche.

Quando hai fatto clic su quel pulsante, hai ricevuto un file zippato contenente un file CSS. Aprilo in un editor di testo e copia il codice css che devi inserire nel sito. Per fare ciò, devi fare clic sull'opzione nel pannello di controllo del tuo sito personalizzare. Quindi, dopo averlo fatto, devi aprire l'opzione CSS/JS personalizzati e al suo interno incollare il codice css copiato e cliccare sul pulsante Pubblicare. In questo modo, hai salvato le modifiche al tuo sito all'interno del pannello di controllo del sito. Puoi vedere tu stesso che è abbastanza semplice e veloce apportare modifiche al sito in questo modo.
Spero che questo testo ti sia stato utile e che tu abbia imparato qualcosa di nuovo, se sei interessato a leggere altri consigli per il lavoro indipendente puoi verificarli sul nostro blog, e nel caso in cui desideri consultare professionisti, clicca su questo Collegamento.
Fonte: Youtube