Когда вы хотите продвинуть один продукт, одна привлекательная карта превосходит полную сетку магазина. The Избранный виджет продукта в Мастер Аддоны Про создает эту карту: изображение, заголовок, цена с дополнительной оригинальной ценой, рейтинг, угловую ленту и кнопку вызова к действию, все они устанавливаются на панели Elementor.
Вы вводите детали в себе, поэтому он работает на любой странице с или без WooCommerce.Это делает его удобным для промо-блока, партнерского выбора, объявления о запуске или сделки, которую вы хотите передний и центральный. Это руководство охватывает каждый параметр, от трех дизайнов макета до ленточного и рейтингового управления.
Предпочитаете смотреть первым? Это короткое руководство проходит через виджет "Избранный продукт" от начала до конца:
Что делает виджет "Избранный продукт" #
Виджет выводит автономную карту продукта Вы даете ему изображение, имя, описание или список функций, цену, и кнопку, и он раскладывает их в одном из трех готовых дизайнов Лента и звездный рейтинг сидят сверху, чтобы привлечь внимание.
Здесь ничего не извлекается из вашего каталога WooCommerce.Вы вводите контент вручную, а это означает, что вы можете предоставить продукт, услугу, пакет или внешнее предложение, не настраивая магазин заранее.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер Аддоны Про установлен с активной лицензией, так как Избранный продукт является виджетом Pro. Новинка плагина? См руководство установки.
- Изображение продукта и детали, которые вы хотите показать (название, цена, ссылка на кнопку).
Как добавить виджет "Избранный продукт" #
В редакторе Elementor откройте Элементы панель и поиск Рекомендуемый продукт, или прокрутите в раздел Главные дополнения Перетащите его на свою страницу и образец карты появляется сразу, так что вы редактируете из рабочей начальной точки вместо пустой.
Заполните данные о продукте #
Открыть Содержание вкладка и Генерал раздел содержит основные поля. Здесь карта получает свое содержимое.
- Макеты: выберите дизайн 1, дизайн 2 или дизайн 3. Подробнее об этом ниже.
- Изображение: выберите изображение продукта из медиатеки.
- Название: название продукта. он поддерживает динамические теги, если вы хотите извлечь его из поля.
- Тип контента: переключайтесь между равниной Описание и а Список особенностей.
- Цена и первоначальная цена: текущая цена плюс дополнительная первоначальная цена, которая показывает пройденный, который читается как скидка.
- Текст кнопки и ссылка: метка "призыв к действию" и куда она отправляет людей.Design 2 использует значок кнопки вместо текста.
Описание или список функций #
Набор Тип контента чтобы Список и поле описания превращается в ретранслятор Вы выбираете Значок списка (галочка по умолчанию) и добавляете столько строк функций, сколько хотите, каждая с дубликатом и удалять управление Это быстрый способ превратить карту в мини-предложение продаж с пулевой точкой преимущества.
Выберите дизайн макета #
Виджет поставляется с тремя макетами, и переключение между ними переставляет один и тот же контент, при этом вы ничего не переделываете.
Дизайн 2 складывает изображение сверху, затем ставит значок значка рядом с заголовком и описанием, с оценкой и ценой на одной строке. кнопка отображается как значок здесь.
Дизайн 3 ведет с изображением, затем центрирует название, описание, рейтинг, цену, и кнопку полной ширины под ним. это самый чистый из трех для простой промо.
Дизайн 1 (по умолчанию) ставит рейтинг и заголовок вверху, цену под ним, затем изображение, описание и кнопку полной ширины внизу.
Добавить ленту и рейтинг #
Прокрутите мимо поля "Ссылка" и дойдете до Лента и Рейтинг управление. лента - это угловой баннер, который выкрикивает “NEW” или “HOT,” и рейтинг - это ряд звезд.
- Лента (Шоу): включите или выключите угловой баннер.
- Тип ленты: выберите стиль ленты. стили меняют форму и положение, от диагонального угла до флага или тега цитаты.
- Текст ленты и значок ленты: этикетка (например, NEW или HOT) и дополнительный значок, например трофей.
- Рейтинг: установите значение звезды, например 4,5, и на карте будут показаны совпадающие частичные звезды.
Стиль карты #
The Стиль вкладка разбита на разделы, соответствующие частям карты: Коробка, Название, Содержание, Цена, Кнопка, Рейтинг, Лентаи Шаблоны (из бесплатного расширения Patterns).
- Коробка: фон, граница, радиус и тень для всей карты.
- Название, Содержание, Цена: цвет, типографика, выравнивание и интервал для каждого текстового блока.
- Кнопка: цвета, типографика, заполнение и состояние наведения для призыва к действию.
- Рейтинг и лента: цвет звезды и цвет ленты и стиль текста.
Результат на странице #
Публикуйте или предварительно просматривайте, и карта отображается со всем на месте: лентой в углу, рейтингом, ценой с ее сквозным оригиналом, вашим изображением и кнопкой, связанной там, где вы ее установили. Ниже находится тот же виджет в двух его дизайнах.
Обычные случаи использования #
- Промоблоки выделение одного продукта на целевой странице.
- Партнерские выборы с рейтингом, ценой и ссылкой на выездную покупку.
- Запустите или раздайте вызовы использование ленты NEW или HOT.
- Пакеты услуг с типом содержимого списка, показывающим, что включено.
- Рекомендуемый предмет рядом а таблица ценообразования или раздел призыва к действию.
Советы по работе с виджетом Рекомендуемый продукт #
- Установите первоначальную цену, чтобы показать скидку. Прочерченный номер рядом с текущей ценой с первого взгляда читается как сделка.
- Используйте тип содержимого списка для получения преимуществ. Короткие строки функции конвертируются лучше, чем абзац на промо-карте.
- Сохраните ленточный текст в одном слове. НОВИНКА, ГОРЯЧАЯ или ПРОДАЖА подходит под угловой баннер без упаковки.
- Сопоставьте дизайн с планировкой вокруг него. Конструкция 3 подходит для чистой сетки; Конструкция 1 заполняет боковую панель или узкую колонну.
- Направьте кнопку куда-нибудь реальное. Установите ссылку на кассу, страницу продукта или партнерский URL-адрес перед публикацией.
Часто задаваемые вопросы #
Что такое виджет "Избранный продукт" в главных дополнениях?
Это виджет Master Addons Pro для Elementor, который строит единую карту продукта с изображением, названием, ценой, рейтингом, лентой и кнопкой вызова к действию. вы вводите детали вручную и выбираете один из трех дизайнов макета. Он работает на любой странице, с или без WooCommerce.
Нужен ли виджет "Избранный продукт" WooCommerce?
Нет. виджет не извлекает из каталога WooCommerce.Вы вводите название продукта, цену, изображение и ссылку на кнопку самостоятельно, поэтому вы можете разместить продукт, услугу или внешнее предложение на любой странице, не запуская магазин.
Сколько макетов имеет виджет "Избранный продукт"?
Три. Дизайн 1 лидирует с рейтингом и заголовком над изображением, Дизайн 2 ставит значок рядом с заголовком с кнопкой значка, а Дизайн 3 центрирует контент под верхним изображением. Переключение дизайна автоматически переставляет тот же контент.
Как показать скидку на карту?
Заполните поля "Цена" и "Оригинальная цена" в разделе "Общие". Текущая цена отображается в цвете акцента, а первоначальная цена отображается рядом с ним с помощью сквозного удара, который сигнализирует посетителям о скидке.
Могу ли я показать список функций вместо описания?
Да. Установите тип содержимого в список в разделе Общие. поле описания становится повторителем, где вы добавляете строки функций, каждая со значком списка. Используйте его, чтобы превратить карту в короткий, сканируемый список преимуществ.
Завершая #
Виджет "Избранный продукт" превращает горсть деталей в полированную карту продукта Elementor: выберите дизайн, добавьте изображение и цену, включите ленту и рейтинг, а также свяжите кнопку. поскольку от WooCommerce ничего не зависит, он падает на любую страницу в качестве промо- или партнерского блока. Соедините его с Виджет таблицы цен или а Призыв к действию раздел, просмотр полного Виджеты и расширения Master Addgetsи посмотрите страница ценообразования о том, что включает в себя каждый план. См Страница виджета избранного продукта для демо.
