Divi Gallery Extended - Плагин WordPress

Руководство по настройке Divi Gallery Extended для галерей, фильтров и lightbox в Divi

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

Материал рассчитан на пользователя, у которого уже есть Divi-сайт и установленный архив плагина. Здесь не будет инструкций по покупке, лицензированию или обходу платных ограничений. Фокус другой - как пользоваться Divi Gallery Extended после установки, какие настройки включать первыми и как понять, что результат на странице работает корректно.

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

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

Divi Gallery Extended расширяет работу с визуальным контентом внутри Divi Builder. По официальной странице и документации плагин добавляет несколько модулей галерей: Masonry Gallery, Dynamic Masonry Gallery, Justified Gallery, Video Gallery и Image Carousel. Это важное отличие от обычной галереи, где пользователь чаще всего выбирает изображения, базовую сетку и смотрит, как тема сама разложит элементы.

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

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

Когда плагин подходит

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

• Нужна masonry-сетка, где изображения разного размера выглядят естественно и не требуют жёсткой обрезки.
• Нужна динамическая галерея по категориям медиатеки, чтобы редактор мог добавлять новые изображения без полной пересборки страницы.
• Нужно открыть изображение в Lightbox, а не вести пользователя на отдельный файл.
• Нужны фильтры по категориям, подписи, overlay-эффекты, произвольные ссылки или carousel с навигацией.
• Нужно вывести видео из локальных файлов, YouTube или Vimeo в единой сетке с превью.

Когда лучше подумать о другом решении

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

Если галерея должна выводить сложные данные из произвольных полей, товаров, повторителей или пользовательских типов записей, сначала проверьте, достаточно ли категорий медиатеки и настроек Divi Gallery Extended. Для сайтов, где галерея связана с расширенными динамическими данными, иногда логичнее смотреть в сторону специализированных Divi-модулей с поддержкой advanced custom fields, CPT или WooCommerce.

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

Модули Divi Gallery Extended: как выбрать правильный вариант до настройки

Самая частая ошибка при работе с галереями - начинать с дизайна, не выбрав логику источника. В Divi Gallery Extended это особенно заметно, потому что разные модули отвечают за разные сценарии. Если выбрать статическую Masonry Gallery там, где редактор будет постоянно добавлять новые изображения по рубрикам, придётся вручную обновлять модуль. Если выбрать Dynamic Masonry Gallery без подготовленных категорий медиатеки, на странице легко получить пустой результат.

Masonry Gallery для ручной подборки изображений

Masonry Gallery подходит, когда вы хотите сами выбрать конкретные изображения для конкретной страницы. В документации для добавления изображений используется путь через вкладку Content, группу Configuration и выбор Add Gallery Images. После этого открывается медиатека WordPress, где можно выбрать нужные файлы.

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

Dynamic Masonry Gallery для категорий медиатеки

Dynamic Masonry Gallery строится вокруг категорий изображений. Документация описывает отдельный пункт Media Categories в меню медиатеки, который появляется после включения плагина. Сначала создаются категории, затем изображения получают нужные категории, после чего динамический модуль выбирает, какие категории показывать на странице.

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

Justified Gallery для ровного визуального ритма

Justified Gallery нужен, когда важна не «кирпичная» masonry-структура, а более ровные строки. В документации у этого модуля есть настройки размера изображений, расстояния между колонками, высоты ряда и выравнивания последнего ряда: Justify, Center, Right и No Justify. Такой модуль удобен для страниц, где нужно сохранить аккуратный горизонтальный ритм: галерея интерьера, путешествий, меню, подборка фото команды.

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

Video Gallery для обучающих и демонстрационных роликов

Video Gallery работает с видео как с отдельным типом содержимого. Официальная документация описывает добавление нового видео, выбор размера, количества колонок, расстояния, действия по клику, autoplay, overlay и настройки заголовка с подписью. На странице продукта также указано, что модуль поддерживает MP4, WEBM и URL YouTube.

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

Image Carousel для компактной витрины

Image Carousel полезен, когда нужно показать несколько изображений в ограниченном пространстве. Документация описывает выбор категорий, порядок, размер изображения, действие по клику, подписи, overlay, эффекты перехода Cube, Coverflow, Fade, Flip, количество изображений в видимой области, loop, autoplay, паузу при наведении и навигацию через стрелки, точки или миниатюры.

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

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

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

Базовая совместимость

Проверьте, что сайт действительно строится на Divi или использует Divi Builder, а нужная страница редактируется через него. На официальной странице заявлена совместимость с Divi 4 и Divi 5, но перед обновлениями всё равно стоит проверить тестовую копию сайта или staging, особенно если на странице уже много сторонних модулей Divi.

• Сделайте резервную копию перед установкой нового визуального плагина.
• Проверьте, что активная тема и Divi Builder открывают страницу без ошибок до установки плагина.
• Соберите 8-15 тестовых изображений разного формата, чтобы проверить masonry, justified и мобильный вид.
• Подготовьте короткие названия и подписи в медиатеке, если планируете показывать title и caption.
• Если нужна Dynamic Masonry Gallery, заранее продумайте категории медиатеки и понятные ярлыки.

Подготовка изображений

Галерея выглядит профессионально не из-за одного модуля, а из-за качества исходников. До настройки стоит привести изображения к разумному размеру, удалить случайные дубли и заполнить alt-тексты там, где это помогает доступности и смыслу страницы. Документация плагина даёт выбор размеров изображения, включая thumbnail, medium, large и full в разных модулях, но это не отменяет базовой подготовки файлов.

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

Проверка кеша и оптимизации

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

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

Установка и первичная проверка в WordPress

Официальная документация описывает два способа установки: через админ-панель WordPress и ручную загрузку через FTP. Для обычного пользователя безопаснее путь через админ-панель: Plugins, Add New, Upload Plugin, выбор ZIP-архива, Install Now и затем Activate Plugin. Ручная загрузка в wp-content/plugins/ нужна только тогда, когда стандартная загрузка недоступна или сайт обслуживает разработчик.

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

Мини-проверка после активации

1. Откройте тестовую страницу в Divi Builder.
2. Добавьте новый ряд и колонку, чтобы не смешивать проверку с уже существующими блоками.
3. Найдите модуль Masonry Gallery или Dynamic Masonry Gallery.
4. Добавьте 6-8 изображений и сохраните страницу.
5. Откройте публичную часть сайта в приватном окне и проверьте, что сетка загрузилась без пустых мест.

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

Настройка галереи после установки: параметры, которые стоит пройти первыми

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

Источник изображений: ручной выбор или категории

Для статической галереи откройте настройки модуля и добавьте изображения через Content - Configuration - Images - Add Gallery Images. Это прозрачный путь, если страница посвящена конкретному проекту или услуге.

Для динамической галереи сначала создайте категории в Media - Media Categories, затем назначьте категории нужным изображениям. Документация также описывает массовое редактирование через Media - Library, выбор нескольких файлов, Edit и Apply. Важный нюанс: по документации bulk editing позволяет добавить новые категории, но не убрать старые. Если нужно очистить ошибочную категорию, придётся открыть конкретный файл и поправить его отдельно.

Размер изображения и качество вывода

В разных модулях доступны размеры вроде Thumbnail, Medium, Large и Full. Для маленькой сетки на странице услуг часто достаточно Large. Для lightbox, где пользователь открывает изображение крупно, логичнее проверить Full или другой крупный вариант, но только если исходники оптимизированы. Выбор полного размера без сжатия может сделать страницу тяжелее.

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

Колонки и расстояние

На странице продукта заявлена возможность выводить masonry-галереи до 15 колонок, а документация по настройке колонок указывает путь Content - Configuration - Number of Columns и отмечает responsive-иконку для разных значений на мобильном, планшете и настольном экране. Здесь не стоит выбирать максимум только потому, что он доступен.

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

Действие по клику: не включайте всё сразу

В документации встречаются варианты None, Lightbox и Link. Для Image Carousel дополнительно описан сценарий Lightbox and Link on Overlay, где клик по изображению и переход по ссылке разделяются через overlay. Это полезно, но требует ясной логики для посетителя.

Если картинка должна просто открываться крупно, выберите Lightbox. Если каждая картинка ведёт на страницу проекта, добавьте ссылку к изображению в медиатеке через поле Custom Link и в модуле выберите Link. Если нужен и просмотр, и переход, обязательно проверьте overlay на телефоне: пользователю должно быть понятно, куда нажимать.

Подписи, overlay и lightbox

Title и caption помогают объяснить изображение, но легко перегружают сетку. Для портфолио можно показывать название проекта в overlay, а подробную подпись оставить для lightbox. Для обучающих материалов лучше наоборот: короткая подпись сразу в галерее, а в lightbox не перегружать текстом. Документация по lightbox указывает, что при включении title и caption можно выбрать отображение под изображением или поверх него.

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

Autoplay и carousel: когда включать осторожно

Image Carousel поддерживает autoplay, задержку, длительность перехода, loop и pause on hover. Эти параметры создают ощущение динамики, но могут раздражать, если пользователь пытается рассмотреть изображение. Для витрины на главной странице autoplay допустим, если скорость спокойная, есть стрелки и пауза при наведении. Для галереи работ, где нужно сравнить детали, лучше оставить ручное управление.

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

Фильтры, категории и динамические галереи без путаницы в медиатеке

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

Как устроить категории

Для Dynamic Masonry Gallery начните не с модуля, а с карты категорий. Запишите 3-7 групп, которые реально нужны пользователю на странице. Например, для студии интерьеров: кухни, гостиные, спальни, коммерческие пространства. Для фотографа: свадьбы, портреты, репортажи, предметная съёмка. Для образовательного проекта: вебинары, уроки, отзывы, backstage.

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

Фильтр и «All»

Документация показывает включение filterable gallery в Content - Elements - Enable Filterable Gallery для Masonry Gallery и Dynamic Masonry Gallery. В настройках также есть связанные материалы про All images filter и скрытие вкладки All. Логика выбора зависит от страницы.

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

Нелатинские категории и slugs

Официальный FAQ отдельно отмечает проблему category filter на некоторых неанглийских сайтах: строка категории в других языках может изменяться в специальные символы, с которыми плагин пока не полностью совместим. В качестве временной рекомендации разработчик предлагает использовать обычное имя категории, но задавать slug числовым значением.

Для русскоязычного сайта это важный нюанс. Название категории можно оставить понятным для редактора и посетителя: «Кухни», «Портреты», «Отзывы». А slug лучше сделать простым: 1, 2, 3 или другой аккуратный латинский/числовой вариант. После изменения slug очистите кеш и проверьте фильтр в публичной части сайта.

Практический пример: портфолио студии с фильтрами, lightbox и ссылками на кейсы

Разберём предметный сценарий. Есть страница портфолио студии интерьеров на Divi. Нужно показать работы в masonry-сетке, дать фильтр по типу помещения, открывать фото крупно в lightbox и для части изображений вести на подробные кейсы. Этот пример можно адаптировать под фотографа, агентство, ресторан, обучение или каталог проектов.

Цель

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

Подготовка

Перед работой подготовьте 20-30 изображений в одинаковом визуальном стиле. Не обязательно делать одинаковые пропорции, masonry как раз допускает разную высоту. Но качество, цвет и размер должны быть близкими. В медиатеке создайте категории: kitchens, living, bedrooms, commercial или аналогичные безопасные slugs. Русские названия можно оставить в отображаемом имени категории.

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

1. Откройте страницу портфолио в Divi Builder и добавьте новый модуль Dynamic Masonry Gallery.
2. В настройках модуля выберите категории изображений, которые должны участвовать в галерее.
3. В Content - Elements включите Enable Filterable Gallery, если хотите показывать вкладки фильтра.
4. В Content - Configuration выберите размер изображения. Для портфолио начните с Large, затем проверьте lightbox.
5. Настройте Number of Columns: для настольного экрана 3 или 4, для планшета 2, для телефона 1.
6. Выберите Onclick Trigger - Lightbox, если основной сценарий - просмотр фото.
7. Если для отдельных изображений нужны ссылки на кейсы, добавьте Custom Link в медиатеке и проверьте, поддерживает ли выбранный модуль нужную комбинацию click/link в вашей версии.
8. Включите подписи только там, где они добавляют смысл: название проекта, тип помещения, город или короткое объяснение результата.

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

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

Мини-итог: готовая галерея должна отвечать на вопрос посетителя без инструкции. Он видит категории, понимает, что можно открыть фото крупно, и не теряется между lightbox и ссылками.

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

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

Практичные идеи применения для разных страниц Divi

Divi Gallery Extended не ограничивается классическим «портфолио из фотографий». Из подтверждённых функций можно собрать несколько рабочих сценариев, где галерея решает разные задачи: показывает выбор, сокращает длинную страницу, объясняет результат или помогает посетителю найти нужную группу материалов.

Портфолио и кейсы

Для агентства или студии сильнее всего работает связка Dynamic Masonry Gallery, категории медиатеки и lightbox. Редактор добавляет новые работы в медиатеку, назначает категорию, а страница обновляет подборку без ручного выбора каждого файла. Если у проекта есть отдельная страница кейса, используйте custom link осознанно: ссылка должна вести к подробному материалу, а не просто открывать файл изображения.

Обучающие материалы и библиотека видео

Video Gallery подходит для учебных роликов, записей вебинаров, обзоров, демонстраций продукта или клиентских инструкций. Настройте превью так, чтобы пользователь заранее понял тему видео. Для длинных роликов лучше избегать агрессивного autoplay. Для коротких демонстраций на посадочной странице inline-воспроизведение может быть уместным, если оно не замедляет страницу и не мешает основному тексту.

Отзывы, партнёры и компактные подборки

Image Carousel полезен для блоков, где не нужно показывать всю коллекцию сразу. Это логотипы партнёров, фрагменты отзывов, фотографии команды, этапы проекта, до и после. В таком сценарии особое значение имеют первые элементы и навигация. Не прячьте важную информацию в пятый или шестой слайд, если пользователь может до него не дойти.

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

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

Скорость, SEO и доступность: что зависит от галереи, а что от подготовки сайта

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

Lazy loading и спорные настройки

В документации Image Carousel описана настройка Disable lazy loading: включённая ленивая загрузка обычно помогает производительности, а отключение может пригодиться на отдельных конфигурациях, где изображения не появляются вовремя. Для большинства сайтов безопаснее начинать с ленивой загрузки, а отключать её только при конкретном симптоме и после проверки кеша.

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

Alt, title и caption

Title и caption в Divi Gallery Extended отвечают за отображение текста в галерее или lightbox. Alt-текст живёт в медиатеке WordPress и нужен не для красоты, а для доступности и понимания изображения. Если изображение несёт смысл, заполните alt. Если оно чисто декоративное, не превращайте alt в набор ключевых слов.

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

Кеш и минификация

Официальный FAQ по некорректному отображению изображений рекомендует проверить настройки jQuery в Divi Theme Options, включая отложенную загрузку jQuery и jQuery Migrate, а также настройки оптимизационного плагина. Это не означает, что кеш вреден. Это означает, что галерея с фильтрами и lightbox зависит от скриптов, а агрессивная оптимизация может изменить порядок загрузки.

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

Безопасное CSS-улучшение без привязки к внутренним классам плагина

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

Код можно добавить в Appearance - Customize - Additional CSS или в дочернюю тему. Он не меняет файлы WordPress, Divi или плагина.

.portfolio-gallery-proof img {
  border-radius: 12px;
}

.portfolio-gallery-proof a:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 4px;
}

После добавления откройте страницу с клавиатуры и пройдите по интерактивным элементам клавишей Tab. Если обводка мешает дизайну, измените цвет под палитру сайта или удалите код. Откат простой: убрать пользовательский класс у модуля или удалить CSS.

Как проверить готовую галерею перед публикацией

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

Проверка в публичной части

1. Откройте страницу в приватном окне, чтобы не видеть её как администратор.
2. Проверьте первую загрузку: нет ли скачков сетки, пустых мест и слишком долгого появления изображений.
3. Нажмите на каждую категорию фильтра и убедитесь, что элементы действительно меняются.
4. Откройте lightbox, проверьте закрытие, стрелки, подписи и прокрутку страницы после закрытия.
5. Проверьте мобильный вид: количество колонок, читаемость подписей, удобство нажатия на фильтры и стрелки.
6. Если включён carousel, проверьте ручную навигацию, autoplay, паузу при наведении и видимость миниатюр.
7. Очистите кеш и повторите ключевую проверку ещё раз.

Проверка данных в медиатеке

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

Проверка поведения после изменений

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

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

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

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

Изображения не появляются или сетка выглядит сломанной

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

Официальная документация указывает на возможный конфликт с jQuery-настройками Divi и оптимизационными плагинами. Проверьте Divi - Theme Options и настройки вроде отложенной загрузки jQuery и jQuery Migrate. Если используется плагин оптимизации, временно отключите связанные JavaScript-опции и очистите кеш.

Что сделать безопасно

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

Категорийный фильтр не работает на русскоязычном сайте

Симптом: вкладки фильтра видны, но часть категорий не переключается, элементы не появляются или фильтр ведёт себя нестабильно.

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

Что проверить

• Откройте Media Categories и проверьте slugs категорий.
• Упростите slugs до чисел или латиницы без пробелов и спецсимволов.
• Очистите кеш страницы и браузера.
• Проверьте фильтр в приватном окне.

Пагинация и фильтр конфликтуют

Симптом: при сочетании пагинации и фильтра часть элементов не показывается так, как ожидается. Официальный FAQ отмечает, что category filter и pagination должны работать вместе, но для понимания причины разработчик просит смотреть конкретный URL сайта.

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

Фотографии повернулись неправильно

Симптом: в медиатеке, редакторе или lightbox изображение выглядит правильно, а в masonry-сетке на публичной странице повернулось.

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

Lightbox не показывает title и caption

Симптом: изображение открывается, но подписи, которые ожидались в lightbox, не видны.

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

В динамической галерее не видно часть изображений

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

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

Carousel слишком быстро меняет слайды

Симптом: пользователь не успевает рассмотреть изображение или прочитать подпись.

Проверьте Autoplay delay, Transition duration, Pause on Hover, стрелки и тип пагинации. Для контента, который нужно рассматривать, autoplay лучше замедлить или отключить. Для декоративной витрины можно оставить движение, но ручная навигация всё равно должна быть доступна.

Когда Divi Gallery Extended будет удачным выбором

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

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

Если же вам нужна только простая сетка из нескольких изображений, сложный каталог динамических данных или глубокая интеграция с WooCommerce-товарами, сначала сравните альтернативы. Сильная сторона Divi Gallery Extended - не абстрактная «красивая галерея», а набор практичных модулей для Divi, где редактор может управлять сеткой, категориями, поведением по клику и итоговым видом без ручной разработки.