Cum se folosește Elementor Page Builder cu WordPress

Când vorbim despre constructorii de pagini WordPress, cel mai popular și cel cu cel mai mare număr de instalații active și cea mai mare comunitate este cu siguranță Elementor. Până în prezent, există aproximativ 8 milioane + de site-uri construite cu Elementor. Este recomandat de mulți experți pentru ușurința sa de utilizare, viteză și posibilități enorme atunci când construiește site-uri WordPress.

Am testat versiunea Pro a Elementor și am construit o pagină de destinație. Acesta vine cu funcționalitatea drag-and-drop și funcționează cu orice temă și puteți utiliza toate widgeturile gratuite, Pro și WordPress în același timp. Să citim acest articol pentru a afla mai multe despre instalarea și configurarea Elementor cu WordPress.

De ce să alegeți Elementor Page Builder?

Elementor este unul dintre primii și unul dintre cei mai avansați constructori de pagini WordPress de pe piață în acest moment. De asemenea, are un ecosistem imens în jurul său și mulți autori mai mici construiesc suplimente și șabloane utile pe care le puteți utiliza pentru a reduce timpul necesar pentru rezultatul final.

În cazul Elementor, rezultatul final poate fi un site cu adevărat extraordinar, bine conceput cu toate funcționalitățile de care aveți nevoie sau de care ați putea avea nevoie. Nu veți găsi niciun tip de site WordPress pe care să nu îl puteți construi folosind Elementor. Dacă aveți nevoie de unele funcționalități suplimentare, acesta poate fi ușor implementat cu coduri scurte.

Caracteristici ale Elementor Page Builder

Versiunea gratuită a Elementor vine cu un număr limitat de Elemente, dar cu versiunea Pro, veți obține suplimente precum QI, Ultimate Add Ons etc. În plus, veți avea o grămadă de elemente și șabloane utile pentru a vă construi site-ul cu ușurință. .

Nu ar fi corect să lăsăm deoparte suplimentul Crocoblock pentru Gutenberg și Elementor, care este unul dintre instrumentele preferate pentru majoritatea utilizatorilor Elementor, deoarece extinde funcționalitățile elementare native.

Elementor și-a împărțit caracteristicile în 4 categorii.

1. Widgeturi de bază

Widgeturile de bază sunt livrate cu versiunea gratuită și acestea sunt destul de suficiente pentru a construi un site uimitor care nu necesită opțiuni avansate precum Cuprins, Portofoliu sau Formular. De asemenea, în versiunea gratuită, nu puteți construi un meniu Header / Nav și ar putea fi necesar să găsiți o temă WordPress interesantă cu meniul de navigare care vă place.

2. Widgeturi Pro

Widgeturile Pro cu Elementor Pro acoperă aproape fiecare aspect și fiecare widget de care ai putea avea nevoie pentru a construi orice fel de site web. Adăugați și alegeți postări din diferite categorii, tipuri de postări sau pur și simplu enumerați-le pe cele mai recente, Tabelele de prețuri, Galeria, Flip Box, Rețelele de rețele sociale ușoare încorporate, Carusele variate media, Lottie Widget și HotSpot (Voi vorbi despre aceasta mai târziu).

3. Elemente tematice

Theme Elements vine, de asemenea, cu Elementor Pro și sunt importante pentru a construi toate paginile de șabloane și șablonul de postare, desigur. După cum știți, există pagini care sunt populate dinamic cu conținut precum Categorie, Etichetă, Autor etc.

Pentru acele pagini, trebuie să creați un șablon utilizând elemente de temă. Același lucru este valabil și pentru Postarea unică, unde puteți proiecta un șablon frumos pentru postările dvs., care va fi utilizat de toate postările fără a fi nevoie să le creați de fiecare dată. Doar adăugați conținutul așa cum sunteți obișnuiți și ați terminat.

4. Widgeturi WooCommerce

Și nu în ultimul rând, WooCommerce Widgets. Aceste widgeturi vă permit să creați din nou similar cu Theme Builder, paginile de șabloane și șablonul de produs unic cu ușurință, utilizând elemente WooCommerce.

Prețuri și planuri ale Elementor Page Builder

Elementor Pro vine cu 5 planuri diferite, toate conținând același constructor de pagini Elementor Pro și caracteristici precum:

• Drag & Drop Live Editor
• Design receptiv
• 90+ Widgeturi de bază și Pro
• 300+ șabloane de bază și profesionale
• Constructor de teme

Cel mai mic plan este Esențial pentru 1 site la prețul de 49 USD. Cu acest plan, primiți asistență premium, ceea ce înseamnă că vă puteți aștepta la un răspuns în 24 de ore. Următorul plan este Advanced și acoperă o licență pentru 3 site-uri la prețul de 99 USD cu același tip de asistență.

Probabil cel mai popular este Expert la 199 USD pentru 25 de site-uri. În plus, veți obține un profil Expert Elementor, unde puteți posta proiectele dvs. finalizate în Elementor și puteți obține câțiva clienți noi.

Unul înainte de vârf este Studio pentru 100 de site-uri la prețul de 499 USD și acolo aveți un beneficiu suplimentar de asistență VIP, ceea ce înseamnă că aveți prioritate, iar biletele dvs. vor primi răspuns în 30 de minute. Același lucru vine cu cea mai scumpă agenție de plan pentru 1000 de site-uri la prețul de 1000 USD.

Toate planurile sunt anuale și dacă vă întrebați ce se întâmplă cu site-urile dacă abonamentul dvs. expiră, răspunsul este că site-urile vor arăta la fel ca înainte, dar nu veți putea edita sau utiliza elemente și șabloane de la Elementro Pro.

Cerințe de sistem / găzduire ale Elementor

Conform paginii de cerințe de sistem a Elementor, ar trebui să funcționeze chiar și cu 128 MB PHP, MySQL 5.6 sau mai mare sau MariaDB 10.0 sau mai mare. De asemenea, ar trebui să funcționeze cu orice PHP 7+. În scopul testării, am folosit VultrHF cu memorie PHP de 2 GB.

Desigur, ai avea nevoie de cea mai recentă versiune WordPress și de toate celelalte pluginuri actualizate.

Instalați și configurați Elementor Page Builder

Instalarea versiunii gratuite a Elementor este la fel ca pentru orice alt plugin din depozitul de pluginuri WordPress, accesați tabloul de bord WordPress → Plugins → Adăugați noi, căutați Elementor, instalați și activați pluginul.

Pentru versiunea Pro, trebuie să cumpărați planul, care va crea automat un cont la Elementor. Când vă conectați acolo, veți vedea butonul de descărcare pentru a descărca cea mai recentă versiune Pro.

În timp ce sunteți încă conectat la tabloul de bord Elementor, conectați-vă la tabloul dvs. de bord WordPress → Plugins → Adăugați un nou și selectați Încărcare, răsfoiți fișierul descărcat al Elementor Pro de pe computer, instalați-l și activați-l.

Când ați terminat în bara laterală din partea stângă a tabloului de bord WordPress, accesați Elementor → faceți clic pe Licență → faceți clic pe butonul Conectare și activare.

Când faceți clic pe acesta, veți fi redirecționat automat către tabloul de bord de pe Elementor pentru a-l activa. Faceți clic pe butonul verde Activare și ați terminat. Elementor Pro este conectat și activat.

După activare, veți vedea confirmarea că Elementorul dvs. este activ. Cu toate acestea, dacă ați construit site-ul pe un domeniu de stagiere și nu doriți să cumpărați o altă licență pentru live, puteți deconecta cu ușurință contul de pe stagiere și îl puteți activa pe domeniul live.

Este timpul să începeți să utilizați Elementor și să vă construiți site-ul. Sugestia mea este de a folosi tema Hello by Elementor special concepută pentru Elementor.

Pentru a face acest lucru, să începem prin a crea o pagină „Pagina principală” și să o edităm cu Elementor. Accesați Pagini → Adăugați un nou, denumiți-l Pagina principală și publicați-l, apoi faceți clic pe butonul Editați cu Elementor.

În pagina Editare, veți vedea Elemente pe care nu le puteți edita, deoarece aspectul este setat la implicit. Pentru a utiliza Elementor pe o pânză goală, alegeți Elementor Full Width sau Elementor Canvas făcând clic pe pictograma roată din colțul din stânga jos.

Înainte de a începe construirea site-ului, asigurați-vă că dați clic pe pictograma burger din colțul din stânga sus și setați toate setările globale necesare pentru restul lucrării.

Setările site-ului sunt destul de similare cu configurarea temei. Aici puteți selecta culorile globale, fonturile pe care le veți utiliza și tipografia completă a site-ului pentru fiecare etichetă HTML.

În afară de aceasta, puteți seta stilul butonului global, antetul, subsolul, CSS personalizat, dacă este necesar, și tot ce aveți nevoie pentru a le seta și păstra așa pe tot site-ul pentru a păstra și consistența.

A doua opțiune este Theme Builder, care vă permite să creați paginile de șabloane și șabloanele de postare / produs unic, care vor fi utilizate automat de pagina, postarea sau produsul generat dinamic. Ca orice temă WordPress trebuie să aibă fișiere șablon pentru a afișa toate cele de mai sus, Elementor vă va permite să o faceți fără să scrieți nici măcar o singură linie a codului.

Ultima opțiune este preferințele utilizatorului, unde vă puteți configura mediul de lucru în Elementor, nimic care nu afectează site-ul în sine, în afară de interfața dvs. de administrator.

Pentru a începe site-ul dvs., toate widgeturile disponibile sunt plasate în bara laterală din stânga și totul poate fi editat vizual și prin glisare și fixare. Dacă doriți o modalitate mai ușoară de a face acest lucru, puteți începe prin utilizarea unuia dintre blocurile sau șabloanele prefabricate făcând clic pe pictograma folderului.

Pictograma folderului va deschide o fereastră pop-up, unde puteți vedea blocuri și șabloane prefabricate, precum și cele salvate anterior. Puteți, de asemenea, să salvați un bloc sau un șablon întreg pe care l-ați creat și să îl reutilizați pe o altă pagină internă. Este destul de obișnuit să utilizați blocul salvat pentru mărturii, unele îndemnuri specifice care nu ar trebui afișate pe fiecare pagină, ci pe unele.

Mai trebuie să știți un lucru când începeți să construiți un site web fără experiență anterioară, este ușor de utilizat, destul de intuitiv și fără experiență anterioară în câteva zile, veți fi mai mult decât capabil să vă construiți un site frumos , Pot spune chiar și căutarea profesională.

Cu toate acestea, site-ul dvs. trebuie să arate excelent pe toate dimensiunile dispozitivului și, în același mod în care ați editat versiunea desktop, puteți modifica toate celelalte dimensiuni. Vă rugăm să rețineți că elementele și widget-urile pot fi adăugate doar la versiunea desktop și apoi puteți păcăli aspectul pe dimensiuni mai mici.

De asemenea, puteți seta cu ușurință vizibilitatea widgetului sau secțiunii pe diferite dispozitive, astfel încât să puteți avea conținut diferit într-o secțiune similară, lăsând o secțiune vizibilă pe desktop, dar ascunsă pe tabletă și mobil. În mod similar, altul ascuns de un desktop, dar vizibil pe tabletă și mobil.

Pentru a edita versiunile pentru dispozitive mobile și tablete, faceți clic pe pictograma modul receptiv din partea de jos a barei laterale din stânga, acesta va afișa site-ul dvs. pe mobil. Și în partea de sus, puteți comuta între diferite dimensiuni de ecran.

Pentru mai multă claritate, am adăugat două secțiuni în care una este ascunsă pe mobil și tabletă, iar cealaltă secțiune este ascunsă pe desktop. Vă rugăm să consultați exemplul de mai jos.

Rezultatul final este pe mobil.

Iar rezultatul final de pe desktop are o singură secțiune, dar una diferită.

Performanța Elementor Page Builder pe Cloudways

Elementor are o performanță destul de frumoasă și are un scor 100 la GTMetrix, iar celelalte instrumente de testare arată o performanță foarte bună. Rețineți că nu am optimizat nicio imagine pentru a avea exact aceeași dimensiune a paginii și imagini pentru toate testele pe care le-am făcut.

- Rezultatele Elementor pe GTMetrix

- Rezultatele Elementor pe Pingdom Tools

- Rezultatele Elementor pe WebPageTest

rezumat

Dacă aveți nevoie de un constructor de pagini intuitiv și ușor de utilizat, Elementor ar putea acoperi toate aspectele necesare pentru a construi un site frumos. Nu este atât de greu să construiești site-uri perfecte pentru pixel din design, dacă ai cunoștințe despre CSS.

Cu comunitatea uriașă și sute de programe de completare și pluginuri externe care extind funcționalitățile elementare de bază, nu pot vedea niciun tip de site web care să nu poată fi construit folosind Elementor.

Vedem adesea cum Elementor este umflat, se încarcă o mulțime de coduri inutile, este greu de optimizat, dar după cum puteți vedea din teste, se pare că Elementor funcționează destul de bine pe Cloudways. Am testat pagina de destinație cu 25 de imagini în interior și 7 secțiuni + Antet și subsol, care este peste medie pentru pagina de pornire.

Un alt lucru extraordinar despre Elementor este că curba de învățare nu este abruptă, ci destul de ușoară și, în doar câteva minute, folosind câteva șabloane sau blocuri prefabricate, puteți avea un site web foarte frumos proiectat, cu aspect modern.