Divi Advanced Content Toggle Module - Плагин WordPress

Руководство по настройке и применению Divi Advanced Content Toggle Module

Divi Advanced Content Toggle Module нужен не для обычного раскрывающегося вопроса, а для ситуации, где посетитель должен переключаться между двумя полноценными вариантами контента в одном месте страницы. В этом руководстве разберём, как подготовить сайт на WordPress и Divi, добавить модуль Advanced Toggle, выбрать способ наполнения, настроить переключатель, проверить результат и понять, где такой формат действительно помогает, а где только усложняет страницу.

Материал рассчитан на владельца или редактора сайта, который уже работает с Divi Builder или Visual Builder и хочет сделать интерактивный блок без ручной сборки HTML, CSS и JavaScript. Мы не будем повторять рекламное описание продукта. Вместо этого пройдём практический путь: от проверки совместимости до живого сценария с переключением тарифов, меню, сравнений или контента из Divi Library.

Отдельное внимание уделено ограничениям. Content toggle кажется простым элементом, но ошибки часто появляются из-за разной высоты контента, слишком длинных подписей, неподготовленных layout-блоков, кеша, конфликтов в Visual Builder и попыток вставить в одну пару переключателя слишком разные по смыслу материалы. Руководство поможет заранее увидеть эти места и настроить модуль аккуратно.

Что делает модуль и чем он отличается от обычного toggle в Divi

В Divi уже есть стандартный Toggle Module. Он хорошо подходит для раскрытия одного блока текста: пользователь нажимает на заголовок, и под ним появляется или скрывается содержимое. Divi Advanced Content Toggle Module решает другую задачу. Он показывает два альтернативных состояния и даёт посетителю переключатель между ними: левый вариант и правый вариант, основной и дополнительный, месячная и годовая оплата, "до" и "после", список и сетка, обеденное и вечернее меню.

Официальная документация WP Zone подтверждает, что контент можно добавлять несколькими способами: через обычный content-builder внутри элемента, Divi Library layout, WordPress shortcode или HTML. Это важное отличие от простого текстового toggle. Если уже собран красивый блок в Divi Library, его можно использовать как одно из состояний переключателя. Если другой плагин выводит форму, календарь или каталог через shortcode, его можно вставить как содержимое одной стороны. Если нужен короткий контролируемый HTML-фрагмент, модуль тоже даёт такой путь.

На практике это превращает модуль в маленькую витрину вариантов. Пользователь не уходит на другую страницу, не листает длинную секцию и не сравнивает две области глазами. Он нажимает на переключатель и видит, что именно меняется. Такой подход особенно полезен, когда два состояния связаны между собой и должны занимать одно и то же место в макете.

Когда нужен именно content toggle, а не вкладки или аккордеон

Вкладки удобны, когда вариантов больше двух или когда пользователь должен свободно выбирать между несколькими равноправными разделами. Аккордеон хорош для длинного FAQ, где нужно постепенно раскрывать ответы. Content toggle лучше работает, когда есть парное сравнение: два режима, две аудитории, два периода оплаты, два вида представления, два набора преимуществ.

Если вариантов три и больше, не стоит заставлять переключатель имитировать табы. Посетитель будет ожидать бинарный выбор, а редактору придётся придумывать обходные решения. Если контент не связан логически, например "о компании" и "контакты", лучше использовать обычные секции, вкладки или навигацию. В этом плагине ценность раскрывается там, где переключение само по себе объясняет разницу.

Как работает логика двух состояний

В настройках модуля создаются два элемента, которые представляют две версии отображаемого контента. Затем настраивается внешний вид переключателя, активная сторона по умолчанию, кликабельность подписей, выравнивание высоты и подписи с иконками. Пользователь видит не административную структуру, а готовый интерфейс: две метки и контрол между ними. При переключении меняется видимое содержимое.

Практический вывод: сначала сформулируйте две стороны выбора словами, а уже потом открывайте Visual Builder. Если нельзя коротко назвать левое и правое состояние, блок, скорее всего, не подходит для content toggle.

Кому подойдёт Divi Advanced Content Toggle Module и где он может мешать

Плагин будет полезен сайтам, где Divi используется как основной конструктор страниц, а интерактивные блоки должны собираться редактором без отдельной разработки. Типичные пользователи - владелец сайта услуг, маркетолог, дизайнер Divi, веб-студия, автор лендингов, редактор каталога или администратор, который регулярно обновляет тарифы, меню, пакеты услуг и демонстрационные блоки.

Divi Advanced Content Toggle Module особенно уместен в следующих сценариях:

• Тарифы и планы. Переключатель между помесячным и годовым вариантом помогает не дублировать две длинные секции подряд.
• Сравнение услуг. Например, "для частных клиентов" и "для бизнеса", "базовый аудит" и "расширенный аудит".
• До и после. Можно показать два состояния дизайна, изображения, описания результата или набора преимуществ.
• Меню ресторана или расписание. Один блок может переключать обеденное и вечернее меню, будни и выходные, онлайн и офлайн формат.
• Разные способы вывода одного контента. Например, сетка и список, карточки и подробный текст, короткая и расширенная версия.

Плагин может быть лишним, если на странице уже достаточно интерактивных элементов, если нужно просто скрыть длинный абзац, если контент динамически зависит от роли пользователя, корзины или сложной бизнес-логики. В таких случаях toggle может создать иллюзию простого решения, но за ним появятся вопросы доступности, кеша, аналитики и поддержки.

Для редактора Divi

Редактор получает понятный рабочий процесс: открыть страницу в Divi Builder, добавить модуль Advanced Toggle, заполнить две стороны и стилизовать контрол через знакомые настройки. Это быстрее, чем вручную собирать переключатель из Code module, двух секций и кастомного JavaScript. Плюс модуль сохраняет настройку внутри Divi-структуры, поэтому другой редактор позже увидит её в привычной панели модуля.

Для разработчика и технического администратора

Разработчику важно другое: модуль снижает объём кастомного кода, но не отменяет проверки. Нужно понять, какие shortcodes вставляются внутрь, не конфликтуют ли они с кешем, как ведёт себя Visual Builder, не вызывает ли скрытое состояние лишнюю загрузку тяжёлых картинок и не ломается ли высота блока на мобильных. Если в проекте строгие требования к производительности, доступности и аналитике событий, content toggle стоит тестировать как полноценный интерактивный компонент.

Кому лучше выбрать другой подход

Если требуется персонализация по пользователю, условия показа по membership-правам, глубокие переходы по ссылке на конкретное состояние или переключение больше двух вариантов, не надо притягивать этот модуль насильно. Лучше рассмотреть вкладки, условную видимость, dedicated membership/visibility-плагин, собственный компонент или альтернативный Divi-модуль, где нужная логика заявлена в документации.

Что проверить перед установкой

Официальная документация указывает требования: сайт должен работать на WordPress с Divi Theme или Extra Theme, а серверная среда должна соответствовать минимальной версии PHP, заявленной WP Zone. Кроме того, на странице продукта отдельно обозначена совместимость с Divi 4 и статус Divi 5 coming soon. Это означает, что перед установкой важно не только загрузить ZIP, но и понять, на каком поколении Divi работает ваш проект.

Проверка перед установкой нужна не для формальности. Content toggle обычно добавляют на важные коммерческие страницы: тарифы, услуги, landing page, меню, каталог. Если модуль конфликтует с текущим стеком, ошибка будет видна посетителям в зоне конверсии. Поэтому безопаснее сначала проверить всё на staging-копии или на тестовой странице, скрытой от индексации и навигации.

Минимальный чек перед включением

• Убедитесь, что активна Divi Theme, Extra Theme или среда, где доступен Divi Builder, если ваш проект построен на таком варианте.
• Проверьте версию PHP в хостинге или WordPress Site Health и сопоставьте её с требованием WP Zone.
• Создайте резервную копию страницы или используйте Divi revisions, чтобы можно было откатить блок.
• Отключите агрессивную минификацию JavaScript и CSS на тестовой странице, если после установки появятся странные эффекты в Visual Builder.
• Подготовьте два состояния контента заранее: тексты, изображения, Divi Library layouts или shortcodes.

Что подготовить для контента

Не начинайте с настройки цветов. Сначала составьте маленькую таблицу смысла: левая метка, правая метка, какой контент виден в каждом состоянии, что пользователь должен понять после переключения. Если это тарифы, проверьте, что наборы преимуществ одинаково структурированы. Если это "до" и "после", подготовьте изображения одинаковой пропорции. Если это shortcode, проверьте его отдельно в обычном Text или Code module, чтобы не искать проблему уже внутри toggle.

Безопасная привычка: сначала создайте простую тестовую страницу с одним Advanced Toggle и минимальным контентом. Если базовый переключатель работает, добавляйте реальные Divi Library layouts, shortcodes и изображения постепенно.

Установка и первичная проверка модуля

Установка проходит как у обычного ZIP-плагина WordPress. В админ-панели откройте Plugins и Add New, выберите Upload Plugin, загрузите архив плагина и нажмите Install Now. После установки активируйте плагин через Activate Plugin. Документация WP Zone также описывает отдельный пункт меню для продукта в зоне Divi, но в этом руководстве мы не разбираем покупку, личный кабинет или получение лицензии. Важна рабочая проверка самого модуля на странице.

После активации откройте тестовую страницу, включите Divi Builder или Visual Builder и добавьте новый модуль. В списке модулей найдите Advanced Toggle. Если модуль не появляется, не переходите сразу к переустановке. Сначала очистите кеш конструктора и браузера, проверьте, активен ли плагин в списке WordPress, нет ли критических ошибок в Site Health, и убедитесь, что редактируете страницу через Divi, а не через другой редактор.

Быстрый тест после установки

1. Создайте пустую секцию на тестовой странице Divi.
2. Добавьте Advanced Toggle.
3. Оставьте два простых текстовых состояния: "Вариант A" и "Вариант B".
4. Сохраните страницу и откройте её в приватном окне браузера.
5. Нажмите на переключатель и проверьте, что текст меняется без скачка всей страницы.
6. Откройте мобильную ширину в инспекторе браузера и проверьте, что подписи не переносятся некрасиво.

Такой простой тест важнее, чем кажется. Если на минимальном контенте всё стабильно, дальнейшие ошибки почти всегда будут связаны с наполнением, стилями, кешем или shortcode, а не с самой установкой. Если же базовый блок не работает, нужно сначала решить проблему окружения.

Как понять, что модуль установлен корректно

Корректная установка даёт три признака. Во-первых, модуль доступен в списке Divi Builder. Во-вторых, настройки открываются без зависания Visual Builder. В-третьих, публичная часть страницы показывает переключатель и обе стороны контента. Не ограничивайтесь проверкой внутри конструктора: Visual Builder может отображать компонент иначе, чем обычный посетитель видит страницу после кеширования и сборки CSS.

Типы контента: Content, Divi Library Layout, Shortcode и HTML

Главная сила Divi Advanced Content Toggle Module в том, что он не сводит оба состояния к двум текстовым полям. Официальная документация выделяет несколько способов заполнения Toggle Element. Выбор способа влияет на поддержку, скорость страницы и удобство редактирования.

Content: когда нужен управляемый набор текста, иконок и изображений

Режим Content подходит, если состояние можно собрать из обычных элементов: текст, иконка, изображение, несколько строк преимуществ. Документация описывает возможность задавать CSS class, режим single line display и ширины для Desktop, Tablet и Mobile. Это удобно для компактных сравнений, где внутри каждой стороны не нужен сложный Divi layout.

Для тарифов с короткими списками, карточек "Basic" и "Advanced", блоков "Computer" и "Phone" или простого меню этот путь часто самый поддерживаемый. Редактор видит элементы прямо в модуле, может менять порядок, удалить лишнее и не искать отдельный layout в Divi Library.

Практическое правило для Content

Используйте Content, если состояние занимает одну визуальную область и состоит из небольших частей. Если внутри нужен ряд, колонка, несколько модулей, сложная карточка или форма другого плагина, лучше перейти к Divi Library Layout или Shortcode.

Divi Library Layout: когда состояние уже является полноценным блоком Divi

Divi Library Layout позволяет сохранить заранее собранный layout и выбрать его как содержимое одной стороны переключателя. Это удобно для дизайнерской работы: сначала вы создаёте тарифную сетку, меню, карточки услуг или before/after-композицию в Divi, сохраняете её в библиотеку, а затем подключаете к Advanced Toggle.

Такой подход хорош, когда обе стороны должны выглядеть одинаково аккуратно и использовать нативные Divi-модули. Но у него есть цена: чем тяжелее layout, тем больше нужно проверять скорость и поведение на мобильных. Не стоит вставлять в каждое состояние огромные секции с десятками модулей, а потом удивляться, что страница стала тяжёлой.

Shortcode: мост к другим плагинам

Shortcode полезен, когда другое расширение выводит форму, календарь, таблицу, список товаров или специальный блок через короткий код. Перед вставкой в Advanced Toggle shortcode нужно проверить отдельно. Если shortcode сам подгружает JavaScript или зависит от видимой ширины контейнера при загрузке страницы, скрытое состояние может отрисоваться неправильно до первого переключения.

В таких случаях тестируйте оба состояния в приватном окне, после очистки кеша и на мобильной ширине. Если shortcode работает только когда он видим сразу при загрузке, попробуйте сделать его состоянием по умолчанию или заменить способ вывода.

HTML: только для небольших контролируемых фрагментов

HTML-режим подходит для короткого списка, простой таблицы, легального embed-фрагмента или микроструктуры, которую удобнее набрать вручную. Но не используйте его как место для сложного JavaScript, не вставляйте непроверенный код и не правьте файлы плагина. HTML внутри toggle должен быть небольшим, понятным и обратимым.

Настройка переключателя, подписей и поведения

После выбора содержимого переходите к настройкам самого переключателя. В документации WP Zone описаны параметры Toggle Settings и Label Settings. Важны не только внешний вид и цвет, но и поведение: какой вариант активен по умолчанию, можно ли нажимать по текстовым меткам, должна ли высота двух состояний быть одинаковой, показывать ли текст, иконки и где их располагать.

Layout и визуальный стиль переключателя

Модуль предлагает несколько стилей switch-контрола. Выбирайте стиль не по эффектности, а по читаемости. На коммерческой странице переключатель должен сразу объяснять, что доступно два состояния. Если дизайн слишком декоративный, пользователь может принять его за тумблер настройки или за отдельную кнопку.

Для тарифов обычно хорошо работает спокойный центральный switch с короткими метками. Для "до/после" полезны более контрастные подписи. Для меню или сервисных блоков можно сделать switch ближе к табам, но не копировать таб-навигацию, если вариантов всего два.

Default Active Switch

Параметр активной стороны по умолчанию определяет, что увидит посетитель до первого клика. Выбирайте состояние, которое должно отвечать на главный вопрос страницы. Для тарифов это часто базовый или наиболее понятный вариант. Для "месячно/годово" не стоит автоматически показывать только самый выгодный для бизнеса вариант, если он сбивает ожидания пользователя. Лучше, чтобы начальное состояние соответствовало тексту секции и логике страницы.

Clickable Labels

Кликабельные подписи помогают пользователям, которые нажимают не в сам тумблер, а в текст рядом с ним. На десктопе это повышает удобство, на мобильных уменьшает промахи. Но подписи должны быть короткими. Длинные фразы вроде "Посмотреть расширенный тариф для корпоративных клиентов" лучше вынести в заголовок или пояснение, а внутри переключателя оставить "Базовый" и "Расширенный".

Equal Height Content

Опция Equal Height Content нужна, чтобы оба состояния имели одинаковую высоту и страница не прыгала при переключении. Это особенно важно для блоков тарифов, карточек услуг, before/after и сравнений, где после toggle ниже могут находиться кнопки, формы или следующий раздел. Если высоты разные, пользователь нажимает переключатель, и весь контент ниже смещается. Это выглядит как техническая шероховатость.

Включайте Equal Height Content, если разница высот заметна и пустое место в коротком состоянии не портит дизайн. Если одно состояние в два раза длиннее другого, лучше пересобрать контент: сократить длинную сторону, разделить информацию или отказаться от toggle. Равная высота не должна превращать блок в пустой высокий контейнер.

Label Settings: текст, иконки и позиция

В Label Settings можно включать или отключать display text, задавать текст меток, показывать иконки, выбирать icon и позицию: above, below, left или right. Иконка помогает, когда выбор связан с понятным символом: например, солнце/луна для light/dark, календарь для периода, сетка/список для вида отображения. Но иконки не заменяют ясные подписи. Если пользователь должен гадать, что означает символ, переключатель проигрывает обычному тексту.

Безопасная CSS-правка для выравнивания контейнера

Если после настройки на мобильном экране подписи выглядят слишком плотно, можно добавить небольшой CSS в настройки страницы, child theme или безопасный snippet-инструмент. Перед этим задайте модулю CSS class в Advanced tab, например pricing-toggle-wrap. Не редактируйте файлы плагина.

.pricing-toggle-wrap .et_pb_module_inner {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .pricing-toggle-wrap {
    text-align: center;
  }
}

Эта правка не вмешивается в логику переключателя. Она ограничивает ширину области и помогает выровнять блок на мобильных. Проверьте страницу в приватном окне, затем временно удалите класс или CSS, если результат стал хуже. Откат должен быть таким же простым, как включение правки.

Продуктовые сценарии: где переключатель раскрывает смысл страницы

У Divi Advanced Content Toggle Module есть несколько сценариев, которые невозможно одинаково применить к любому плагину. Они связаны именно с тем, что модуль переключает две версии контента внутри Divi-страницы и умеет работать с разными источниками наполнения.

Тарифы: месячный и годовой вид без двух длинных секций

Самый очевидный сценарий - тарифная сетка. В одном состоянии показываются месячные цены, в другом годовые. Но полезность не только в экономии места. Хороший toggle помогает посетителю сравнить выгоду без повторного чтения всей страницы. Для этого обе стороны должны иметь одинаковую структуру: те же карточки, те же названия планов, тот же порядок преимуществ. Меняться должны только параметры, которые связаны с выбранным периодом.

Если при переключении меняются ещё и названия пакетов, расположение карточек, цвета кнопок и количество преимуществ, пользователь перестаёт понимать, что именно сравнивает. Модуль технически позволит сделать сложный вариант, но редакторски это будет слабее.

Before/after: результат без отдельной галереи

Для "до" и "после" переключатель удобен, когда нужно показать один объект в двух состояниях: дизайн блока, обработку изображения, ремонт, аудит сайта, упаковку услуги. Главное - одинаковая композиция и одинаковый масштаб. Если "до" и "после" взяты из разных ракурсов, toggle создаст ложное сравнение.

В Divi Library можно подготовить два layout-состояния, где изображение, подпись и краткое объяснение стоят в одной сетке. Advanced Toggle затем переключает эти layout-блоки, а не заставляет редактора собирать всё заново внутри HTML.

Меню, расписание и сервисные наборы

Для ресторана это может быть "Обед" и "Ужин". Для сервиса ремонта - "Компьютер" и "Телефон". Для образовательного сайта - "Онлайн" и "Очно". Здесь важно не перегружать блок. Пользователь должен переключиться и сразу увидеть другой набор карточек, а не потеряться в длинном описании.

Сетка и список

Иногда один и тот же контент полезно показать двумя способами. Сетка хороша для визуального выбора, список - для подробного чтения. Если оба вида собраны в Divi Library, модуль может переключать их как две версии представления. Но не называйте такой блок фильтром или сортировкой, если он не меняет реальные данные. Это именно визуальное переключение между подготовленными состояниями.

Практический пример: блок тарифов с переключением периода

Разберём конкретный сценарий, который хорошо подходит для этого модуля: страница услуги должна показать три тарифных плана, а посетитель должен переключаться между помесячным и годовым вариантом. Цель - оставить один компактный блок тарифов, не дублировать секцию два раза подряд и не заставлять пользователя сравнивать цены в длинной таблице.

Цель

Нужно получить секцию с заголовком, коротким пояснением, переключателем "Месяц / Год" и тремя карточками тарифов. При переключении меняются значения периода и небольшая подсказка о формате оплаты. Структура карточек остаётся одинаковой.

Подготовка

Создайте два layout-блока в Divi Library: один для месячного варианта, второй для годового. Используйте одинаковую сетку, одинаковые названия планов, одинаковые CTA-кнопки и одинаковый порядок преимуществ. Если вы не хотите работать через Divi Library, можно собрать оба состояния в режиме Content, но для красивой тарифной сетки библиотека обычно удобнее.

Шаги настройки

1. Откройте страницу в Visual Builder и добавьте секцию тарифов.
2. Добавьте модуль Advanced Toggle.
3. В первом состоянии выберите тип Divi Library Layout и подключите месячный layout.
4. Во втором состоянии выберите годовой layout.
5. В Toggle Settings выберите стиль switch, который хорошо виден на фоне секции.
6. В Default Active Switch задайте состояние, которое соответствует тексту над блоком.
7. Включите Clickable Labels, чтобы пользователь мог нажимать по словам "Месяц" и "Год".
8. Включите Equal Height Content, если карточки имеют разную высоту.
9. В Label Settings задайте короткие подписи и при необходимости добавьте простые иконки.
10. Сохраните страницу и проверьте публичный вид.

Проверка результата

После сохранения откройте страницу в приватном окне. Проверьте левое состояние, правое состояние, мобильную ширину, клики по самому switch и по текстовым labels. Затем отключите Visual Builder и проверьте обычную публичную страницу. Если используете кеш-плагин, очистите кеш и повторите проверку.

Ожидаемый результат: переключатель меняет только тарифный блок, страница не перезагружается, ниже расположенные секции не прыгают, карточки остаются в сетке, а CTA-кнопки не меняют позицию хаотично. Если при переключении появляется большой скачок, вернитесь к Equal Height Content или выровняйте содержимое карточек.

Нюанс, который часто пропускают

Не делайте годовой вариант визуально совершенно другим, если хотите честного сравнения. Другой цвет акцента допустим, но сетка, число карточек и порядок преимуществ должны совпадать. Иначе посетитель сравнивает не периоды оплаты, а две разные презентации.

Проверка скорости, доступности и поведения на мобильных

Интерактивный блок должен быть не только красивым. Он должен быть понятным, быстрым и устойчивым. Divi Advanced Content Toggle Module отображает две версии контента, а значит редактор отвечает за вес обеих сторон. Если в скрытом состоянии лежит тяжёлая галерея, несколько форм и большой layout, страница может загружаться тяжелее, даже если посетитель сразу видит только одну сторону.

Скорость и вес контента

Старайтесь не помещать в оба состояния большие изображения без оптимизации. Для before/after используйте одинаковые размеры и сжатые файлы. Для Divi Library layouts не вставляйте внутрь целые лендинги. Если content toggle нужен только для короткого сравнения, сохраняйте короткий формат.

После добавления блока проверьте страницу в браузере без авторизации. Если сайт использует оптимизацию CSS/JS, сначала проверьте без неё, затем с включенным кешем. Так проще понять, где источник проблемы: в модуле, в конкретном shortcode, в минификации или в самом Divi layout.

Мобильная ширина

На мобильных чаще всего ломаются подписи и высота. Две метки, switch и содержимое должны помещаться без горизонтальной прокрутки. Если labels длинные, замените их короткими словами, а пояснение вынесите в абзац над модулем. Если иконки занимают слишком много места, отключите их или перенесите позицию.

Доступность и понятность

Не полагайтесь только на цвет. Если переключатель различает "Light" и "Dark", "Basic" и "Advanced", "Before" и "After", подписи должны быть текстовыми. Иконка может усилить смысл, но не быть единственным объяснением. Для важных коммерческих блоков добавьте короткое пояснение над toggle: "Переключите период оплаты, чтобы сравнить условия".

Как использовать shortcodes и HTML без лишнего риска

Shortcode и HTML делают модуль гибким, но именно они чаще всего создают непредсказуемость. Один shortcode может выводить статичный календарь, другой - сложную форму с собственными скриптами, третий - интерактивный каталог. Сам факт, что shortcode вставляется в поле, не означает, что он идеально поведёт себя в скрытом состоянии toggle.

Проверка shortcode перед вставкой

Сначала вставьте shortcode в обычный Divi Text или Code module на тестовой странице. Проверьте, что он выводит правильный контент, не требует авторизации, не создаёт ошибок в консоли браузера и работает после очистки кеша. Только после этого переносите его в Advanced Toggle. Если проблема появляется только внутри переключателя, значит конфликт связан с контейнером, скрытым состоянием или порядком инициализации скриптов.

HTML без опасных вставок

HTML используйте для небольших фрагментов: списка характеристик, простой таблицы, короткого блока с пояснением. Не вставляйте непроверенные скрипты и не превращайте HTML-поле в мини-приложение. Если нужна сложная интерактивность, лучше вынести её в отдельный модуль, shortcode или разработку.

Что не стоит делать

• Не вставляйте в скрытое состояние форму, которую потом никто не тестировал на отправку.
• Не дублируйте один и тот же ID в двух HTML-состояниях.
• Не используйте toggle как способ спрятать критически важный юридический текст, который должен быть виден без взаимодействия.
• Не добавляйте кастомный JavaScript, если та же задача решается настройками модуля или Divi Library.

Как готовить Divi Library layouts для двух состояний

Divi Library Layout - самый сильный режим для сложных визуальных состояний, но он требует дисциплины. Если два layout-блока собраны разными людьми, в разное время и без общей сетки, переключатель быстро покажет разнобой: в одном состоянии карточки шире, в другом кнопки ниже, один блок использует тень, другой - рамку, одна сторона хорошо выглядит на планшете, а другая ломается после первого переноса строки.

Поэтому сначала проектируйте пару layout-блоков как единый компонент. Левое и правое состояние должны иметь одинаковую внешнюю рамку, похожую структуру секции, сопоставимые отступы и одинаковое место для кнопок. Разница может быть в данных, иллюстрациях, списках или акцентном цвете, но не в базовой геометрии. Тогда посетитель воспринимает переключение как сравнение, а не как замену всей секции.

Единая сетка и одинаковые контрольные точки

Если в месячном тарифе три карточки стоят в одну строку, годовой тариф тоже должен использовать три карточки в том же порядке. Если в "до" и "после" есть изображение слева и текст справа, оба состояния должны сохранять эту композицию. Для мобильной ширины заранее решите, как карточки складываются: одна под другой, две плюс одна или с горизонтальным скроллом. Последний вариант используйте осторожно, потому что он часто ухудшает читаемость.

Соберите первый layout, продублируйте его в Divi Library и меняйте только содержимое второго. Это проще, чем создавать два разных блока с нуля. Дублирование сохраняет базовые размеры, отступы, настройки колонок, стили кнопок и адаптивные параметры. После этого останется заменить текст, изображения и акценты.

Имена layout-блоков

Дайте сохранённым layout-блокам понятные имена. Например: Pricing Toggle - Monthly и Pricing Toggle - Yearly, Menu Toggle - Lunch и Menu Toggle - Dinner. Название должно объяснять пару. Если в библиотеке десятки элементов, редактор быстро ошибётся и подключит не тот блок. Ошибка может быть незаметной в Visual Builder, но станет очевидной посетителю после публикации.

Синхронизация изменений

Когда меняете одно состояние, проверьте второе. Добавили новый пункт в месячный тариф - посмотрите, нужен ли он в годовом. Изменили порядок услуг в "Computer" - проверьте "Phone". Если две стороны живут отдельно, через несколько обновлений они перестанут быть честным сравнением. Content toggle работает лучше всего, когда оба состояния обслуживаются как одна пара.

Что делать с глобальными элементами Divi

Если внутри состояния используется global module или глобальный layout, учитывайте, что изменение затронет все места, где он применён. Для простого toggle часто безопаснее использовать локальные копии, особенно если блок создаётся под конкретную страницу. Глобальные элементы полезны для повторяемых тарифов и меню, но требуют ясного процесса обновления. Перед публикацией проверьте не только текущую страницу, но и другие страницы, где этот global module используется.

Редакторская проверка: переключите оба состояния и уберите из головы техническую настройку. Если два состояния выглядят как две страницы из одного дизайн-макета, всё хорошо. Если они выглядят как случайно вставленные куски, вернитесь к Divi Library и выровняйте пару.

Публикационная проверка результата перед переносом на живую страницу

После настройки не стоит сразу добавлять блок на главную страницу, лендинг или коммерческий раздел. У interactive-модуля больше точек отказа, чем у обычного текста. Он зависит от Divi Builder, стилей, JavaScript, содержимого двух состояний, кеша, мобильной сетки и иногда от shortcode другого плагина. Поэтому финальная проверка должна быть похожа на мини-приёмку.

Проверка редакторского смысла

Сначала оцените блок как посетитель. Прочитайте заголовок секции, посмотрите на активное состояние по умолчанию, нажмите переключатель, вернитесь назад. Должно быть понятно, что изменилось и зачем. Если после клика нужно перечитывать весь блок заново, значит различия показаны недостаточно ясно. Можно добавить короткие labels, сохранить одинаковую структуру карточек или вынести пояснение в один абзац над переключателем.

Проверка технического поведения

Откройте страницу без авторизации, лучше в приватном окне. Проверьте загрузку первого состояния, переключение на второе, возврат к первому, поведение после обновления страницы и работу кнопок внутри обоих состояний. Если в состоянии есть форма, отправьте тестовую заявку. Если есть shortcode с каталогом или календарём, проверьте клики внутри него. Если есть кнопки тарифов, убедитесь, что ссылки ведут туда, куда нужно.

Проверка адаптивности

Посмотрите блок как минимум на трёх ширинах: широкий десктоп, планшетная ширина и мобильный экран. Не ограничивайтесь встроенными иконками Divi, если есть возможность открыть реальный браузерный инспектор. На мобильных особенно проверьте: не появились ли две строки у labels, не слиплись ли иконки, не ушла ли карточка за край, не стала ли высота равного контента слишком большой.

Проверка после кеширования

Когда всё работает без кеша, включите обычную оптимизацию сайта и повторите тест. Если после минификации или отложенной загрузки скриптов toggle перестал реагировать, не правьте HTML-содержимое наугад. Сначала исключите страницу или нужный скрипт из проблемного режима оптимизации, затем проверьте минимальный toggle. Задача - понять, ломается ли сам модуль или только конкретный сложный контент внутри него.

Проверка аналитики и пользовательского пути

Если toggle влияет на конверсию, например переключает тарифы, важно понять, как вы будете анализировать поведение. Сам модуль не обязан давать отдельные события аналитики. Поэтому для критичных страниц лучше продумать простую проверку: какие кнопки в левом и правом состоянии ведут на разные ссылки, как различить клики, не дублируются ли одинаковые CTA без понятной разметки. Не внедряйте сложные скрипты ради аналитики, если достаточно разных ссылок или параметров в CTA.

Такой QA занимает меньше времени, чем исправление опубликованного блока после жалоб. Он также помогает понять, стоит ли использовать toggle на конкретной странице или лучше показать оба варианта открыто.

Частые проблемы и диагностика

Проблемы с content toggle обычно делятся на четыре группы: модуль не появился в Divi Builder, переключатель виден, но не меняет контент, контент меняется с визуальными скачками, или Visual Builder ведёт себя иначе, чем публичная страница. Ниже - практическая диагностика без рискованных правок файлов плагина.

Модуль Advanced Toggle не виден в списке Divi Builder

Симптом: плагин активирован, но в списке модулей Divi нет Advanced Toggle. Возможные причины: плагин не активен, страница редактируется не через Divi, конфликт кеша конструктора, несовместимость текущей среды или ошибка загрузки модуля.

Проверьте список Plugins, откройте страницу именно в Divi Builder, очистите кеш браузера и кеш сайта, затем создайте новую тестовую страницу. Если модуль появился на новой странице, проблема может быть в старом layout или конфликте конкретной страницы. Если не появился нигде, проверьте системную информацию и обратитесь к документации WP Zone или поддержке.

Переключатель работает в Visual Builder, но не работает на публичной странице

Симптом: в редакторе всё переключается, а на обычной странице состояние не меняется или меняется с задержкой. Возможные причины: кеш, отложенная загрузка JavaScript, минификация, конфликт с оптимизацией Divi assets или сторонним shortcode внутри состояния.

Сначала очистите кеш. Затем временно отключите объединение и отложенную загрузку JavaScript для тестовой страницы, если ваш оптимизационный плагин позволяет это сделать. Проверьте минимальный toggle с текстом. Если минимальный toggle работает, возвращайте сложный контент по одному элементу: сначала layout, затем shortcode, затем изображения. Так вы найдёте конкретный источник.

Страница прыгает при переключении

Симптом: при выборе второго состояния секции ниже резко смещаются. Причина почти всегда в разной высоте двух наборов контента. Включите Equal Height Content, выровняйте структуру карточек или сократите слишком длинное состояние. Если одно состояние объективно длиннее, content toggle может быть неправильным интерфейсом для этой задачи.

Второе состояние выглядит сломанным на мобильном

Симптом: карточки съехали, подписи налезают друг на друга, изображения стали разного размера. Проверьте настройки ширины для Desktop, Tablet и Mobile в элементах Content, а если используете Divi Library Layout, откройте сам layout и настройте адаптивность внутри него. Не пытайтесь исправить всё внешним CSS, если внутренний layout изначально не готов к мобильной сетке.

Shortcode выводит пустой блок

Симптом: внутри toggle видна пустая область или shortcode отображается текстом. Проверьте shortcode вне toggle, права доступа, синтаксис, наличие нужного плагина и то, не зависит ли вывод от авторизованного пользователя. Если shortcode требует инициализации при видимости элемента, попробуйте сделать это состояние активным по умолчанию или заменить вывод на Divi Library Layout.

Visual Builder меняет активное состояние сам

В changelog WP Zone отмечались исправления, связанные с активным toggle в Visual Builder и theme builder areas. Если вы видите похожие симптомы, сначала убедитесь, что используете актуальный доступный релиз продукта. Затем проверьте минимальный пример на тестовой странице. Если ошибка повторяется только в Theme Builder, фиксируйте точные шаги и передавайте их в поддержку вместе с системной информацией.

Когда не стоит усложнять блок и как сохранить страницу поддерживаемой

Самая частая ошибка при работе с интерактивными модулями - желание спрятать в них слишком много. Toggle кажется удобным контейнером, и редактор помещает внутрь длинный текст, галерею, форму, тарифы, отзывы и дополнительную кнопку. В итоге посетитель видит маленький switch, за которым скрывается половина страницы. Это плохо для понимания и поддержки.

Держите один toggle вокруг одной идеи. Если это тарифы, не добавляйте туда ещё FAQ. Если это меню, не прячьте внутрь условия доставки. Если это before/after, не смешивайте его с отзывами. Секция должна отвечать на конкретный вопрос: "Какой вариант мне выбрать?" или "Что изменится при переключении?".

Правило одного ответа

Перед публикацией спросите себя: какую мысль пользователь поймёт за несколько секунд после клика? Если ответа нет, блок слишком общий. Разбейте контент на обычные секции или добавьте отдельную навигацию. Content toggle не должен быть универсальной корзиной для всего, что не помещается в дизайн.

Как документировать блок для команды

Если сайт ведёт несколько редакторов, оставьте внутреннюю заметку в названии Divi Library layouts или в комментарии к задаче: какие два состояния подключены, где находится источник контента, что нельзя менять без проверки. Это особенно важно для shortcodes и HTML. Через несколько месяцев никто не вспомнит, почему левая сторона собрана как layout, а правая как shortcode.

Когда Divi Advanced Content Toggle Module будет удачным выбором

Divi Advanced Content Toggle Module стоит использовать, когда на странице есть два связанных состояния контента, которые лучше сравнивать в одном месте, а не растягивать по двум секциям. Плагин особенно силён в тарифах, before/after, меню, сервисных наборах, переключении layout-состояний и компактных сравнениях. Он даёт редактору Divi более поддерживаемый путь, чем самодельный Code module с HTML, CSS и JavaScript.

Перед публикацией проверьте три вещи: совместимость среды, простую работу модуля на тестовой странице и поведение реального контента на публичной части сайта. Затем включайте стили, Equal Height Content, кликабельные labels и адаптивные настройки. Если блок не отвечает на чёткий вопрос или скрывает слишком много важной информации, лучше выбрать другой интерфейс.

Хорошо настроенный content toggle не пытается впечатлить анимацией ради анимации. Он помогает посетителю быстро сравнить два варианта и принять решение. Именно в этом случае модуль оправдывает место на странице продукта, услуги или лендинга.