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