Tutorial WordPress Elementor | Un ghid pas cu pas în 2024

Doriți să începeți cu Elementor și căutați un Tutorial WordPress Elementor? Căutarea ta se termină aici. În acest articol, vă voi informa despre toate lucrurile pe care trebuie să le știți despre Elementor.

Chiar de la instalarea acestuia până la crearea unei pagini extrem de stilate, toate îndoielile tale vor fi rezolvate dacă citești articolul. Te asigur; lectura nu va merge degeaba!

Dar aveți nevoie de un plugin pentru crearea de site-uri web pentru a oferi o notă profesională site-ului dvs.

Cum îl obții? Ei bine, folosesc Elementor pentru asta. Elementor îmi face extrem de ușor să realizez un site web profesional prin simpla funcție de glisare și plasare. 

Sunt curios să aflu mai multe despre Elementor, apoi verifică-mi detaliile Elementor Review.

Cum se instalează Elementor pe WordPress

Ei bine, există 2 moduri prin care puteți instala Elementor pe WordPress. 

• Prin site-ul oficial al Elementor

Accesați site-ul oficial al Elementor și faceți clic pe butonul Descărcare gratuită afișat pe site. 

De îndată ce faceți clic pe butonul Descărcare gratuită, va apărea o fereastră pop-up pentru a vă abona la site-ul web Elementor și, odată ce faceți același lucru, pluginul va începe automat descărcarea.

Veți găsi un fișier zip descărcat pe laptop/Pc. Acum mergeți la tabloul de bord WordPress și faceți clic pe secțiunea Plugin-uri > Adăugați un plugin nou > Încărcați plugin

Alegeți fișierul Elementor și încărcați-l în WordPress.

• Prin tabloul de bord WordPress

Puteți instala pluginul Elementor direct din tabloul de bord WordPress. Accesați Plugin și apoi Adăugați un plugin nou

În colțul din dreapta sus, veți găsi o bară de căutare, tastați Elementor în bara de căutare. Primul rezultat este ceea ce trebuie să instalați în WordPress. Pur și simplu faceți clic pe instalare și așteptați ca pluginul să fie instalat. Activați pluginul și aveți un constructor de site-uri web grozav gata de implementare.

Acum că ați instalat Elementor în tabloul de bord WordPress, să aruncăm o privire asupra funcțiilor pe care le oferă.

Caracteristicile Elementor și utilizarea lor în construirea unei pagini web

Lista de funcții pe care le oferă Elementor este nesfârșită, așa că voi discuta multe caracteristici vitale ale Elementor. Asigurați-vă că le citiți și apoi încercați-le.

Există două planuri pentru Elementor The Free și The Pro. După cum sugerează și numele pentru planul Pro, va trebui să jucați, dar există mai multe caracteristici care vin și cu planul său gratuit.

Voi începe prin a discuta mai întâi despre funcțiile din planul gratuit, urmat de Pro.

Caracteristici ale planului gratuit Elementor

Caracteristici esențiale:

• Drag and Drop

Funcția de glisare și plasare a Elementor este foarte rapidă și vă ajută să creați pagini web mai rapid. De la crearea unui aspect de pagină web până la reglarea fină, totul se poate face prin simpla glisare și plasare.

Nu trebuie să comutați filele sau să schimbați pagina pentru a vă proiecta anteturile și subsolurile. Cu Elementor, ați putea face acest lucru pe aceeași pagină în care se află pagina dvs. web principală.

Puteți copia și lipi, chiar și duplica stilul sau caracteristica pe care doriți să o utilizați. Acest lucru vă economisește timp pentru a reconstrui aceeași caracteristică din nou și din nou.

Cu opțiunea barei de căutare oferită de Elementor, puteți naviga cu ușurință prin site și puteți ajunge la fila dorită în câteva secunde. Această caracteristică este cu adevărat utilă atunci când aveți o pagină foarte lungă de construit.

Există 3 opțiuni pentru a vă salva designul, de la ștergere și obținerea unei copii de rezervă. Puteți reface/anulați modelele pe care le-ați realizat. Acest lucru vă oferă posibilitatea de a sorta A/B testarea paginii cu observațiile dvs. 

Puteți vizita toate revizuirile din fila de revizuire, adică puteți arunca o privire la toate tipurile de modele pe care le-ați încercat până acum pe pagina dvs. web și puteți selecta și o versiune anterioară dacă nu vă place pagina dvs. actuală. 

Doriți să încercați multe funcții diferite și să vedeți ce funcționează? Nicio problemă cu Elementor; puteți să proiectați pagina în modul schiță, să încercați totul și să luați pagina mai târziu, după ce sunteți complet gata să publicați pagina.

Cum să utilizați funcția Elementor Drag and Drop

Toate funcțiile de glisare și plasare sunt disponibile în partea stângă a paginii de îndată ce creați o pagină.

După ce ați creat o pagină pe WordPress și i-ați dat un titlu, faceți clic pe editați cu Elementor, ceea ce vă va duce la editorul live al Elementor, care arată ca imaginea de mai jos.

În a doua imagine de mai sus, puteți privi opțiunile de glisare și plasare din partea stângă a paginii. Există multe widget-uri pe care trebuie doar să le derulați în jos, sau puteți căuta și un widget cu ajutorul barei de căutare de sus.

• Șabloane de proiectare

Obțineți șabloane de design încorporate cu Elementor. Nu doar 5 sau 10, dar Elementor vă oferă peste 100 de șabloane de design care sunt gratuite și multe altele atunci când faceți upgrade la versiunea Pro.

Cum să selectați șablonul dorit pentru biblioteca de șabloane Elementor

Când vedeți pentru prima dată deschisă pagina de constructor Elementor, veți vedea ceva de genul prezentat mai jos:

Imaginea este preluată de pe site-ul Elementor și este destul de explicită.

De îndată ce faceți clic pe opțiunea Folder, veți vedea o fereastră pop-up afișată mai jos.

• Widget-urile

Widgeturile drag and drop care vin cu Elementor sunt nenumărate. Unii dintre ei sunt:

• Secțiunea interioară: Să împărțim o secțiune în două.
• Titlu: plasați acest câmp în pagina dvs. web pentru a adăuga un titlu captivant
• Imagine: Pune imagini pe pagina ta web cu ajutorul acestui widget
• Editor de text: introduceți text în pagina dvs. web cu ajutorul unui widget de editor de text
• Video: puteți utiliza un widget Video pentru a plasa videoclipuri de calitate pe pagina dvs. Va crește experiența utilizatorului
• Buton: Îndemnul la acțiuni este foarte important pentru aproape tot site-ul, cu butoane puteți pune îndemnul la acțiuni pe pagina dvs. și le puteți lega la pagina de destinație a produsului.
• Evaluare cu stele: Evaluarea cu stele este benefică pentru orice site de comerț electronic pentru a acorda o evaluare mai multor produse diferite pe care le are de oferit.
• Divizor: vă ajută pagina web în indentare și generează spațiu alb pentru a crește experiența utilizatorului.
• Pictograme: Cu widgetul cu pictograme, puteți pune pictograme captivante ale rețelelor sociale, precum și diferite servicii pentru a face pagina dvs. să arate mai atractivă.
• Contor: creați un temporizator de numărătoare inversă pentru produsele dvs. sau serviciile suplimentare limitate pentru a crea urgență.
• Mărturii: adăugați mărturii despre produsele și serviciile dvs. pentru a construi încrederea vizitatorilor site-ului dvs.

În afară de aceasta, există multe alte widget-uri, cum ar fi carusel de imagini, galerie de bază, file, coduri scurte, HTML, bară de meniu etc. Asigurați-vă că vă uitați la toate caracteristicile după instalarea pluginului pe WordPress.

Aruncă o privire la câteva dintre widget-urile pe care Elementor le are mai jos în imagine.

Cum să utilizați widget-urile Elementor

Pentru utilizarea widgeturilor Elementor:

Mergeți la tabloul de bord al Elementor și uitați-vă în partea stângă a paginii. Există o serie de widget-uri pe care le puteți trage și plasa pe pagina dvs. web și puteți începe munca.

• Proiectare și editare responsive

Odată cu regula de indexare a mobile-first venind în lumina reflectoarelor, Google se asigură că site-ul prietenos cu dispozitivele mobile se plasează doar mai sus pe Google, și același lucru este și acum și cu alte SERP-uri. 

Cu Elementor, nu trebuie să vă faceți griji cu privire la compatibilitatea cu dispozitivele mobile, deoarece toate șabloanele, indiferent dacă sunt gratuite sau plătite, sunt receptive pentru dispozitive mobile, precum și pentru tablete și desktop. De asemenea, puteți edita ce funcții vor vedea utilizatorii dvs. când accesează de pe mobil sau desktop. 

Le puteți oferi experiențe diferite pe ambele dispozitive, deși această practică nu este recomandată, deoarece uneori ar putea crea confuzie în mintea utilizatorilor dvs. cu privire la marcă.

Cum să vezi răspunsul mobil al paginilor tale web

În partea de jos a generatorului de pagini web, în ​​colțul din stânga jos, veți vedea trei pictograme care au opțiunea de a vă vedea pagina web prin desktop, tabletă și mobil. Site-ul va arăta exact la fel pentru alți utilizatori după ce vă publicați site-ul.

Caracteristici ale fluxului de lucru:

• Nicio cerință de codare

Nu trebuie să fiți un expert sau chiar să cunoașteți puțin despre codificare atunci când utilizați Elementor. Toate widget-urile menționate mai sus sunt drag and drop și puteți crea cu ușurință o pagină web de ultimă generație și elegantă cu ele. 

Elementor însuși are grijă de partea de codare. Nu numai asta, codul folosit este optimizat și scurtat astfel încât să scadă timpul de încărcare a paginii tale web - un factor foarte important pentru clasarea în top.

• Bara de navigare

Cu ajutorul navigării, puteți vedea structura pe care ați proiectat-o ​​pe pagina web, adică secvențierea paginii dvs. și fluxul. Puteți modifica, elimina și duplica widget-urile dacă doriți și prin bara Navigator.

Cum se utilizează Bara de navigare

Pentru a utiliza Navigatorul, faceți clic dreapta pe partea de sus a paginii dvs. web deschise cu Elementor și faceți clic pe Navigator. Va apărea un pop-up, așa cum se arată în imaginea de mai jos.

• Hotkeys

Tastele rapide sunt tastele de comandă rapidă către widget-ul principal care sunt prezente în tabloul de bord Elementor. Aruncă o privire la imagine pentru a vedea câteva dintre tastele rapide prestabilite.

• Funcție de editare în linie

Cu Elementor, nu trebuie să scrieți conținutul în altă parte și să copiați-lipiți și să editați stilul acestuia. Puteți să tastați direct pe tabloul de bord WordPress cu stilul dorit și să vă economisiți timp prețios.

Caracteristici de proiectare

• Fonturi globale

Cu ajutorul Elementor, puteți seta un anumit stil de font pentru întregul site web cu un singur clic. Nu contează dacă este un titlu, un paragraf, un citat sau chiar un îndemn. 

• Culori globale

În mod similar, pe măsură ce fontul Global este setat, puteți seta culoarea întregului text al site-ului dvs. la aceeași, dacă este necesar.

• Degrade de fundal

Cu funcția de culoare gradient, puteți lumina fundalul pe care l-ați setat pentru fiecare bloc și chiar pagina dvs. de pornire. Aceste culori gradient se aplică fiecărei pagini pe care o aveți pe site-ul dvs. web.

• Videoclipuri de fundal

Puteți folosi videoclipuri ca fundal cu Elementor. Videoclipurile din fundal ar putea să vă lumineze pagina web.

Cum să utilizați funcțiile de design în Elementor

Toate caracteristicile menționate mai sus pot fi găsite cu ușurință în tabloul de bord Elementor și le puteți utiliza doar făcând clic și testând ceea ce arată bine pe pagina dvs. web.

• Caracteristici Alte
• Aplicați suprapunerea de fundal
• Pune prezentarea în fundal
• Creați o pânză pentru a face pagina dvs. să pară plină de viață
• Folosiți modurile de amestecare
• Filtre de stil CSS
• Separatoare de forme
• Umbra cutiei
• Icoane
• Exportați pictograme SVG de pe alte site-uri web

Caracteristici de aspect

Puteți modifica aspectul paginii web și o puteți optimiza pentru a arăta bine cu diverse funcții care Elementor furnizează, cum ar fi lățimea și înălțimea secțiunii, lățimea coloanei, golul și poziția acesteia.

De asemenea, puteți ajusta marginile și umplutura, care este o caracteristică foarte importantă pe care o aveți pe o pagină web. 

Caracteristicile Planului Elementor Pro

Essentials

În afară de caracteristica gratuită, Elementor Pro are încă 2 funcții de oferit.

1. Generator de pop-up

Puteți crea ferestre pop-up pentru înscriere, pentru o ofertă de timp limitată și, de asemenea, ferestre pop-up cu intenție de ieșire pentru a vă crește vânzările și a face pagina mai atractivă.

Caracteristica, ca și alte widget-uri, este prezentă în tabloul de bord al Elementor.

Cu Pop-up Builder, puteți crea următoarele ferestre pop-up:

• Abonament de e-mail
• Ferestre pop-up pentru formularul de autentificare
• Ferestre pop-up pentru bannere de promovare și vânzări
• Captarea plumbului
• Blocarea conținutului și afișarea ferestrelor pop-up
• anunturi
• Exit Intent
• Ferestre pop-up tip Mat de bun venit
• Produs înrudit și vânzări suplimentare

2. Creator de teme

Cu Elementor Pro, aveți control deplin asupra tuturor funcțiilor pe care le utilizați pe site-ul dvs. web. Puteți să proiectați cele 404 pagini și să vă direcționați utilizatorii către pagina pe care o alegeți. 

Puteți gestiona antetul și subsolul pe aceeași pagină pe care proiectați. Cu integrarea puternică WooCommerce, vă puteți optimiza și paginile de produse.

Caracteristici de proiectare

1. CSS personalizat

Cu fiecare widget pe care îl adăugați, puteți adăuga un fragment CSS personalizat pentru a face conținutul mai personalizat și mai atractiv. Dar pentru utilizarea acestei funcții, ar trebui să aveți cunoștințe decente despre CSS. 

Folosirea lui fără cunoștințe prealabile poate merge și spre sud. Deci, dacă nu dețineți setul de abilități, mai bine stați departe de caracteristica CSS personalizat.

2. Efecte de mișcare

Puteți adăuga animații grozave și puteți oferi site-ului dvs. un tip de desen animat. Acest lucru ajută la atragerea unui anumit public țintă și poate fi foarte benefic uneori. 

Cum să utilizați funcția de design în Elementor

Ei bine, nu este știință rachetă. Ca și alte widget-uri, puteți derula panoul tabloului de bord și puteți să le căutați sau pur și simplu să introduceți numele widget-ului în panoul de căutare.

Marketing

Aceste caracteristici sunt cele care lipsesc în versiunea gratuită a Elementor.

• Widget formular

Cu generatorul de formulare Elementor, puteți face diverse modificări și puteți face formularele interesante și atractive de completat.

• Alegeți aspectul dorit și spațierea destul de ușor.
• Peste 10 câmpuri din care să alegeți, pe care le doriți în formularul dvs.
• Alegeți dintre numeroasele culori și tipografii care se potrivesc și se potrivesc cu designul paginii web și cu schema de culori.
• De asemenea, puteți crea formulare dinamice
• Dacă aveți nevoie de un formular lung cu generatorul de formulare Elementor, îl puteți construi și îl puteți împărți în mai mulți pași, astfel încât utilizatorii să îl completeze într-un mod ușor.

• Widget Carusel mărturie

• Puteți folosi șabloanele pre-proiectate care vin cu versiunea Pro a Elementor și puteți crea un carusel de mărturii uimitor pentru ca afacerea dvs. să obțină mai multe conversii.
• Aliniați conținutul și aspectul caruselului. Aveți control deplin asupra aspectului și alinierii caruselului.
• Șabloanele de personalizare furnizate în Elementor Pro sunt ușor de utilizat și oferă o experiență ușor de utilizat atât celui care le construiește, cât și celui care le vede.

Cum să utilizați Widget-ul Carusel de mărturie în Elementor Pro

• Căutați Testimonial Slider în bara de căutare a tabloului de bord. Deschideți widgetul și puteți începe prin a crea glisorul imediat. Există două skinuri pentru a alege dintre implicit și bubble. Alege-l pe cel de care ai nevoie in functie de stil.
• Aliniați și finalizați aspectul mărturiilor dvs., ceea ce se poate face prin intermediul a 5 opțiuni Imagine inline, imagine stivuită, imaginea de mai sus, imaginea din stânga și imaginea din dreapta.
• Alegeți stilul și designul în funcție de schema de culori și adăugați conținut la glisor.
• Puteți reda automat diapozitivele de pe glisor, îl puteți întrerupe atunci când utilizatorii dau clic pe el sau puteți seta o anumită oră în opțiunea de schimbare a diapozitivelor. Prefer să folosesc pauza de pe opțiunea de interacțiune pentru glisoarele mele de mărturie.
• Link-uri de acțiune

Vă puteți conecta site-ul web cu WhatsApp, Google Calendar și multe alte aplicații cu Elementor Pro.

Cum să utilizați linkurile de acțiune în Elementor Pro

• Du-te la Elementor tabloul de bord și căutați câmpuri de link, care este unul dintre widgeturile Pro pe care le are Elementor.
• Alegeți opțiunea dinamică care este disponibilă în colțul din dreapta sus al ferestrei pop-up widget.
• Alegeți adresa URL de contact din opțiunea de acțiune.
• Adăugați toate detaliile pe care le solicită widget-ul și sunteți gata să vă integrați platforma de contact cu site-ul dvs. web.

Funcția Constructor de teme

• Conținut dinamic
• Folosiți integrarea impecabilă pentru a crea o pagină web dinamică excelentă.
• Puteți adăuga culori dinamice, imagini, chiar sigle de site și multe altele pe pagina dvs. web.
• Cel mai bun lucru este că puteți salva aspectul conținutului dinamic pe care l-ați creat și îl puteți utiliza oriunde pe site.

Cum să utilizați conținutul dinamic cu Elementor Pro

Voi prezenta un exemplu de utilizare a unui editor de text și de a face conținutul dinamic. Asigurați-vă că vedeți toate celelalte widget-uri și încercați-le.

1. Deschideți un editor de text și introduceți textul dorit pe pagina dvs. web. Acum faceți clic pe pictograma din colțul din dreapta sus al editorului, așa cum se arată în imaginea de mai jos.
2. Când faceți clic pe pictogramă, veți vedea o listă de opțiuni care apar printr-un meniu vertical. Acestea sunt clasificate în postare, arhivă și site. Alegeți opțiunea dorită și începeți imediat munca.
3. Acum, pentru a edita în continuare titlul paginii dvs., ar trebui să faceți clic pe o pictogramă, care este o cheie, așa cum se arată în imaginea de mai jos.

În casetele afișate în imaginea de mai sus, adică înainte, după și alternativ, trebuie să puneți titlul înainte de modificare, un titlu care ar trebui să fie după modificare și conținut consistent care va fi afișat în locul conținutului dinamic. când nu există înainte și după titlu.

Alte funcții de generare de teme în Elementor Pro

• Condiție de afișare: puteți decide ce să afișați și unde să afișați
• Antet și subsol: doar cu simpla glisare și plasare, puteți personaliza antetul și subsolul paginii dvs. web
• Antet lipicios: Adăugați un antet lipicios la anumite pagini sau pentru întregul site la nivel global.
• Pagina 404: proiectează o pagină 404 personalizată și redirecționează utilizatorii și publicul către pagina pe care o dorești.

Conținutul temei

• Widget din bara de meniu de navigare

• Există multe opțiuni de stil din care puteți alege pentru bara de navigare.
• Aceste stiluri răspund la toate dispozitivele și le puteți vedea pe versiunea mobilă și puteți face modificările necesare, dacă este necesar.
• Puteți să vă animați bara de navigare cu animație și efecte de hover. Chiar îți luminează pagina.
• Puteți alege cum să plasați meniul, adică pe orizontală, pe verticală, să îl vizualizați ca ecran complet, poate încercați opțiunea hamburger.

Cum să utilizați widgetul barei de meniu de navigare

1. Mergeți la tabloul de bord și căutați bara de meniu
2. Puteți seta meniul pe orizontală, verticală sau un meniu vertical, în funcție de stilul care arată bine cu site-ul dvs.
3. De asemenea, puteți adăuga căptușeală simplă și dublă sub fiecare conținut de meniu pentru a evidenția și chiar a schimba culoarea textului prin intermediul tabloului de bord.

• Căutare Widget

Widgetul de căutare vine cu trei skin-uri: widgetul de căutare implicit, minim și pe ecran complet.

Puteți modifica designul barei de căutare, precum și butonul pentru a se potrivi cu stilul paginii dvs. web.

Cum se utilizează bara de căutare cu Elementor Pro

Mergeți la tabloul de bord Elementor și căutați widgetul barei de căutare, alegeți stilul dorit, implicit, pe ecran complet sau minim și schimbați tipografia și culorile barei de căutare pentru a se potrivi cu tema dvs. de culoare.

• Alte funcții de conținut tematic pe care le obțineți cu Elementor Pro

• Widget de postare: modificați aspectul barei laterale punând acolo postările recente.
• Widget de comentarii WordPress: Cu acest widget, cititorii pot comenta despre postarea pe care ați scris-o.
• Widget de portofoliu: dacă aveți multe portofolii de afișat, utilizați acest widget de portofoliu pentru a le afișa într-un stil inovator și atractiv.

Toate aceste caracteristici sunt disponibile în tabloul de bord principal Elementor, similar altor widget-uri. Asigurați-vă că aruncați o privire asupra tuturor acestor caracteristici.

Prețul Elementor Pro

Review utilizator 

Link-uri rapide:

• Tutorial Elementor Pro
• CELE MAI BUNE SUPLIMENTARE ELEMENTOR
• Elementor Menu Anchor
• Duda vs Elementor

Întrebări frecvente despre tutorialul WordPress Elementor

De asemenea, citiți:

• Beaver Builder vs Divi
• Beaver Builder vs Elementor

Concluzie: Tutorial WordPress Elementor 2024

Unul dintre cele mai importante software de proiectare a paginilor web, Elementor, este o platformă de încredere și vie pe care să vă construiți site-ul. De la crearea unei pagini de blog de bază până la crearea unei pagini de destinație a produsului elegant și uluitoare, totul se poate face cu Elementor.

Versiunea Pro a Elementor are nenumărate funcții cu care să lucreze și să vă ducă site-ul la un nou nivel. Vă oferă libertatea de a avea control total și asupra site-ului dvs.

Nu trebuie să fii un programator pentru a folosi Elementor. Utilizarea Elementor este la fel de simplă ca să înveți cum să dai clic și să trageți și să plasați funcții.

Da, este nevoie de puțin timp pentru a vedea toate funcțiile și pentru a ști ce caracteristici sunt utile pentru site-ul dvs., dar timpul pe care îl dedicați Elementor va merita fiecare, vă asigur că.

Deci, încercați Elementor și spuneți-mi experiența dvs. comentând mai jos! 

Elementor Videoclipuri populare

Elementor pe rețelele sociale

Summit al creatorilor de pagini 2021 (@summit_camp) începe mâine! Obțineți biletul dvs. GRATUIT și discutați cu peste 35 de experți din industrie, inclusiv @bpines1 . Ne bucurăm să sponsorizez acest mare eveniment. Ne vedem acolo! 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elemntor) 9 Mai, 2021

Dă-te deoparte și bun venit cu prezentarea noastră din aprilie 2021. 🏆🌷 Luna aceasta aplaudăm 10 agenții de design din întreaga lume. Această colecție diversă reprezintă talentul de creație web Elementor din întreaga lume. 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elemntor) 19 Mai, 2021