AGS Divi Widget Builder - Плагин WordPress

Руководство по настройке AGS Divi Widget Builder для виджетов Divi

AGS Divi Widget Builder нужен в тех случаях, когда на сайте уже есть Divi, но обычных виджетов WordPress не хватает: в боковую колонку, футер или другую область виджетов хочется поставить не простой текстовый блок, а готовый макет из Divi Library. В этом руководстве разберём не рекламное описание, а практический путь: что подготовить, как собрать макет для узкой области, как вывести его через виджет Divi PB Widget, как проверить результат и где искать причину, если блок не отображается.

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

Ниже будет много проверок, потому что связка «Divi Library - виджет - область темы - кеш» чувствительна к мелочам. Если макет отлично выглядит в библиотеке, это ещё не значит, что он без доработки поместится в узкую боковую колонку. Хорошая настройка начинается не с кнопки добавления виджета, а с понимания, какой макет подходит для конкретной зоны сайта.

Какую задачу решает плагин и где он действительно полезен

Официальная документация WP Zone описывает рабочий принцип кратко: после установки в разделе виджетов появляется Divi PB Widget, а внутри него можно выбрать элемент из Divi Library. Это превращает библиотеку Divi в источник блоков для виджетных областей WordPress. На практике это удобно, когда один и тот же оформленный блок нужно вывести не внутри контента страницы, а рядом с ним или под ним.

Типичные сценарии для AGS Divi Widget Builder выглядят так:

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

Главная ценность плагина - повторное использование макетов Divi в местах, где WordPress работает с виджетами. Поэтому он подходит владельцам сайтов на Divi, вебмастерам и агентствам, которые хотят держать дизайн блоков в одном визуальном конструкторе. Если же сайт полностью собран через Divi Theme Builder и все футеры, записи и архивы уже управляются шаблонами Divi, отдельный виджетный мост может оказаться лишним.

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

Что проверить перед установкой: Divi Library, области виджетов и окружение

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

Проверка платформы и темы

На странице продукта WP Zone явно указывает совместимость с Divi 4 и отдельно предупреждает проверять статус поддержки Divi 5. В официальной статье Elegant Themes о плагине дополнительно описывался сценарий работы с Divi и Extra, но для текущей установки разумнее опираться на страницу разработчика и проверять совместимость на тестовой копии сайта.

Если сайт обслуживается агентством или несколькими редакторами, до установки полезно договориться, кто отвечает за Divi Library. Один и тот же макет может использоваться на нескольких страницах и в виджете. Изменение глобального элемента библиотеки способно сразу повлиять на несколько мест сайта.

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

Установка и первичная проверка без риска для рабочего сайта

Установка AGS Divi Widget Builder выполняется как установка обычного WordPress-плагина из ZIP-архива. В админ-панели откройте Plugins - Add New, используйте Upload Plugin, выберите архив, установите его и нажмите Activate. Подробности установки ZIP-плагинов подтверждаются документацией WordPress, но конкретные шаги в вашей админ-панели могут немного отличаться из-за языка интерфейса и версии WordPress.

После активации не торопитесь сразу добавлять блок в рабочий футер. Сначала проверьте три вещи:

1. Откройте Appearance - Widgets и найдите новый виджет Divi PB Widget.
2. Убедитесь, что в Divi Library есть хотя бы один небольшой макет, который можно выбрать для теста.
3. Добавьте виджет в второстепенную область, сохраните изменения и откройте страницу сайта в режиме инкогнито.

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

Почему тестовая область важнее быстрой установки

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

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

Как подготовить макет Divi Library для узкой области

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

Выбор типа элемента в библиотеке

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

Что хорошо работает в боковой колонке

• Одноколоночный блок с коротким текстом, кнопкой и небольшой иконкой.
• Форма подписки или контактный призыв, если форма уже корректно работает в Divi.
• Карточка автора, услуги, акции или консультации без сложной сетки.
• Мини-блок навигации с несколькими ссылками, если он не дублирует меню сайта.

Что лучше не переносить в виджет без переработки

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

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

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

Настройка виджета Divi PB Widget после установки

После активации плагина основной рабочий путь проходит через стандартный экран виджетов WordPress. В классическом интерфейсе это Appearance - Widgets. На сайтах с блочным экраном виджетов путь остаётся похожим, но сама панель может выглядеть иначе. Если используется классический режим или плагин для возврата старого экрана виджетов, виджет обычно добавляется перетаскиванием в нужную область.

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

1. Откройте Appearance - Widgets.
2. Выберите область вывода: боковая колонка записей, футерная колонка или другая зона вашей темы.
3. Добавьте Divi PB Widget в выбранную область.
4. В настройках виджета выберите сохранённый элемент Divi Library.
5. Если виджет предлагает заголовок, решите, нужен ли он. Часто заголовок уже есть внутри макета Divi, и дублировать его не стоит.
6. Сохраните изменения и откройте страницу, где эта область реально выводится.

Лучшие настройки для типового сайта начинаются с малого макета и отключённого дублирования заголовков. Если заголовок нужен для доступности или навигации, сделайте его коротким и проверьте, не повторяет ли он H2 внутри самого блока Divi. Две одинаковые надписи подряд выглядят неаккуратно и могут мешать восприятию страницы.

Что проверить сразу после сохранения

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

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

Когда настройку лучше откатить

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

Практический пример: контактный блок Divi в боковой колонке блога

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

Цель

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

Подготовка

В Divi Library создайте отдельный макет, например Blog sidebar consultation. Внутри используйте одну колонку, небольшой текстовый модуль и кнопку. Если нужен фон, выбирайте лёгкий цвет или небольшое изображение, заранее оптимизированное для сайта. Не добавляйте сложный слайдер, видео или многострочную форму, если боковая колонка узкая.

Шаги

1. Создайте или откройте элемент в Divi Library и проверьте его в визуальном редакторе Divi.
2. Назначьте главным элементам понятные CSS-классы через вкладку Advanced, если планируете точечно править внешний вид.
3. Откройте Appearance - Widgets и добавьте Divi PB Widget в область боковой колонки записей.
4. Выберите созданный элемент Divi Library и сохраните виджет.
5. Откройте несколько записей блога и убедитесь, что область выводится на нужных страницах.
6. Проверьте вид на узком экране через инструменты браузера или встроенную адаптивную проверку Divi.

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

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

Нюанс, который часто мешает

Иногда виджет добавлен правильно, но не виден на конкретной записи. Причина может быть не в AGS Divi Widget Builder, а в шаблоне записи: область боковой колонки может быть отключена, заменена шаблоном Theme Builder или не выводиться для выбранного типа записи. Проверьте другую запись, архив блога и настройки шаблона Divi, прежде чем менять сам плагин.

Где выводить макеты: боковые колонки, футер и пользовательские зоны

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

Боковая колонка

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

Футер

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

Пользовательские области темы

Некоторые дочерние темы и плагины добавляют собственные области виджетов. AGS Divi Widget Builder может быть полезен именно там, потому что позволяет вывести оформленный Divi-блок без правки шаблона. Но сначала убедитесь, что эта область действительно печатается на публичной части сайта. Если зона существует в админ-панели, но не появляется на странице, проблема может быть в логике темы.

Когда лучше использовать Theme Builder

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

Совместимость с Divi, Extra, блочными виджетами и кешем

У плагина есть несколько уровней совместимости. Первый уровень - Divi и элементы Divi Library. Второй - система виджетов WordPress. Третий - тема, которая должна выводить нужную область. Четвёртый - кеш и оптимизация, которые могут вмешиваться в стили и скрипты. Диагностика становится проще, если проверять эти уровни по очереди.

Divi и статус Divi 5

Страница WP Zone подтверждает работу с Divi 4 и отдельно указывает, что статус Divi 5 нужно отслеживать. Поэтому для рабочих сайтов на Divi 5 не стоит делать уверенное предположение о полной совместимости без теста. Создайте копию сайта, поставьте плагин, проверьте вывод нескольких типов макетов и только потом переносите решение в рабочую среду.

Extra и старые сценарии

В материале Elegant Themes о Divi Widget Builder описывался сценарий работы с Divi и Extra. Это полезный исторический источник для понимания идеи плагина, но текущую совместимость лучше сверять с актуальной страницей разработчика. Если проект на Extra, проверьте не только виджет в боковой колонке, но и архивы, категории и шаблоны, где Extra может использовать собственные зоны.

Блочный экран виджетов WordPress

WordPress развивает блочный экран виджетов, поэтому на разных сайтах интерфейс Appearance - Widgets может отличаться. Если виджет неудобно добавлять в новом интерфейсе, проверьте документацию WordPress и настройки темы. Не ставьте дополнительные плагины только ради привычного интерфейса, пока не убедитесь, что это действительно нужно.

Кеш, минификация и отложенная загрузка

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

Не делайте вывод «плагин сломан» по одной странице. Проверьте другой макет Divi Library, другую область виджетов и страницу без кеша. Так быстрее понять, где именно обрыв: библиотека, виджет, тема или оптимизация.

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

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

Визуальная проверка

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

Проверка для незалогиненного пользователя

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

Проверка после обновления макета

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

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

Диагностика ошибок: почему виджет не отображается или выглядит неправильно

Ошибки у таких плагинов редко бывают изолированными. Виджет зависит от Divi Library, области темы, прав пользователя, кеша и CSS. Поэтому диагностику лучше вести от простого к сложному. Сначала проверьте, появился ли виджет в админ-панели. Затем проверьте список макетов. Потом область вывода. Только после этого ищите конфликт с оптимизацией или темой.

Частые симптомы и безопасные проверки

Симптом	Вероятная причина	Что проверить	Как исправить
Divi PB Widget не виден в списке виджетов	Плагин не активирован, нет прав или экран виджетов работает иначе.	Раздел Plugins, роль пользователя, экран Appearance - Widgets.	Активируйте плагин, войдите под администратором и проверьте стандартный экран виджетов.
Список Divi Library пустой	Нет подходящих сохранённых элементов или библиотека не подготовлена.	Раздел Divi Library и тип сохранённого макета.	Создайте отдельный компактный layout или секцию и снова откройте настройки виджета.
Макет выбран, но не виден на странице	Тема не выводит эту область на выбранном шаблоне.	Другие страницы, архивы, шаблоны Divi Theme Builder, настройки боковой колонки.	Перенесите виджет в область, которая точно отображается, или настройте шаблон темы.
Блок виден без стилей Divi	Кеш, минификация или отложенная загрузка мешают CSS и скриптам.	Страницу без кеша, приватное окно, временное отключение оптимизации.	Очистите кеш и включайте оптимизацию обратно по одной настройке.
Блок ломает ширину боковой колонки	Макет создан для широкой страницы, а не для виджета.	Колонки, отступы, фон, ширину кнопок и модулей в Divi Library.	Сделайте отдельный одноколоночный вариант для виджета и уменьшите внутренние отступы.
Изменения в библиотеке не появляются	Показывается кешированная версия или выбран не тот элемент.	Название элемента Divi Library, кеш страницы, кеш браузера.	Очистите кеш, проверьте выбранный элемент в виджете и сохраните виджет заново.

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

Безопасные улучшения без правки файлов плагина

Иногда макет работает, но требует небольшой адаптации под боковую колонку: уменьшить отступы, сделать кнопку на всю ширину, убрать лишний нижний зазор. Для таких задач не нужно править файлы AGS Divi Widget Builder или Divi. Безопаснее добавить собственный CSS-класс в нужный модуль или секцию Divi и описать стили в дочерней теме, в поле пользовательского CSS Divi или в проверенном плагине для сниппетов.

Пример ниже не привязан к внутренним классам плагина. Он работает только с вашим классом ags-widget-panel, который вы сами добавляете в Divi Library через вкладку Advanced. Это снижает риск поломки после обновлений.

.ags-widget-panel {
  max-width: 100%;
}

.ags-widget-panel .et_pb_button {
  width: 100%;
  text-align: center;
}

@media (max-width: 980px) {
  .ags-widget-panel {
    margin-bottom: 24px;
  }
}

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

Когда код не нужен

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

Когда AGS Divi Widget Builder будет удачным выбором

AGS Divi Widget Builder стоит использовать, если у сайта есть Divi, готовые или планируемые элементы Divi Library и реальные области виджетов, куда нужно вывести оформленный блок. Он особенно полезен для боковых колонок блога, футерных колонок, карточек контактов, призывов к действию и повторяемых информационных блоков, которые должны выглядеть как часть Divi-дизайна.

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

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