Cum să adăugați clase CSS personalizate la WordPress (3 moduri ușoare)

Cei care știu CSS știu că clasele CSS sunt un timp masiv atunci când coaste un întreg site. Dar dacă nu codificați, poate nu ați realizat niciodată cât de puternici pot fi. Astăzi, schimbăm asta.

În această postare, vă voi arăta 3 modalități ușoare de a adăuga clase CSS la WordPress - chiar dacă nu ați scris niciodată o singură linie de cod. Veți învăța, de asemenea, cum să faceți acest lucru fără cod folosind puternicul constructor de site-uri WordPress, Divi.

Ce sunt clasele CSS și cum ajută?

CSS ( foi de stil în cascadă ) este codul care controlează designul și aspectul elementelor, cum ar fi culorile, distanțarea și fonturile, pe un site web. O clasă CSS este o etichetă reutilizabilă pe care o atribuiți mai multor elemente, astfel încât să le puteți modela pe toate simultan, în loc să repetați același proces pentru fiecare element.

Fără clase CSS, ar trebui să stilați manual fiecare element, care devine consumator de timp-mai ales atunci când lucrați pe site-uri WordPress mai mari cu mai multe pagini. Dar, așa cum se întâmplă adesea, majoritatea site -urilor web includ elemente și motive repetate, cum ar fi butoanele de pe o pagină de prețuri sau cutii de caracteristici în diferite secțiuni.

Aceste elemente arată similar, deoarece, în backend, împărtășesc același grup de clasă. Deci, atunci când aplicați CSS pe un element al unui grup de clasă comună, fiecare element din acesta moștenește automat aceleași setări de stil. Pe partea din față, acest lucru le oferă un aspect similar vizual. Clasele CSS economisesc timp, păstrează designul consecvent și facilitează editările viitoare mai ușoare - din moment ce trebuie să actualizați clasa doar în loc să schimbați fiecare element unul câte unul.

Modalități de a adăuga clase CSS la WordPress

Puteți adăuga clase CSS pe un site web WordPress în mai multe moduri, în funcție de competența dvs. în utilizarea CSS. Vă voi arăta cum să o faceți folosind WordPress Customer și un plugin precum CSS personalizat simplu, dar ambele metode necesită să scrieți CSS.

Salt la a treia metodă dacă sunteți mai interesat de metoda fără cod.

1. Folosind WordPress personalizat

Să spunem că pagina dvs. WordPress are mai multe butoane. În prezent, arată simplu și doriți ca aceștia să iasă în evidență, astfel încât intenționați să adăugați o margine albastră bleumarin și un fundal albastru.

Adăugarea CSS la fiecare buton vă va lua timp considerabil, deoarece va trebui să repetați procesul de opt ori. Dar cu clasele CSS, puteți aloca pur și simplu aceeași clasă CSS fiecărui buton și puteți scrie CSS o singură dată. Să numim clasa noastră CSS „ Custom-A” . În fereastra editorului dvs. de pagini WordPress, faceți clic pe orice buton> Setări (pictograma Gear)> Comutați opțiunea avansată . Acum, scrieți numele clasei în clase CSS suplimentare.

Repetați procesul pentru fiecare buton și salvați. Pentru a adăuga codul de styling la aceste butoane, va trebui să navigați la WordPress Customizer> CSS suplimentar.

Pentru a face Border Navy Blue și fundalul cerului albastru, vă veți lipi CSS -ul aici.

Observați că numele clasei CSS pe care l -am ales vine înainte de regulile de styling din cod. Acest lucru se asigură că codul este aplicat fiecărui element care are acest nume de clasă atribuit.

După ce ați apăsat Publish and Previzualizați -vă pagina, butoanele stilate vor arăta astfel:

Este simplu - dacă știi CSS.

WordPress Customizer este, de asemenea, excelent pentru a face modificări minore. Cu toate acestea, problema este că CSS a adăugat că este legat de temă, ceea ce înseamnă că se poate pierde dacă schimbați teme. Așadar, dacă vă place să testați diferite teme pe site -ul dvs. web, va trebui să actualizați codul de fiecare dată când treceți la o temă diferită, ceea ce nu este distractiv. În acest caz, instalarea unui plugin pentru a menține în siguranță stilurile de clasă CSS este o opțiune mult mai bună.

2. Folosind un plugin precum CSS personalizat simplu

După ce instalați pluginul CSS personalizat simplu, opțiunea CSS personalizată va fi adăugată la secțiunea Aspect . Acum trebuie doar să adăugați codul CSS și să actualizați CSS personalizat pentru a reflecta modificările. (Mai trebuie să atribuiți nume de clasă la elemente pe care doriți să le aveți stiluri comune.)

Plugin -uri de acest fel păstrează intact CSS personalizat, chiar dacă îți schimbi tema mai târziu. De asemenea, este un pic mai organizat decât WordPress Personalizer. Cu toate acestea, ambele metode nu sunt scalabile, deoarece pot fi ușor aglomerate atunci când salvați CSS personalizat pentru mai multe grupuri de elemente ale întregului dvs. site web.

De aceea, pentru stilul la nivel de site, abordarea recomandată este de a crea o temă pentru copii și de a-și actualiza foaia de stil. În acest fel, toate modificările dvs. sunt păstrate în siguranță în tema copilului dvs., chiar și după actualizările temei.

Deși eficient (și recomandat de codificatori), această metodă poate deveni rapid tehnică, deoarece necesită totuși muncă manuală-va trebui să stilați fiecare element (sau mai multe elemente care utilizează clase CSS), care consumă timp și nu sunt prietenoase pentru începători. De asemenea, va trebui să urmăriți numele clasei - imaginați -vă că doriți să editați o anumită clasă de butoane și vă derulați prin șiruri de cod interminabile.

Deci, dacă ai putea să scalați stilul fără a scrie o singură linie de cod? Acolo intră constructorii de pagini moderne de drag-and-drop precum Divi.

3. Folosind un constructor de site-uri fără cod precum Divi

Frumusețea utilizării unui constructor de site-uri moderne fără coduri, precum Divi, este că nu trebuie să scrieți CSS (sau orice cod deloc) pentru a aplica stiluri consistente pe site-ul dvs. Cu o interfață vizuală, puteți atribui stiluri secțiunilor, rândurilor, coloanelor și modulelor doar prin selectarea și personalizarea setărilor de design.

În Divi, creați presetări în loc de clase CSS. Ani de zile, Divi a oferit presetări bazate pe module, care vă permit să salvați și să reutilizați stiluri pentru module precum butoane, blurbs și imagini. Dar am lansat ceva și mai uimitor - presetări ale grupului de opțiuni care vă permit să mergeți și mai departe.

Înainte de presetările grupului de opțiuni, vi s -a permis doar să aplicați presetări între module. De exemplu, o presetare blurb poate fi folosită doar într -un alt blurb. Acum, puteți partaja chiar și setări între module.

În loc să personalizați un element simultan, presetările de grupuri de opțiuni vă permite să salvați stiluri pentru setări partajate - cum ar fi fundaluri, granițe sau stiluri de text - și să le aplicați la mai multe elemente diferite simultan. De exemplu, dacă o secțiune și o coloană folosesc ambele o culoare de fundal, puteți salva acea setare de stil ca presetare și aplicați -o pe toate elementele relevante pentru a crea un design coeziv.

Divi simplifică construirea și economisirea stilurilor ca presetări prin caracteristici de drag-and-drop fără a codifica, ceea ce face ca modificările de design la nivelul locului să fie mai rapid și mai accesibil-mai ales pentru non-codificatori.

Descărcați Divi 5

Să vedem ce vreau să spun mai detaliat mai jos

Presetările grupului de opțiuni Divi facilitează adăugarea claselor CSS

Presetările de opțiuni ale Divi iau conceptul de clase CSS și îl simplifică pentru non-codificatori. În loc să scrieți manual și să atribuiți clase, puteți utiliza acum constructorul vizual al Divi pentru a aplica stiluri de design partajate pe diferite elemente cu doar câteva clicuri.

Aceste presetări funcționează la nivelul opțiunilor, ceea ce înseamnă că vizează setări specifice de proiectare, cum ar fi culorile de fundal, bordurile sau distanțarea care sunt partajate pe mai multe tipuri de elemente. Deci, de exemplu, setările de fundal ale unei secțiuni pot fi aplicate pe o coloană, un rând și chiar un element de text.

Este un mod mai rapid, mai ușor și mai intuitiv de a menține designul site -ului dvs. web consecvent. Iată cum:

• Stiluri reutilizabile pe elemente: nu trebuie să personalizați manual fiecare element. Salvați stilurile de grup de opțiuni ca presetări și aplicați -le la orice element.
• Actualizări globale cu o singură editare: Modificați o presetare o dată și toate elementele care utilizează această presetare se vor actualiza automat. Acest lucru face ca ajustările de proiectare să fie rapide și eficiente pe întregul site web.
• Combinați mai multe presetări: strat și amestecați diferite presetări (de exemplu, granițe, umbre, stiluri de text) pe orice element pentru o combinație de design flexibil și creativ, fără a începe de la zero.
• Personalizați presetările implicite pentru stilurile de bază: salvați presetările ca implicite pentru a le aplica automat la toate elementele relevante.

Aflați mai multe despre presetările de grupuri de opțiuni

Cum să folosiți Divi pentru a adăuga clase CSS la WordPress fără codificare

Acum că știți care sunt presetările grupului de opțiuni Divi și că nu trebuie să știți codificarea pentru a lucra cu ei, am vrut să vă arăt cât de exact funcționează în cadrul Divi Builder. Ce trebuie să faceți pentru a crea, salva și aplica presetări de grup la orice setări de opțiuni, cum ar fi fundal, bordură, shadow box, etc. Pentru exemplul nostru, să personalizăm o pagină de prețuri.

Schimbarea fundalului butonului

Să presupunem că vreau să schimb fundalul butonului în violet pentru a se potrivi cu culoarea paginii. Așadar, voi personaliza butonul primei coloane și voi salva setările ca un buton de lumină primară . (Culoarea neagră din setările UI arată că editați o presetare de setare. Dacă ați selectat modul întunecat, va fi opusul.)

Acum, pentru a aplica aceleași setări la celelalte două butoane, voi schimba pur și simplu presetarea butonului la lumina primară.

Schimbarea umbrei unei coloane

Să adăugăm o umbră de cutii la toate coloanele. Voi adăuga o umbră de cutii la prima coloană și o voi salva ca presetare Shadow Box Shadow.

Pentru a aplica aceeași umbră pe celelalte două coloane, voi schimba pur și simplu presetarea umbrei cutiei în Shadow .

Modificarea presetărilor de text

De asemenea, puteți modifica stiluri pentru elemente de text, cum ar fi H1 și H2S. Iată cum funcționează actualizarea coloanelor H3 Preset:

După salvare, iată cum va arăta pagina de prețuri:

Deși am făcut modificări minore pentru a vă arăta cum funcționează, vă puteți imagina posibilitățile. Cu presetările grupurilor de opțiuni ale Divi, editarea stilurilor personalizate ale grupurilor este la fel de simplă ca un clic al unui buton. Dar acesta este doar vârful aisbergului. Puteți, de asemenea,:

• Setați presetările implicite pentru grupuri de opțiuni, astfel încât elementele de bază, cum ar fi titlurile sau butoanele moșteniți automat stilul dvs. pe site. După ce înțelegeți cum funcționează presetările implicite, nu veți reveni niciodată la utilizarea metodelor vechi.
• Presetări de grupuri de opțiuni de strat pe presetări de elemente pentru a adăuga un accent suplimentar - cum ar fi aplicarea unui fundal partajat și apoi stivuirea unui stil de umbră sau de frontieră pentru a face anumite elemente să iasă în evidență.

Am scris un întreg ghid despre tot ceea ce ar trebui să știți despre presetările grupului de opțiuni Divi. Citiți articolul complet pentru a obține idei de design și sfaturi despre cum să simplificați designul web bazat pe clasă cu Divi.

Aflați mai multe despre presetările de grupuri de opțiuni

Divi este un schimbător de jocuri pentru sistemul de proiectare bazat pe clasă

Presetările de grupuri ale Divi aduc puterea claselor CSS tuturor. Indiferent dacă proiectați solo sau colaborați cu o echipă, presetările vă grăbesc fluxul de lucru, se scalează frumos pe măsură ce site -ul dvs. crește și faceți un stil constant fără efort. Sunt mai rapide, mai eficiente și mult mai intuitive decât fluxurile de lucru tradiționale CSS.

Începeți cu Divi 5 astăzi

Divi 5 este în modul de actualizare complet. Lansăm noi funcții în fiecare săptămână, la fel ca presetările de grupuri de opțiuni, este bine să știm despre unitățile avansate, variabilele de proiectare CSS și multe altele care schimbă modul în care abordați proiectarea oricărui site web.

Aflați mai multe despre Divi 5

Divi 5 este un cadru puternic de proiectare, cu instrumente puternice, cum ar fi Divi Dash, Divi Quick Sites și Divi AI - Built pentru a vă ajuta să creați site -uri web personalizate, profesionale, fără a atinge o singură linie de cod. Nu este nimic care să te limiteze, gata să te preiați la viitorul proiectării site -ului?

Descărcați Divi 5