Когда покупатели взвешивают два или три варианта, стол, расположенный рядом, отвечает на их вопросы быстрее, чем прокрутка между отдельными страницами.The Таблица сравнения виджет в Мастер-аддоны для Elementor строит эту таблицу: столбец функций сбоку, столбец на продукт сверху и кнопку цена плюс покупка на каждом. Вы заполняете его с панели Элементор, HTML-таблиц не требуется.
Каждая ячейка может содержать текст, галочку или крестик, поэтому она читается с первого взгляда. четыре стиля макета, регулируемое количество столбцов продукта и полный контроль цвета означают, что таблица может соответствовать любой странице. Это руководство охватывает каждый параметр, от строк функций до полосы зебры.
Предпочитаете смотреть первым? это короткое руководство проходит через виджет таблицы сравнения встык:
Что делает виджет "Таблица сравнения" #
Виджет выкладывает сетку: имена функций запускаются вниз по первому столбцу, и каждый продукт получает свой собственный столбец с заголовком, ценой, значением для каждой функции и кнопкой вызова к действию. Измените количество продуктов и столбцы отрегулируйте в соответствии.
Вы вводите все вручную, поэтому это не зависит от WooCommerce. Это делает его таким же полезным для сравнения плагинов, уровней обслуживания или оборудования, как и для продуктов магазина.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Продукты и список функций, которые вы хотите сравнить.
Как добавить виджет "Таблица сравнения" #
В редакторе Elementor откройте Элементы панель и поиск Таблица сравнения, или прокрутите в раздел Главные дополнения Перетащите его на свою страницу и появится таблица образцов, уже заполненная продуктами и функциями заполнителя так что вы редактируете из рабочего макета вместо пустой сетки.
Общие настройки: макет и количество продуктов #
Открыть Содержание вкладка и Генерал в разделе хранятся две настройки, которые формируют весь стол.
- Макеты: выберите стиль 1, 2, 3 или 4. Каждый из них меняет внешний вид заголовка, цены и столбцов на другой.
- Продукция: установите, сколько столбцов продукта показывает таблица Повысьте число и соответствующий раздел Продукта появляется ниже для каждого нового столбца.
Установите строки функций #
The Особенности Коробка раздел определяет левый столбец, список вещей, которые вы сравниваете.The Заголовок является ли этикетка вверху (как “Features” или “Product”), и Особенности ретранслятор содержит один элемент в строке.
Каждый элемент функции является меткой строки, такой как Размер, Гарантия или Доступность. использовать Добавить элемент чтобы добавить строки, значок копирования для дублирования одной и X для ее удаления. Также есть a Заголовок кнопки поле для ряда, в котором удерживаются кнопки покупки.
Заполните каждую колонку продукта #
Каждый продукт получает свой раздел (Продукт 1, Продукт 2, и так далее).Внутри вы устанавливаете заголовок столбца, цену, изображение, текст кнопки, и ссылку, затем значение для каждой строки функции.
Удобная часть - это ряд Содержание управление. для каждой функции вы выбираете галочку, крестик, значок информации или обычный текст. сетка тика и креста читается мгновенно, в то время как текстовые поля подходят спецификации, такие как “1 Year” или “All sizes.” An Переопределить стиль toggle выделяет один столбец, который полезен для выделения рекомендуемого выбора.
Выберите стиль макета #
Четыре макета меняют внешний вид таблицы, не касаясь вашего контента. Переключение между ними - это способ найти стиль, подходящий для страницы, одним щелчком мыши.
Стиль 4 превращает столбцы в отдельные карты с изогнутыми цветными заголовками, что делает их более смелым для сравнения.
Стиль 2 плавает круглый значок цены над каждым столбцом с цветной строкой заголовка под ним Здесь таблица установлена на четыре продукта, показывая, как столбцы масштабируются.
Стиль стола #
The Стиль вкладка управляет цветом и интервалом. The Генерал раздел устанавливает общий вид таблицы, а остальные разделены на Коробка функций, Продукция, Кнопкаи Шаблоны (опция Pro).
- Цвет нечетной строки и четный цвет строки: полоса зебры, которая облегчает чтение длинных столов.
- Тип границы, ширина и цвет: линии между клетками.
- Радиус коробки и расстояние между колонками: закругленные углы и зазор между колонками изделий.
- Коробка функций, продукты, кнопка: типографика, цвета, выравнивание и набивка для каждой части стола.
Результат на странице #
Публикуйте или предварительный просмотр, и таблица рендеринг с вашими функциями, продуктами, ценами и кнопками на месте, зебрами рядов и всем. Ниже находится стол Стиль 2 с тремя продуктами.
Обычные случаи использования #
- Сравнения продуктов ставим две или три модели рядом.
- Уровень планирования или ценообразования когда вам нужна сетка, а не набор таблицы ценообразования.
- Матрицы функций плагина или программного обеспечения с тик-энд-кросс рядами.
- Пакеты услуг сравнение того, что включает в себя каждый уровень.
- Таблицы "Мы против них" выделение вашего продукта с помощью переключателя "Обратить стиль".
Советы по работе с виджетом "Таблица сравнения" #
- Используйте клещи и крестики для функций "да/нет". Они сканируют быстрее, чем слова “Yes” и “No” и поддерживают стол в порядке.
- Держите этикетки функций короткими. Одно или два слова в строке не позволяют первому столбцу стать широким.
- Выделите один столбец с помощью Override Style. Другой цвет направляет взгляд на рекомендуемый вариант.
- Установите цвета зебры с достаточной контрастностью. Чередование цветов строк - вот что делает длинную таблицу читаемой.
- Сопоставьте количество продуктов с экраном. Три колонны подходят для большинства макетов; четыре или более могут быть тесно на экранах меньшего размера.
Часто задаваемые вопросы #
Что такое виджет таблицы сравнения в главных аддонах?
Это виджет Elementor, который строит параллельную сетку сравнения. имена функций запускаются вниз по первому столбцу, и каждый продукт получает свой собственный столбец с заголовком, ценой, значением для каждого объекта и кнопкой. Вы вводите все вручную, поэтому ему не нужна WooCommerce.
Сколько товаров можно сравнить в таблице?
Вы устанавливаете число в поле Продукты в разделе ОбщиеПоднимите его, и для каждого добавляемого столбца появится новый раздел Продукты Три столбца подходят для большинства ширины страниц, в то время как четыре или более лучше всего работают над более широкими макетами.
Могу ли я показать отметки "галочка" вместо текста?
Да. В каждом разделе продукта каждая строка функций имеет элемент управления контентом, в котором вы выбираете галочку, крестик, значок информации или обычный текст. Пометки типа "клещи" делают функции "да/нет" сканируемыми, а текст соответствует спецификациям, таким как гарантийная продолжительность.
Сколько стилей макета имеет Таблица сравнения?
Четыре. Стиль 1 - классическая таблица, Стиль 2 добавляет круглые значки цен, а Стиль 4 превращает столбцы в карты с изогнутыми заголовками. переключение макетов переставляет одно и то же содержимое, поэтому вы можете попробовать каждый, не переделывая данные.
Могу ли я выделить один столбец продукта?
Да. в каждом разделе продукта есть переключатель "Опередить стиль", который позволяет вам давать одному столбцу его собственные цвета. Используйте его, чтобы рекомендуемый вариант выделялся среди других в таблице.
Завершая #
Виджет "Таблица сравнения" превращает список продуктов и функций в четкую, расположенную рядом сетку: выберите макет, установите количество столбцов, добавьте строки функций и заполните каждый столбец значениями, ценами и кнопками. Поскольку он не полагается на WooCommerce, он попадает на любую страницу. Соедините его со значением Виджет таблицы цен для страниц плана просмотрите полную информацию Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
