Создавайте таблицы цен с помощью редактора блоков Gutenberg

Более чем за год мы наблюдаем большую эволюцию блочного редактора Гутенберга. По сравнению с классическим редактором WordPress теперь мы можем создавать элементы в наших сообщениях и страницах, которые раньше можно было сделать только с помощью кодирования.

Например, в классическом редакторе самый простой способ отобразить таблицу в сообщении — создать указанную таблицу в электронной таблице, экспортировать ее как изображение, а затем вставить в сообщение, где вы хотите ее показать. Но один из блоков, которые мы теперь находим в новом редакторе WordPress, — это табличный блок. Давайте посмотрим, как мы создаем таблицу с Гутенбергом и в какой степени мы можем создать таблицу цен с этим же блоком.

Блок таблицы

Создать таблицу так же просто, как добавить новый блок Table, в котором мы указываем количество строк и столбцов, которые нам нужны, и их выравнивание.

В блоке Table мы можем настроить следующие свойства:

Мы также можем указать в каждой ячейке выравнивание текста и шрифт полужирный или курсив, а также добавить ссылки. Кроме того, мы можем изменить таблицу в любое время, добавив или удалив строки и/или столбцы.

Таким образом, мы видим, что мы можем легко создать следующую таблицу:

Это намного проще и быстрее, чем то, что мы могли бы сделать с помощью классического редактора. И полученный результат, безусловно, может служить для отображения таблицы данных.

Ограничения блока таблицы

Хотя нам было очень легко создать предыдущую таблицу, мы столкнулись с рядом ограничений. С одной стороны, таблицы, которые вы создаете с помощью блока «Тип таблицы» в Гутенберге, не реагируют на запросы. То есть таблица не разбивается, а становится меньше без возможности показать разные элементы таблицы по столбцам:

Таблица, которая полностью адаптируется к устройствам, показывает элементы таблицы, разбивая таблицу на столбцы, благодаря чему все ячейки отображаются намного лучше.

Помимо (не)возможности адаптации под устройства, как вы могли заметить, в табличном блоке мы не можем легко менять тип и размер шрифта, цвета и т.д. в каждой ячейке. То есть из-за всех своих ограничений блок таблицы Гутенберга бесполезен для создания привлекательной таблицы цен на ваши продукты.

Как мы можем создать эти адаптивные таблицы?

Альтернативы

Блок столбцов

Альтернативой может быть попытка разместить таблицу с блоком столбцов:

Базовый

для фрилансеров и личных сайтов

€ 29 / месяц

1 сайт

5000 посещений проверенных страниц

Подписаться

Профессиональный

для мелких предпринимателей

€ 89 / месяц

5 сайтов

35 000 посещений проверенных страниц

Подписаться

Предприятие

для команд, ориентированных на оптимизацию

€ 259 / месяц

? 10 сайтов

200 000 посещений проверенных страниц

Подписаться

Преимущество блока столбцов по сравнению с блоком «Таблица» в том, что он полностью адаптивен, и на мобильном экране мы увидим, что каждый из планов отображается за другим.

Мы видим, что столбцы полностью адаптивны. И, конечно же, столбцы, чтобы показать мало информации и не слишком много осложнений, являются альтернативой для рассмотрения.

Плагины блока таблицы цен

Моя рекомендация, если вам нужно создать привлекательные таблицы цен, заключается в том, что вы должны установить некоторые из плагинов, которые включают блоки для этого. Они могут не позволить вам, не касаясь кода, выполнять какие-либо настройки, но во многих случаях вы можете получить очень элегантные результаты. Давайте рассмотрим несколько примеров, полностью интегрированных с блочным редактором Gutenberg.

CoBlocks

Coblocks — это плагин, который включает в себя целый набор блоков, полностью адаптированных для Gutenberg. Одним из них является блок «Таблица цен».

Он очень прост и удобен в использовании, и без программирования вы можете настроить количество столбцов и некоторые аспекты, связанные с типографикой, а также цвета столбцов и текста. Вы быстро получите полностью адаптивную таблицу цен, как показано на следующем изображении.

Getwid

Точно так же плагин Getwid также включает в себя целый набор блоков, полностью совместимых с редактором Gutenberg. Быстро, вы можете легко создать полностью адаптивную таблицу цен, подобную этой:

В этом случае вы можете настроить шрифты, фон и цвет текста.

Премиальные блоки для Гутенберга

Плагин Premium Blocs for Gutenberg также включает в себя блоки, с помощью которых вы можете создавать очень привлекательные таблицы цен. Ниже я покажу вам изображение таблицы цен, которое я создал с блоком таблицы цен, вставленным в столбцы.

Этот блок позволяет вам настраивать цвета, шрифты, тип кнопок, если вы хотите включить значок, свойства отображения цены, функций и описания, среди прочего. Как видите, это позволяет вам очень полную настройку.

Плагины со встроенными редакторами

Кроме того, вы найдете другие типы плагинов, которые включают встроенный редактор таблиц цен, который интегрируется в вашу панель управления WordPress и с помощью которого вы можете создавать очень полные и настраиваемые таблицы. После того, как нужная таблица будет создана, эту таблицу можно включить на любую страницу или запись с помощью шорткода. Давайте посмотрим несколько примеров:

Адаптивная таблица цен

Responsive Pricing Table — это плагин, который добавляет новый редактор в ваш WordPress, чтобы вы могли создавать таблицы цен. Вы можете добавить большое количество планов и настроить каждый из них.

Для каждого плана вы можете добавить название, подзаголовок, описание и цену. Вы также можете добавить список функций, настроить кнопку покупки и изменить цветовую схему плана.

После того, как план создан, вам просто нужно добавить его, используя шорткод на странице с ценами.

Таблица цен от Supsystic

Плагин Supsystic Pricing Table добавляет редактор перетаскивания на вашу панель управления WordPress, с помощью которого вы можете создавать таблицы. Он предлагает вам множество адаптивных дизайнов таблиц. В бесплатной версии вам доступно до 7 дизайнов.

После выбора желаемого дизайна таблицы у вас есть редактор, который позволяет вам изменять количество столбцов и настраивать множество функций каждого из показанных планов. И вы также можете изменить макет в любое время. Наконец, как и прежде, таблицу можно включить в любую страницу или запись с помощью шорткода.

Другие бесплатные плагины, которые интегрируют редакторы таблиц цен:

• Таблица цен по ARPrice
• Таблицы ценообразования Плагин WordPress — простые таблицы ценообразования от Fatcat Apps
• Адаптивный конструктор ценовых таблиц – wpPricing Builder
• Таблицы цен на WRC
• Конструктор ценовых таблиц — AP Pricing Tables Lite
• Таблица цен на ТС по темамКод
• Таблица цен – bh A WP Life

Заключение

Как видите, в WordPress у вас есть множество альтернатив для создания таблиц цен без дополнительных затрат и без необходимости писать код напрямую. Так что остается только выбрать тот вариант, который наилучшим образом соответствует вашим потребностям.

Помните, что страница, на которой вы показываете цены на свои продукты, в конечном итоге является наиболее важной для привлечения клиентов. Так что время, которое вы потратите на то, чтобы сделать его привлекательным, не будет напрасным. И чтобы вдохновить вас, вы можете взглянуть на дизайн таблицы цен на наш продукт Nelio A/B Testing, который выделяется на изображении в этом посте ?.