Come aggiungere classi CSS personalizzate a WordPress (3 modi semplici)

Coloro che conoscono i CSS sanno che le lezioni CSS sono un enorme modo di accompagnare un intero sito. Ma se non codifichi, potresti non aver mai capito quanto possano essere potenti. Oggi lo cambiamo.

In questo post, ti mostrerò 3 modi semplici per aggiungere le classi CSS a WordPress, anche se non hai mai scritto una singola riga di codice. Imparerai anche a farlo in modo senza code usando il potente costruttore di siti Web di WordPress, Divi.

Quali sono le lezioni CSS e come aiutano?

CSS ( fogli in stile a cascata ) è il codice che controlla il design e l'aspetto di elementi, come colori, spaziatura e caratteri, su un sito Web. Una classe CSS è un'etichetta riutilizzabile che assegna a più elementi in modo da poterli modellare tutti in una volta invece di ripetere lo stesso processo per ciascun elemento.

Senza le classi CSS, dovresti modellare manualmente ogni elemento, che diventa dispendioso in termini di tempo, specialmente quando si lavora su siti WordPress più grandi con più pagine. Ma come spesso accade, la maggior parte dei siti Web include elementi e motivi ripetuti, come i pulsanti su una pagina di prezzi o su caselle di funzionalità in diverse sezioni.

Questi elementi sembrano simili perché, nel backend, condividono lo stesso gruppo di classe. Quindi, quando si applica CSS a un elemento di un gruppo di classe comune, ogni elemento in esso eredita automaticamente le stesse impostazioni di stile. Sul front -end, questo dà loro un aspetto visivamente simile. Le classi CSS risparmiano tempo, mantengono il design coerente e semplificano le modifiche future, poiché devi solo aggiornare la classe invece di cambiare ogni elemento uno per uno.

Modi per aggiungere le classi CSS a WordPress

Puoi aggiungere le classi CSS a un sito Web WordPress in diversi modi, a seconda della tua competenza nell'uso di CSS. Ti mostrerò come farlo usando WordPress personalizzatore e un plug -in come semplice CSS personalizzato, ma entrambi questi metodi richiedono di scrivere CSS.

Salta il terzo metodo se sei più interessato al metodo senza codice.

1. Utilizzo del personalizzatore WordPress

Supponiamo che la tua pagina WordPress abbia più pulsanti. Attualmente sembrano semplici e vuoi che si distinguano, quindi hai intenzione di aggiungere un bordo blu navy e uno sfondo blu cielo.

L'aggiunta di CSS a ciascun pulsante ti richiederà molto tempo in quanto dovrai ripetere il processo otto volte. Ma con le classi CSS, puoi semplicemente assegnare la stessa classe CSS a ciascun pulsante e scrivere il CSS solo una volta. Nomiamo la nostra classe CSS " Custom-A" . Nella finestra dell'editor della pagina WordPress, fare clic su qualsiasi pulsante> Impostazioni (icona del marcia)> Attiva l'opzione avanzata . Ora, scrivi il nome di classe in ulteriori classi CSS.

Ripeti il ​​processo per ciascun pulsante e salva. Per aggiungere il codice di styling a questi pulsanti, dovrai navigare su WordPress personalizzatore> CSS aggiuntivo.

Per rendere il bordo blu navy e lo sfondo blu, incollerai i tuoi CSS qui.

Si noti che il nome della classe CSS che abbiamo scelto viene prima delle regole di styling nel codice. Ciò si assicura che il codice sia applicato a ogni elemento che ha questo nome di classe assegnato.

Dopo aver inserito pubblicare e visualizzare in anteprima la tua pagina, i pulsanti in stile sembreranno così:

È semplice: se conosci CSS.

Il personalizzatore di WordPress è ottimo anche per apportare modifiche minori. Tuttavia, il problema è che il CSS ha aggiunto che è legato al tema, il che significa che potrebbe essere perso se si cambia temi. Quindi, se ti piace testare temi diversi sul tuo sito Web, dovrai aggiornare il codice ogni volta che passa a un tema diverso, il che non è divertente. In tal caso, l'installazione di un plug -in per proteggere gli stili di classe CSS è un'opzione molto migliore.

2. Utilizzo di un plugin come semplice CSS personalizzato

Una volta installato il semplice plug -in CSS personalizzato, l'opzione CSS personalizzata verrà aggiunta alla sezione Aspetto . Ora devi solo aggiungere il codice CSS e aggiornare CSS personalizzato per riflettere le modifiche. (Devi ancora assegnare nomi di classe a elementi che vuoi avere stili comuni.)

Plug -in come questo mantengono intatto il tuo CSS personalizzato, anche se cambi il tuo tema in seguito. È anche un po 'più organizzato del personalizzatore di WordPress. Tuttavia, entrambi i metodi non sono scalabili in quanto possono facilmente essere ingombra quando si salva CSS personalizzati per gruppi di più elementi dell'intero sito Web.

Ecco perché, per lo stile del sito, l'approccio consigliato è quello di creare un tema figlio e aggiornare il suo foglio di stile. In questo modo, tutte le tue modifiche sono mantenute al sicuro nel tema del tuo bambino, anche dopo gli aggiornamenti del tema.

Sebbene efficace (e raccomandato dai programmatori), questo metodo può rapidamente diventare tecnico in quanto richiede ancora un lavoro manuale: dovrai modellare ogni elemento (o più elementi usando le classi CSS), che richiede tempo e non per principianti. Dovrai anche tenere traccia dei nomi delle classi: immagina solo di voler modificare una particolare classe di bottoni e scorrere infinite stringhe di codice.

E se potessi ridimensionare lo stile senza scrivere una singola riga di codice? Ecco dove entrano moderni costruttori di pagine drag-and-drop come Divi.

3. Utilizzo di un costruttore di siti Web senza codice come Divi

La bellezza dell'utilizzo di un moderno costruttore di siti Web senza codice come Divi è che non è necessario scrivere CSS (o qualsiasi codice) per applicare stili coerenti sul tuo sito. Con un'interfaccia visiva, è possibile assegnare stili a sezioni, righe, colonne e moduli semplicemente selezionando e personalizzando le impostazioni di design.

In Divi, crei preset invece di classi CSS. Per anni, Divi ha offerto preset basati su moduli che ti consentono di salvare e riutilizzare stili per moduli come pulsanti, sfocature e immagini. Ma abbiamo lanciato qualcosa di ancora più sorprendente: preset del gruppo di opzioni che ti consentono di andare ancora oltre.

Prima dei preimpostazioni del gruppo di opzioni, è stato consentito solo applicare i preimpostazioni tra i moduli. Ad esempio, un preimpostazione blurb può essere utilizzato solo in un altro blurb. Ora puoi persino condividere le impostazioni tra i moduli.

Invece di personalizzare un elemento alla volta, i preset del gruppo di opzioni ti consentono di salvare gli stili per le impostazioni condivise, come sfondi, bordi o stili di testo - e applicarli a più elementi diversi contemporaneamente. Ad esempio, se una sezione e una colonna utilizzano entrambi un colore di sfondo, è possibile salvare quell'impostazione di stile come preimpostazione e applicarla in tutti gli elementi rilevanti per creare un design coeso.

Divi semplifica la costruzione e il salvataggio di stili come preset attraverso funzionalità di trascinamento senza codifica, rendendo le modifiche di progettazione a livello di sito più velocemente e più accessibili, specialmente per i non codificanti.

Scarica Divi 5

Vediamo cosa intendo in modo più dettagliato di seguito

I preset del gruppo di opzioni di Divi semplificano l'aggiunta delle classi CSS

I preset del gruppo di opzioni di Divi prendono il concetto di classi CSS e lo semplificano per i non codificanti. Invece di scrivere e assegnare manualmente le lezioni, ora puoi usare il costruttore Visual di Divi per applicare stili di design condivisi in diversi elementi con pochi clic.

Questi preset funzionano a livello di opzione, il che significa che mirano a impostazioni di design specifiche come colori di sfondo, bordi o spaziatura che sono condivisi su più tipi di elementi. Quindi, ad esempio, le impostazioni di sfondo di una sezione possono essere applicate a una colonna, riga e persino elemento di testo.

È un modo più veloce, più semplice e intuitivo per mantenere coerente il design del tuo sito Web. Ecco come:

• Stili riutilizzabili tra elementi: non è necessario personalizzare ogni elemento manualmente. Salva gli stili di gruppo di opzioni come preimpostazioni e applicarli a qualsiasi elemento.
• Aggiornamenti globali con un'unica modifica: modificare una preset una volta e tutti gli elementi utilizzando quel preimpostazione si aggiorneranno automaticamente. Ciò rende le regolazioni del design rapide ed efficienti in tutto il tuo sito Web.
• Combina più preset: strato e mescola diversi preset (ad es. Bordi, ombre, stili di testo) su qualsiasi elemento per una combinazione di design flessibile e creativo senza iniziare da zero.
• Personalizza i preset predefiniti per gli stili di base: salva i preset come predefinito per applicarli automaticamente a tutti gli elementi pertinenti.

Ulteriori informazioni sui preset del gruppo di opzioni

Come usare Divi per aggiungere le classi CSS a WordPress senza codifica

Ora che sai quali sono i preimpostazioni del gruppo di opzioni di Divi e che non hai bisogno di conoscere la codifica per lavorare con loro, volevo mostrarti come funziona esattamente all'interno del Builder Divi. Cosa devi fare per creare, salvare e applicare i preimpostazioni di gruppo su qualsiasi impostazione di opzioni come sfondo, bordo, shadow box, ecc. Per il nostro esempio, personalizziamo una pagina dei prezzi.

Modifica dello sfondo del pulsante

Supponiamo di voler cambiare lo sfondo del pulsante in viola per abbinare il colore della pagina. Quindi, personalizzerò il pulsante della prima colonna e salverò le impostazioni come preimpostazione del pulsante di luce primaria . (Il colore nero nelle impostazioni dell'interfaccia utente mostra che stai modificando un preset di impostazione. Se hai selezionato la modalità scura, sarà l'opposto.)

Ora, per applicare le stesse impostazioni agli altri due pulsanti, cambierò semplicemente il preimpostazione del pulsante sulla luce primaria.

Cambiare l'ombra di una colonna

Aggiungiamo un'ombra della scatola a tutte le colonne. Aggiungerò una scatola Shadow alla prima colonna e lo salverò come Shadow Box Shadow Preset.

Per applicare la stessa ombra sulle altre due colonne, cambierò semplicemente la scatola Shadow Preset su Shadow .

Modifica dei preset di testo

Puoi anche modificare gli stili per elementi di testo, come H1 e H2S. Ecco come funziona l'aggiornamento delle colonne H3 Preset:

Dopo aver salvato, ecco come apparirà la pagina dei prezzi:

Anche se ho apportato piccole modifiche per mostrarti come funziona, puoi immaginare le possibilità. Con i preset di gruppi di opzioni di Divi, la modifica degli stili personalizzati di gruppi è semplice come un clic di un pulsante. Ma questa è solo la punta dell'iceberg. Puoi anche:

• Imposta preset predefiniti per gruppi di opzioni in modo che elementi di base come intestazioni o pulsanti ereditano automaticamente lo styling sul sito. Una volta che hai capito come funzionano i preset predefiniti, non tornerai mai a usare vecchi metodi.
• Preset del gruppo di opzioni di livello sopra i preset di elementi per aggiungere ulteriore enfasi, come applicare uno sfondo condiviso e quindi impilare un'ombra o uno stile di confine per far risaltare alcuni elementi.

Abbiamo scritto un'intera guida su tutto ciò che dovresti sapere sui preset del gruppo di opzioni di Divi. Leggi l'articolo completo per ottenere idee di design e consigli su come semplificare il web design basato su classe con Divi.

Ulteriori informazioni sui preset del gruppo di opzioni

Divi è un punto di svolta per il sistema di progettazione basato su classe

I preset del gruppo di opzioni di Divi portano il potere delle classi CSS a tutti. Sia che tu stia progettando da solo o collaborando con una squadra, i preset accelerano il flusso di lavoro, si ridimensionano mentre il tuo sito cresce e rende lo styling coerente senza sforzo. Sono più veloci, più efficienti e molto più intuitivi dei tradizionali flussi di lavoro CSS.

Inizia con Divi 5 oggi

Divi 5 è in modalità di aggiornamento completo. Stiamo lanciando nuove funzionalità ogni settimana, proprio come i preimpostazioni del gruppo di opzioni, è una buona idea conoscere unità avanzate, variabili di progettazione CSS e molte altre che cambiano il modo in cui ti avvicini alla progettazione di qualsiasi sito Web.

Ulteriori informazioni su Divi 5

Divi 5 è un potente framework di design con potenti strumenti come Divi Dash, Divi Quick Sites e Divi AI, costruito per aiutarti a creare siti Web personalizzati e professionali senza toccare una singola riga di codice. Non c'è niente che ti limiti, pronto a fare un test drive nel futuro della progettazione del sito Web?

Scarica Divi 5