Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

Există mai multe modalități de a adăuga cod CSS personalizat pe un blog WordPress.

Astăzi vă voi explica punctele tari și punctele slabe ale celor două metode diferite pe care vi le propun, astfel încât să puteți alege cea care vi se potrivește cel mai bine.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Cum puteți găsi articolele pe care doriți să le personalizați

Odată ce ai izolat partea din tema dvs. WordPress pe care doriți să o schimbați (de exemplu, titlul unui articol), va trebui determinați proprietățile CSS aplicat la acesta, astfel încât să puteți face modificările corespunzătoare. Din fericire, acest proces nu este complicat.

CSS utilizează selectoare pentru a determina ce elemente vor experimenta diferitele modificări specifice. De obicei, acest lucru se realizează prin specificarea unui " clasă "A unui element (sau element DOM). Cu toate acestea, CSS poate fi, de asemenea, utilizat pentru a defini aspectul unui întreg element (de exemplu, eticheta „ ") sau folosind identificatorul etichetei.

Din fericire, browserele populare ne permit să vedem diferitele selectoare și declarații care sunt aplicate elementelor paginii cu doar câteva clicuri. Pe Google Chrome, de exemplu, trebuie doar să evidențiați o anumită parte a documentului și apoi să faceți clic dreapta, ca în exemplul următor.

blogpascher-inspecție

Făcând clic pe " Inspectați elementul În meniul derulant care apare, veți vedea codul HTML al paginii într-o fereastră nouă, cu elementul inspectat evidențiat în fereastra din dreapta (sau mai jos). Puteți vedea un exemplu de mai jos.

blogpascher-logo

Textele acestor elemente (sau atribute) Evidențiat în roșu vă arată diferitele stiluri specifice aplicabile articolului pe care l-ați evidențiat prin inspectarea codului.

Citiți și: Cum se adaugă un meniu vertical cu CSS în Editorul Visual

De exemplu, elementul „ marimea fontului Vă spune că fontul afișat în elementul evidențiat este dimensionat în pixeli 13. Descriptorii sunt înconjurați de bretele și precedați de selectori. Numele fișierului de foaie de stil corespunzător este afișat doar în dreapta selectoarelor.

Odată ce aveți aceste informații în minte, schimbarea stilului devine ușoară. De exemplu, dacă doriți să schimbați fontul de la 13px la 14px, pur și simplu căutați fișierul dvs. de foi de stil, selectorul care corespunde cu elementul evidențiat. În general, este sub această formă: (« # plugin-infos .block-content"). Apoi puteți modifica diferitele valori ale atributelor.

Puteți face același lucru pe Firefox, doar evidențiați o anumită parte a paginii, faceți clic dreapta pe element, apoi selectați „ Inspectați elementul În meniul care apare.

Cum funcționează WordPress și CSS împreună

Este un fapt că Teme WordPress sunt create diferit. Așa că rețineți că dvs WordPress temă s-ar putea să nu respecte 100% ceea ce ați citit în secțiunile următoare.

Acestea fiind spuse, este mai mult decât probabil ca CSS-ul folosit pe blogul dvs. WordPress să fie localizat într-un fișier numit „ style.css “. Acesta este numele comun pentru o foaie de stil pentru orice tip de site web, nu doar WordPress.

Vezi și: Cum de a schimba dimensiunea imaginilor Gravatar pe WordPress

Acum este timpul să parcurgeți diferitele procese de editare.

Metoda # 1: editarea fișierului de stil al temei dvs. WordPress

Există două modalități de a accesa fișierul style.css al temei.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

Primul este să-l faci din tabloul de bord WordPress. În meniul din partea stângă, selectați meniul " apariție „Și apoi” editor ".

meniu-editor-in-picture-edge

Odată ce vă aflați pe pagina editorului, veți vedea o listă de fișiere pe o bară verticală din partea dreaptă a paginii. Derulați prin lista de fișiere. Veți vedea un fișier numit „ Stil de stil Style.css În partea de jos a paginii.

Dacă faceți clic pe numele acestui fișier, acesta va fi încărcat și afișat în editorul din mijloc. Puteți utiliza acest ecran pentru a edita fișierul.

meniu WordPress-redactor-cod

Cealaltă modalitate de a găsi foaia de stil este să răsfoiți sistemul de operare al furnizorului dvs. de găzduire și să găsiți fișierul în WordPress temă (folosind un client FTP). Locația exactă va varia în funcție de furnizorul dvs. de găzduire. În exemplul de mai jos, numele site-ului web (în cazul nostru thecare) este un dosar în folderul public_html.

Deoarece WordPress este instalat, puteți vedea folderul wp-content în „thecare”. Subfolderul wp-content este un alt folder numit „ wp-teme", care este locul în care toate Teme WordPress sunt instalate.

De pe acest site web folosește o temă numită „ Noutăți », Fișierul de stil« style.css Este localizat în folderul " Newsletter-mamă ".

Newsletter părinte-folder-800x401

Metoda # 2: utilizarea unui plugin pentru a modifica CSS

Poate că cel mai convenabil mod de a edita CSS-ul blogului dvs. WordPress este utilizarea unui plugin.

Unul dintre principalele avantaje ale utilizării unui plugin este similar cu cel al temelor pentru copii. da actualizați tema WordPress, modificările dvs. nu vor fi suprascrise, deoarece vor fi stocate separat și nu printre fișierele tematice. Celălalt avantaj, desigur, este că nu trebuie să creați o temă pentru copii.

Iată câteva plugin-uri premium pe care le puteți utiliza și pentru a modifica codul CSS din tema dvs. WordPress:

1. Creion galben: editor de stil CSS vizual

Yellow Pencil este un editor de stil vizual pe care îl puteți utiliza cu orice temă pentru a vă personaliza site-ul în câteva minute (fonturi, culori, animații și multe altele ...).Plugin-ul WordPencil YellowPencil Visual CSS Style Editor

Ce WordPress plug-in premium va crea stiluri CSS prin fundal în timp ce te joci cu culorile de parcă ar fi un joc. A fost conceput atât pentru începători, cât și pentru utilizatori cu experiență.

Descoperiți și noi Pluginele 5 WordPress pentru a afișa notificări

Nu sunt necesare cunoștințe de codare. Însă WordPress plug-in are un editor CSS bun pentru cei cărora le place să codeze. Puteți codifica live cu acest editor și vă puteți personaliza CSS.

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

Descarca | Demo | web hosting

2. Custom JS și CSS pentru Gutenberg

Pluginul premium WordPress Custom JS și CSS pentru Gutenberg vă va permite să adăugați un număr nelimitat de stiluri personalizate editorului WYSIWYG pentru postările și paginile dvs. WordPress. Este pe deplin compatibil cu versiunea Gutenberg a WordPress.

JS și CSS personalizate pentru pluginul Gutenberg WordPress

Puteți crea pur și simplu un stil nou cu un editor CSS ușor de utilizat. Acest plugin WordPress extinde caracteristicile câmpuri personalizate a site-ului dvs. web și vă oferă posibilitatea de a modifica câmpurile personalizate cu un modul de personalizare dinamic și puternic. și funcționalitatea previzualizare în timp real din acest plugin WordPress îl face foarte confortabil și ușor de utilizat.

Descarca | Demo | web hosting

3. CSS SiteOrigin

Este de departe pluginul WordPress care oferă cele mai multe opțiuni din această listă. Cel mai uimitor lucru despre acesta din urmă este că este gratuit. Acest plugin WordPress este singurul care nu poate fi găsit în personalizator.

SiteOrigin CSS - plugin WordPress

După instalarea și activarea pluginului, trebuie să navigați la următoarea locație „ Aspect> CSS personalizat Pentru a accesa ediția CSS a pluginului. Pe această pagină, puteți vedea un editor de text care nu oferă previzualizare în timp real. 

Citiți și articolul nostru pe 10 pluginurile WordPress pentru a crește vânzările site-ului dvs.

Pentru a accesa acesta din urmă, trebuie să faceți clic pe unul dintre cele două butoane care apar în stânga, chiar deasupra editorului. Butonul cu pictograma ochi va afișa un editor CSS vizual pe care pasionații îl vor aprecia. Pictograma cu săgețile de extensie va afișa un editor de text care va implica o stăpânire a codurilor CSS.

Descarca | Demo | web hosting

4. CSS personalizat simplu

CSS personalizat simplu este unul dintre cele mai populare plugin-uri.

CSS personalizat simplu - plugin WordPress WordPress.org

Descoperiți și noi Cum să vă faceți blogul rapid: gestionarea fișierelor CSS și JS.

A fost instalat de peste 100 de ori și a primit un rating de cinci stele.

Descarca | Demo | web hosting

5. WP Adăugați CSS personalizat

Adăugați WP CSS personalizate este un plugin care vă permite să schimba aspectul unui blog WordPress articole întregi sau doar individuale. Aceasta este o opțiune excelentă dacă căutați flexibilitate în personalizarea articolelor.

wp-add-personalizat

Pluginul a fost descărcat de peste 10.000 de ori și se bucură în prezent de 4,3 stele.

Descarca | Demo | web hosting

6. Tema Junkie personalizat CSS

Dacă sunteți în căutarea unei soluții care să ofere o previzualizare live a modificărilor dvs., vă recomandăm să utilizați Tema Junkie CSS personalizată

Tema-junkie-css

Această soluție adaugă un manager CSS personalizat pe tabloul de bord, unde puteți adăuga propriile dvs. stiluri. De asemenea, oferă o alternativă la folosind o temă pentru copii.

Descarca | Demo | web hosting

Alte resurse recomandate

De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.

Concluzie

Aici! Asta este pentru acest tutorial, sper că veți reuși să adăugați cod CSS personalizat pe blogul dvs. WordPress în 2 metode, dacă aveți comentarii sau sugestii, nu ezitați să ne spuneți în secțiunea rezervată pentru acestea.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dacă v-a plăcut acest articol, nnu ezita să distribuie pe rețelele de socializare preferate

...  

%d bloggerilor le place această pagină: