Comparatie Divi cu Elementor – buildere de site-uri WordPress

Cele mai populare buildere de site-uri WordPress 

Daca esti familiarizat cu WordPress, atunci cu siguranta stii si de existenta builderelor de site-uri WordPress. Ar trebui sa stii si de acesti doi giganti din domeniu. Divi si Elementor sunt cele mai populare buildere de site-uri WordPress din acest moment. Ambele au o istorie, ambele au diversitate, interfata prietenoasa, dar care crezi ca este cea mai buna ?

Ca si proprietar de site-uri, ar trebui sa alegi cea mai buna varianta si sa nu fi nevoit sa alegi cealalta varianta pentru ca lucrurile nu au fost pe placul tau. Cu ambele poti crea pagini web de la zero folosind functia de drag and drop (tragere a elementelor si aruncarea acestora unde vrei sa fie pozitionate). Ambele au optiuni de design pentru elementele editate si create. Ambele au sectiuni si coloane. Caracteristicile comune cresc la numar cu cat te adancesti mai mult in fiecare dintre aceste doua buildere de site-uri. La fel putem spune si despre caracteristicile care nu sunt comune.

Daca vrei sa citesti separat cate un articol despre fiecare, poti sa arunci un ochi la Elementor si la Divi. 

Interfata

Interfata este printre cele mai importante aspecte ale unui plugin cu care poti construi pagini web. Mai ales ca este si zona in care pierzi cel mai mult timp. Poti fie sa alegi ceva pe placul tau sau fie ceva ce nu e pe placul tau, dar cu care te vei obisnui in timp.

Divi

Odata instalat, acest plugin iti ofera posibilitatea crearii unei paginii cu Divi apasand un buton mov. Vei observa si logoul Divi rapid.

Daca apesi pe butonul Use Divi Builder, vei observa ca ai trei optiuni. Fie construiesti de la zero pagina, fie alegi un design predefinit sau clonezi o pagina existenta. Aceasta functie lipseste in Elementor. Ea exista doar sub forma de clonare sau  pozitionare a unei sectiuni sau unui template predefinit, dar nu iti apare direct, ci trebuie tu sa o alegi.

Adaugarea de elemente se face putin diferit in Divi fata de Elementor. Daca in Divi adaugam elementele apasand pe un buton cu plus pe el, in Elementor avem lista in stanga. In functie de culoarea butonului plus, putem adauga elemente, sectiuni sau randuri.

Meniul din editorul vizual Divi este unul intuitiv, dar de multe ori se suprapune peste alte elemente Divi din pagina si poti sa devii confuz. In acest meniu ai ca si optiuni urmatoarele:

• setarile builderului – aici configurezi optiuni cum ar fi animatii, vizionare si meniu;
• vizionare modificari in format desktop, mobil sau tableta;
• zoom;
• incarcare din librarie;
• salvare in librarie;
• setari pagina;
• istoricul de editare – iti va arata istoricul modificarilor din sesiunea curenta. Odata inchisa sesiunea (fereastra sau editorul) nu vei mai avea acces la istoric.;
• buton de cautare si ajutor;
• salvare si publicare.

Daca tii cursorul peste un element (hover) atunci va aparea si meniul elementului respectiv. De obicei aici ai optiuni generale cum ar fi: setarile elementului, salvarea sa in librarie, stergerea sa si repozitionarea sa.

Elementor

Interfata pluginului Elementor este diferit fata de Divi. Daca Divi are o interfata minimalista, Elementor se concentreaza pe accesibilitate. Acesta foloseste conceputul de blocuri. Fiecare pagina va avea sectiuni bine definite si clar delimitate. Daca  vrei sa editezi o pagina in Elementor foloseste butonul albastru cu textul Edit with Elementor.

Interfata Elementor cuprinde in stanga toata lista cu elemente si acestea sunt grupate dupa diverse categorii sau cine le-a creat. Tot in aceasta sectiune ai elementele globale daca exista si butoane pentru setarile paginii cum ar fi culori globale, fonturi. Aici gasesti si istoria modificarilor, insa sunt afisate mereu toate modificarile si nu ca la Divi care afiseaza doar pentru sesiunea curenta. In plus, mai ai butonul de previzualizare si de salvare sau publicare.

Poti oricand sa ascunzi aceasta bara laterala daca te deranjeaza. Daca vrei sa adaugi elemente, poti sa le tragi pur si simplu din bara laterala si apoi se deschid optiunile elementului tras. Pentru un element de tip Titlu (Heading) ai optiuni cum ar fi textul, link-ul, marimea, tagul HTML si alinierea. In plus mai ai si optiuni pentru stil  care definesc culorile si alte elemente de design. Daca observi ai trei taburi, de obicei, la fiecare element. Al treilea este cel avansat unde poti pune si cod CSS personalizat, poti seta pozitionari si animatii personalizate.

Butonul rosu cu plusul pe el iti ofera puterea de a adauga o sectiune. Poti alege cate coloane sa aibe. Butonul gri iti ofera prilejul de a te folosi de un template predefinit fie de tine, fie de la Elementor. 

Cu Elementor Pro poti crea sabloane care te ajuta sa ai articolele, antetul sau subsolul globale din punct de vedere al design-ului. In plus, ai si optiuni de afisare pentru antet si subsol. Acestea se numeste conditii si le gasesti pe sageata de langa butonul Publish (Update).

 Elementor este Navigatorul. Acesta te lasa sa vezi o ierarhie a elementelor de pe pagina ta. Putem compara Navigatorul cu modul Wireframe de la Divi. Totusi, acesta este un meniu de navigare care poate ramane lipit pe ecran indiferent de unde te duci. Tot din el poti rearanja rapid elementele, coloanele si sectiunile.

Si Elementor si Divi au optiuni speciale atunci cand apesi click dreapta pe un element. In mod normal, ar trebui sa apara optiunile implicite ale browserului. In cazul Elementor, sunt disponibile urmatoarele:

• Duplicate – pentru a clona un element;
• Copiere – pentru a copia un element;
• Paste – pentru a lipi un element copiat;
• Paste style – pentru a lipi stilul unui element schimband destinatia elementului;
• Reset style – pentru a reseta stilul;
• Save as global – salvarea unui element ca unul global;
• Navigator – evidentierea in Navigator a elementului;
• Delete – stergerea elementului.

 

Divi in comparatie cu Elementor – Sumar

Pretul la Divi incepe de la 89 de dolari, pe cand de la Elementor incepe de la 49 de dolari. Totusi trebuie sa stii urmatoarele:

• Divi are politica de returnare a banilor in maxim 30 de zile;
• Elementor are si o versiune gratuita;
• Preturile de inceput sunt pe an, iar la Divi poti folosi pe cate site-uri vrei tema si pluginul, pe cand la Elementor poti doar pe un site.

Caracteristici comune:

• Editor in timp real;
• Editor direct in linie;
• Suport pentru elemente terte;
• Sistem de importare si exportare;
• Foarte usor de folosit;
• Suport premium;
• Extensibilitate;

Caracteristici diferite:

• Elementor are doar frontend editor, Divi are si backend;
• Elementor are ca si audienta atat developeri, designeri, agentiile cat si utilizatorii simpli, Divi  este folosit de designeri, utilizatori si agentii;
• Elementor are peste 90 de elemente, pe cand Divi are peste 46;
• Elementor suporta implicit piesele WordPress, Divi cu greu suporta aceste piese;
• Elementor are un cod curat;
• Elementor are peste 300 de template-uri, sectiuni, blocuri predefinite, Divi are doar peste 140;
• Elementor este mai stabil decat Divi.

Ce ne-a placut cel mai mult la Elementor a fost puterea sa, superioritatea in managementul designului. La Divi ne-a placut interfata simpla, continutul care ramane chiar daca dezactivezi pluginul, editorul unic pentru clienti.

Elementele constructoarelor de site-uri 

Cele doua constructoare de site-uri: Elementor si Divi, vin cu elemente pe care le folosesti in crearea paginii web si a site-ului. In Elementor acestea sunt impartite in sectiuni, coloane si piese. In Divi elementele sunt numite sectiuni, randuri, coloane si module. Nu uita si de prima parte a acestui articol.

Divi

Exista trei categorii principale de elemente in Divi: sectiunile, randurile si modulele. Sectiunea este un container care cuprinde cel putin un rand. Randul este un despartitor (divider) care cuprinde cel putin un modul. Modulul este continutul propriu-zis. In imaginea de mai jos, avem trei sectiuni.

Sectiuni

A doua sectiune are un rand care este evidentiat de marginile verzi. Acesta are trei coloane goale. In partea de jos exista un alt rand dar nu este evidentiat. Acesta are tot trei coloane, dar exista un buton in coloana din mijloc. Acel buton este un modul specific. Pentru a adauga elemente trebuie sa folosesti butoanele colorate cu semnul plus pe ele. Pentru a adauga o sectiune evidentiata cu margini albastre ca prima din poza, apasa pe butonul albastru. Pentru randuri evidentiate apasa pe butonul verde. Pentru adaugarea modulelor apasa pe butonul negru. Fiecare rand poate fi configurat sa aibe unul sau mai multe coloane.

Sectiunile pot fi folosite pentru a desparti o pagina in mai multe zone. Prima zona ar putea fi una despre pagina, a doua de contact si a treia locatia afacerii tale. Daca pui un fundal albastru primei sectiuni, celelalte doua nu vor fi afectate. Odata ce apesi pe butonul albastru, vei avea mai multe optiuni disponibile. Poti adauga o sectiune normala, una speciala, una cu latime completa sau una din librarie.

Sectiunile normale (Regular) te lasa sa adaugi randuri cu coloane pe care sa le aranjezi una langa alta. Cele speciale (Speciality) te vor lasa sa aranjezi coloanele si randurile intr-un mod mai complex. Ultimele, cele late, sunt recomandate pentru titluri, portofolii, slidere si galerii.

Daca tii mouseul pe o sectiune apare si meniul acesteia de unde poti muta, seta, salva sau sterge sectiunea respectiva. Acelasi lucru se intampla si in cazul randurilor sau modulelor.

Randuri

Randurile sunt elemente care se afla in sectiuni si odata adaugat un rand trebuie sa alegi configuratia acestuia sau sa alegi unul din librarie. Un rand poate avea mai multe coloane si de marimi diferite la fel ca in imaginea de mai jos.

Daca vrei ceva mai complex, nu uita sa folosesti sectiunea speciala.

Module

Modulele sunt elementele cu continut. Acestea pot cuprinde text, imagini, video-uri, formulare, harti si orice altceva. Pentru fiecare tip de modul exista anumite setari pe care le poti face. La modulul text poti adauga textul, stilul, codul personalizat CSS si altele. Fiecare modul are o casuta care te lasa sa il setezi asa cum doresti. Setarile disponibile sunt cele de continut, design si avansat. De obicei, partea de continut difera in functie de modulul ales. Partea de design cuprinde tipografia, spatierea, alinierea. A treia parte, avansata cuprinde animatiile si codul personalizat CSS.

Toate elementele pot fi trase cu mouseul si aruncate pentru repozitionare. Modulele de tip text pot fi editate direct fara a deschide casuta de optiuni. Divi mai are si categoria de element numita coloana, dar aceasta nu are propriile sale setari si nu se poate configura  prea mult. Poti modifica numarul si latimea sa atunci cand alegi sa adaugi un rand.

Elementor

Acest constructor de pagini are exact trei categorii de elemente: sectiunea care este un container, coloana care imparte sectiunea si piesele care compun continutul propriu-zis.

In imaginea de mai jos, putem vedea trei sectiuni care impart o pagina goala. Prima sectiune este goala, a doua contine trei coloane, iar ultima sectiune are o piesa de tip buton in coloana din mijloc.

Adaugarea de elemente este simpla. Trebuie doar sa cauti elementul in bara laterala din stanga si sa il arunci cu mouseul unde vrei. La Divi ai nevoie sa creezi o sectiune cu o coloana inainte de a arunca un element. Aici sectiunile se fac automat odata ce plasezi un element.

Bara laterala din stanga se poate si ascunde daca apesi pe sageata gri. Si in Elementor poti repozitiona piesele dupa cum doresti. Poti si sa schimbi dimensiunea coloanelor foarte usor tragand de marginile lor. Click-ul dreapta pe orice element iti va aduce un meniu contextual usor de inteles care difera in functie de element.

Sectiuni

Exista doua tipuri de sectiuni in Elementor. Sectiunea normala si sectiunea interioara. Cea interioara poate exista doar intr-o sectiune normala si este oarecum similara cu o coloana. Poti sa ai mai multe sectiuni interioare si mai multe coloane astfel creezi design-uri complexe. Mai multe despre design poti citi si aici.

Setarile sectiuni apar atunci cand esti cu mouseul pe sectiune. Vei vedea un meniu micut format din trei elemente. Primul este cel in care poti adauga o noua sectiune (plusul), al doilea unde poti edita sectiunea (punctele) si al treilea sa stergi sectiunea ( x-ul).

Prima optiune va adauga o noua sectiune deasupra. Editarea sectiuni va dezvalui in bara laterala din stanga toate optiunile sale. Aici poti modifica design-ul, structura si lucrurile mai avansate.

Coloane

Coloanele impart sectiunile vertical. Acesta sunt containere pentru piese inclusiv pentru cele din sectiunile interioare. Cand adaugi o sectiune, poti alege cate coloane sa aibe. Setarile pentru coloane se fac la fel ca si in cazul sectiunilor, doar ca trebuie sa apesi pe simbolul specific. In meniu, iti vor aparea optiuni cum ar fi editarea, clonarea, adaugarea, copierea si altele.

Stilizarea constructoarelor de site-uri Divi si Elementor 

In prima parte a articolului despre Divi si Elementor am discutat despre interfata acestora. In a doua parte am discutat despre elementele lor. In aceasta ultima parte, vom discuta despre stilizare.

Ambele au optiuni avansate de stilizare puse la dispozitie in special pentru cei care nu stiu sa programeze, dar usor de folosit de toata lumea. Chiar si specialistii adora aceste optiuni. Am prezentat pe scurt anumite aspecte alte stilizarii in articolele trecute. Acum vom evidentia atat stilizarea, cat si template-urile din fiecare plugin.

Divi

Daca apesi dublu click pe un element in Divi, indiferent ca este o sectiune, un rand sau un modul, vor aparea setarile sale. Poti accesa acest panou de setari si daca esti cu mouseul peste un element si apare bara de meniu. Dupa care trebuie sa apesi iconita specifica (gear).

Optiunile de stilizare in Divi pot fi gasite atat sub sectiunea design, dar si sub sectiunea avansat. La design gasim optiuni de baza pentru tipografie, umbre, margini, animatii, filtre, culori si altele. Acestea sunt cele mai utile atunci cand vorbim de slidere si formulare.

Pentru utilizatorii mai avansati sau care doresc mai mult control asupra stilizarii, exista sectiunea avansat. Aici poti sa adaugi propriul cod CSS impreuna cu ID personalizat. In plus, poti sa setezi vizibilitatea asa cum doresti.

In Divi poti sa definesti diferite stiluri pentru diferite dispozitive. De exemplu, poti sa schimbi fonturile astfel incat sa fie diferite pentru anumite dispozitive cum ar fi cele mobile. La fel se intampla si in cazul marimii fontului.

Elementor

Daca selectezi un element in Elementor, vei vedea ca optiunile nu apar intr-o fereastra separata, ci in bara laterala din stanga, inlocuind tot ceea ce a fost acolo. Ca si in Divi, elementele au si aici trei optiuni. Stilul lor se poate schimba din sectiunea style si avansat. In sectiunea style poti schimba culorile fundalului, fundalul propriu-zis, margini, tipografie, centrare, culori, marimi, font si altele. Continutul acestei sectiuni se schimba in functie de element. Fiecare element are anumite atribute care pot fi schimbate.

Sectiunea avansat ofera posibilitatea de a schimba spatierea, pozitionarea si codul CSS personalizat.

Si Elementor are optiuni pentru designul responsive. Exista trei tipuri de design-uri si anume Desktop, Tableta si Telefon. Poti modifica elemente pentru fiecare tip de design in parte.

Implicit, atunci cand instalezi Elementor, acesta va folosi propriile stiluri, iar stilurile temei nu vor fi luate in considerare. Poti sa dezactivezi aceasta optiune din Elementor > Settings unde poti bifa cele doua optiuni. Daca bifezi optiunea pentru disable default Colors si Disable default fonts vei observa stilul temei.

Exista si o sectiune numit stil in aceasta zona. Aici poti sa alegi anumite optiuni de stil implicite.

Template-uri

Template-urile sunt elemente gata facute cu un stil anume. Ele sunt design-uri predefinite. Divi si Elementor au template-uri pe care le poti alege si folosi pentru a termina mai rapid site-ul.

Divi

Template-urile in Divi sunt numite layout-uri. Acestea sunt impartite in doua tipuri. Odata pachetele de layout-uri care contin mai multe layouturi cu aceeasi tema. Si a doua oara, layouturile simple.

De exemplu, pachetele de layouturi contin template-uri atat pentru acasa, cat si pentru pagina despre si contact. Layout-urile simple contin elemente doar pentru o singura pagina.

Poti sa salvezi propriile tale elemente ca si layout si apoi sa le folosesti mai tarziu pe o alta pagina sau un alt site creat cu Divi.

Elementor

Template-urile de pe Elementor sunt impartite in blocuri si in pagini. Versiunea gratuita vine cu peste 40 de blocuri si pagini, dar cea premium iti ofera mult mai multe.

Blocurile sunt sectiuni simple care pot fi introduse intr-o pagina. De exemplu, un bloc ar fi formularul de contact sau sectiunea de intrebari si raspunsuri. Alte blocuri foarte cunoscute ar mai fi antetul, subsolul, sectiunea de servicii, sectiunea de preturi, sectiunea de portofoliu si altele.

Paginile sunt exact ceea ce par a fi si anume pagini intregi predefinite. Exista peste 140 de templateuri de tip pagina disponibile pentru cei care au cumparat Elementor Pro.

Libraria de template-uri creste atat la Divi cat si la Elementor. In ambele pluginuri poti sa salvezi ca si template o sectiune  pentru a o folosi mai tarziu in alta pagina.

Functia de creare a temei

In acest moment, doar Elementor are functia de creare a temei. Daca vrei un constructor de tema, poti sa te uiti dupa Elementor. Este ideal. Constructorul de tema te lasa sa faci de la zero toate elementele unei pagini, exact ca si o tema normala. Poti modifica antetul, subsolul, arhivele, orice pagina, inclusiv cea de eroare 404. Poti crea chiar si un popup cu acest creator.

Pentru a accesa creatorul de tema, du-te la Templates > Theme Builder. De aici iti alegi ce parte a temei vrei sa o creezi.

Interfata este la fel ca si in cazul Elementorului clasic unde ai bara din stanga cu elemente si optiuni, iar pe restul ecranului ai zona unde pui elementele.

Odata ce ai terminat de editat, nu uita sa alegi conditiile de afisare. Aceste conditii nu sunt valabile chiar pentru orice tip de element.

Pretul

In final, am ajuns la cel mai important aspect cand vine vorba de alegeri. Cele doua pluginuri au preturi diferite.

Divi

Divi costa 89 de dolari anual sau 249 de dolari pe viata. Daca te gandesti sa cumperi Divi, trebuie sa stii ca vine cu acces la:

• temele Divi, Extra, Bloom, Monarch;
• sute de pachete de templateuri;
• actualizari;
• suport premium;
• folosirea pluginului pe un numar nelimitat de site-uri.

Elementor

Elementor are si o versiune gratuita care poate fi folosita de oricine. Versiunea Pro costa 49 de dolari anual versiunea personal care se poate folosi pe un site. Versiunea Plus se poate folosi pe trei site-uri si costa 99 de dolari pe an, iar versiunea Expert costa 199 de dolari pe an si se poate folosi pe o mie de site-uri.

In bara din stanga ai aceleasi tipuri de optiuni, dar nu neaparat acelasi optiuni ca la sectiuni. Gasim partea de structura, design si avansat.

Piese

Piesele vor fi elementele cu continut de pe site. Ele pot fi butoane, text, imagini, galerii, video-uri, slide-uri si altele. Poti adauga rapid o piesa din bara laterala. Si acestea au sectiuni de setari cum ar fi continut, stil si avansat.

Poti oricand sa editezi o piesa si daca apesi click dreapta pe ea si alegi editare.

In Elementor avem si piese globale. Acestea pot fi piese normale, simple, dar salvate global. Astfel le poti folosi oriunde vrei si le poti edita mai rapid. Elementor are o selectie de elemente mai mare ca numar decat Divi, dar ambele suporta si pluginuri din terte parti. Cu Elementor adaugi mai rapid elemente, pe cand la Divi ai nevoie de ceva timp im plus.