Ключевые выводы
- Переключатель цен Elementor состоит из двух частей: двух наборов таблиц цен, одного ежемесячного и одного годового, и виджета переключателя, который отображает по одному набору за раз.
- Виджет таблицы цен Elementor Pro не имеет ежемесячного и годового переключения, поэтому переключатель поступает из виджета переключателя контента или из таблиц цен, размещенных внутри виджета вкладок.
- Виджет "Переключить содержимое главных дополнений" загружает сохраненный шаблон в каждую опцию, используя набор управления "Тип" для "Шаблон" и тип шаблона раздела, страницы или виджета.
- На сайтах Elementor, использующих контейнеры, сохраняйте каждый набор таблиц цен в качестве шаблона страницы, поскольку список разделов в Toggle Content показывает только шаблоны, сохраненные с помощью типа раздела.
- Настройка "Активный индекс" в Toggle Content решает, какой период выставления счетов посетители видят первым: 1 для первого варианта и 2 для второго.
Чтобы добавить переключатель цен Elementor, создайте свои ежемесячные планы и годовые планы в виде двух сохраненных шаблонов, затем загрузите оба в виджет переключения контента. Посетители нажимают "Ежемесячно" или "Ежегодно", и цены меняются местами. Страница остается на один экран выше, и никому не нужно читать шесть столбцов цен одновременно.
В этом руководстве используется таблица цен и Переключить контент виджеты из Master Addons, и заканчивается он безаддонным маршрутом через виджет Вкладки Все было протестировано на Elementor 4.3.
Оглавление
Что нужно, прежде чем начать
Вам нужен Elementor, виджет таблицы цен и виджет, который переключает контент. Elementor Pro имеет виджет таблицы цен, но ни Elementor, ни Elementor Pro не имеют переключателя.
- Таблицы цен. В этом руководстве используется Виджет таблицы цен от Мастер Аддоны. таблица цен Элементор Про или простые контейнеры с заголовками тоже работают.
- Переключатель. Это Toggle Content, который является частью Мастер Аддоны Про.
- Ваши цены. сначала определите годовую скидку. Два месяца отпуска, что составляет около 17 процентов, - это общий выбор.
Как добавить переключатель цен в Elementor
Вся сборка состоит из пяти шагов: составляйте ежемесячные планы, сохраняйте их, составляйте годовые планы, сохраняйте их, а затем подключайте оба к переключателю.
Шаг 1: Стройте ежемесячные планы
Создать новую страницу, или открыть пустой черновик, и отредактировать его с помощью Elementor. Добавить контейнер с тремя столбцами и перетащить один виджет таблицы цен в каждый.Заполните имя плана, цену, текст биллинга и список функций.
Строить один план полностью, затем дублировать его дважды и изменить детали. Это держит строки функций выстроены Включите Выделить таблицу? и лента для плана, который вы хотите, чтобы люди выбрали.
Шаг 2: Сохраните ежемесячные планы в виде шаблона
Нажмите стрелку рядом с кнопкой Публикация и выберите Сохранить как шаблон. Назовите это ежемесячными планами ценообразования и сохраните их.
Сохранение таким образом создает шаблон Страница Это имеет значение, потому что Переключить Содержимое перечисляет шаблоны по типу Его список Раздел показывает только шаблоны, которые были сохранены с типом Раздел. на сайте, который использует контейнеры, щелкнув правой кнопкой мыши контейнер и сохраняя его, создает шаблон Контейнер, и что он не появляется в списке Раздел Шаблон Страница всегда отображается под Страницей.
Шаг 3: Создайте и сохраните годовые планы
Оставайтесь на том же проекте. измените каждую цену на годовую ставку и измените текст выставления счетов на "Представляемый ежегодно". Затем снова используйте "Сохранить как шаблон" и назовите этот один "Годовой план ценообразования".
Теперь у вас есть два шаблона с одинаковым макетом и разными номерами. вы можете удалить черновой вариант страницы.
Шаг 4: Добавьте переключить содержимое и подключите шаблоны
Откройте страницу реальных цен в Elementor.Поиск на панели виджетов для Переключить контент и перетащите его туда, где должны появиться планы Если у вас еще нет страницы цен, начните с одного из них Шаблоны страниц ценообразования Элементор.
- В Элементы список, нажмите первый пункт и измените его Этикетка в Ежемесячный.
- Набор Тип чтобы Шаблон.
- Набор Тип шаблона чтобы Страница.
- В Выберите страницу, выберите Ежемесячные планы ценообразования.
- Нажмите на второй товар, пометьте его "Ежегодно" и выберите "Ежегодные ценовые планы" таким же образом.
Обновите страницу и откройте ее на начальном этапе. Нажмите "Ежегодно", и три таблицы изменятся на годовые цены.
Шаг 5: Установите опцию по умолчанию и создайте стиль переключателя
Открытый Переключить настройки во вкладке Содержимое. Активный индекс выбирает опцию, показывающую загрузку страницы: 1 для ежемесячного и 2 для годового. Должность ставит переключатель до или после таблиц, и Скорость индикатора устанавливает скорость слайдов выделения, 0,3 секунды по умолчанию.
Затем перейдите на вкладку Стиль.The Тогглер секция имеет форму переключателя (круглый или квадратный), цвет фона, выравнивание, увеличение размера и ширины. Разделы индикатора и этикеток под ним устанавливают цвет выделения и цвета этикеток для нормального и активного состояний.
Сначала нужны столы? выше Виджет таблицы цен Elementor на странице показаны пять макетов, ленты, цены продажи и подсказки.
Видеоурок
В этом видео показано, как виджет Toggle Content добавляется и настраивается в редакторе Elementor.
Переключатель цен без дополнения
Вы можете построить ценовой коммутатор с помощью собственного элементара Виджет вкладок, потому что каждая вкладка принимает любой виджет внутри нее Посетители видят два заголовка вкладок, где надстройка показывает скользящий переключатель, и цены меняются таким же образом.
- Перетащите Вкладки виджет на странице и удалить третью вкладку.
- Переименовать две вкладки Ежемесячно и Ежегодно.
- Нажмите вкладку "Ежемесячно" и создайте столбцы цен в области контента.
- Дублируйте этот контейнер на вкладку "Годовой" и измените цены.
- На вкладке "Стиль" центрируйте заголовки вкладок и закругляйте их углы, чтобы они читались как переключатель.
Компромисс - upkeep.Оба набора таблиц живут на самой странице, поэтому редактор становится длинным, и вы не можете повторно использовать те же наборы на другой странице так, как вы можете с шаблонами.
| Переключить контент с шаблонами | Виджет вкладок | |
|---|---|---|
| Похоже | Скользящий переключатель с индикатором | Два заголовка вкладок |
| Где живут столы | В сохранённых шаблонах | Внутри вкладок на странице |
| Повторное использование на других страницах | Да, выбирайте те же шаблоны | Скопируйте и вставьте виджет |
| Больше двух вариантов | Да, добавляйте предметы | Да, добавьте вкладки |
| Потребности | Мастер Аддоны Про | Только Элементор |
Пять вещей, которые заставляют переключиться цены работать
Переключение цен помогает только в том случае, если посетители понимают это за секунду. Эти пять привычек охватывают большую часть этого.
- Скажите экономию словами. Поставьте “Счет ежегодно, два месяца от” ниже цены. Сам по себе переход не говорит людям, почему ежегодный лучше.
- Сохраняйте макет идентичным. одинаковые планы, одинаковый порядок, одинаковые строки признаков в обоих наборах. только числа должны перемещаться при перевороте переключателя.
- Выберите значение по умолчанию специально. Установите активный индекс на расчетный период, который вы хотите, чтобы большинство людей покупали.
- Проверьте это на телефоне. в разделе Стиль этикеток, Стека На может укладывать этикетки на мобильный телефон, если они не помещаются в ряд.
- Переключатель не сохраняет выбор. каждое посещение начинается с опции по умолчанию, поэтому укажите каждую кнопку на ссылке оформления заказа на свой расчетный период.
Рекомендации по макету и копированию самих таблиц см. в нашей Советы таблицы цен на элементар. Если ваши планы отличаются по функциям больше, чем по цене, a таблица сравнения под переключателем людям помогает проверить детали.
Часто задаваемые вопросы
Имеет ли виджет таблицы цен Elementor ежемесячный и годовой переключатель?
№ Виджет таблицы цен в Elementor Pro показывает одну цену за стол и не имеет переключателя выставления счетов. чтобы переключаться между месячными и годовыми ценами, поместите два набора таблиц внутри виджета вкладок или загрузите их в виджет переключения контента из дополнения.
Могу ли я добавить переключатель цен в Elementor без плагина?
Да. используйте виджет "Вкладки", назовите вкладки "Ежемесячно" и "Ежегодно" и создайте набор столбцов цен внутри каждой вкладки. Он показывает заголовки вкладок, где надстройка показывает скользящий переключатель, и посетители по-прежнему видят один набор цен одновременно.
Почему мой сохраненный шаблон отсутствует в списке Переключить контент?
Переключить Содержимое перечисляет шаблоны по типу Контейнер, сохраненный самостоятельно, хранится как шаблон Контейнера, который список Раздел не показывает Сохранить макет с Сохранить как Шаблон из стрелки Публикация, которая создает шаблон Страница, и установить Тип Шаблона на Страницу.
Может ли переключатель цен иметь три варианта, например ежемесячный, годовой и пожизненный?
Да. нажмите Добавить элемент в списке Элементы Переключить контент и подключить третий шаблон. с тремя или более вариантами посетители нажимают на нужную метку, и нажатие активной метки переходит к следующей.
Видит ли Google оба набора цен?
Да. Переключить контент печатает все параметры на странице HTML и показывает по одному, поэтому в источнике указаны как ежемесячные, так и годовые цены. Сделайте версию, которая вас больше всего волнует, опцией по умолчанию.
Заключительные мысли
Для переключателя цен Elementor необходимы два сохраненных шаблона и один переключатель. Стройте ежемесячные планы, сохраняйте их как шаблон страницы, повторяйте ежегодно, затем загружайте их в Toggle Content и устанавливайте активный индекс.
выше Переключить страницу виджета контента имеет демо-версию переключателя выставления счетов в реальном времени, которую можно нажать, прежде чем создавать свой собственный.
Связанное чтение
