Виджет «Галерея изображений» в Elementor: Создание простых галерей и каруселей

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

Чем отличается галерея от карусели

Прежде чем перейти к настройкам, важно понять разницу между двумя подходами к отображению изображений. Галерея (Grid, Masonry, Justified) — это статическая сетка изображений. Все фото видны одновременно, пользователь прокручивает страницу вниз. Такой формат идеален для портфолио, каталогов товаров или фотодневников, где важно показать сразу много работ. Карусель (Carousel) — это слайдер, в котором изображения сменяют друг друга горизонтально. Пользователь может переключать слайды стрелками, точками или автопрокруткой. Карусель экономит вертикальное пространство и привлекает внимание за счёт динамики. В бесплатной версии Elementor доступны два ключевых виджета: Basic Gallery (простая сетка) и Image Carousel (базовая карусель). Продвинутые варианты — Gallery Widget (с фильтрацией) и Media Carousel (с поддержкой видео) — доступны в Elementor Pro.

Создание простой галереи с помощью Basic Gallery

Добавление виджета на страницу

Откройте страницу в редакторе Elementor, нажмите на иконку «+» в левом верхнем углу и найдите в поиске Basic Gallery. Перетащите виджет на холст в нужное место.

Загрузка изображений

В левой панели на вкладке Content найдите раздел Image Gallery и нажмите на иконку «+». Откроется медиабиблиотека WordPress. Выберите нужные изображения (можно загрузить сразу несколько), при необходимости добавьте подписи и нажмите Create a new gallery.

Настройка размера и колонок

• Image Resolution — выберите размер изображений: Thumbnail, Medium, Large, Full или Custom. Для галерей рекомендуется использовать оптимизированные версии, а не оригиналы.
• Columns — количество колонок от 1 до 10. Для мобильных устройств Elementor автоматически адаптирует сетку, но вы можете задать отдельные значения в режиме адаптивности.

Ссылки и лайтбокс

В поле Link выберите, куда будут вести клики по изображениям: Media File (открытие в лайтбоксе), Attachment Page или None. Если хотите, чтобы фото открывались в полноэкранном лайтбоксе, обязательно выберите Media File и включите переключатель Lightbox.

Порядок отображения

В разделе Order By выберите Default (порядок загрузки) или Random (случайный порядок при каждой загрузке страницы).

Создание карусели с помощью Image Carousel

Добавление и загрузка изображений

Найдите виджет Image Carousel в панели элементов и перетащите его на страницу. Принцип загрузки тот же, что и в Basic Gallery: нажмите «+» в разделе Image Carousel и выберите изображения из медиабиблиотеки.

Управление слайдами

• Slides to Show — сколько изображений видно одновременно (от 1 до 10). Для компактных блоков обычно достаточно 3–4 слайдов.
• Slides to Scroll — сколько слайдов прокручивается за один раз. Рекомендуется ставить значение, равное Slides to Show, чтобы прокрутка была плавной.
• Image Stretch — если включить, изображения будут растягиваться на всю ширину слайда, что может исказить пропорции. Лучше оставить выключенным, если важна точная передача кадра.

Навигация

В поле Navigation выберите один из вариантов: Arrows (стрелки), Dots (точки), Both (и то, и другое) или None (без навигации). Для стрелок можно заменить стандартные иконки на свои из библиотеки или загрузить SVG.

Лайтбокс и ссылки

Если выбрать Link → Media File, появится опция Lightbox. Включите её, чтобы при клике на изображение открывалось полноэкранное окно с возможностью листать фотографии.

Стилизация галереи и карусели

Настройки изображений

На вкладке Style в разделе Image можно задать:

• Border Radius — скругление углов;
• Border Width / Color — рамку вокруг изображений;
• CSS Filters — размытие, яркость, контраст, насыщенность (отдельно для обычного и hover-состояния).

Эффекты при наведении

Hover Animation — один из самых эффектных инструментов. Доступны варианты: Zoom In, Zoom Out, Move Left/Right/Up/Down. Для портфолио хорошо работает лёгкий Zoom In, для каталогов — Move Up с появлением подписи.

Оверлей с текстом

В разделе Overlay включите переключатель Background и выберите, какие метаданные изображения показывать: Title, Caption, Alt или Description. Это позволяет создавать подписи к работам без использования дополнительных виджетов.

Расширенные возможности: Gallery Widget и Media Carousel

Если у вас установлен Elementor Pro, доступны более мощные инструменты. Gallery Widget поддерживает Type: Multiple — режим фильтруемой галереи в стиле портфолио. Посетители могут сортировать изображения по категориям с помощью панели фильтров. Также доступны три layout-режима: Grid (с настраиваемым соотношением сторон), Justified (одинаковая высота строк, разная ширина изображений) и Masonry (одинаковая ширина, разная высота). Media Carousel позволяет смешивать изображения и видео в одном слайдере. Три скина на выбор: Carousel (стандартная лента), Slideshow (большое изображение с миниатюрами снизу) и Coverflow (три изображения с наклоном, центральное выделено).

Распространённые ошибки и советы

Слишком много изображений в одной галерее. Если в Basic Gallery больше 20–30 фото, страница становится тяжёлой. Разбейте работы на несколько галерей по темам или используйте пагинацию. Игнорирование Lazy Load. В Gallery Widget есть переключатель Lazy-Load. Включите его, чтобы изображения загружались только при прокрутке до них. Оригиналы вместо оптимизированных версий. WordPress автоматически создаёт миниатюры при загрузке. Указывайте в Image Resolution размер Medium или Large, а не Full, чтобы не грузить многомегабайтные файлы. Отсутствие адаптивных настроек. После настройки галереи на десктопе переключитесь в режим планшета и мобильного и проверьте количество колонок и размеры слайдов. Elementor позволяет задавать отдельные значения для каждого брейкпоинта.

Виджеты галереи и карусели в Elementor покрывают большинство сценариев работы с изображениями — от простого портфолио до динамического слайдера с фильтрацией. Начните с Basic Gallery для статичных подборок, используйте Image Carousel для экономии места и привлечения внимания, а при наличии Pro-версии освойте Gallery Widget с фильтрами и Media Carousel для мультимедийных проектов.