Proiectarea unui site web cu aspect profesional nu a fost pentru toată lumea, mai ales că am simțit cu toții că trebuie absolut să fii un profesionist în codificare și web designer. În zilele noastre, vedem noi instrumente care apar pentru ecosistemul WordPress, pentru a oferi o soluție din ce în ce mai ușoară la proiectarea unui site web și aceasta la îndemâna celor mai începători.
În ceea ce privește designul layout-urilor WordPress, a trebuit deja să trimitem pluginul Compozitor Visual, care este cu siguranță unul dintre cele mai bune instrumente atunci când vine vorba de design de layout. Trebuie remarcat însă că această soluție nu este potrivită pentru toată lumea. Acesta este motivul pentru care în acest tutorial, vă vom prezenta mai multe despre WordPress plug-in Elementor, care este a WordPress plug-in freemium (gratuit, dar extensibil prin abonament).
De unde să obțineți Elementor pentru WordPress
Avem în vedere serios să vă facem să vedem potențialul pluginului, iar soluția gratuită vă va ajuta să începeți fără a plăti un ban. Această soluție gratuită este disponibilă pe WordPress.org. A fi WordPress plug-in, acesta din urmă este instalat ca oricare altul plugin din tabloul de bord.
Dacă pluginul reușește să vă satisfacă complet, veți putea obține licența completă cu toate funcționalitățile de pe site elementor oficial.
Principalele caracteristici ale Elementor
Înainte de a începe tutorialul cu o prezentare generală a pluginului, vă vom prezenta mai întâi principalele caracteristici ale pluginului (versiunea gratuită și versiunea completă).
| versiune gratuită | Versiunea completă |
|---|---|
| Mai multe coloane | Meniu de navigare, articol |
| Module Texte, titluri | Module WooCommerce (produse, categorii) |
| Module video, imagine, carusel, galerii, Soundcloud | Integrare Facebook (pagină, buton, comentarii) |
| Modul de distribuire | prețurile de masă |
| Modul HTML | Portofoliu, Formular |
| Modul pentru widgetul WordPress | Modul de cercetare |
Rețineți că aceasta este o listă oarecum exhaustivă a diferitelor caracteristici oferite de plugin. Veți găsi mai multe detalii în explorând site-ul lor web.
Începeți cu Elementor
Nu vom acoperi aici întregul proces de instalare. Deoarece acesta este un plugin WordPress, procedura de instalare a fost deja explicată în un tutorial anterior. Cu toate acestea, după instalare, veți fi condus la pagina de pornire a pluginului.
Dacă aveți această pagină pe ecran, atunci ați instalat corect Plugin Elementor. În prezent folosim versiunea completă pentru acest tutorial, dar interfața nu ar trebui să fie prea diferită de versiunea gratuită.
Înainte de a accesa interfața de editare, vă voi invita să vă înregistrați licența. Acest lucru este valabil numai pentru cei care au optat pentru versiunea completă. Dacă aveți versiunea gratuită, puteți accesa secțiunea următoare. Pentru a vă înregistra licența, veți observa o notificare pe WordPress care vă va solicita să vă înregistrați licența.
Deci, faceți clic pe el pentru a accesa pagina de înregistrare și faceți clic pe Activati.
În mod normal, veți avea nevoie de pagina de confirmare dacă licența dvs. este validă.
Dacă nu ajungeți la această pagină, vă invit să contactați dezvoltatorii pluginului pentru mai multe asistență cu problema.
Cum se utilizează Elementor
Elementor funcționează pe Pagini și Postări pe WordPress. Fie că utilizați interfața clasică sau noua interfață Gutenberg, veți vedea un buton care vă va solicita să utilizați constructorul Elementor.
În practică, nu va trebui întotdeauna să vă editați postările folosind Elementor. Prin urmare, vă invit să utilizați pluginul numai pe pagini. Făcând clic pe buton, veți accesa interfața de design Elementor care oferă un aer de deja vu (pentru cei care utilizează WordPress Customizer).
Deci, aveți în stânga diferitele controale oferite de plugin și în dreapta, aveți previzualizarea live a modificărilor dvs. În acest tutorial, folosim tema Twenty Sixteen WordPress.
Secțiuni elementor
Secțiunile din Elementor sunt grupuri de blocuri de funcționalități pe care le oferă Elementor. Numărul de secțiuni depinde dacă utilizați versiunea completă și dacă utilizați WooCommerce, Yoast SEO sau alte plugin-uri compatibile. În funcție de aceste condiții, vei avea mai multe sau mai puține secțiuni pe interfața ta. Deoarece folosim versiunea completă cu pluginul WooCommerce activat, așa arată interfața noastră.
Cum să plasați un bloc Elementor
După ce extindeți o secțiune, veți găsi Elementor Blocks. Diferitele blocuri Elementor sunt plasate prin „Drag & Drop” pe zona evidențiată cu linii punctate.
Cum sa alegi un layout pe Elementor
Înainte de a adăuga un bloc pe Elementor, trebuie să vă amintiți să alegeți un aspect făcând clic pe butonul „+” din secțiunea evidențiată.
În funcție de nevoile dvs., veți alege aspectul cel mai potrivit. După ce ați ales un aspect, aveți evidențiată o reprezentare a acelei secțiuni pe aceeași zonă. Această secțiune va afișa același număr de coloane care corespunde alegerii dvs. În cazul meu, am ales o coloană cu 3 coloane.
Diferitele blocuri cu semnul „+” în interior sunt zonele care pot accepta blocuri Elementor. Dacă adăugați un bloc Elementor fără a alege mai întâi un aspect, aspectul unei singure coloane va fi ales în mod implicit.
Secțiunile Elementor pot fi reordonate între ele, urmând același principiu „drag & drop”. De asemenea, puteți șterge o secțiune, dacă nu mai doriți să o utilizați.
Iată un exemplu de secțiune care conține 2 blocuri și anume blocul de titlu și blocul de text.
Cum se utilizează alte instrumente de proiectare
După ce ați terminat proiectarea, unul dintre lucrurile pe care doriți să le faceți este să vă salvați munca. Veți găsi această opțiune chiar în partea de jos a secțiunii care afișează diferitele secțiuni Elementor.
Aveți de ales între salvarea directă (Publicare) și salvarea ca schiță sau ca șablon. Vom explora aceste diferite puncte mai târziu.
În timpul proiectării, vă recomandăm să previzualizați modificările fără interfața suplimentară a Elementor. Tot ce trebuie să faceți este să faceți clic pe pictograma ochi.
Se întâmplă ca în timpul proiectării să apară o eroare (o acțiune involuntară). În acest caz, Elementor oferă un istoric, care vă permite să navigați prin toate acțiunile dvs.
Acest lucru vă va permite să vă întoarceți cu ușurință înapoi.
Opțiunea „Browser”, care apare chiar înainte de butonul istoric, vă permite să modificați în continuare diferitele secțiuni în raport cu browserul utilizat de vizitatori. Această opțiune vă oferă acces la modificarea avansată a structurilor secțiunii (lățimea coloanei). Trebuie să faceți modificări aici foarte atent.
Butonul „Setări” vă permite să modificați anumite opțiuni specifice paginii, cum ar fi titlul, imaginea prezentată sau starea, printre altele.
Asta este pentru acest tutorial, vom explora Elementor mai multe în următorul nostru tutorial. Nu ezitați să aruncați o privire la Site-ul oficial care oferă exemple mult mai reușite.
