Elementor oferă în mod regulat teme care vă ajută creați un site web complet din acestea. În fiecare lună lansăm noi teme construite în jurul unei nișe specifice, dar suficient de flexibile încât să le puteți personaliza în sfârșit pentru a se potrivi propriilor dvs. nevoi.
Combinat cu Elementor Pro, aceste teme vă ajută să începeți rapid cu fiecare parte a site-ului dvs., inclusiv:
pvârste statice, cum ar fi pagina de pornire,
- antetul
- subsolul
- pagina 404
- secțiunea Arhivă
- blog-ul
- Popup-uri și altele
În acest tutorial, vă vom arăta cum se creează un site web completați folosind generatorul vizual de pagini Elementor.
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 să construiți un site web complet cu teme Elementor
În acest tutorial, veți învăța cum să utilizați o temă ca bază pentru toate părțile importante ale site-ului dvs. și apoi veți pune totul împreună pentru creați un site web coerent.
Mai precis, tema Agenția digitală.
Website-ul dvs. va avea o serie de pagini de bază, cum ar fi pagini:
- Bun venit
- À propos
- Servicii
- Clienți
- Blog
- Contact
De asemenea, oferă secțiuni dedicate și conținutului dinamic. De exemplu, arhivele de postare ale blogului și șabloanele de postare se potrivesc automat cu paginile de sine stătătoare. De asemenea, puteți schimba antetul, subsolul și pagini 404.
Aici este cum se creează un site web cu o temă Elementor:
1. Instalați și activați tema Elementor Hello
Deoarece veți folosi Elementor și un șablon tematic pentru a vă construi întregul site web, nu este nevoie să căutați alte elemente.
În schimb, veți avea nevoie doar de un site web ușor, optimizat pentru performanță, pe care îl oferă tema Elementor Hello.
Pentru a începe, mergeți la Aspect → Teme → Adăugare și căutați " Salut elementor". Apoi instalați și activați tema.
2. Configurați paginile statice de bază ale site-ului dvs. web
Apoi accesați meniul Pagini → Adăugare pentru a crea paginile de bază ale site-ului dvs. web.
Mai întâi, creați o pagină numită „ Bun venit „Și faceți clic pe buton Editați cu Elementor pentru a lansa Elementor.
Faceți clic pe setările pentru a deschide setările paginii și modificați aspectul acesteia pentru a fi egal cu Elementor Fullwidth.
Apoi deschideți biblioteca șabloanelor Elementor și căutați „Agenția digitală” din secțiunea pagini :
Ar trebui să vedeți o listă de șabloane de pagină pentru această temă. Introduceți șablonul Pagina Principală din lista modelelor.
Acum ar trebui să vedeți o pagină principală. Antetul pare cam anost pentru moment - dar nu vă faceți griji, vom rezolva asta în curând.
Apoi, adăugați o altă pagină pe care să o utilizați pentru " À propos".
Ca și înainte, creați o pagină și schimbați aspectul în Elementor Fullwidth. Apoi, deschideți biblioteca de șabloane și introduceți șablonul Despre Noi a temei agenției digitale.
Acum repetați același proces pentru a crea toate celelalte pagini, inclusiv: Servicii, Clienți și A lua legatura.
Nu vă faceți griji pentru pagina de blog încă. Această pagină nu este statică ca și celelalte. Din acest motiv, îl veți crea acolo printr-o metodă diferită (pe care o vom acoperi ulterior în acest tutorial).
Pentru a finaliza configurarea paginilor statice, trebuie să spuneți instalării WordPress să folosească o pagină de pornire statică. Pentru a face acest lucru…
- Continuă Setări → Redare
- alege O pagină statică (alegeți mai jos) sub setările paginii de pornire
- Selectați pagina care încorporează șablonul paginii de pornire a temei
3. Creați celelalte părți ale site-ului dvs. web
Acum sunteți gata să construiți celelalte părți ale site-ului dvs. folosind Elementor. Elementor vă permite să mergeți dincolo de crearea de pagini statice (cum ați făcut mai sus).
Cu Elementor, puteți proiecta și secțiuni precum: en-cap; subsolul, etc ...
Și datorită temei Elementor, veți putea importa șabloane pentru toate secțiunile care se află deja în paginile statice pe care le-ați creat în pasul anterior.
Pentru a accesa constructorul vizual al Elementor, accesați Templates→ Theme Builder. Va trebui să instalați Elementor Pro pentru a-l putea accesa.
Acum este timpul să creați secțiunile
Antet
Pentru a începe, accesați fila Antet a interfeței vizual constructor, apoi faceți clic pe Adaugă nou. Pe ecranul următor, veți vedea o selecție de șabloane în biblioteca Elementor. La fel cum ați făcut cu paginile statice, căutați „Agenție digitală”, apoi introduceți:
Acum ar trebui să vedeți o previzualizare vizuală a antetului dvs., precum și un meniu de navigare din șablonul pe care l-ați inserat.
Dacă vrei să-l schimbi
- Continuă Aspect → Meniuri în tabloul de bord WordPress
- Creați un meniu nou
După ce ați creat un meniu, puteți adăuga paginile pe care le-ați creat la pasul 2 în meniul de navigare.
Citiți și: 10 Instrumente de automatizare pentru comercializarea întreprinderilor mici
Când ați terminat adăugarea elementelor din meniu, salvați meniul și reveniți la șablonul antetului din interfața Elementor.
atunci publica antetul dvs. și utilizați condițiile de afișare pentru a afișa șablonul antetului pe întregul site web. Dacă doriți, puteți utiliza, de asemenea, condiții de afișare pentru a crea anteturi diferite pentru diferite tipuri de conținut:
Apoi apăsați Salvați și închideți
subsol
Acum este timpul să creați subsolul site-ului dvs. web:
- Reveniți la interfața constructorului de pagini vizuale
- Faceți clic pe filă Subsol
- Faceți clic pe butonul pentru Adăugați un subsol nou
- În fereastra pop-up, dați un nume subsolului dvs. și faceți clic pe Creați șablon
Acum ar trebui să vedeți o listă de șabloane de subsol la fel cum ați făcut cu antetul. Căutați „Agenția digitală” și introduceți șablonul de subsol.
După ce ați introdus șablonul de subsol, ar trebui să vedeți o previzualizare a subsolului dvs.:
atunci publica șablonul de subsol și utilizați termenii afișați pentru a-l afișa pe întregul site web.
Pagina de blog
Spre deosebire de paginile statice pe care le-ați creat la pasul 2, pagina blogului site-ului dvs. web este un „ Arhiva ". Practic, asta înseamnă că afișează în mod dinamic cel mai recent conținut de pe site-ul tău.
Dacă un utilizator face clic pe un anumit articol de pe pagina blogului, acesta va fi direcționat către o pagină care afișează conținutul acelui articol. Aceasta se numește pagina „unică”. Designul tău unic asigură că tot conținutul tău va arăta la fel – singurul lucru care se schimbă este conținutul real (cum ar fi titlul postării, corpul, imaginea prezentată etc.).
Descoperiți, de asemenea Cum să adăugați un conținut în WordPress cu Elementor
Pentru a crea pagini de arhivă unice și șabloane de pagini, ar trebui să utilizați Elementor visual builder - nu zone pagină ou articol WordPress implicit.
A incepe…
- Deschideți interfața Theme Builder
- Accesați fila Arhivă
- Faceți clic pe Adăugare nou
- Dați-i un nume și faceți clic pe Creare șablon
La fel ca în antetul și subsolul dvs., veți vedea o listă de șabloane de pagini de arhivă. Căutați șablonul „Agenție digitală” și introduceți-l.
Acum ar trebui să vedeți designul de bază al paginii dvs. de articole.
Trebuie remarcat faptul că dacă vezi doar un articol este normal, deoarece WordPress vine doar cu un exemplu implicit care este „Hello World! ".
Deocamdată, tot ce trebuie să faci este publica pagina arhivă și setați-o să fie afișată în toate arhivele.
Citiți ghidul nostru pe Cum să migrați manual un site web WordPress
Apoi puteți accesa meniul de postări din tabloul de bord și puteți crea postări noi pe blog. Atribuiți fiecare articol unei categorii numite „Noutăţi".
Acum, când accesați pagina de blog, ar trebui să vedeți automat toate aceste postări noi:
Crearea paginii șablon de postare pe blog
În acest moment, pagina dvs. de blog are un aspect destul de ușor de utilizat. Dar dacă faceți clic pe o anumită postare de blog, aspectul nu se va potrivi cu restul site-ului dvs.
Pentru a rezolva această problemă, trebuie să creați un șablon „unic” cu Elementor:
- Deschideți constructor vizual Elementor
- Accesați fila Singur Post
- Faceți clic pe Adaugă nou
În pop-up Șablon nou :
- Dă-i un nume
- selecta Post din lista derulantă Selectați Tip de postare. Acest lucru spune Elementor că doriți să utilizați acest șablon pentru postările dvs. de blog (spre deosebire de Pagini sau un alt tip de post personalizat pe care l-ați putea utiliza)
Încă o dată, veți vedea biblioteca de șabloane Elementor. Găsiți șablonul de articol unic al șablonului „Agenția digitală” și introduceți-l.
Citește și Mod de întreținere pe WordPress: explicație și configurare
Dacă doriți, puteți utiliza numeroase widget-uri de date de publicare dinamică pentru a controla aspectul paginii dvs.
De exemplu, dacă modificați widgetul Informații de postare, veți putea controla elementele de metadate care apar, ca și în publicație ...
- Autor
- Data publicării
- comentarii
- Etc
După ce sunteți mulțumit de modelul articolului dvs., faceți clic pe publica. Apoi, puteți utiliza opțiunile de afișare, astfel încât acest șablon unic să se aplice numai postărilor din categoria „Dincolo de știri”:
- Selectați din categorie
- Alegeți categoria Noutăţi
Apoi apăsați Salvați și închideți.
Acum, toate postările dvs. de blog ar trebui să aibă un design care să se potrivească cu restul site-ului dvs. web.
Pentru a termina lucrurile, mergeți la Aspect → Meniuri și adăugați pagina de blog în meniul de navigare. Pentru a face acest lucru, puteți adăuga un link către categoria „Știri” din secțiune Categorii.
Pagina 404
În cele din urmă, trebuie să creezi pagina 404 a site-ului tău. Pagina 404 a site-ului dvs. web este ceea ce vor vedea vizitatorii dacă urmează un link spart sau încearcă să viziteze o pagină care nu există.
Descoperiți și noi plugin-uri 5 WordPress pentru a gestiona mai bine erorile 404
Pentru a vă crea pagina 404, utilizați generatorul vizual Elementor pentru a adăuga un alt șablon unic.
- Deschideți constructor vizual Elementor
- Accesați fila Eroare 404
- Faceți clic pe Adaugă nou
- Introduceți șablonul agenției digitale de pe pagina 404
Apoi, publicați șablonul pentru a vă completa site-ul.
Obțineți Elementor Pro acum!
Concluzie
Asa de ! Asta e tot pentru acest ghid care vă arată pas cu pas cum se creează un site web complet cu Elementor. Dacă ai comentarii sau sugestii, nu ezitați să ne informați în secțiunea rezervată.
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.
...
