Cum se creează un tabel Elementor în WordPress

Publicat: 2022-06-24

Tabelele sunt o componentă cheie în majoritatea site-urilor web. Le puteți folosi pentru a partaja tot felul de informații, de la prețuri la liste de funcții și link-uri. WordPress vă permite să configurați tabele de bază pentru site-ul dvs., dar este posibil să căutați mai multe opțiuni de personalizare.

Cu Elementor, aveți acces la mai multe widget-uri de tabel. Mai mult decât atât, există o mulțime de plugin-uri pentru tabele Elementor care adaugă widget-uri noi la popularul constructor de pagini.

În acest articol, vom vorbi despre cum funcționează tabelele WordPress și cum se compară cu widget-urile Elementor. Apoi, vă vom arăta cum să creați manual tabele Elementor și vă vom prezenta câteva plugin-uri care adaugă widget-uri de tabel noi în editor. Să ajungem la asta!

Când să utilizați tabelele WordPress

Odată ce începeți să le căutați, veți observa că mesele sunt peste tot pe web. Asta pentru că sunt unele dintre cele mai versatile elemente pe care le poți folosi într-un site web.

Luați tabelele de prețuri, de exemplu. Este greu să găsești un site web cu servicii sau cu abonament care să nu folosească tabele pentru a te ajuta să compari opțiunile:

Tabelele de prețuri pe site-ul Kinsta
Tabelele de prețuri pe Kinsta

Tabelele vă permit să prezentați cantități mari de informații într-un mod ușor de digerat de către cititori. Și mai bine, tabelele facilitează pentru utilizatori să compare mai multe seturi de date între ele:

Un tabel care compară mai multe seturi de date
Compararea mai multor seturi de date

Pe lângă faptul că vă ajută să împărtășiți informații, tabelele vă pot ajuta și să spargeți monotonia paragrafelor lungi dintr-o postare de blog sau dintr-o pagină. De obicei, vă recomandăm să evitați pereții lungi de text, deoarece pot fi greu de navigat.

Editorul de blocuri vă oferă opțiunea de a adăuga cu ușurință tabele pe site-ul dvs. web. Blocul Tabel vă permite să setați numărul de rânduri și coloane de care aveți nevoie:

Tabele folosind editorul de blocuri din WordPress
Tabelele cu editor de blocuri WordPress

Deși adăugarea de tabele în WordPress este ușoară, sunteți oarecum limitat în ceea ce privește opțiunile de personalizare. Puteți schimba culorile de fundal, personaliza stilurile butoanelor și puteți modifica dimensiunile fonturilor, dar cam asta este tot. Dacă doriți să creați tabele mai elegante și mai complexe, va trebui să utilizați un generator de pagini precum Elementor (sau chiar Divi).

Tabelele sunt o componentă cheie a majorității site-urilor web, iar acest ghid vă va arăta cum vă pot îmbunătăți site-ul Faceți clic pentru a Tweet

Ce poate face o masă Elementor

Dacă doriți să mergeți dincolo de tabelele WordPress de bază, Elementor vă oferă acces la un widget Tabel de prețuri extrem de personalizabil. Acest lucru vă permite să editați titlurile tabelelor, să setați etichete de titlu, să adăugați liste de funcții, să modificați apelurile la acțiune (CTA) și multe altele:

Widgetul Elementor Price Table
Widget Tabel de prețuri Elementor

Amintiți-vă că, cu Elementor, puteți crea orice tip de aspect dorit pentru orice pagină sau postare. Aceasta înseamnă că puteți configura modele cu mai multe coloane, astfel încât să aveți mai multe widget-uri Tabel de prețuri unul lângă altul:

Exemplu de widget-uri pentru tabelul de prețuri unul lângă altul
Widgeturi pentru tabelul de prețuri în Elementor unul lângă altul

Elementor vine și cu un widget Cuprins . Acest lucru face navigarea în conținutul de formă lungă mult mai ușoară pentru cititorii dvs.

Cum se creează un tabel Elementor (manual)

Crearea unui tabel de prețuri folosind Elementor este simplă. Pentru a începe, deschide editorul Elementor. De aici, puteți alege să începeți cu o pagină goală sau să importați un șablon din biblioteca Elementor:

Alegeți o pagină sau un șablon din biblioteca Elementor
Alegeți o pagină sau un șablon din biblioteca Elementor

Când sunteți gata să adăugați elementul, veți dori să selectați numărul de coloane pe care doriți să le aibă tabelul. Faceți clic pe semnul Elementor plus din partea de jos a editorului și selectați structura coloanei pe care doriți să o utilizați pentru secțiunea de preț:

O imagine care arată numărul de coloane disponibile
Selectați numărul de coloane dorit

Rețineți că, dacă utilizați mai multe coloane, va trebui să adăugați un widget separat pentru Tabelul de prețuri în fiecare dintre ele. Deși fiecare tabel va fi un element unic, utilizatorii le vor vedea unul lângă altul (sau unul sub celălalt pe mobil) ca parte a unei secțiuni:

Adăugați mai multe widget-uri de tabel atunci când este necesar
Adăugați mai multe widget-uri de tabel atunci când este necesar

Vă recomandăm să adăugați un modul Tabel de prețuri și să îl stilați mai întâi. Apoi, puteți duplica sau copia acel element în coloanele rămase și adăugați text unic la fiecare.

Pentru a personaliza tabelul, selectați elementul și treceți la fila Stil din setările widgetului. Elementor vă oferă o mulțime de opțiuni de styling. Acestea includ selecția culorilor, setările tipografiei și configurațiile unice pentru fiecare secțiune a tabelului:

Personalizați tabelul folosind opțiunile de stil din Elementor
Personalizați tabelul folosind opțiunile de stil din Elementor

Odată ce sunteți mulțumit de stilul tabelului de prețuri, faceți clic dreapta pe element și selectați opțiunea Duplicare . O copie a tabelului va apărea sub elementul original și o puteți trage într-una dintre coloanele goale:

Utilizați opțiunea duplicat atunci când este necesar
Duplicați-vă tabelul pentru a economisi timp

Veți dori să repetați acest proces pentru câte coloane aveți. Rețineți că fiecare tabel poate avea un stil unic dacă preferați să nu reutilizați setările. În acest caz, asigurați-vă că stilurile sunt suficient de similare, astfel încât vizitatorii să înțeleagă că se uită la o comparație.

În timp ce vă personalizați tabelul, amintiți-vă că Elementor vă permite să adăugați CSS personalizat la orice modul. Pentru a face acest lucru, accesați Setările avansate ale widget-ului și selectați fila CSS personalizat :

Adăugați CSS personalizat la un modul în Elementor
Adăugați CSS personalizat

Adăugarea CSS personalizat prin Elementor este mult mai ușoară decât editarea manuală a codului WordPress. De asemenea, editarea CSS în WordPress necesită să accesați fișierele teme și să optimizați codul pentru performanță maximă. Cu Elementor, trebuie doar să adăugați codul CSS în câmpul corespunzător fiecărui modul.

Dacă adăugarea manuală a CSS sună intimidant, nu vă faceți griji. Învățarea CSS nu necesită să fiți un dezvoltator web. Cu toate acestea, este o abilitate valoroasă care vă va ajuta să vă personalizați site-urile WordPress (și poate chiar să găsiți o carieră în dezvoltarea web).

Odată ce toate tabelele sunt setate, este timpul să le editați textul și să adăugați câte funcții aveți nevoie pentru fiecare intrare. Puteți face acest lucru selectând un tabel și trecând la fila Conținut din setările widget-ului:

Editați textul tabelului și alt conținut
Editați textul tabelului și alt conținut al tabelului

Editarea conținutului tabelelor de prețuri este ușoară. Puteți face clic pe orice element din widget pentru a începe editarea acestuia. Odată ce sunteți mulțumit de rezultate, tabelele de prețuri vor fi gata.

Pluginuri de top Elementor Table (12 opțiuni)

Deși Elementor conține o mulțime de instrumente pentru a vă ajuta să creați tabele, puteți oricând să adăugați mai multe widget-uri la listă. În această secțiune, vom analiza 12 plugin-uri Elementor pe care le puteți folosi pentru a adăuga noi tipuri de tabele la postările și paginile dvs. Chiar dacă multe dintre aceste suplimente sunt create pentru Elementor, le puteți instala ca plugin-uri obișnuite.

Ca întotdeauna, vă recomandăm doar cele mai bune pluginuri WordPress din clasă, care oferă performanțe excelente și care primesc actualizări regulate. Utilizarea pluginurilor bine optimizate vă va ajuta să vă scalați site-ul web fără a avea probleme de performanță.

1. Suplimente ElementsKit pentru Elementor

Supliment ElementsKit
ElementsKit

ElementsKit adaugă peste 85 de widget-uri la Elementor. Aveți opțiuni pentru tabele de bază, tabele de prețuri, suport pentru încorporarea elementelor TablePress și multe altele.

Versiunea profesională a ElementsKit include, de asemenea, un widget de tabele avansat. Acest lucru vă permite să adăugați funcții de căutare și filtrare la tabele. În plus, puteți include paginarea, astfel încât utilizatorii să poată naviga în intrări fără a avea tabele masive pe site-ul dvs.

Caracteristici cheie:

  • Trei tipuri de widget-uri de tabel
  • Suport pentru filtrarea tabelelor, căutarea și paginarea
  • Integrare cu TablePress pentru încorporarea tabelelor

Preț: licențele ElementsKit încep de la 39 USD pe an.

2. WP Table Builder

Plugin WP Table Builder pentru Elementor
WP Table Builder

Dacă sunteți un fan al editorilor drag-and-drop (ceea ce ar trebui să fiți dacă utilizați Elementor), vă veți bucura să utilizați WP Table Builder. Acest plugin vă permite să construiți tabele folosind elemente preconfigurate, cum ar fi butoanele, secțiunile de recenzii, evaluările produselor și multe altele.

Pe lângă elementele avansate, aveți acces la module de bază, cum ar fi text și imagini. Pluginul este livrat și cu șabloane de tabel, ceea ce vă va face munca și mai simplă.

Puteți adăuga tabele WP Table Builder pe site-ul dvs. folosind Editorul de blocuri. Pluginul se integrează, de asemenea, cu Elementor, facilitând plasarea tabelelor oriunde pe site-ul dvs.

Caracteristici cheie:

  • Folosiți un generator de tabele drag-and-drop
  • Obțineți acces la elemente prefabricate, cum ar fi butoanele, secțiunile de recenzii și evaluările produselor
  • Personalizați stilul fiecărui element din tabele dvs
  • Utilizați șabloane de pagină predefinite

Preț: licențele WP Table Builder încep de la 39 USD pe an.

3. TablePres

Supliment TablePress
TablePress

TablePress este un plugin gratuit care este cât mai aproape de adăugarea funcționalității foilor de calcul la WordPress. Pluginul poate importa date în mai multe formate, inclusiv fișiere Excel, CSV și JSON. Puteți chiar să exportați date din tabel pentru alte programe.

Cu TablePress, puteți crea tabele care includ funcționalitate de căutare. Utilizatorii pot alege câte intrări să afișeze și să le mute de la o pagină la alta dacă afișați seturi de date masive.

Încorporarea tabelelor TablePress cu Elementor este simplă. Pluginul creează coduri scurte unice pentru fiecare tabel. Widgetul Elementor Shortcode vă va ajuta să adăugați acele coduri oriunde pe site-ul dvs.

Caracteristici cheie:

  • Importați și exportați seturi de date în formate Excel, CSV, JSON și HTML
  • Adăugați tabele care pot fi căutate la WordPress
  • Activați paginarea pentru tabele

Preț: TablePress este un plugin gratuit, dar puteți găsi extensii premium pentru acesta.

4. Suplimente esențiale pentru Elementor

Suplimente esențiale pentru Elementor
Addons esențiale

Addons esențiale pentru Elementor adaugă peste 80 de widget-uri noi la generatorul de pagini. Aveți opțiuni pentru tabele de prețuri, tabele de date, cuprins și multe altele.

Essential Addons pentru Elementor vine în două versiuni. Pluginul gratuit adaugă o versiune mai bună a widget-ului tabelului de prețuri cu care Elementor este livrat. Dacă doriți acces la tabelele de date (care includ filtrarea, căutarea și mai multe stiluri), va trebui să plătiți pentru o licență premium.

Caracteristici cheie:

  • Adăugați widget-uri pentru prețuri, date și tabel de conținut
  • Activați căutarea și filtrarea în cadrul tabelelor

Preț: Există o versiune gratuită de Essential Addons pentru Elementor și licențele premium încep de la 39,97 USD pe an.

5. PowerPack pentru Elementor

Supliment PowerPack pentru Elementor
PowerPack pentru Elementor

PowerPack pentru Elementor adaugă peste 70 de widget-uri la generatorul de pagini. Pluginul include, de asemenea, un număr mare de șabloane noi pe care le puteți folosi pentru a proiecta site-uri web mai rapid.

În ceea ce privește tabelele, PowerPack vă permite să configurați tabele de date care pot fi sortate și căutate. Puteți importa date în tabele folosind fișiere CSV. Pluginul include, de asemenea, mai multe opțiuni de șablon de tabel.

Dincolo de tabelele de date, PowerPack oferă widget-uri de informații și tabel de prețuri. Tabelele informative sunt perfecte dacă doriți să oferiți vizitatorilor o detaliere a serviciilor pe care le oferiți.

Caracteristici cheie:

  • Creați tabele de date care pot fi sortate și căutate
  • Importați tabele de date în format CSV
  • Adăugați widget-uri pentru prețuri și tabel de informații

Preț: licențele PowerPack încep de la 44 USD pe an.

6. Suplimente exclusive pentru Elementor

Suplimente exclusive pentru pluginul Elementor
Suplimente exclusive pentru Elementor

Suplimentele exclusive pentru Elementor sunt disponibile atât în ​​versiuni gratuite, cât și în versiuni premium. Pluginul gratuit adaugă 39 de widget-uri noi la Elementor, în timp ce o licență premium vă va aduce peste 69 de elemente noi.

Când vine vorba de mese, versiunea gratuită adaugă un nou modul de tabel de prețuri la mix. Cu versiunea premium, aveți acces la tabele de comparație și date. Tabelele de comparație funcționează în mod similar cu elementele de preț, dar puteți utiliza noi machete și stiluri.

Caracteristici cheie:

  • Adăugați un nou modul de tabel de prețuri
  • Obțineți acces la tabele de comparație și de date
  • Accesați mai multe aspecte pentru widget-uri de tabel

Preț: Există o versiune gratuită de suplimente exclusive pentru Elementor. Licențele premium încep de la 29 USD pe an.

Te lupți cu timpii de nefuncționare și problemele WordPress? Kinsta este soluția de găzduire concepută pentru a vă economisi timp! Verificați caracteristicile noastre

7. JetElements

Supliment JetElements
JetElements

JetElements adaugă 45 de widget-uri noi la Elementor. Cele mai multe dintre ele sunt orientate către comerțul electronic și site-urile web cu abonament. Cu toate acestea, JetElements include și câteva widget-uri interesante de masă în lista sa.

Printre aceste widget-uri, aveți prețuri și tabele receptive. În comparație cu tabelele de prețuri de bază din Elementor, versiunea JetElements vă oferă o mulțime de noi opțiuni de personalizare. De exemplu, poți să te joci cu o mulțime de efecte vizuale, cum ar fi paralaxa și micro animații pentru elementele de masă.

Caracteristici cheie:

  • Adăugați prețuri și tabele receptive la Elementor
  • Personalizați tabelele folosind efecte vizuale noi, cum ar fi paralaxa

Preț: licențele JetElements all-inclusive încep de la 130 USD pe an. De asemenea, puteți crea pachete de widget-uri personalizate, alegând numai opțiunile pe care doriți să le utilizați.

8. Suplimente premium pentru Elementor

Suplimente premium pentru Elementor
Suplimente premium pentru Elementor

Suplimente premium pentru Elementor sunt disponibile atât în ​​versiune gratuită, cât și în versiune premium. Cu toate acestea, numai pluginul premium adaugă widget-uri de tabel noi la Elementor.

Dacă plătiți pentru o licență premium, veți avea acces la noi widget-uri de date și tabel de prețuri. Puteți însoți tabelele de date cu widget-uri pentru diagrame și grafice dacă doriți să afișați mai multe informații pentru vizitatorii dvs.

Caracteristici cheie:

  • Adăugați widget-uri de date și tabel de prețuri la Elementor
  • Însoțiți tabelele cu widget-uri pentru diagrame și grafice

Preț: Licențele pentru Addons Premium pentru Elementor încep de la 39 USD pe an.

9. DataMentor

Supliment DataMentor pentru Elementor
DataMentor

DataMentor este un plugin care adaugă un singur widget de tabel la Elementor. Cu toate acestea, acel widget conține mult mai multe funcții decât majoritatea suplimentelor pe care le-am văzut până acum.

Tabelele DataMentor sunt incredibil de versatile. Puteți adăuga imagini, butoane, liste și pictograme în fiecare element. Widgetul vă permite să creați tabele cu stiluri individuale pentru fiecare coloană sau rând. De asemenea, aveți acces la mai multe șabloane de tabel dacă doriți să porniți procesul de proiectare.

Caracteristici cheie:

  • Adăugați un nou widget de tabel la Elementor
  • Obțineți acces la mai multe șabloane de tabel
  • Adăugați imagini, text, butoane, liste și pictograme în tabele

Preț: DataMentor este un plugin gratuit.

10. Suplimente fericite pentru Elementor

Suplimente fericite pentru Elementor
Addons fericite

Happy Addons pentru Elementor este unul dintre cele mai cuprinzătoare pluginuri pentru generatorul de pagini. Acest instrument adaugă peste 99 de widget-uri la Elementor și o colecție largă de șabloane noi în biblioteca sa.

În ceea ce privește mesele, Happy Addons include atât widget-uri de bază, cât și avansate. Versiunea avansată acceptă date importate în mai multe formate, precum și căutare, filtrare și paginare. În plus, aveți acces la mai multe machete de tabel pre-proiectate. Pe lângă aceste opțiuni, Happy Addons include și elemente de preț și de tabel de comparație.

Caracteristici cheie:

  • Acces la widget-uri de bază și avansate pentru tabel
  • Importați date pentru abilități avansate
  • Utilizați modele de tabel prestabilite
  • Adăugați tabele de prețuri și de comparație

Preț: Există o versiune gratuită de Happy Addons. Licențele premium încep de la 39 USD pe an.

11. Addons Royal Elementor

Addons Royal Elementor
Addons Royal Elementor

Royal Elementor Addons adaugă peste 40 de widget-uri noi la Elementor. Toate acestea sunt gratuite, dar pluginul vine și într-o versiune premium care deblochează opțiuni suplimentare de personalizare pentru fiecare widget.

Cu suplimentele Royal Elementor, obțineți un nou tabel de prețuri de utilizat în Elementor. Acest widget include mai multe opțiuni de stil noi. În plus, vine cu o opțiune de comutare pe care vizitatorii o pot folosi pentru a comuta între prețurile lunare și anuale (sau alte opțiuni).

Caracteristici cheie:

  • Adăugați un nou widget pentru tabelul de prețuri la Elementor
  • Personalizați tabelele de prețuri cu noi opțiuni de stil
  • Adăugați o comutare de preț la mesele dvs

Preț: suplimentele Royal Elementor sunt gratuite. Licențele premium costă 29 USD per site (este o taxă unică).

12. Elemente Addon Elementor

Plugin de elemente de supliment Elementor
Elementor Addon Elements

Elementor Addon Elements este un plugin gratuit care adaugă peste 24 de widget-uri noi la Elementor. Printre acestea, aveți opțiuni pentru preț, comparație și tabele de date.

Tabelele de prețuri includ multe opțiuni de personalizare suplimentare pe care widgetul implicit Elementor nu le include. Când vine vorba de tabelele de date, puteți alege între a crea elemente care pot fi căutate sau filtrabile. În plus, tabelele acceptă animații, ceea ce le poate face mult mai captivante din punct de vedere vizual.

Caracteristici cheie:

  • Adăugați tabele de preț, comparație și date la Elementor
  • Alegeți între tabelele de date filtrabile și care pot fi căutate
  • Adăugați animații la tabelele de date

Preț: Elementor Addon Elements este gratuit.

Pregătește-te să înveți cum să creezi tabelele Elementor manual și cele mai bune plugin-uri pe care să le folosești pentru a anunța widget-uri de tabel noi editorului Dați clic pentru a Tweet

rezumat

Elementor vă oferă o gamă largă de instrumente pentru a crea tabele WordPress elegante și complexe. O mulțime de pluginuri de tabel WordPress sunt, de asemenea, compatibile cu Elementor, ceea ce înseamnă că generatorul de pagini vă permite să adăugați aproape orice tip de tabel pe care îl doriți pe site-ul dvs. web.

Generatorul de pagini Elementor vine cu un widget intuitiv pentru Tabelul de prețuri . Dacă doriți să adăugați și alte tipuri de tabele, vă recomandăm să utilizați pluginuri pentru tabele Elementor, cum ar fi ElementsKit sau WP Table Builder.

Kinsta CDN este un CDN de înaltă performanță disponibil tuturor clienților Kinsta fără costuri suplimentare. Este alimentat de integrarea noastră gratuită Cloudflare și vă oferă automat conținutul din peste 200 de PoP-uri de pe tot globul. Dacă aveți întrebări despre Kinsta CDN, nu ezitați să contactați echipa noastră de asistență 24/7 pentru asistență suplimentară!