Ключевые выводы
- Эти 10 примеров переключения контента для Elementor представляют собой живые демоверсии, созданные с помощью виджета Master Addons Toggle Content, и каждая из них переключается между двумя версиями одного и того же раздела.
- Переключение контента работает лучше всего, когда оба варианта имеют один макет и меняются только детали, такие как ежемесячные и годовые цены или метрические и имперские измерения.
- Цены являются наиболее распространенным примером переключения контента, и две из десяти демонстраций представляют собой переключатели выставления счетов: одна помечена как ежемесячная и годовая, а другая помечена как "Ежемесячно выставляется счет" и "Ежегодно выставляется счет".
- Переключатели контента также подходят для контента, не связанного с ценами, включая таблицы спецификаций, квартальные результаты, меню обедов и ужинов, а также сообщения, написанные для двух аудиторий.
- Каждая опция виджета Toggle Content содержит текст из редактора или сохраненный шаблон раздела, страницы или виджета, поэтому любой макет Elementor может находиться за переключателем.
Контент переключает примеры для Elementor, которые работают лучше всего показывают один и тот же вид контента по обе стороны переключателя. планы остаются прежними и цена меняется. таблица остается прежней, и единицы меняются. Ниже приведены десять живых демо, которые следуют этому правилу, с тем, что каждый переключает и когда использовать шаблон.
Все десять были построены с помощью Переключить контент, виджет переключения содержимого в Master Addons Pro. Нажмите любую демо-ссылку, чтобы попробовать переключение самостоятельно.
Оглавление
Что делает хороший контент переключаемым
Переключение контента стоит использовать, когда посетителю нужна одна из двух версий, а не обе одновременно. Если люди хотят читать обе стороны вместе, поставьте их рядом.
| Шаблон | Левый вариант | Правый вариант | Пример ниже |
|---|---|---|---|
| Период выставления счетов | Ежемесячно | Ежегодный | 1, 2 |
| Единицы | Метрический | Империал | 4 |
| Объем данных | Собственные операции | Цепочка поставок | 5 |
| Аудитория | Как команда | На своих | 7 |
| Период времени | Q3 | Q4 | 6 |
| Процесс | Сделано на заказ | В наличии | 8 |
| Категория | Жилой | Гражданский | 9 |
| Время суток | Обед | Ужин | 10 |
| Объем плана | Одиночный | Неограниченный | 3 |
Примеры переключения цен
Цены - это место, где большинство людей впервые встречаются с переключателем контента. Два расчетных периода имеют одни и те же планы, поэтому переключатель вдвое уменьшает количество карт на странице.
1. Карты ценообразования с коммутатором выставления счетов
Переключатель "Ежемесячно" и "Год" находится над картами "Стартер", "Команда" и "Масштаб". В годовом исчислении каждая карта показывает более низкую ежемесячную ставку и строку с годовым итогом и сбережениями. Средний план имеет метку "Самый избранный" с обеих сторон.
Используйте его для: SaaS и цены подписки. Откройте демо-версию Billing Switch.
2. Переключить контент с ценообразованием
Этот использует метки Billed Monthly и Billing Yearly выше Личные и планы стартапов. каждый вариант содержит полный набор таблиц цен, поэтому вся строка меняется одним щелчком мыши.
Используйте его для: страницы ценообразования построен из Виджеты таблицы цен. Откройте демонстрацию цен.
3. Переключить содержание
Скругленный переключатель перемещается между Одиночным планом и Неограниченным планом, каждый со своим заголовком и описанием. Две стороны различаются по объему, поэтому переключатель не привязан к расчетному периоду.
Используйте его для: планы, которые различаются по объему, например, единичные и неограниченные. Откройте демо-версию Rounded.
Примеры переключения таблиц и данных
Таблицы - это вторая естественная посадка. строки и столбцы остаются на месте, а цифры меняются, поэтому посетители сохраняют свое место, когда переключают переключатель.
4. Таблица характеристик единичного переключателя
Таблица геометрии велосипеда переключается между метрическим и имперским. охват, стек и другие измерения перечислены для трех размеров рамки, с столбцом допуска. Покупатели в разных странах каждый получает числа, которые они могут прочитать.
Используйте его для: характеристики продукта, таблицы размеров и рецепты. Откройте демо-версию Unit Switch.
5. Таблица контрольных показателей переключения данных
Отчет о выбросах переключается между собственными операциями и цепочкой поставок. Каждая сторона перечисляет источники, их долю в базовом уровне и тоннаже. Две таблицы, которые заполняли бы экран, теперь имеют один общий экран.
Используйте его для: отчеты, контрольные показатели, а также цифры до и после. Откройте демо-версию Data Switch. Если данные никогда не меняются щелчком мыши, просто виджет стола проще.
6. Показатели четвертьпереключения Бенто
Бенто сетка результатов переключается между Q3 и Q4. Доход, рост и примечания под каждым рисунком меняются вместе. Он читается как панель мониторинга и занимает место в единице.
Используйте его для: обновления для инвесторов, годовые отчеты и ежемесячная статистика. Откройте демо-версию Quarter Switch.
Хотите все десять в одном месте? выше Переключить страницу виджета контента имеет просмотрщик, загружающий каждую демонстрацию, плюс полные настройки виджета.
Примеры переключения аудитории и категорий
Последняя группа переключает сообщение Каждая сторона написана для другого читателя или охватывает другую категорию.
7. Функциональная панель переключателя аудитории
Страница курса переключается между Как команда и На своей собственной. у каждой стороны есть свой заголовок, точка доказательства и список функций.Посетители выбирают версию, которая описывает их, и пропускают остальные.
Используйте его для: продукция, продаваемая как компаниям, так и частным лицам. Откройте демо-версию Audience Switch.
8. Заказать график шагов маршрута
Пронумерованный список шагов переключается между Made to order и In stock.Шаги и ожидание различаются на каждом маршруте, и макет остается одинаковым.Он отвечает “что происходит после того, как я закажу?” для обоих видов покупателя.
Используйте его для: доставка, посадка и любой процесс по двум путям. Откройте демо-версию "Маршрут заказа". Для одной датированной последовательности Виджет временной шкалы лучше подходит.
9. Карта наложения переключателя проекта
Архитектурная студия переключает большую карту проекта между Жилой и Гражданский Каждая сторона имеет свою собственную фотографию, местоположение, год и краткое. два тематических исследования подходят туда, куда обычно можно пойти.
Используйте его для: портфели с двумя направлениями работы. Откройте демо-версию Project Switch.
10. Список меню переключателя обслуживания
Меню ресторана переключается между Обедом и Ужином. часы подачи сидят под переключателем, и блюда и цены меняются вместе с ним. Гости видят меню для обеда, который они планируют.
Используйте его для: рестораны, салоны и любой бизнес с двумя списками услуг. Откройте демо-версию Service Switch.
Как построить один из таких примеров
Каждый пример - это виджет Toggle Content с двумя элементами. создайте первую версию своего раздела, скопируйте ее, измените детали и поместите по одной версии в каждый элемент.
- Драг Переключить контент на странице и назовите два элемента в Элементы список.
- Для краткого содержания оставьте Тип на Контент и пишите в редакторе.
- Для полной планировки набор Тип чтобы создать шаблон и выбрать сохраненный шаблон для каждого элемента.
- Набор Активный индекс в настройках переключения выберите опцию, которая отображается первой.
- Стиль переключателя в разделах Toggler, Indicator и Labels вкладки Стиль.
В ценовой версии есть несколько дополнительных шагов, которые мы рассмотрим как добавить ежемесячный и годовой переключатель цен в Elementor. Полный список настроек находится в Переключить документацию по контенту.
Часто задаваемые вопросы
Что такое переключатель контента в Elementor?
Переключатель контента - это виджет с переключателем и двумя или более метками. щелчок по метке показывает содержимое этой опции и скрывает остальные.Elementor не включает один, поэтому он поступает из такого дополнения, как Master Addons Pro, где виджет называется Toggle Content.
Что я могу поместить в переключатель контента?
В Toggle Content каждый параметр содержит либо текст из встроенного редактора, либо сохраненный шаблон Elementor. поскольку шаблон может содержать любые виджеты, опцией может быть таблица цен, таблица данных, форма, галерея изображений или целый раздел.
Может ли переключатель контента иметь три варианта?
Да. нажмите Добавить элемент в список Элементы, чтобы добавить третий или четвертый вариант Переключатель лучше всего читается с двумя или тремя метками, Для большего, вкладки обычно легче сканировать.
Доступны ли эти демо-версии для переключения контента в виде шаблонов?
Демо-версии показаны в средстве просмотра шаблонов на странице виджета Toggle Content, где можно открыть каждый из них. Они были построены с помощью виджета Toggle Content, который является частью Master Addons Pro.
Заключительные мысли
Приведенные выше десять примеров переключения контента охватывают три задания: переключение цены, переключение набора чисел и переключение сообщения. В каждом макете макет сохраняется неподвижно, и перемещаются только детали, поэтому за переключением легко следить.
Попробуйте их на Переключить страницу виджета контентазатем создайте свою собственную с помощью двух версий уже имеющегося у вас раздела.
Связанное чтение
