Creați tabele de prețuri cu Gutenberg Block Editor

În mai bine de un an am văzut o mare evoluție în editorul de blocuri Gutenberg. În comparație cu editorul WordPress clasic, acum putem proiecta elemente în postările și paginile noastre care înainte puteau fi realizate doar prin codificare.

De exemplu, cu editorul clasic, cel mai simplu mod de a afișa un tabel într-o postare a fost să creați tabelul menționat într-o foaie de calcul, să îl exportați ca imagine și apoi să îl introduceți în postarea în care doriți să-l afișați. Dar unul dintre blocurile pe care le găsim acum în noul editor WordPress este blocul tabel. Să vedem cum creăm un tabel cu Gutenberg și în ce măsură am putea crea un tabel de preț cu același bloc.

Blocul de masă

Crearea unui tabel este la fel de ușoară ca și adăugarea unui nou bloc Table în care indicăm numărul de rânduri și coloane pe care le dorim și alinierea acestora.

Într-un bloc Table, putem personaliza următoarele proprietăți:

De asemenea, putem indica în fiecare celulă alinierea textului și dacă fontul este aldine sau italic și să adăugăm link-uri. În plus, putem modifica tabelul în orice moment adăugând sau eliminând rânduri și/sau coloane.

În acest fel, vedem că putem crea cu ușurință următorul tabel:

Acest lucru este mult mai simplu și mai rapid decât ceea ce am putea face cu editorul clasic. Iar rezultatul obținut poate servi cu siguranță la afișarea unui tabel de date.

Limitări ale blocurilor de masă

Deși ne-a fost foarte ușor să creăm tabelul anterior, am întâlnit destul de multe limitări. Pe de o parte, tabelele pe care le proiectați cu blocul de tip Table în Gutenberg nu sunt receptive. Adică, tabelul nu se rupe, ci devine mai mic fără a putea afișa diferitele elemente ale tabelului pe coloane:

Un tabel care se adaptează complet dispozitivelor arată elementele tabelului prin împărțirea tabelului în coloane, astfel încât toate celulele să fie afișate mult mai bine.

Pe lângă (in)capacitatea de adaptare la dispozitive, după cum probabil ați observat, într-un bloc de tabel nu putem schimba cu ușurință tipul și dimensiunea fontului, culorile etc. în fiecare celulă. Adică, din cauza tuturor limitărilor sale, blocul de masă Gutenberg nu este util pentru a crea un tabel de preț atractiv pentru produsele dumneavoastră.

Cum putem crea aceste tabele receptive?

Alternative

Blocul Coloane

O alternativă ar fi încercarea de a așeza tabelul cu blocul de coloane:

De bază

pentru freelanceri și site-uri web personale

29 €/luna

1 site

5.000 de vizite la paginile testate

Abonati-va

Profesional

pentru micii antreprenori

89 euro/luna

5 site-uri

35.000 de vizite la paginile testate

Abonati-va

Afacere

pentru echipe concentrate pe optimizare

259 euro/luna

? 10 site-uri

200.000 de vizite la paginile testate

Abonati-va

Avantajul blocului de coloane, în comparație cu blocul Table, este că este complet responsive, iar pe un ecran de mobil vom vedea că fiecare dintre planuri este afișat în spatele celuilalt.

Vedem că coloanele sunt pe deplin receptive. Și cu siguranță coloanele, pentru a afișa puține informații și fără prea multe complicații, sunt o alternativă de luat în considerare.

Pluginuri pentru blocul tabelului de prețuri

Recomandarea mea dacă trebuie să creați tabele de preț atractive este să instalați unele dintre pluginurile care includ blocuri pentru asta. S-ar putea să nu vă permită, fără să atingeți codul, niciun fel de personalizare, dar în multe cazuri puteți obține rezultate foarte elegante. Să ne uităm la câteva exemple complet integrate cu editorul de blocuri Gutenberg.

CoBlocks

Coblocks este un plugin care include un întreg set de blocuri total adaptate lui Gutenberg. Unul dintre ele este blocul Tabel de prețuri.

Este foarte simplu și ușor de utilizat și, fără codificare, puteți personaliza numărul de coloane și unele aspecte legate de tipografie, precum și culorile coloanelor și ale textului. Aveți rapid un tabel de preț complet receptiv, precum cel prezentat în imaginea următoare.

Getwid

În mod similar, pluginul Getwid include și un întreg set de blocuri complet compatibile cu editorul Gutenberg. Rapid, puteți construi cu ușurință un tabel de preț complet receptiv, ca acesta:

În acest caz, puteți personaliza fonturile și culorile de fundal și text.

Blocuri premium pentru Gutenberg

Pluginul Premium Blocs for Gutenberg include și blocuri cu care poți crea tabele de prețuri foarte atractive. Mai jos vă arăt o imagine de tabel de prețuri pe care am creat-o cu blocul Tabel de prețuri inserat în coloane.

Acest bloc vă permite să personalizați culorile, fonturile, tipul de butoane, dacă doriți să includeți o pictogramă, proprietățile modului de afișare a prețului, caracteristicile și descrierea, printre altele. După cum puteți vedea, vă permite personalizare foarte completă.

Pluginuri cu editori încorporați

Alternativ, veți găsi și alte tipuri de plugin-uri care includ un editor de tabel de prețuri încorporat care se integrează în tabloul de bord WordPress și cu care puteți crea tabele foarte complete și personalizate. Odată construit tabelul dorit, acest tabel poate fi inclus în orice pagină sau postare folosind un shortcode. Să vedem câteva exemple:

Tabel de prețuri receptiv

Responsive Pricing Table este un plugin care adaugă un nou editor WordPress, astfel încât să puteți crea tabele de prețuri. Puteți adăuga un număr mare de planuri și puteți personaliza fiecare dintre ele.

Pentru fiecare plan, puteți adăuga numele, subtitrarea, descrierea și prețul. De asemenea, puteți adăuga o listă de funcții, puteți personaliza butonul de achiziție și puteți schimba schema de culori a planului.

Odată ce planul este creat, trebuie doar să-l adăugați folosind un shortcode pe pagina de prețuri.

Tabel de prețuri de Supsystic

Plugin-ul Supsystic Pricing Table adaugă un editor drag-and-drop la tabloul de bord WordPress cu care puteți construi tabele. Vă oferă o mulțime de modele de mese receptive. În versiunea gratuită, aveți până la 7 modele disponibile.

După selectarea designului de tabel dorit, aveți un editor care vă permite să modificați numărul de coloane și să personalizați o mulțime de caracteristici ale fiecăruia dintre planurile afișate. De asemenea, puteți schimba aspectul în orice moment. În cele din urmă, ca și înainte, tabelul poate fi inclus în orice pagină sau postare cu un shortcode.

Alte plugin-uri gratuite care integrează editori de tabele de prețuri sunt:

• Tabel de prețuri după ARPrice
• Pluginul WordPress pentru tabele de prețuri – Tabele ușoare de prețuri de la Fatcat Apps
• Generator de tabel de prețuri receptiv – wpPricing Builder
• Tabelele de prețuri WRC
• Generator de tabele de prețuri – Tabele de prețuri AP Lite
• Tabel de prețuri TC după temeCod
• Tabel de prețuri – bh A WP Life

Concluzie

După cum vedeți, în WordPress aveți o mare varietate de alternative pentru a construi tabele de prețuri fără costuri suplimentare și fără a fi nevoie să codificați direct. Deci, este doar o chestiune de a alege varianta care se potrivește cel mai bine nevoilor tale.

Amintiți-vă că pagina în care afișați prețurile produselor dvs. ajunge să fie cea mai critică pentru a atrage clienți. Deci, timpul pe care îl petreci făcându-l atractiv nu va fi în zadar. Și pentru a vă inspira, puteți arunca o privire asupra designului tabelului de preț al produsului nostru Nelio A/B Testing, care este cel care iese în evidență ca imagine prezentată a acestei postări?.