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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы установить этот плагин, перейдите на панель инструментов WordPress, далее Плагины. Нажмите «Добавить новый» и найдите «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 весь процесс создания таблицы упрощается и таблицу можно сделать за несколько минут.

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

(2 оценок, среднее: 5,00 из 5)

Loading...

• Яндекс запустил Баден Баден....стил новый алгоритм, для определения заспамленности текста "Баден-Баден".
• PHPStorm 2019.1 License server key + 2016.2 - 2017.3Для тех кто ищет безопасный способ активировать PHPStorm 2016.2 - 2017...
• Как сделать favicon для сайта, чтоб он отображался в Яндексе?...мер, Firefox - достаточно открыть иконку и навести курсор на вкладку:
• Что такое файлы cookies (куки, http cookie), где находятся и хранятся cookies...ookies. Лучше придумывайте очень сложные пароли и храните их в надёжном месте, а также не
• Цвета HTML - таблица кодов цветов html для текста, фона, ссылок....LightBlue AD D8 E6 173 216 230 SkyBlue 87 CE