Cum să creați și să utilizați filele Elementor

Când construiți un site web, este esențial să vă asigurați că conținutul dvs. este bine organizat. Aranjarea ordonată a paginilor vă poate ajuta la îmbunătățirea experienței utilizatorului (UX) și a face textul mai digerabil. Una dintre modalitățile prin care vă puteți organiza conținutul este utilizarea widget-ului Elementor Tabs.

Conținutul cu file permite utilizatorilor să alterne între diferite secțiuni de conținut. Această caracteristică elimină nevoia vizitatorilor de a naviga în diferite zone ale paginilor. Gruparea conținutului asociat în containere cu file poate îmbunătăți aspectul și gradul de utilizare al site-ului dvs. În plus, puteți configura toate acestea fără nicio experiență de dezvoltare WordPress.

În această postare, vom prezenta pe scurt Elementor și diferitele sale versiuni. Apoi vă vom prezenta cum să creați și să personalizați filele Elementor și câteva instrumente terțe pe care le puteți utiliza pentru a îmbunătăți funcționalitatea implicită a widget-ului.

Să începem!

O prezentare generală a Elementor

Elementor este un plugin popular și puternic pentru crearea de site-uri web:

Puteți folosi generatorul de pagini pentru a crea pagini frumoase pentru site-ul dvs., fie de la zero, fie folosind șabloane prefabricate. Elementor are un editor drag-and-drop, astfel încât nu va trebui să atingeți o linie de cod.

Este important să rețineți că există o versiune gratuită și plătită a Elementor. Pluginul gratuit Elementor vă permite să creați pagini și postări standard.

Cu toate acestea, caracteristicile și funcționalitatea acestuia pot fi limitative. Pentru a debloca suita completă de instrumente, vă recomandăm să faceți upgrade la Elementor Pro. Pe parcursul acestei postări, vom sublinia diferențele dintre planul gratuit și cel profesional atunci când lucrăm cu widgetul Tabs.

Cum se creează file Elementor (widget Tabs)

Acum că înțelegem mai multe despre Elementor, să vedem cum să folosiți widgetul Tabs. Rețineți că, pentru următorul tutorial, vom presupune că aveți deja Elementor instalat și activat pe site-ul dvs. WordPress.

Pentru a începe, navigați la postarea sau pagina WordPress în care doriți să adăugați conținutul cu file și selectați Editați cu Elementor :

Aceasta va lansa interfața editorului Elementor. Din panoul din stânga, sub Elemente , căutați și selectați widgetul File :

Puteți trage și plasa widget-ul într-o secțiune de pagină. Odată ce plasați widgetul Tabs, va apărea un nou tablou de bord cu setările sale:

Puteți introduce titlul și conținutul pentru fiecare filă. De asemenea, puteți face clic pe butonul + Adăugați articol pentru a insera o altă filă. Sub Tip , selectați dacă doriți să afișați filele pe orizontală sau pe verticală.

Cum să vă personalizați filele Elementor

După ce adăugați text în file, puteți personaliza setările generale ale widget-ului. Există câteva opțiuni diferite.

Selectați fiecare filă personalizată pentru a-și modifica atributele, inclusiv titlul, conținutul casetei și pictograma. De asemenea, îi puteți modifica poziția și alinierea:

Apoi, sub fila Stil , veți găsi multe opțiuni pentru personalizarea designului și aspectului widgetului Elementor Tabs. Puteți modifica culoarea și umbra textului, tipografia, spațierea și multe altele:

Puteți schimba culoarea și lățimea chenarului care înconjoară filele. Această caracteristică de design poate ajuta la distingerea secțiunilor individuale.

Sub Titlu , puteți modifica culoarea textului titlurilor filelor. De asemenea, puteți modifica fontul și dimensiunea textului făcând clic pe Tipografie :

Când ați terminat, salvați modificările. Există, de asemenea, câteva setări avansate pe care ați putea să vă gândiți să le utilizați pentru a face conținutul cu file mai sofisticat.

Setări avansate pentru filele Elementor

Sub fila Avansat din panoul de setări widget, veți găsi o gamă largă de opțiuni suplimentare:

Să aruncăm o privire mai atentă la aceste setări:

• Avansat: Modificați marginile și umpluturile filelor.
• Efecte de mișcare: adăugați efecte de defilare și mouse pentru a face widget-ul mai interactiv și adăugați o animație de intrare.
• Transformați: răsturnați, rotiți și scalați widget-ul.
• Fundal: alegeți între un fundal standard sau treceți cursorul pentru a insera o tranziție.
• Chenar: alegeți tipul de chenar, cum ar fi o linie continuă sau întreruptă.
• Mască: Selectați o mască cu design elegant și aplicați-o pe widget.
• Poziționare: Reglați lățimea și poziția widget-ului.
• Responsive: modificați vizibilitatea receptivă care va afecta previzualizarea sau paginile live.
• Atribute: setați atribute personalizate pentru element wrapper.
• CSS personalizat: introduceți CSS personalizat.

Este important să rețineți că, dacă utilizați versiunea gratuită a Elementor, nu veți avea acces la toate aceste setări avansate. De exemplu, nu puteți adăuga atribute personalizate, efecte de defilare sau CSS.

Cum să adăugați un element în widgetul File

Cu Elementor Pro, puteți, de asemenea, să inserați un alt element în widgetul Tabs. De exemplu, să presupunem că doriți să adăugați widgetul Hărți sub o filă Locații .

Pentru a face acest lucru, creați harta pe care doriți să o utilizați, apoi salvați-o ca Widget global făcând clic dreapta pe pictograma creion și selectând Salvare ca global :

Apoi, navigați la Biblioteca de șabloane (din tabloul de bord WordPress) și copiați codul scurt al widgetului global pe care tocmai l-ați creat.

Apoi faceți clic în interiorul widget-ului File și selectați butonul + Adăugare articol pentru a adăuga o filă nouă. În zona de text a containerului, inserați codul scurt pe care tocmai l-ați copiat:

Când ați terminat, faceți clic pe ACTUALIZARE sau PUBLICARE în partea de jos a ecranului. Apoi puteți previzualiza modul în care arată widgetul pe partea din față a site-ului dvs.:

Asta e! Ai terminat.

8 pluginuri de top pentru filele Elementor

Elementor este un instrument robust care vine cu toate funcționalitățile și caracteristicile de care veți avea nevoie pentru a crea conținut frumos și funcțional cu file.

Cu toate acestea, este posibil să doriți să vă duceți mai departe designul sau să utilizați capabilități avansate. În acest caz, ați putea lua în considerare și asocierea Elementor cu un alt instrument terță parte.

Să aruncăm o privire la unele dintre pluginurile de top pentru Elementor Tabs, clasate fără o anumită ordine.

1. ElementsKit Elementor Table Widget

ElementsKit Addon pentru Elementor este o extensie populară:

Widgetul lui Table vă permite să prezentați o cantitate mare de date nesincronizate într-un mod organizat. Puteți construi un tabel personalizabil, puteți adăuga conținut corporal și puteți insera imagini și elemente de navigare.

Caracteristicile ElementsKit includ:

• Tabele de comparație
• Programe și calendare
• Management de proiect
• Meniuri
• Peste 500 de blocuri
• Peste 70 de suplimente
• Un mega constructor de meniuri
• Efecte de paralaxă
• Un generator de pop-up modal

Prețul pentru ElementsKit începe de la 39 USD pe an pentru un singur site. Acest plan include un an de actualizări și asistență.

2. File elegante pentru Elementor

Elegant Tabs pentru Elementor este un instrument intuitiv care vă ajută să creați și să personalizați file dinamice:

Acest supliment poate fi o alegere solidă dacă sunteți în căutarea unei extensii cu multe opțiuni de personalizare a designului. Puteți adăuga culori, pictograme și fonturi personalizate. De asemenea, puteți utiliza Elegant Tabs pentru a adăuga o funcție de comutare automată la file și pentru a le lega la alt conținut de pe site-ul dvs.

Caracteristicile cheie ale Elegant Tabs includ:

• Opțiuni avansate de stil
• O funcție de comutare automată
• Opțiunea de a seta orice filă activă la încărcare
• File justificate și verticale
• Legături profunde
• Suport pentru alinierea filelor

Prețul pentru Elegant Tabs începe de la 19 USD pe an. Acest plan include șase luni de actualizări.

3. Addons Livemesh

Addons Livemesh pentru Elementor include o multitudine de elemente gata făcute pentru a vă ajuta să vă stilați și să vă structurați cu ușurință conținutul cu file:

Puteți alege dintre tipurile de file deschise și întunecate, peste 10 modele de file și opțiuni de aspect orizontal și vertical. Livemesh Addons este, de asemenea, ușor de utilizat, ceea ce este excelent dacă sunteți nou în WordPress sau Elementor.

Caracteristicile cheie ale Livemesh includ:

• 10 modele de file deschise și 10 modele de file întunecate
• Opțiuni verticale și orizontale
• Rezoluție mobilă personalizabilă
• 25+ suplimente
• Suport pentru icoane

Planurile de suplimente Livemesh încep de la 37 USD pe an. Acest plan include actualizări și asistență pentru un an.

4. Suplimente Elementor

Elementor Addons, din popularul PowerPack, este un plugin bogat în funcții pentru a îmbunătăți atât designul, cât și funcționalitatea widget-ului Elementor Tabs:

Puteți folosi acest plugin pentru a adăuga text și imagini la file și pentru a aplica șase stiluri pentru widgetul File avansate. Este ușor de utilizat și ușor de înțeles. În plus, Elementor Addons este, de asemenea, ușor, așa că nu trebuie să vă faceți griji cu privire la încetinirea site-ului.

Caracteristicile cheie ale Elementor Addons by PowerPack includ:

• O interfață rapidă și ușoară
• Șabloane prefabricate
• Afișare conținut personalizat
• Stiluri de file avansate

Începând de la 44 USD pe an, acest plugin este mai scump decât alte opțiuni din această listă. Cu toate acestea, are o suită completă de widget-uri pentru a personaliza toate aspectele site-ului dvs., nu doar conținutul cu file.

5. JetElements

JetElements oferă un widget Tabele receptive care ar putea fi ideal dacă căutați o modalitate rapidă și ușoară de a vă grupa conținutul:

Vă permite să prezentați datele nestructurate într-un mod curat și modern. JetElements oferă, de asemenea, un widget Tabel de prețuri pentru a personaliza și a stila detaliile de preț în opt moduri diferite.

Caracteristicile cheie ale JetElements includ:

• 45 de widget-uri
• Import CSV în setările tabelului
• 8 opțiuni de stil
• Suport pentru toate tipurile de conținut
• Complet personalizabil

Un abonament JetElements începe de la 24 USD pe an. Crocoblock oferă, de asemenea, un pachet all-inclusive pentru 130 USD pe an, cu peste 150 de widget-uri.

6. Suplimente esențiale

Un alt plugin popular pe care l-ați putea utiliza pentru filele dvs. Elementor este Essential Addons:

Este unul dintre cele mai populare plugin-uri widget Elementor. Include peste 100 de blocuri gata făcute și mai mult de 80 de elemente pentru extinderea și îmbunătățirea constructorului de site-uri web.

Unul dintre cele mai bune elemente pe care le puteți folosi pentru conținutul cu file este Tabelul de date al pluginului. Acest instrument vă permite să proiectați fără probleme aproape orice tip de tabel și să adăugați pictograme, filtre și multe altele.

Caracteristicile cheie ale Addons-ului esențial includ:

• Import CSV în setările tabelului
• Opțiuni de filtrare
• Setări complet personalizabile
• Opțiuni avansate de stil
• File avansate și elemente de acordeon
• Tabelele de prețuri

Prețul pentru suplimentele esențiale începe de la 39,97 USD pe an pentru un site web. Vine cu un an de actualizări și asistență.

7. Suplimente premium

Premium Addons este un instrument extrem de personalizabil pentru Elementor, care vine cu o gamă largă de widget-uri gratuite și premium:

Printre multele widget-uri puternice incluse cu acest supliment se numără Tabelul de prețuri Elementor. Vine cu o funcție de sortare, căutare live și opțiunea de a aranja elementele în ordine crescătoare sau descrescătoare.

Caracteristicile cheie ale Addons Premium includ:

• Opțiunea de a importa fișiere CSV
• Adăugați adrese URL în celulele tabelului
• Căutare și sortare live
• Opțiuni de personalizare și stil
• Animații Lottie

Puteți descărca și utiliza gratuit Premium Addons Elementor Table Widget. Există și o versiune premium, începând de la 39 USD pe an.

8. Pachetul de elemente

Un ultim supliment pe care îl puteți utiliza cu widgetul Elementor Tabs este Element Pack:

Acest pachet de extensii Elementor include un widget Tabel care vă poate prezenta conținutul într-un mod captivant și elegant. Puteți crea diverse tabele în conținutul dvs. cu file, inclusiv tabele de prețuri, conținut și criptomonede.

Caracteristicile cheie ale pachetului Element includ:

• Import CSV în setările tabelului
• Elemente cu trei mese
• Opțiuni de personalizare și stil
• O caracteristică de filtrare
• Cautare in timp real

O licență pentru un singur site pentru Element Pack costă 29,25 USD pe an, ceea ce o face una dintre opțiunile mai ieftine din această listă. Planul include, de asemenea, o garanție de rambursare a banilor de 20 de zile.

rezumat

Elementor este un instrument excelent care vă poate ajuta să vă proiectați și să vă construiți site-ul fără efort. Dacă doriți să grupați și să vă organizați conținutul într-un mod atrăgător, vă recomandăm să utilizați widgetul Elementor Tabs.

După cum am discutat în această postare, puteți introduce cu ușurință acest widget în orice pagină sau postare prin intermediul editorului Elementor. Apoi puteți adăuga conținutul dvs. și îl puteți modela pentru a se potrivi cu brandingul dvs. Pentru a extinde funcționalitatea widget-ului, îl puteți asocia și cu un plugin terță parte, cum ar fi ElementsKit.

Designul prietenos și atractiv este esențial pentru succesul unui site. De asemenea, va trebui să colaborați cu un furnizor puternic de găzduire WordPress. Consultați planurile noastre de găzduire pentru a vedea cum Kinsta vă poate duce site-ul la următorul nivel!