Salut,
Scopul acestui tutorial este acela de a va invata pas cu pas cum sa va folositi de Elementor pentru a va crea un website asa cum trebuie.
Daca nu doresti sa te apuci sa inveti programare in acest moment, postarea aceasta este pentru tine. Dupa cum spuneam si intr-o postare anterioara, cea mai simpla si intuitiva metoda de a construii un website wordpress, in acest moment, sunt builderele de tipul drag & drop si cu atat mai mult Elementor Pro, care este un builder complex si complet.
Hai sa incepem!
1.Care sunt elementele de continut ale unui website wordpress
Practic continutul website-ului este format din pagini si postari. Pentru a va face website-ul cat mai usor de utilizat, este esential sa ai o combinatie echilibrata de postari si pagini in care sa iti organizezi tot acest continut.
Paginile sunt o modalitate excelenta de a adauga continut atemporal, static, care nu necesita o data de publicare, cum ar fi paginile „Acasa”, „Despre noi” si „Contact”.
Pe de alta parte, postarile ofera posibilitatea de a crea continut dinamic care poarta o data de publicare si poate fi actualizat din mers.
In general, cheia pentru un continut excelent al site-ului este ingrijirea atenta a postarilor si a paginilor, care impreuna pot oferi o experienta extrem de captivanta pentru vizitatori.
2. Cel mai simplu mod de a construi un website wordpress– Drag & Drop
Exista multe teme WordPress premium care vin cu o varietate de aspecte diferite. Cu toate acestea, multor incepatori in ale WordPress-ului le este dificil sa schimbe sau sa personalizeze aspectul paginilor pentru a se potrivi preferintelor lor.
Din fericire, acum exista cateva buildere fantastice care faciliteaza construirea de pagini in WordPress. Acestea, dupa cum spuneam si intr-o postare anterioara, iti permit sa faci un website de la 0 fara sa te atingi de vre-o linie de HTML, CSS sau JavaScript.
3.Elementor si atat.
Probabil o sa vedeti Elementor peste tot in aceste postari ale noastre, dar este cel mai puternic si simplu de utilizat builder pentru a va construii website-ul , singuri!
Dupa cum spuneam si intr-o alta postare, Elementor este un builder live, care iti da posibilitatea sa vezi in timp real ceea ce construiesti cu acesta.
Utilizatorii Elementor pot creea sectiuni si pot selecta cu usurinta numarul de coloane pe care le-ar dorii pentru fiecare sectiune. In plus, pot trage, apoi plasa widget-uri din panoul de selectie in locatia dorita.
Elementor vine cu o multime de widget-uri intresante, inclusiv unele dintre cele mai frecvent utilizate elemente din site-urile de astazi. De la imagini de baza si widget-uri de text pana la acordeoane avansate, slidere, recenzii, feed-uri social media si multe altele.
Daca nu doresti sa pierzi timp pretios pentru a va construii singur(a) un website wordpress, ai posibilitatea sa incarci un template gata facut sau sa ne scrii aici si te vom ajuta noi.
4.Elementor vs. Elementor Pro: Principalele diferente
Am mai discutat despre asta in postarile anterioare, dar la sfarsitul zilei, Elementor Pro este din punct de vedere tehnic un „supliment” pe care utilizatorii il pot achizitiona pentru a obtine mai multe functionalitati din builderul Elementor. Ca atare, daca vrei sa obtii totul de la Elementor, trebuie sa achizitionezi Elementor Pro. Iti las aici un link unde poti vedea mai multe.
Cu Elementor pro ai acces la inca 30 de widget-uri de continut, iti poti crea un header si un footer (aici ai un link catre un tutorial), poti accesa elemente dinamice, poti crea popap-uri, formulare sau te poti folosii de elementele de Woocommerce.
In plus cu versiunea Pro de la elementor poti sa accesezi toata baza de design-uri pre-made facute de acestia si pe care le poti incarca intr-un website wordpress.
Daca nu doresti sa instalezi o alta mana de plugin-uri pentru a beneficia de ceea ce nu iti ofera Elementor in versiunea gratuita, sfatul meu este sa alegi versiunea Pro, te scapa de pluginuri in plus, incompatibilitati si multe alte dependente si depanari.
In tutorialul ce urmeaza o sa folosim Elementor Pro, deoarece cred ca acest mod este cu adevarat „mai sanatos” pentru site.
5.Inainte de a incepe…
Inainte de a incepe propriu-zis munca cu Elementor trebuie sa pregatim cateva materiale si sa facem cateva configuratii pentru site.
Trebuie sa decizi ce culori vrei sa folosesti si ce fonturi. De exemplu culorile primare, secundare, text si de accent. Daca nu aveti idee ce culori sa folositi, puteti consulta ColorHunt pentru a alege culorile de branding. Elementor accepta, de asemenea, toate fonturile din Google Fonts.
Pregatiti un logo pentru site-ul web. Daca nu aveti puteti vizita Fiverr si gasiti acolo designeri care cer chiar si 5$.
Decideti structura paginilor site-ului web. De exemplu:
- Acasa
- Despre
- Servicii
- Contact
- Blog
- Post 1
- Post 2
Uneori este nevoie doar de un concept in minte pentru a pleca la drum si a incepe lucrul la un website wordpress. Daca doriti sa aveti parte de un design profesional puteti oricand sa ne trimiteti un email si va vom ajuta cu proiectul pe care il aveti in minte. Contacteaza-ne aici!
6.Configurare si curatare WordPress.
Totii pasii care urmeaza sunt destinati unei instalarii noi de Wordpres, pentru un website wordpress deja existent trebuie sa fiti atenti la „curatenia” in website, pentru a nu sterge lucruri importante.
- Modificati structura permalink-urilor.
Setari -> Permalink-uri -> Structura „Nume Postare”. Alegeti „Nume postare” si salvati modificarile. Acest lucru schimba stilul adresei URL si va ajuta la SEO.
- Sterge toate postarile
Postari -> Toate postarile -> Selectati toate postarile -> Mutare in Cosul de gunoi (Actiune in bloc).
- Sterge toate paginile
Pagini -> Toate paginile -> Selecati toate paginile -> Mutare in Cosul de gunoi (Actiune in bloc).
- Creaza o noua pagina
Pagini -> Adauga o noua pagina -> Pune-i un titlu -> Publica
Creati paginile noi conform rutelor site-ului tau.
- Schimba setarile de afisare ale paginii Acasa si paginii Blog
Setari -> Citire -> O pagina statica -> Schimbati pagina de pornire si pagina postari
Selectati afisarea paginii de pornire dintr-o pagina statica si selectati pagina de pornire pe care ati creat-o. De asemenea faceti acelasi lucru cu pagina de postari daca aveti un blog.
- Creaza un meniu
Aspect -> Meniuri -> Creati un nou meniu -> Nume meniu -> Creare meniu -> Adaugati pagini in meniu -> Bifati meniu principal -> Salvare meniu
Creati un meniu nou, completati numele meniului si faceti click pe creare meniu. Selectati paginile din coloana din stanga si faceti click pe adaugati in meniu.
Paginile vor aparea pe coloana din dreapta, puteti glisa si palsa pentru a schimba pozitia paginii
7.Tutorial Elementor – Setari
Mergeti in Elementor -> Setari.
Puteti sa lasati setarile in modul default sau puteti sa va jucati cu acestea dupa nevoile pe care le aveti. Sfatul meu este sa lasati setarile default.
- Setarile editorului Elementor.
Pagini -> (Selectati orice pagina, Ex: Acasa) Editare -> Editare cu Elementor (Edit with Elementor)
O sa fiti redirectionati in pagina de builder.
Meniu -> Modificare setari
Culoarea implicita: Alegeti 4 culori de branding pentru culorile primare, secundare, text si accent.
Font implicit: Alegeti familia de fonturi si grosimea acestuia pentru fiecare tip de text.
Selector de culoare: Alegeti cele mai folosite culori. Aceste 8 culori o sa fie cele preferate de voi si mereu o sa va fie la indemana.
Setari globale: Nu schimbati
Setari panou de control (dashboard): Nu schimbati.
8.Tutorial Elementor – Cum il folosim?
- Explicatii
Inainte de a incepe, trebuie sa intelegem care sunt componenetele din interiorul editorului. Comform imaginii de mai jos, barele de actiune de sus si de jos, precum si bibloteca de widge-uri, sunt situate in interiorul panoului de control (coloana din stanga). Partea din dreapta reprezinta previzualizarea live a paginii.
Panoul de control ofera widget-uri de tipul drag & drop pe care le puteti trage si aseza in partea de live a paginii. Butonul de ascunde este folosit pentru a ascunde panoul de control si a vedea exact cum arata site-ul pe intreaga latime a ecranului. Exista mai multe actiuni in bara de jos, dupa cum urmeaza:
- Setari -> Setari pentru pagina / postare / template
- Navigator -> deschide un meniu de navigare care are ca scop facilitarea selectarii widget-ului pe care l-ai folosit deja in pagina.
- Istoric -> Iti da posibilitatea sa te intorci la o versiune mai veche a paginii sau sa folosesti functia de „undo”
- Modul responsive -> De aici poti schimba tipul de ecran dekstop / tableta / telefon. Trebuie sa verifici si sa te asiguri ca site-ul se vede bine pe toate dispozitivele.
- Previzualizare schimbari -> Iti va deschide un nou tab in care poti sa vezi cum arata pagina
- Publica/Update -> Salveaza ceea ce ai lucrat
- Optiunea de Salveaza / Save -> Iti ofera posibilitati extra de salvare. Poti salva ca si draft fara sa publici sau poti salva ca si template pentru a utiliza ceea ce ai facut intr-o alta pagina sau website wordpress.
- Sectiune, Coloana si widget-uri. Explicatii
Practic o pagina construita cu Elementor are trei elemente principale: sectiunea, coloana si widget-ul.
Sectiunea reprezinta invelisul exterior si o pagina este formata din mai multe sectiuni / randuri. In acestea se afla coloanele. Fiecare sectiunea poate avea de la 1 la 12 coloane. La randul lor coloanele contin widget-uri.
- Fiecare Sectiune, coloana si widget are proprile tab-uri cu optiuni
Dupa cum spune si titlul subcapitolului fiecare dintre elementele principale au 3 taburi distictive de optiuni: Continut, Stil si Avansat.
Tabul Continut -> Iti permite sa completezi continutul widget-ului
Tabul Stil -> Iti permite sa stilizezi tot ceea ce tine de widget-ul acela.
Tabul Avansat -> Ofera setari avansate, de exemplu, margini, paddings si alte setari avansate.
- Sfaturi suplimentare
Apasati click dreapta pe elemente. Prin aceasta actiune o sa deschideti o fereastra mica de functionalitati rapide: de la copy/paste, la edit sau stergere.
Imaginea de mai jos reprezinta modelul de „cutie” al unui element. Este important sa stiti ce reprezinta fiecare lucru atunci cand lucrati la design-ul paginii.
Continut (content) -> Locul unde se aseaza textul, imaginea sau alt element.
Padding -> Curata aria din jurul elementului, acesta este transparent
Border -> O linie exterioara care cuprinde continutul si padding-ul
Margin -> Curata aria din exteriorul border-ului si este transparenta ca si padding-ul
Tineti cont ca padding-ul, border-ul si marginea au fiecare cate 4 laturi.
9.Creaza un header (valabil doar pentru Elementor Pro)
Avem un tutorial separat pentru acest lucru (link aici), dar de dragul intelegerii cat mai exacte, o sa scrie si aici aceste lucruri.
Pasii pentru acest lucru sunt urmatorii:
Sablon (Templates) -> Theme Builder -> Header tab -> Adauga un nou header (Add new header) -> Alege „header” -> Scrie un nume pentru acest template -> Creaza template (Create Template) -> Selecteaza un template -> Inserare (Insert) sau poti crea unul de la zero.
Puteti face headerul personalizat pe baza sablonului pe care l-ati selectat. O sa fie mici diferente fata de modul in care faceti o pagina, pentru ca vi se vor oferii widget-uri speciale pentru un header, cum ar fi Logo, Nav Meniu.
Dupa inserare incepeti sa personalizati, ganditi-va cate coloane aveti nevoie, cate widget-uri si in ce format. Dupa ce le-ati amplasat in design, urmeaza pasul de stilizare. Selectati fiecare widget, mergeti in tab-ul Stil si atribuitii culorile dorite, fontul si asa mai departe.
Ultimul pas este sa faceti click pe butonul de publicare/actualizare si sa alegeti conditia de afisare.
Adaugati conditie -> Includeti -> Intreg site-ul (Entire Website). Sa aplicam acest header pe intreg site-ul, insa puteti crea mai multe headere pentru diverse pagini sau nevoi.
10.Creati un footer (numai in Elementor Pro)
Sablon (Templates) -> Theme Builder -> Footer tab -> Adauga un nou footer (Add new footer) -> Alege „footer” -> Scrie un nume pentru acest template -> Creaza template (Create Template) -> Selecteaza un template -> Inserare (Insert) sau poti creea unul de la zero.
Salvati conditia de afisare. Sunt aceeasi pasi ca si la Header.
11.Creaza o pagina
Mergeti in Pagini -> Apasa pe pagina creata initial (Acasa) -> Apasa butonul „Editeaza cu Elementor” (Edit with Elementor).
Tinand cont ca deja avem headerul si footerul nu mai trebuie decat sa punem continut in pagina pe care vrem sa o facem.
Adaugati sectiuni si coloane dupa cum aveti nevoie. Alegeti elementele de care aveti nevoie si trageti-le in locul in care doriti sa se afiseze. Apoi apsati pe widget-ul pe care doriti sa il stilizati si faceti setarile dupa cum va doriti.
Dupa ce ati terminat de editat pagina, apasati pe butonul Publica/Actualizare. Pagina acum este live si procesul este acelasi pentru fiecare pagina.
12.Creaza un template pentru postarea de pe blog
Pentru inceput este necesar sa facem 2-3 postari pe blog ca sa avem cu ce lucra.
Mergeti in Postari (Posts) -> Adauga (Add New) -> Alegem un titlu -> Adaugam continut -> Publica (Publish).
Acum pentru partea de template avem urmatorii pasi:
Templates -> Theme Builder -> Single Tab -> Add new single -> Selecteaza “Post” si adauga un nume la template -> Creaza template (Create Template) -> Selecteaza un template (sau creaza unul de la 0) -> Insert (daca ai ales unul deja facut).
Ca sa vedem cum arata o postare in timp ce lucram trebuie sa apasam pe rotita din panoul din stanga (jos).
In setari (settings) -> Deschidem Preview Settings -> Selectam Post -> Selectam una dintre postarile pe care le-am facut -> Apasam Apply & Preview.
Acum incepem sa adaugam elemente, o sa observam ca in partea stanga (bara de widgets) o sa apara elemente necesare pentru template-ul de postare de blog.
Dupa ce totul este gata, este momentul sa aplicam regulile de afisare.
Apasam Publica (publish) -> Include -> Posts -> All -> Save & Close.
13. Verifica daca site-ul este responsive in totalitate
Designul responsive inseamna faptul ca website-ul tau se vede bine si pe telefoane, dar si pe tablete. Este foarte important ca website-ul pe care il ai sa se adapteze perfect la tot felul de ecrane.
Pentru asta Elementor are o solutie ideala.
Schimba ecranul de vizionare din desktop in mobile.
Este nevoie sa schimbi marginile/paddingul pentru elementele despre care consideri ca nu “stau” bine in ecranul telefonului.
Este timpul sa intrii in paine!
Ok, asta este tot pentru inceput. Este momentul sa te “murdaresti pe maini” si sa intrii in paine. Dar daca inca ti se pare greu sa incepi tu, noi suntem aici sa te ajutam! Da-ne un email aici si te vom ajuta cu design-ul unui website wordpress asa cum iti doresti!.
Daca ai de gand sa te apuci sa le faci tu, nu uita faptul ca dupa ce ai pus totul cap la cap e nevoie sa intrii iarasi pe fiecare pagina/template si sa verifici, din nou, daca totul este asa cum iti doresti.
Multumim pentru lecturare!
Sa ai o zi faina,
Robert Predan – Co-fondator Pixelromanesc.ro
