Как сделать галерею в Тильде: полное руководство

2.

3.

1.

6.

10.

7.

11.

8.

12.

4.

5.

9.

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

Галерея нужна практически всем: фотографам и дизайнерам — чтобы показать портфолио; строительным компаниям и ремонтным бригадам — чтобы демонстрировать объекты «до/после»; отелям и ресторанам — чтобы продать атмосферу ещё до визита; интернет-магазинам — чтобы показать товар с разных ракурсов; образовательным проектам — чтобы иллюстрировать контент и повышать вовлечённость.

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

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

В Тильде галерею можно сделать тремя способами — вот как они различаются:

Более 20 готовых блоков, каждый со своей логикой отображения. Добавляются в один клик прямо из библиотеки блоков. Не требуют навыков вёрстки. Вот основные из них:

• CL20N — галерея с текстовой колонкой рядом;
• CL21N — то же самое, но с кнопкой CTA;
• GL01 — стандартная галерея, поддерживает изображения и видео;
• GL08N — галерея, открывающаяся в попапе (модальном окне);
• GL19 — галерея на весь экран (fullscreen);
• GL20 — галерея с превью боковых фото;
• GL21 — фотографии с текстовой информацией;
• GL26 — галерея с миниатюрами под главным изображением;
• GL27 — галерея в формате Stories (вертикальные карточки).

Зероблок (Zero Block) — встроенный редактор свободного позиционирования элементов. Галерея в Тильде через зероблок добавляется через меню элементов (кнопка «+» → Add Gallery). Принцип похож на стандартные блоки, но с расширенными возможностями кастомизации: можно задавать CSS-классы, менять логику отображения стрелок и точек, встраивать галерею в сложную композицию страницы.

Для нестандартных задач — миниатюры вместо точек, кастомные кнопки пролистывания, видеогалереи — используются сторонние модификации (Нолим, TiCode, mo-ti.ru) или собственный JavaScript. Это продвинутый уровень: требует базового понимания HTML и подключённой библиотеки jQuery.

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

Стандартные блоки — самый быстрый способ сделать галерею в Тильде. Разберём пошагово, как это сделать.

После добавления блока нажмите кнопку «Контент» в плавающей панели блока. Здесь вы управляете содержимым галереи:

• Нажмите кнопку «Загрузить файлы» — загружаются JPG, PNG, WebP, GIF.
• Чтобы заменить уже загруженное изображение, нажмите «Заменить» рядом с ним.
• Для удаления — иконка корзины рядом с миниатюрой.
• Добавьте подпись к каждому изображению в поле «Заголовок» или «Описание» (зависит от блока).
• Обязательно заполните поле «Image alt for SEO» — это alt-тег для поисковиков.
• Для перестановки изображений используйте перетаскивание (drag & drop).

Нажмите «Настройки» в плавающей панели блока. Основные опции:

• Размер контейнера — задайте ширину блока: фиксированную или на всю ширину экрана (Full Width).
• Высота блока — пиксели или vh (процент от высоты экрана).
• Zoom on Click — по клику на изображение оно открывается в увеличенном виде. Удобно для портфолио и каталогов товаров.
• Скругление углов — задайте радиус в пикселях. Можно настроить отдельно для мобильной версии.
• Адаптация изображений — рекомендуем оставить масштабирование по умолчанию. Ручные настройки могут вызывать «прыжки» изображений.
• Управляющие элементы — показывать/скрывать стрелки, точки (навигационные индикаторы), счётчик слайдов.
• Автосмена слайдов — задайте интервал в миллисекундах (например, 3000 = 3 секунды). Не рекомендуем меньше 2000 мс.
• Анимация — стандартные эффекты Тильды: появление снизу, слева, плавное.

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

Панель настроек зероблока содержит опции, которых нет в стандартных блоках:

• Stretch: Cover / Contain — Cover обрезает изображение по краям блока, Contain вписывает целиком с сохранением пропорций.
• Loop — зацикливание галереи: после последнего изображения показывается первое.
• Autoplay (S) — автопереключение с указанием интервала в секундах.
• Zoom on Click — увеличение по клику.
• Arrows — управление видом и расположением стрелок относительно изображений.
• Dots — управление навигационными точками: размер, цвет, позиция. Именно эти точки используются для замены миниатюрами через скрипты (о них — в разделе 8).
• CSS-класс — нажмите ПКМ на галерею → «Add CSS Class Name». Нужно для кастомных модификаций.

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

• Измените масштаб и размер галереи под экран мобильного.
• Уменьшите кнопки стрелок (минимум 44×44 px по гайдлайнам Apple/Google).
• Проверьте, что точки и стрелки не перекрывают изображения.
• Убедитесь, что галерея не выходит за края экрана.

Попап-галерея — отличный способ показать работы на странице-каталоге, не уводя пользователя со страницы. Схема работает через связку блока с плитками и галереи GL08N.

Стандартные галерейные блоки поддерживают загрузку видео наравне с изображениями (GL01 и некоторые другие). Но если нужно показать видео из YouTube или Vimeo в формате галереи-попапа, потребуется небольшая кастомизация.

Принцип: создаём плитку с превью (TE110), привязываем к попап-галерее (GL08N), вставляем iframe с видео через скрипт вместо стандартных фоновых изображений слайдов.

1. Создайте блок TE110 (плитки с фоновыми изображениями).
2. Создайте галерею GL08N и привяжите к плитке через #popup:videogallery.
3. В настройках GL08N включите нужные управляющие элементы (точки или стрелки).
4. Добавьте блок T123 («Другое → HTML»). Вставьте в него скрипт, который очищает содержимое слайдов и вставляет iframe с YouTube-ссылками (enablejsapi=1 — обязательно для остановки видео при пролистывании).
5. Опубликуйте и проверьте: видео должны воспроизводиться внутри попапа и останавливаться при переключении слайда.

Если стандартных настроек галереи не хватает, используйте модификации. Подробный обзор — в нашей статье «Модификации и скрипты для Тильды». Здесь — основные сценарии.

В зероблоке стандартные стрелки галереи можно скрыть и создать собственные кнопки из любых элементов — текста, шейпа, картинки:

1. Добавьте галерею и присвойте ей класс «tc-gallery».
2. Создайте два элемента (кнопки): левую кнопку с классом «tc-left», правую — «tc-right».
3. Вставьте скрипт TiCode или аналогичный в T123. Он скрывает стандартные стрелки и вешает обработчики кликов на ваши кнопки.

Нестандартный приём: можно перенести обычный блок GL01 в контейнер зероблока через JavaScript (метод appendTo). Это позволяет создать галерею с полным контролем над позиционированием при сохранении стандартного слайдера. Инструкция есть на mo-ti.ru.

Галерея — это не только про визуал. Правильно настроенные изображения приносят дополнительный трафик из поиска по картинкам. Подробная инструкция по SEO — в нашей статье «Как продвигать сайт на Тильде: SEO-оптимизация».

Alt-тег (атрибут alt) — текстовое описание изображения. Поисковики читают его вместо самой картинки. Правила хорошего alt-тега:

• Описывайте содержание изображения конкретно: «Фото кухни в скандинавском стиле» лучше, чем «фото1».
• Оптимальная длина — 3−7 слов, не более 80 символов.
• Можно органично включить ключевое слово, но не превращать в набор ключей.
• Для стандартных блоков: Контент → напротив каждого изображения ссылка «Текст» → поле «Image alt for SEO».
• Для зероблока: в феврале 2025 появилась возможность добавлять alt и для изображений внутри шейпов.

До загрузки изображений переименуйте файлы: «IMG001.jpg» → «kuhnya-skandinavskiy-stil.jpg». Тильда сохраняет оригинальные имена файлов, и они учитываются при индексации.

Тильда автоматически конвертирует загруженные изображения в WebP и применяет адаптивную загрузку (разные размеры для разных экранов). Тем не менее:

• Сжимайте изображения до загрузки: используйте TinyPNG или ILoveIMG.
• Обычные фото — до 200−300 KB, иконки и логотипы — до 100 KB.
• Ширина не должна превышать 1920 пикселей (если не нужен retina-вариант).
• Убедитесь, что в настройках зероблока не отключён Lazy Load — это важно для скорости страницы.

Для страниц-галерей (фотографы, портфолио) можно добавить разметку Schema.org ImageGallery или ImageObject. В Тильде это делается вручную через блок T123 с JSON-LD скриптом. Разметка помогает поисковикам понять, что страница содержит галерею изображений.