Ключевые выводы
- Для переключения таблицы цен Elementor необходимы два набора карт: один с ежемесячными ценами, другой с годовыми ценами, а также элемент управления, показывающий по одному набору за раз.
- Бесплатный плагин Elementor может сделать это с помощью виджета Nested Tabs: одна вкладка за расчетный период, ряд ценовых карт внутри каждой вкладки без надстроек.
- Виджет Toggle Content в Master Addons Pro дает переключатель, на который люди рассчитывают, таблетку с ежемесячными и годовыми метками и загружает каждый набор из сохраненного шаблона раздела.
- Виджет таблицы цен Master Addons удерживает одну цену за карту и не имеет собственного переключателя выставления счетов, поэтому каждый маршрут на этой странице объединяет его со вторым виджетом.
- Шаблоны, сохраненные из контейнера Elementor, сохраняются как тип Контейнера, а в списке раздела Переключить содержимое отображаются только шаблоны типов разделов, поэтому сохраните строку цен как раздел.
- Показывать годовые цены в месяц с помощью годовой заметки с “b, чтобы два состояния переключения сравнивались как для подобных.
Переключатель таблицы цен Elementor - это переключатель над планами, который переворачивает каждую карту между ежемесячными и годовыми ценами. У Elementor нет виджета, который делает это самостоятельно, и большинство таблиц цен на аддоны содержат единую цену за карту, поэтому переключатель всегда состоит из двух частей: двух наборов карт и чего-то, что показывает один набор за раз.
Это руководство строит переключение трех путей на тех же трех планах Маршрут 1 использует бесплатный виджет Вложенные вкладки Элементора Маршрут 2 использует виджет Переключить содержимое из Мастер Аддоны с двумя сохраненными шаблонами разделов, который является версией, которая выглядит как настоящий коммутатор биллинга Маршрут 3 охватывает виджеты, которые поставляются с коммутатором встроенным и что вы отказываетесь для удобства.
Оглавление
Как работает переключение цен в Elementor
Переключатель цен - это две полные строки цен и элемент управления, скрывающий одну из них. Когда посетитель нажимает "Ежегодно", ежемесячная строка скрыта и отображается годовая строка. Ничего не пересчитывается. Вот почему ежемесячные и годовые карты можно создавать с помощью любого виджета цен, в том числе с одним ценовым полем.
Управление является частью, которая меняется между маршрутами Вложенные вкладки дает вам кнопки вкладки Переключить содержимое дает вам переключатель таблетки с индикатором скольжения Виджет со встроенным переключателем дает вам свой собственный контроль и свой собственный дизайн карты, Карты под ним остаются одинаковыми в первых двух маршрутах, поэтому выберите карты сначала и контроль второй.
Для каждого маршрута действует одно правило: покажите годовую цену в виде месячной цифры с примечанием, что она выставляется ежегодно. “$39 /месяц, счет за годовую” составляет около 49$/месяц” позволяет читателю увидеть экономию, не занимаясь арифметикой. Годовая сумма рядом с ежемесячной ценой выглядит дороже, даже если она дешевле.
Шаг 1: создайте ежемесячные и годовые карты
Сначала построите ежемесячную строку, затем продублируйте ее и измените цены. в Элементоре добавьте контейнер с тремя детскими контейнерами рядом и опустите один Виджет таблицы цен в каждый. Установите имя плана, подзаголовок, цену и период на вкладке Содержимое. дайте среднюю карту Таблица выделения и ленту, чтобы строка имела план по умолчанию.
Теперь щелкните правой кнопкой мыши родительский контейнер и выберите Дублировать. в копии откройте каждую карту и измените цену. для ежегодного выставления счетов включите переключатель "Продажа", введите ежемесячную цену как первоначальную цену и годовую цену за месяц как цену и установите период на “/месяц, выставленный ежегодно”. Перечеркнутая ежемесячная цифра делает продажу.
Теперь на странице есть две строки Маршруты 1 и 2 решают, как они отображаются по одной.
Маршрут 1: Вложенные вкладки (свободный Элементор)
Виджет Вложенные вкладки в бесплатном плагине Elementor помещает контейнер внутри каждой вкладки, поэтому целый ценовой ряд помещается на панели вкладок. Ему нужна функция Flexbox Container, которая по умолчанию включена при текущих установках Elementor.
- Перетащите Вкладки виджет (вложенный, со значком контейнера) на странице выше, где должны находиться цены.
- На вкладке Содержимое переименовать вкладку #1 в Ежемесячно и вкладка №2 Ежегодно. Удалить третью вкладку.
- Перетащите контейнер ежемесячных цен на панель вкладок "Ежемесячно", а годовой контейнер - на панель "Ежегодно". Используйте навигатор (панель слоев), если цель падения трудно достичь.
- На вкладке "Стиль" установите выравнивание заголовка вкладки по центру и придайте активной вкладке цвет акцента.
Результат работает, и это ничего не стоит. как это не выглядит, так это переключатель выставления счетов. вкладки читаются как навигация, поэтому некоторые посетители упускают из виду, что существуют годовые цены. Вы можете стилизовать два заголовка вкладок в форму таблетки с радиусом границы и цветами фона, которая приближается. На телефонах вложенные вкладки превращаются в гармошку ниже заданной вами точки останова, поэтому проверьте, что панель "Ежемесячно" открыта по умолчанию.
Маршрут 2: Переключить контент с помощью шаблонов двух разделов
Виджет Toggle Content показывает один из нескольких фрагментов контента за переключателем таблеток, и каждый фрагмент может быть сохраненным шаблоном Elementor. две сохраненные ценовые строки плюс этот виджет - это ежемесячный и годовой переключатель, который выглядит как те, что на страницах цен SaaS. Toggle Content является частью Мастер Аддоны Про.
Сохранить каждую строку в виде шаблона раздела
- Щелкните правой кнопкой мыши ручку контейнера с ежемесячными ценами и выберите Сохранить как шаблон.
- Назовите это “Ценообразование ежемесячно” и сохранить.Сделайте то же самое для годового контейнера, что и “Ценование годового”.
- Открытый Шаблоны > Сохраненные шаблоны в администраторе WordPress и проверьте столбец Тип.
Элементор сохраняет контейнер как Контейнер введите, а в списке разделов виджета Toggle Content отображаются только шаблоны Раздел тип, поэтому шаг 3 проверяет столбец Если в двух ваших шаблонах написано Контейнер, раскрывающийся список “Choose section” не покажет ничего Исправление заключается в том, чтобы построить строку внутри устаревшего раздела (Элементор > Настройки > Возможности, или добавить раздел из Навигатора) перед сохранением, или выбрать Страница как тип шаблона в виджете и сохранить строки как шаблоны страниц вместо. оба маршрута работают; Раздел один сохраняет по умолчанию виджета.
Добавьте виджет "Переключить содержимое"
- Драг Переключить контент из группы Master Addons на страницу, где принадлежит цена Удалить два исходных ценовых контейнера, так как шаблоны теперь содержат их.
- В Элементы ретранслятор, откройте первый пункт Установите метку на Ежемесячно, Введите Шаблон, Тип шаблона Раздел, и выбрать “Ценообразование ежемесячно” в разделе Выбрать раздел.
- Откройте второй элемент, установите для него метку Ежегодно и выберите “Ценовое годовое соотношение цены и качества.
- Под Переключить настройки, оставьте активный индекс на уровне 1, чтобы ежемесячно показывался первым, и установите активный цвет на свой акцент.
Предварительно просмотрите страницу и нажмите Годовой. ежемесячный ряд выдвигается, и годовой ряд скользит, с индикатором таблетки перемещается поперек. вкладка Стиль контролирует размер таблетки, цвета этикеток и пространство между переключателем и содержимым.
Виджет не ставит в очередь собственную таблицу стилей сохраненного шаблона, поэтому, если карта выглядит не стилизованной на лицевой стороне, установите ее цвета в элементах управления виджетом, а не в настройках страницы шаблона, или очистите кэш Elementor от Elementor > Tools. Если вы отредактируете план позже, отредактируйте сохраненный шаблон в разделе "Шаблоны" > "Сохраненные шаблоны", а не страницу; страница ссылается только на него.
Маршрут 3: виджет ценообразования со встроенным коммутатором
Некоторые аддоны поставляют виджет ценообразования с переключателем выставления счетов уже внутри него, поэтому вы вводите ежемесячную цену и годовую цену за карту, и виджет рисует переключатель. HT Mega имеет виджет таблицы цен Flip Switcher, который работает таким образом. Большинство других, включая Essential Addons, Premium Addons, PowerPack и The Plus Addons, делают то, что делает Route 2: отдельный виджет переключателя или переключателя (Pro в каждом из этих плагинов), обертывающий два набора карт.Сравнительные списки виджетов таблицы цен, в которых планируется каждый виджет переключателя.
Виджет таблицы цен Master Addons имеет одно поле цены на карту и не имеет встроенного переключателя, поэтому это руководство объединяет его с Toggle Content Компромисс со встроенным переключателем - это дизайн: вы ограничены макетами карт этого виджета и его стилем переключения. с двумя наборами карт, каждый элемент управления в виджете таблицы цен остается доступным, включая пять макетов, ленту и подсказки функций, и вы можете изменить переключатель, не перестраивая карты.
Если вы хотите, чтобы переключатель находился внутри одного виджета, прежде чем зафиксировать, проверьте три вещи: может ли годовая цена виджета показывать месячную цифру, можно ли редактировать текст метки переключателя и как карты складываются на телефоне.
Готовые переключатели разделов ценообразования
выше Библиотека шаблонов главных аддонов имеет разделы ценообразования с уже подключенным переключателем. “Billing Switch Pricing Cards” использует Toggle Content с двумя строками ценообразования, а “Billing Toggle Pricing Tabs” делает то же самое с вкладками, включая трехлетний вариант. импортируйте один из шаблонов > шаблоны главных дополнений в редакторе, затем поменяйте местами названия планов, цены и функции. в публикации шаблонов таблиц цен есть больше подобных разделов с настройками за каждым.
Оба раздела построены с помощью виджетов Master Addons Pro, поэтому для импорта им требуется активный плагин Pro.
Какой маршрут выбрать
| Если вы | Использовать | Почему |
|---|---|---|
| Запустите бесплатный Элементор и хотите, чтобы это было сделано сегодня | Маршрут 1, Вложенные вкладки | Никакого дополнения, а ценовые карты могут быть любыми виджетами. |
| Хотите переключатель, который выглядит как переключатель выставления счетов | Маршрут 2, Переключить контент | Переключатель таблеток, скользящий индикатор, шаблоны, которые можно повторно использовать на других страницах. |
| Иметь три расчетных периода и более | Маршрут 2 или Маршрут 1 | Оба берут любое количество предметов; встроенный переключатель обычно занимает два. |
| Хотите наименьшее количество виджетов на странице | Маршрут 3, встроенный коммутатор | Один виджет на карту, по цене выбора макета. |
Хотите переключатель, не построив его дважды? выше Переключить виджет контента показывает любой сохраненный шаблон для таблеток "Ежемесячно" и "Ежегодно", поэтому Таблица цен карты сохраняют все пять макетов, ленту и подсказки.
Часто задаваемые вопросы
Есть ли у Elementor виджет переключения цен?
Виджет таблицы цен № Elementor Pro держит одну цену за карту и не имеет переключателя выставления счетов Виджет Nested Tabs бесплатного плагина может отображать две ценовые строки в виде вкладок Monthly и Yearly, что является ближайшим встроенным вариантом.
Может ли таблица цен Master Addons переключаться между ежемесячным и годовым расчетом самостоятельно?
№ Каждая карта таблицы цен имеет одну цену, одну первоначальную цену для продаж и один период.Постройте ежемесячную строку и годовую строку, сохраните каждую в виде шаблона раздела и покажите их через виджет Toggle Content от Master Addons Pro.
Почему мой сохраненный шаблон отсутствует в раскрывающемся списке "Переключить контент"?
Элементор сохраняет контейнер как тип шаблона Контейнера, а выпадающий список перечисляет только шаблоны типов Раздела.Сохраните строку из устаревшего раздела или установите в виджете Тип шаблона на страницу и сохраните строки в виде шаблонов страниц.
Должна ли годовая цена отражать общую сумму или месячную сумму?
Показывать месячную сумму с “bille годовая метка”, и использовать переключатель Продажа, чтобы поразить ежемесячную цену. читатель затем сравнивает как с подобным и видит экономию на карте вместо того, чтобы вычислять ее.
Повреждает ли переключение цен SEO?
Нет. Обе строки находятся на странице HTML, а скрытая строка скрыта с помощью CSS, поэтому поисковые системы читают каждую цену. сохраняйте названия планов и цены в виде текста, а не изображений.
Заключительные мысли
Ежемесячный и годовой тумблер на таблице цен Elementor - это две строки цен и один элемент управления. Вложенные вкладки дают вам управление бесплатно и читаются как вкладки. Toggle Content в Master Addons Pro дает вам переключатель таблеток и загружает каждую строку из сохраненного шаблона раздела, с одной защелкой, что шаблоны должны быть типа Раздела. виджет со встроенным переключателем экономит шаг и стоит выбора макета.
Начните с карт на Страница виджета таблицы цен, у которого точно таким образом построен живой тумблер, затем добавьте переключатель, соответствующий вашему плану.
Связанное чтение
