Как создать сравнительную таблицу товаров в 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 весь процесс создания таблицы упрощается и таблицу можно сделать за несколько минут.
Конечно, в этой статье я не рассмотрел все настройки плагина. И если у вас остались вопросы, то задавайте их в комментариях.
Яндекс запустил Баден Баден....стил новый алгоритм, для определения заспамленности текста "Баден-Баден".
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
По настройкам все понятно, а что насчет адаптивности. Не могу понять смотрю на разных сервисах, на одних норм, на других все вкривь и вкось. Причем на гугле показывает совсем криво для мобильных а на других сервисах норм. Не могу разобраться…
Стас, ну вёрстку то никто не отменял. Криво — значит мастер не опытный.