Галерея — один из самых востребованных элементов на сайтах фотографов, дизайнеров, архитекторов, ресторанов и магазинов. В Wix для этого есть Wix Pro Gallery: в одной галерее можно показать изображения, видео и текстовые блоки, выбрать один из множества макетов и настроить дизайн отдельно для компьютеров и мобильных устройств.
Например, дизайнер интерьеров может собрать в одной галерее фото и видео готовых проектов, а к каждому кадру добавить описание материалов или идеи. Описания можно показывать постоянно или только при наведении курсора.
Шаг 1. Добавьте галерею на страницу
Откройте редактор и нажмите Добавить элементы (Add Elements) на левой панели.
Выберите Галерея (Gallery) → Pro-галереи (Pro Galleries).
Перетащите понравившийся вариант на страницу.
Шаг 2. Загрузите медиа
Кликните по галерее и нажмите Управлять медиа (Manage Media).
Нажмите Добавить медиа и выберите тип: изображения, видео или текст.
Загрузите свои файлы или выберите материалы из библиотек Wix.
Демонстрационные картинки, которые идут с галереей по умолчанию, удаляются через значок корзины при наведении на элемент. В этом же окне можно задать заголовок и описание для каждого кадра — они пригодятся и посетителям, и поисковым системам.
Шаг 3. Выберите макет
Откройте Настройки галереи и перейдите на вкладку Макет (Layout). Есть два пути:
Готовые шаблоны (Presets) — макет, дизайн и настройки уже подобраны, достаточно выбрать вариант.
Настраиваемые макеты (Custom) — галерея собирается с нуля: вы выбираете тип раскладки и вручную настраиваете отступы, размеры и количество колонок.
Для портфолио с фото разной ориентации обычно лучше смотрится раскладка, сохраняющая пропорции кадров, для каталога однотипных товаров — ровная сетка, для главной страницы — слайдер.
Шаг 4. Настройте поведение
На вкладке Настройки (Settings) выбирается, что происходит при клике на элемент, например открытие в увеличенном виде или переход по ссылке. Здесь же включаются кнопки, позволяющие посетителям делиться понравившимися работами в соцсетях.
Шаг 5. Оформите галерею
В разделе Дизайн настраиваются наложение и иконки при наведении, анимация при прокрутке, текст, стиль элементов, кнопки и режим увеличения. Набор доступных опций зависит от выбранного макета. Например, чтобы оформлять подписи, сначала включите отображение заголовка или описания на вкладке Текст панели дизайна.
Шаг 6. Расширенные параметры
На вкладке Дополнительно (Advanced) задаётся, как воспроизводятся видео, какого качества изображения отдаются посетителям и в каком направлении идёт галерея.
Советы по скорости и SEO
Не загружайте десятки похожих кадров. Большая галерея замедляет страницу и утомляет посетителя. Оставьте лучшие работы, остальное разнесите по отдельным страницам или проектам.
Готовьте файлы заранее. Обрежьте фото перед загрузкой и не используйте огромные исходники там, где хватит меньшего размера.
Заполняйте подписи и alt-текст. Описание изображения помогает поисковым системам понять, что на нём, и делает сайт доступнее для людей с экранными дикторами. Подробнее — в статье про alt-текст изображений.
Проверьте мобильную версию. Макет, который выглядит эффектно на широком экране, на телефоне может превратиться в длинную ленту. Посмотрите галерею в мобильном редакторе и при необходимости скорректируйте.
Если вы снимаете в Lightroom, фотографии можно отправлять в галерею сайта напрямую — об этом в материале о загрузке из Lightroom Classic. А слайдер постов блога на основе галереи описан в статье о слайдере постов с Pro Gallery.