Doriți să aflați cum să personalizați o temă WordPress cu Plugin Elementor ?
Personalizarea temei dvs. WordPress este una dintre principalele sarcini atunci când construiți site-uri web WordPress. Întrucât controlează designul unui site web, acesta este locul în care mulți profesioniști își petrec cea mai mare parte a timpului.
Crearea unei teme WordPress personalizate presupune, de obicei, lucrul cu fișierele cu teme și cu un editor de cod. Schimbările de aspect se produc în fișierele de șabloane, modificările de design prin CSS De asemenea, va trebui să reîmprospătați constant fereastra browserului pentru a vă afișa personalizările, ceea ce poate fi un pic greoi.
Din fericire, cu Elementor, acest proces devine extrem de ușor, așa că poate doriți să îl verificați.
Dar înainte, haideți să descoperim împreună 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.
Care este o temă WordPress
O temă WordPress este, în esență, o colecție de șabloane care definesc aspectul vizual al unui site web WordPress.
Tema WordPress cuprinde tot ceea ce afectează designul unui site web, de la anteturi și subsoluri la schema de culori, aspect și altele.
Există o mulțime de teme disponibile, atât gratuite, cât și premium, care se potrivesc cu aproape orice industrie site-uri web de fotografie, site-uri de cluburi de gimnastică, site-uri de saloane de coafura, site-uri web de drept, și mult mai mult.
De ce să personalizați o temă WordPress?
Unul dintre principalele motive pentru crearea unui site web este promovarea afacerii tale. Ce modalitate mai bună de a face asta decât creați un site web unic care promovează stilul și designul companiei.
Vă puteți imagina Amazon, eBay sau Google fiind ceea ce sunt fără designul lor unic?
Desigur că nu, și acesta este unul dintre motivele pentru care dorim să personalizăm o temă WordPress. Vrem să-l facem unic și să ne adaptăm la mesajul companiei noastre.
De asemenea, uneori, sau mai degrabă, deseori, parcurgeți o temă WordPress plină de un design slab, culori care nu merg bine împreună sau o temă prea grea și care afectează doar performanța site-ului. web. Tema WordPress ar putea fi puternică, cu excepția acelui lucru care te deranjează. Personalizați-l și schimbați acest lucru v-ar putea rezolva toate problemele și crea o experiență mai bună a utilizatorului.
Cum să personalizați o temă WordPress
Există mai multe metode pentru a personaliza o temă WordPress.
- Manual, prin intermediul personalizatorului WordPress
- Cu codul
- Cu Elementor
Cum să personalizați manual o temă WordPress
Puteți personaliza tema WordPress la alegere prin intermediul personalizatorului WordPress încorporat. Dacă o faci fără cod, de multe ori ești limitat în ceea ce poți schimba. niste Teme WordPress premium vă permite mai multe opțiuni de personalizare, dar în esență nu există multe opțiuni de design pentru dvs.
Înainte de a ne afunda mai adânc în această zonă, am dori să subliniem că atunci când personalizați o temă WordPress existentă, cel mai bine este să utilizați o temă pentru copil și nu tema părintească.
Tema pentru copii WordPress
O temă pentru copii este o temă WordPress care are exact aceleași funcții și caracteristici ale altei teme WordPress, tema părinte. Tema copilului este utilizată pentru a personaliza și modifica în siguranță tema, fără a afecta tema părintească și fără a pierde capacitatea de a o actualiza.
Personalizator de teme WordPress
Așadar, acum că știm că este cel mai bine să lucrezi cu o temă pentru copii, hai să învățăm cum să personalizezi o temă cu Personalizatorul WordPress. Pentru a-l accesa, accesați tabloul de bord, faceți clic pe apariție pe partea stângă și alegeți Personalize.
Principalele caracteristici pe care le puteți modifica cu acest Customizer sunt următoarele:
Adăugarea titlului, logo-ului și pictogramei site-ului web
Pentru a adăuga sau modifica titlul, logo-ul sau pictograma, puteți pur și simplu accesa panoul de identitate al site-ului. și alegeți fiecare dintre aceste elemente pentru a le modifica.
Schimbarea culorilor temei WordPress
unele Teme WordPress vă va permite să le schimbați schemele de culori, dar nu toate, și de obicei sunt Teme WordPress premium. Dacă tema dvs. WordPress vă permite să schimbați schema de culori, veți vedea această opțiune când accesați Personalizatorul.
Meniuri de navigare adăugate
Personalizatorul vă permite, de asemenea, să adăugați și să modificați cu ușurință meniurile de navigare pe site.
Cum să personalizați o temă WordPress cu cod
Veți observa că în fila Aspect, aveți opțiunea de a alege editorul de teme. Făcând clic pe el, te va întâmpina cu o fereastră cu codul temei. Această opțiune necesită o bună înțelegere a codificării CSS și nu este recomandată pentru începători.
Aici veți avea acces la fișiere de genul style.css, funcții.phpși este exact pentru acest scenariu că veți avea nevoie de o temă pentru copii, pentru a nu vă rupe site-ul.
Cealaltă modalitate de a vă personaliza tema prin codare este să încărcați fișiere folosind o soluție FTP. Procesul implică crearea de credențe FTP prin intermediul furnizorului dvs. de găzduire, descărcarea și instalarea unei soluții FTP (cum ar fi FileZilla), logarea în contul dvs. și modificarea fișierelor dvs., pe care apoi le veți încărca prin același. Soluție FTP.
Descoperiți ghidul nostru pe Cum se instalează WordPress cu FileZilla
Dacă nu vă familiarizați cu codificarea, nu vă recomandăm această opțiune.
Personalizați cu ușurință o temă WordPress cu Elementor
Puteți face acest lucru direct din interfața de utilizator. Nu este nevoie să schimbați o singură linie de cod sau să reîncărcați o fereastră a browserului, chiar și o dată.
Elementor vă permite să schimbați fiecare element al site-ului rapid și ușor cu doar câteva clicuri de mouse și puteți chiar să optimizați aceste funcții pentru platforma mobilă.
Elementor face acest proces mult mai ușor folosind conținut dinamic și vă permite să vă previzualizați paginile. În acest fel, puteți vedea imediat cum modificările de design vor afecta site-ul și conținutul dvs. real.
Personalizați antetul și subsolul
Elementor vă oferă o flexibilitate completă atunci când vine vorba de proiectarea anteturilor și a subsolului. Știm cu toții cât de plictisitor poate fi faptul că ai o temă WordPress și nu poți schimba un singur aspect al designului antetului sau al subsolului. Ai nevoie de teme specializate, pluginuri etc.
Cu Elementor, este ușor.
1. Creați un șablon antet
Mai întâi configurați un nou șablon de antet. Pentru a face acest lucru, accesați Elementor> Șabloanele mele.
Aici, o modalitate de a începe este să apăsați butonul Adaugă nou în partea de sus. În ecranul următor, utilizați meniul derulant pentru a selecta Antetul ca tip de șablon de proiectat.
Puteți atinge acest ecran, făcând clic pe fila Antet din ecranul anterior și apoi apăsând butonul verde mare care apare.
Acesta va preselecta antetul ca tip de șablon. Oricum, trebuie să adăugați un nume potrivit pentru șablon (astfel încât să știți ce va fi ulterior) și apoi continuați făcând clic pe Creare șablon.
Te va ajunge aici.
Cu Elementor Pro, puteți alege dintre blocurile de antet pre-proiectate. Acestea sunt șabloane de design pe care le puteți folosi ca punct de plecare pentru propriul design, ceea ce vom face în acest caz.
Când treceți peste un bloc de antet, faceți clic Insera vă permite să începeți să-l proiectați imediat. În caz contrar, faceți clic mai întâi pe imagine pentru a vizualiza o versiune mai mare. Apoi puteți apăsa întotdeauna Insera în partea de sus.
În caz contrar, dacă doriți să începeți de la zero, doar închideți fereastra făcând clic X în colțul din dreapta sus.
2. Modificați designul de bază al antetului
După ce ați introdus noul antet, primul lucru pe care îl veți observa este că logo-ul și meniul pe care le-am configurat mai devreme sunt deja acolo.
Acesta este exact motivul pentru care le-am reunit și vom discuta despre cum să le personalizăm. Cu toate acestea, să vedem mai întâi cum să personalizați în sine secțiunea antet.
Pentru a face acest lucru, treceți cu mouse-ul peste el și faceți clic pe butonul de editare din partea de sus. Aceasta deschide o listă de opțiuni de editare în partea stângă.
Iată ce puteți controla în diferite meniuri:
- Aspect - Lățimea secțiunii de control, dimensiunea spațiului dintre coloane, înălțimea, coloana verticală și plasarea conținutului, eticheta HTML atribuită și structura generală.
- Stil - Aici puteți schimba culoarea de fundal, inclusiv efecte hoverchiar adăugați imagine sau videoclip dacă doriți, adăugați efecte de suprapunere, graniță și divizor, precum și modificați setările tipografiei.
- avanced - Această parte vă permite să adăugați atribute CSS precum marginea și indexul z, animații, ID-uri și clase. Vă permite, de asemenea, să faceți secțiunea lipicioasă și să controlați setările, astfel încât să adăugați unele CSS personalizate.
Toate cele de mai sus sunt destul de auto-explicative și veți obține rapid ceea ce doriți.
3. Personalizați elementele antetului
Cu toate acestea, nu puteți edita numai secțiunea antet în ansamblu, ci și elementele incluse în ea. De exemplu, pentru a personaliza logo-ul site-ului, trebuie doar să faceți clic pe el. De asemenea, acest lucru vă va oferi opțiuni de editare pe partea stângă.
În cazul logo-ului, aceasta vă oferă următoarele opțiuni:
- Conţinut - Schimbați dimensiunea imaginii, alinierea și locul unde este legată.
- Stil - Controlați lățimea și înălțimea, adăugați efecte CSS și efectul de ridicare, includeți bordura și umbra dacă doriți.
- avanced - Aici veți găsi în esență aceleași opțiuni ca și pentru secțiunea antet.
Utilizați setările pentru a personaliza sigla așa cum doriți să se afișeze bine în antet. De asemenea, rețineți că fiecare articol are propriul său tip de opțiuni, așa că asigurați-vă că le verificați.
4. Adăugați articole
Desigur, cu Elementor puteți adăuga și elemente în antet. Doar faceți clic pe simbolul din dreapta sus pentru a vedea ce este disponibil.
Când editați un șablon de antet, Elementor afișează automat blocurile relevante din partea de sus a listei, ceea ce are cel mai mult sens în circumstanțe. În acest caz, acestea sunt lucruri precum logo-ul site-ului, meniul Nav și titlul site-ului.
De exemplu, dacă doriți să adăugați titlul site-ului de lângă logo, trebuie doar să îl trageți și să-l plasați pe el. Cu toate acestea, șablonul de antet pe care l-am ales în prezent ne permite să îl adăugăm deasupra sau sub logo-ul. Dar este o problemă care va fi rezolvată cu ușurință.
Într-un caz ca acesta, plasați cursorul peste antet și utilizați simbolul plus –+-pentru a adăuga o secțiune de mai sus.
Faceți clic aici pe butonul violet pentru a alege un design cu trei coloane.
Apoi trageți elementele din secțiunea antet existentă în noua secțiune și adăugați titlul site-ului web în mijloc.
Dar stai, stilul este total diferit! nici o problema. Faceți clic dreapta pe antetul existent și selectați Copie. Apoi faceți clic dreapta pe noua secțiune și faceți clic aici Stil de lipire. Elementor va aplica apoi stilul secțiunii existente, pe care îl puteți închide mai târziu.
Puteți face același proces cu oricare dintre celelalte elemente de antet și, desigur, cu toate celelalte elemente incluse în Elementor.
Personalizați un șablon unic de postare
În Elementor, puteți personaliza, de asemenea, un singur șablon de postare. Iată cum :
1. Creați un nou model
Crearea unui șablon funcționează în mod obișnuit. Cu toate acestea, de data aceasta alege Singur ca tip de model. Apoi, mai jos, alege șablonul unic pe care vrei să îl editezi. În acest exemplu, cel al Post.
Dacă doriți să creați un nou design de pagină, modificați pagina 404 (mai multe despre asta mai târziu) sau modificați un tip de post personalizat anume, ai alege altceva. În ambele cazuri, introduceți un nume și continuați.
În ecranul următor, puteți alege dintre șabloanele predefinite, de obicei. Cu toate acestea, în acest caz, dorim să creăm un model nou de la zero. Așa că faceți clic pe X în partea dreaptă sus pentru a închide această fereastră.
2. Configurați previzualizarea
Apoi setați fereastra de previzualizare la o postare existentă. Puteți face acest lucru făcând clic pe pictograma ochi din partea de jos a opțiunilor editorului, apoi Setări.
În meniul care se deschide, sub Anunţ conținut dinamic, alege Publica. După aceea, în linia următoare, puteți căuta și alege o postare existentă după nume.
După ce ați făcut asta, atingeți Aplică & Anunţ. Deși nu veți putea vedea nimic în acest moment (deoarece nu există nimic în pagină), acesta va spune Elementor să utilizeze datele din acest post de acum încolo. Vei vedea în curând ce înseamnă asta.
3. Să creăm secțiunea de mai sus
În primul rând, vom crea secțiunea de mai sus. Aici veți găsi, de obicei, lucruri precum titlul postului și metadatele precum autorul, data și categoria.
Primul pas este să faceți clic pe semn + și crearea unei secțiuni cu o singură coloană.
Când o faceți, în secțiunea de aspect, aveți opțiunea de a controla lățimea, înălțimea, poziționarea și stilul. În acest caz, nu sunt multe de făcut aici. De asemenea, nu vă faceți griji, puteți întotdeauna să vă întoarceți și să faceți modificări mai târziu.
Apoi trageți widgetul pentru titlul postării la noua secțiune.
Când o faceți, asigurați-vă că utilizați toate opțiunile disponibile pentru a ajusta designul și aspectul după bunul plac. De exemplu, aici sunt setările mele pentru a face acest lucru:
Există, de asemenea, o caracteristică interesantă pe care ar trebui să o înveți. Când faceți clic pe simbolul cheie al titlului postării, puteți adăuga conținut static înainte și după datele dinamice.
De exemplu, dacă creați un șablon pentru o anumită categorie de post, cum ar fi știri sau rețete, îl puteți adăuga la titlul postării astfel:
În felul acesta, aceste date vor apărea pentru fiecare postare din acea categorie. Nu voi folosi acest lucru în acest moment, dar am considerat că este o notă laterală importantă pentru tine.
Sub titlul postării, vom insera Post Informație widget pentru a vizualiza metadatele postării.
Iată setările pe care le folosesc:
În plus, am folosit opțiunile de styling pentru ca designul să se potrivească restului paginii. Asigurați-vă că faceți la fel.
4. Configurați corpul postului
După antet, este timpul să creați corpul paginii. Dacă doriți ca această parte să aibă un design diferit de cel al antetului, va trebui să configurați o nouă secțiune. Cu toate acestea, îl păstrez simplu, deci nu este nevoie să o fac.
Primul lucru pe care dorim să îl introducem este imaginea prezentată. Pentru aceasta, puteți plasa widgetul cu același nume sub ceea ce este deja pe pagină.
Practic nu am schimbat niciuna dintre setări, ci doar am lăsat totul așa cum este.
Apoi a venit momentul ca conținutul să fie postat. Și aici aveți un bloc corespunzător.
Veți observa că pentru imagini și conținut postat, Elementor trage automat ceea ce este deja pe site-ul web. Efectuați toate ajustările la designul noului bloc de care aveți nevoie, de exemplu, jucați cu setările tipografice.
În afară de asta, asta este tot. Nu este prea multă muncă de făcut aici pentru a putea trece la ultima parte.
5. Configurați subsolul
În acest caz, dorim ca subsolul să arate profilul autorului, opțiunile de partajare și comentariile cititorului. Pentru a face acest lucru, în primul rând, trebuie să creăm o nouă secțiune cu două coloane. Pentru a crea mai mult spațiu pentru profilul de autor, îl puteți seta pe un aspect 66.33.
După acel loc, widgetul Caseta de autor în secțiunea din stânga.
Asigurați-vă că personalizați stilul pentru a se potrivi nevoilor dvs. Am adăugat puțină culoare de fundal și am ajustat ușor setările de tipografie.
După aceea, este timpul să adăugați blocul Share Buttons din partea dreaptă.
Puteți vedea setările mele în ecranul de mai sus.
După aceea, tot ce mai rămâne este să creăm o secțiune încă o coloană în jos și să glisăm și să lăsăm widgetul Postare comentarii în el.
(Apropo, dacă aveți vreodată probleme în localizarea oricăruia dintre aceste widgeturi, utilizați doar funcția de căutare).
Faceți ajustări la secțiunea de comentarii pe care le considerați necesare (l-am lăsat așa cum este) și sunteți gata să postați. Iată designul finalizat:
Personalizați șablonul de arhivă
1. Configurați șablonul de arhivă WordPress
Până acum știți deja soluția pentru crearea de modele noi. Singura diferență este că în acest caz veți alege arhivă ca tip de model.
După aceea, ca de obicei, veți primi o serie de blocuri din care puteți alege sau puteți, de asemenea, să vă creați propriul model de la zero. Cu toate acestea, pentru arhive aveți aproximativ doar două widget-uri Elementor care sunt importante oricum.
2. Definiți titlul arhivei
Primul bloc despre care vreau să vorbesc este titlul arhivei Titlul arhivei.
În plus față de setările obișnuite de sub Stil și avansat, puteți găsi o opțiune importantă atunci când faceți clic pe simbolul cheie de mai jos Titlu.
Aici puteți activa și dezactiva dacă Elementor afișează tipul de arhivă pe pagină ca partea în care scrie Autor: mai jos. Acest lucru se întâmplă prin butonul de sub Includeți contextul.
Apropo, ca de obicei, puteți previzualiza diferite arhive folosind setări de previzualizare (Simbol ocular> Setări). În acest fel puteți vedea designul pentru categorii unice, etichete, autori și multe altele. Ține minte.
3. Folosiți blocul de publicații de arhivă
Al doilea widget important pentru arhive este Arhiva postări. Aceasta aduce toate postările aparținând oricărei arhive dintr-o singură pagină. Când alegeți un șablon, acestea sunt deja acolo, dar le puteți adăuga cu ușurință și dvs. cu acest bloc.
Haideți să aruncăm o privire la opțiunile pe care vi le oferă pentru personalizarea paginilor dvs. de arhivă:
- Piele - Alegeți să afișați postările dvs. într-un design clasic sau în stil de card.
- Coloane - Stabilește numărul de coloane în care sunt afișate postările tale.
- Afișare imagine - Activați imaginile prezentate pe paginile de arhivă
- Zidărie – Afișează obiecte în design de zidărie sau nu.
- Dimensiune imagine - Mărimea elementului de imagine ar trebui să fie utilizat în paginile de arhivă.
- Titlu - Doriți să afișați sau nu titluri de postare?
- Titlu Etichetă HTML - Dacă da, ce etichetă HTML trebuie înfășurată în jurul acesteia?
- Extras - Includeți fragmente din postările dvs. sau afișați doar titlul.
- Lungimea extrasului - Determinați lungimea extractelor.
- Metadata - Definește metadatele post disponibile pentru vizitatori.
- Separator Între - Simbolul separator între informațiile despre metadate.
- Citeste mai mult - Includeți un link „citiți mai multe”, da sau nu?
- insignă - Vă permite să adăugați mai multe informații la postări, cum ar fi categorii și etichete.
- Insigna de taxonomie - Aici puteți decide ce informații să includeți.
- Avatar – Cu aceasta poți schimba poza de profil a autorilor articolelor
Pe lângă cele de mai sus, mai aveți câteva opțiuni. Sub paginare, puteți defini modul în care ar trebui gestionată paginarea arhivei. De exemplu, cum se afișează, numărul de pagini pe care trebuie să le includă și alinierea textului.
Oricum, Avansat vă permite să setați mesajul să fie afișat atunci când un vizitator ajunge pe o arhivă goală. Orice altceva ar trebui să fie familiar. Doar rețineți că opțiunile de stil se schimbă în funcție de pielea pe care ați ales-o.
4. Controlați numărul de publicații pe arhivă
O notă rapidă asupra șabloanelor de arhivă. Pentru a modifica numărul de postări care apar într-o arhivă (sau pe pagina dvs. de blog), trebuie să faceți acest lucru în WordPress sub Setări> Citire.
Aici, trebuie doar să introduceți numărul de postări pe care doriți să le vadă vizitatorii.
personalizare facil Tema WordPress cu Elementor
Personalizarea temelor WordPress este mișcarea multor profesioniști. Deși acest lucru implică de obicei multă codare și editare a fișierelor, cu Elementor acest lucru nu mai este necesar.
Așa cum ați văzut mai sus, pluginul este un editor de teme WordPress complet. Vă permite să personalizați fiecare parte din ea din interfața sa de utilizator. Puteți edita șabloanele site-ului web, subsolul, șabloanele de pagini și postări, șabloane de arhivă și multe altele.
Cu posibilitatea de a utiliza conținut dinamic și previzualiza orice parte a site-ului dvs. web, puteți implementa toate personalizările la modă
Pe scurt, Elementor facilitează personalizarea temei WordPress. În loc să efectuați cu atenție modificări cu zeci de fișiere și sute de linii de cod, puteți face rapid totul într-un singur loc.
Obțineți Elementor Pro acum!
Concluzie
Iata ! Asta este pentru acest articol care vă arată cum să personalizați o temă WordPress cu Page Builder Elementor. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
Cu toate acestea, puteți consulta și resursele noastre, 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.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
