Как создать сравнительную таблицу товаров в WordPress

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

таблица товаров в WordPress

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

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

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

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

В этой статье я покажу вам, как создать потрясающую таблицу сравнения продуктов в WordPress.

Как создать таблицу сравнения с помощью плагина WP Table Builder

В этой статье я создам вот такую таблицу для сравнения телевизоров.

Таблица для сравнения товаров

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

Шаг № 1: Установите плагин WP Table Builder

Для создания таблицы сравнения товаров я буду использовать плагин WP Table Builder. Это бесплатный инструмент для создания гибких таблиц.

Этот плагин идеально для создания таблиц сравнения и имеет множество опций для настройки вашей таблицы.

Чтобы установить этот плагин, перейдите на панель инструментов WordPress, далее Плагины. Нажмите «Добавить новый» и найдите «WP Table Builder». Нажмите установить и активировать, чтобы установить плагин на свой сайт.

Установка плагина WP Table Builder

Шаг № 2: Создаем новую таблицу

Чтобы создать новую таблицу в плагине WP Table Builder, вам нужно перейти к Table Builder — Add New.

Добавление новой таблицы

Вы увидите форму конструктор для создания таблиц, как это показано ниже.

Конструктор создания таблиц

Вы можете дать имя своей таблице и установить количество строк и столбцов. После того, как вы установите количество строк и столбцов, которые вы хотите иметь в своей таблице, нажмите кнопку «Generate (Создать)».

Получится таблица, как показано ниже:

Таблица прототип

Шаг № 3: Заполните свою таблицу

Теперь пришло время для наполнения таблицы. WP Table Builder позволяет перетаскивать элементы в ячейки ваших таблиц.

Вы можете выбрать элемент на левой боковой панели и перетащить их на свою таблицу.

Вставка картинок и текста в таблицу

Вот как выглядит моя таблица после добавления контента:

Таблица с контентом

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

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

Шаг № 4: Делаем таблицу красивой и отзывчивой.

Есть много способов сделать великолепной вашу таблицу с помошью WP Table Builder. Этот плагин имеет так много вариантов настройки, и позволяет сделать многое.

Вот что вы можете еще сделать:

  • Настроить границы таблицы — WP Table Builder позволяет добавить границы к вашей таблице. Вы можете найти эту опцию в настройках таблицы слева.
  • Вы можете установить ширину границы и изменить ее цвет, а также вы можете установить внутренние границы таблицы.

Добавление границ таблицы

  • Cell Padding -Определяет расстояние в ячейках. Изменяя его значение, ваша таблица будет более плотной или более разряженной.

Регулирование расстояния в таблице

  • Header Background (Фон заголовка) — Вы также можете настроить цвет фона заголовка вашей таблицы. Это добавит стиля к вашей таблице.

Установка фона заголовков

  • Фон четных / нечетных рядов фона (Even/Odd Row Background) — Когда идет большая таблица, читателям трудно удержать внимание. В этом поможет сочетание четных и нечетных строк, которые отделяются разным цветом. И вы можете сделать это с помощью плагина WP Table Builder.

Установка фона нечетных строк таблицы

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

Установка адаптивности таблицы

Также включите опцию — Top Rows As Header. Она устанавливает вашу верхнюю строчку в качестве заголовков таблицы.

Сохраните таблицу кликнув на Save Table в верхней части конструктора.

Шаг № 5: Вставить таблицу с помощью шорткода

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

Чтобы найти шорткод таблицы, нажмите кнопку «EMBED» в верхней части конструктора таблиц. Откроется всплывающее окно с шорткодом таблицы.

Получение шорткода таблицы для вставки в статью

Теперь, для вставки таблицы в статью, просто вставьте этот шорткод.

Заключение

Вот как легко можно создать таблицу в WordPress для сравнения товаров. Если это делать с помощью кода HTML, или даже с помощью большинства других плагинов, то это будет совсем не так просто, но главное, совсем не так красиво и профессионально. С помощью плагина WP Table Builder весь процесс создания таблицы упрощается и таблицу можно сделать за несколько минут.

Конечно, в этой статье я не рассмотрел все настройки плагина. И если у вас остались вопросы, то задавайте их в комментариях.

1 Star2 Stars3 Stars4 Stars5 Stars (2 оценок, среднее: 5,00 из 5)
Loading...
Случайные публикации:
  • CPAtext - обзор нового CPA-сервиса от создателей AdmitadCPAtext - обзор нового CPA-сервиса от создателей Admitad...обными быть пока не могут. Однако вещь интересная и о ней нужно рассказать. Также
  • 9 причин: почему Яндекс не индексирует сайт и что делать в этом случае?9 причин: почему Яндекс не индексирует сайт и что делать в этом случае?...ше бы, чтоб ваш веб-ресурс открывался по однозначному адресу - одно из
  • Как удалить страницу из поиска Яндекса или Google? 5 способовКак удалить страницу из поиска Яндекса или Google? 5 способовОбычно при поисковом продвижении сайта все стараются как можно б...
  • Доменные зоны. Что такое полное (абсолютное) доменное имя, уровни доменов. Проверка на занятость и whois-сервисыДоменные зоны. Что такое полное (абсолютное) доменное имя, уровни доменов. Проверка на занятость и whois-сервисы...и от доменных зон. На картинке выше приведён пример проверки Yandex.ru на сайте 
  • Что такое CPA-маркетинг и CPA-сети? Офферы, лиды, холд и заработокЧто такое CPA-маркетинг и CPA-сети? Офферы, лиды, холд и заработок...уже получить партнёрскую ссылку: ..но лучше сначала кликнуть на
Оставьте комментарий:
комментария 2
  1. Стас:

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

    Ответить
    • Алексей:

      Стас, ну вёрстку то никто не отменял. Криво — значит мастер не опытный.

      Ответить
Я не спамлю...