X

Cum să creezi un layout WordPress personalizat (Pas cu Pas)

Cum să creezi un aspect personalizat pentru postări

Dorești să creezi layout-uri WordPress personalizate pentru site-ul tău pentru a-i oferi un aspect unic?

Indiferent de nivelul tău de cunoștințe, este ușor să construiești un layout WordPress personalizat fără a fi nevoie să angajezi un dezvoltator.

În acest articol, vă vom arăta cum să creați un aspect personalizat WordPress folosind cel mai bun plugin de creare pagini WordPress, SeedProd. De asemenea, vă vom arăta cum să faceți acest lucru folosind Beaver Builder.

Mulți dintre voi probabil vă întrebați, de ce să creați un aspect personalizat când puteți pur și simplu alege o temă premium și să vă începeți pagina cu unul dintre aspectele sale predefinite.

De ce să creezi layout-uri personalizate WordPress

Vei găsi o serie de teme premium WordPress care oferă mai multe layout-uri uimitoare încorporate, gata de utilizare imediat. Poți opta cu siguranță pentru aceste layout-uri frumoase și poți oferi site-ului tău un aspect atrăgător.

Dar problema cu astfel de layout-uri este că, datorită disponibilității lor imediate, sunt utilizate pe scară largă de sute și mii de utilizatori pe web.

Asta înseamnă că, dacă folosești un layout preconstruit pentru site-ul tău WordPress, nu vei putea oferi un aspect distinct decât dacă îl personalizezi mult. În plus, aceste layout-uri s-ar putea să nu îți îndeplinească cerințele. Crearea unui layout personalizat este cea mai bună opțiune în aceste cazuri.

Dacă alegi să folosești Gutenberg (editorul de blocuri), nu vei avea ușurința și libertatea de a-ți proiecta site-ul așa cum dorești. S-ar putea să fie necesar să adaugi propriul CSS pentru a-ți îmbunătăți șabloanele personalizate pentru postări unice.

Crearea unui layout personalizat WordPress cu SeedProd

Cel mai bun mod de a crea aspecte personalizate uimitoare vizual pentru site-ul dvs. WordPress este să folosiți constructorul SeedProd.

SeedProd

SeedProd este prietenos cu începătorii și vă oferă posibilitatea de a edita partea frontală a site-ului dvs. vizual. Nu va trebui niciodată să folosiți coduri sau să faceți modificări oarbe doar pentru a vedea o previzualizare și a realiza că nu funcționează.

SeedProd este, fără îndoială, modalitatea #1 de a crea aspecte personalizate WordPress. Puteți citi mai multe despre acest plugin aici: Recenzie SeedProd.

Pentru a crea un aspect personalizat pentru site-ul dvs., va trebui să instalați și să activați SeedProd pe site-ul dvs.

Apoi, accesează panoul tău wp-admin și vei vedea SeedProd în bara de sarcini din stânga.

seedprod în meniul wp

Acest lucru îți va permite să accesezi tabloul de bord SeedProd. În interior, poți alege să folosești un kit de temă predefinit sau poți construi pagini de destinație individuale. Pentru acest tutorial, vom selecta Theme Builder » Theme Template Kits.

kituri de șabloane de teme în seedprod

Acum vei vedea o bibliotecă de kituri din care poți alege. Aceste kituri vin cu imagini de prezentare și conținut demonstrativ pe care le poți edita rapid pentru a le face ale tale.

șablon temă de pornire în Seedprod

Odată ce alegi un kit, toate paginile și postările din kit vor fi importate și publicate pe site-ul tău. Poți folosi acest lucru pentru a crea șabloane pentru paginile și postările tale.

Pentru a personaliza layout-ul postării, selectează Edit Design sub Single Post.

editează postare unică în seedprod

Acum se va deschide constructorul vizual drag and drop unde vei vedea o previzualizare live a paginii tale, împreună cu opțiuni de personalizare pentru a o edita.

Pentru a face modificări la șablonul paginii tale personalizate, poți pur și simplu să selectezi orice postare și vei primi opțiuni pentru a edita conținutul, tipografia, culoarea, fundalul și multe altele. Pentru a adăuga noi blocuri, pur și simplu trage un bloc din meniul din stânga și plasează-l unde dorești în designul tău, astfel:

drag and drop în seedprod

Vei vedea blocuri predefinite de adăugat:

  • Postări
  • Titlul postării
  • Conținut postare
  • Rezumat Articol
  • Biografia autorului postării
  • Comentarii
  • Logo site
  • Navigare postări

...și multe altele. Veți vedea, de asemenea, blocuri pentru a adăuga text, spațiere, imagini, butoane, coloane, formular de contact, cronometre, concursuri și alte widget-uri.

SeedProd se integrează, de asemenea, cu WooCommerce, astfel încât puteți adăuga câmpuri personalizate precum grile de produse, butoane de adăugare în coș și de finalizare a comenzii și multe altele.

Practic, aveți control complet asupra fiecărei noi postări pe care o publicați pe blogul dvs. WordPress.

SeedProd este atât de ușor de utilizat, chiar și pentru începători, nu sunt multe de învățat.

Vă vom arăta elementele de bază și puteți explora singur funcțiile avansate. Când selectați un bloc, veți vedea că este evidențiat cu portocaliu. Apoi veți vedea un meniu care apare deasupra blocului, unde puteți schimba poziția, șterge, duplica și multe altele.

șterge bloc în seedprod

Pentru a schimba sau șterge un rând întreg, puteți selecta rândul și veți vedea că este evidențiat cu violet.

șterge rând în seedprod

Astfel, puteți evidenția rândul și folosi simbolul Plus pentru a adăuga un rând nou. Veți vedea layout-uri din care puteți alege.

seedprod adaugă și trage rând

Apoi puteți selecta pictograma de navigare pentru a o trage și plasa în altă zonă a paginii. Pentru a reordona rândurile și blocurile, tot ce trebuie să faceți este să le apucați și să le mutați unde doriți.

SeedProd vine cu secțiuni și blocuri inteligente pe care le puteți adăuga pe pagina dvs. În meniul din stânga, selectați fila „Secțiuni”. Aici veți găsi anteturi gata făcute, apeluri la acțiune, FAQ-uri, subsoluri și multe altele.

secțiuni și blocuri în seedprod

Puteți alege blocuri de conținut pe toată lățimea sau puteți alege unul cu un aspect prestabilit. Folosind aceste funcționalități, puteți crea un aspect personalizat pentru site-ul dvs. în cel mai scurt timp. De asemenea, puteți adăuga un nume de șablon și îl puteți salva pentru utilizare ulterioară.

Designurile sunt automat responsive. Puteți chiar folosi previzualizarea mobilă pentru a vă asigura că designul site-ului dvs. arată bine pe dispozitivele mobile.

previzualizare mobilă în seedprod

Asta e tot! Este cu adevărat atât de simplu să construiți un aspect personalizat pentru site-ul dvs. web cu SeedProd.

SeedProd este, fără îndoială, cea mai bună opțiune pentru a crea un aspect personalizat pentru WordPress. Obțineți șabloane simple prestabilite pentru postări, care fac foarte ușor să creați diferite aspecte pentru site-ul dvs.

În plus, puteți continua să creați postări noi de WordPress folosind acest șablon pe care l-ați creat.

Există o versiune gratuită a SeedProd în depozitul de pluginuri WordPress. Versiunea pro vă oferă acces la funcționalități excelente pentru site-ul dvs.

Începeți cu SeedProd »

Crearea unui layout personalizat WordPress cu Beaver Builder

Pluginul Beaver Builder este un plugin popular de creare pagini prin tragere și plasare care vă permite să creați unele dintre cele mai uimitoare aspecte pentru blogul dvs. WordPress în câteva minute.

Beaver Builder

Cel mai bun lucru la acest plugin este nivelul de flexibilitate pe care îl oferă. Puteți prelua controlul asupra aproape oricărui lucru.

Culori, texte, fonturi, imagini – totul poate fi complet personalizat pentru a obține aspectul exact pe care l-ați visat dintotdeauna.

Un alt lucru pe care îl veți aprecia la Beaver Builder este că, spre deosebire de alte pluginuri de construire a paginilor, este complet prietenos cu începătorii și nu trebuie să petreceți ore întregi încercând să înțelegeți cum să îl utilizați. În plus, oferă și zeci de șabloane vizual uimitoare pentru a vă ajuta să începeți.

Consultați recenzia Beaver Builder aici. Să vedem acum cum să creați aspectele personalizate folosind acest plugin.

Pasul 1: Instalarea și configurarea Beaver Builder în WordPress

Primul pas este să instalați și să activați Beaver Builder pe site-ul dvs. Puteți descărca pluginul accesând site-ul Beaver Builder. Odată activat, accesați Setări » Page Builder.

setări Beaver Builder

Aici puteți introduce cheia de licență pentru a activa suportul și a primi actualizări. Odată finalizat, sunteți gata să creați primul dvs. layout personalizat.

Pasul 2: Crearea primului dvs. layout personalizat

Pentru a crea primul dvs. layout personalizat, accesați Toate paginile » Adăugare pagină nouă din tabloul de bord WordPress. În editorul de text, veți avea opțiunea de a comuta la constructorul de pagini.

Pur și simplu faceți clic pe această opțiune și veți vedea fila page builder lansată. Veți vedea mai multe opțiuni de șabloane aici. Alegeți-l pe cel care vă place cel mai mult pentru aspectul dvs. Puteți, de asemenea, să faceți clic pe săgeata derulantă și să selectați tipul de aspect pe care îl doriți. Acesta poate fi pentru paginile dvs. de destinație sau paginile de conținut.

Odată ce acest lucru este gata, veți fi direcționat către constructorul său drag and drop. Pentru a edita un anumit câmp, trebuie doar să treceți cursorul peste acea zonă specifică, apoi să faceți clic pe ea și să începeți personalizarea designului dvs.

Puteți adăuga până la 6 coloane, bare laterale, audio-uri, imagini, separatoare și multe altele la aspectele dvs. Pentru a adăuga rânduri și bare laterale, faceți clic pe filele Row Layouts. Apoi trageți numărul de coloane dorit și plasați-l în constructorul vizual.

Beaver Builder


Acest lucru vă permite să vă organizați ierarhia șablonului.

Odată ce coloanele dvs. sunt adăugate, faceți clic pe ele și personalizați-le pentru a corespunde cerințelor dvs. Puteți schimba fundalul, culoarea textului, adăuga linkuri, texte, borduri și multe altele la coloanele dvs. Aceste coloane și rânduri pot fi, de asemenea, salvate pentru utilizare ulterioară. Pentru aceasta, faceți clic pe butonul Save de la sfârșitul ferestrei pop-up.

Pentru alte elemente, trebuie să utilizați opțiunea Basic Modules. Aveți, de asemenea, mai multe alte elemente pe care le puteți adăuga la aspectul dvs., cum ar fi butoane, acordeoane, tabele de prețuri, hărți, cronometre și multe altele.

Beaver Builder

Pur și simplu trebuie să trageți elementele din dreapta și să le plasați în constructorul vizual din stânga dvs. Fiecare dintre aceste elemente este personalizabil. Deci, de exemplu, dacă doriți să adăugați un nou titlu, faceți clic pe Heading și trageți-l și plasați-l în aspectul dvs. După aceea, faceți clic pe elementul Heading pentru a-l personaliza.

Veți avea 3 file diferite aici. General, Stil și Avansat. Prima vă permite să adăugați textele, linkurile etc. la antetele dvs. A doua filă vă permite să stilizați antetul cu diferite culori, fonturi etc. Opțiunea Avansat vă permite să lucrați la margini, vizibilitate, responsivitate, animație etc.

Beaver Builder


Puteți adăuga oricâte elemente și module doriți folosind aceeași metodă și apoi să le personalizați pentru a corespunde cerințelor dvs. Meniurile derulante de aici fac acest lucru foarte ușor.

După ce ați editat aspectele dvs., faceți clic pe butonul Terminat din colțul din dreapta sus al ecranului. Veți vedea o nouă fereastră pop-up cu mai multe opțiuni diferite, similare cu cele prezentate în captura de ecran de mai jos.

Beaver Builder salvare layout


Folosind aceste opțiuni, puteți fie să salvați schița, să o publicați sau să o respingeți.

Pasul 3: Reutilizarea aspectului dvs.

Beaver Builder vă permite, de asemenea, să salvați aspectul personalizat WordPress și să îl reutilizați oricând doriți. Pentru a utiliza această opțiune, accesați Instrumente din colțul din dreapta sus al ecranului. Veți vedea următoarele opțiuni pe ecran.

unelte Beaver Builder

Acum, în funcție de cerințele dvs., selectați opțiunea. Dacă doriți să utilizați șablonul pentru utilizare ulterioară, faceți clic pe opțiunea Salvare șablon și apoi denumiți aspectul dvs. După aceea, apăsați butonul Salvare.

wordpress layout salvare șablon

Fișierul dvs. de șablon nou este salvat și gata pentru utilizare viitoare, oricând.

Pasul 4: Gestionarea șabloanelor dvs.

Aspectele pe care le creați cu Beaver Builder pot fi utilizate pe site-uri web nelimitate. Șabloanele create de utilizatorii săi sunt stocate într-un tip de postare personalizat numit șabloane.

În mod implicit, această opțiune este ascunsă. O puteți face vizibilă accesând fila Setări » Page Builder » Șabloane.


Acum faceți clic pe opțiunea Activați Administrarea Șabloanelor și apăsați butonul Salvați Setările Șablonului. După ce faceți acest lucru, veți observa un nou element de meniu numit Șabloane apărând în bara de administrare WordPress. Toate aspectele paginii pe care le salvați ca șablon vor apărea pe acea pagină.

Exportarea Aspectelor WordPress

Deoarece aspectele pe care le creați sunt salvate ca un tip de postare personalizat, puteți exporta cu ușurință șabloanele Beaver Builder. Pentru aceasta, aveți funcția de export încorporată în WordPress. Pentru a utiliza această funcție, accesați pagina Instrumente » Export.

export layout wordpress

Acum selectați Șabloane. Faceți clic pe săgeata derulantă și selectați șablonul pe care doriți să îl exportați. După aceea, apăsați butonul Descărcați Fișierul de Export, iar WordPress vă va trimite un fișier XML pentru a-l descărca.

Importarea Aspectelor Beaver Builder

Pentru a importa un aspect, accesați tabloul de bord al site-ului web pe care doriți să fie importat acest aspect. Acum accesați Setări » Import » WordPress. Faceți clic pe opțiunea Instalați acum sub fila WordPress. Aceasta va descărca și instala pluginul de importare WordPress.

Odată ce pluginul este descărcat, puteți încărca fișierul XML pe care tocmai l-ați descărcat. Aspectul dvs. este acum gata să fie utilizat și pe celălalt site.

Și asta este tot. Acum puteți crea aspecte de postări personalizate în cel mai scurt timp, fără a atinge niciodată fișiere PHP, HTML și alte coduri. Sperăm că v-a plăcut tutorialul nostru.

Dacă ați făcut-o, s-ar putea să doriți să cunoașteți și câteva dintre celelalte alternative la Beaver Builder pe care le puteți încerca.

Comentarii   Lasă un răspuns

Adaugă un comentariu

Suntem bucuroși că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de confidențialitate, iar toate linkurile sunt nofollow. NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.

Lista de verificare pentru lansarea WordPress

Lista de verificare finală pentru lansarea WordPress

Am compilat toate elementele esențiale de verificare pentru lansarea următorului dvs. site WordPress într-o singură carte electronică la îndemână.
Da, trimite-mi eBook-ul gratuit!