Как сделать галерею в Тильде: стандартные блоки и зероблоки

Говорят, одна картинка стоит тысячи слов. А если у вас десять картинок — то это уже галерея. Есть два варианта, как сделать галерею в Тильде: через стандартные блоки и с помощью зероблоков. Сейчас разберем оба варианта.

Чтобы выбрать подходящий шаблон, в редакторе Тильды перейдите в раздел «Все блоки» и выберите категорию «Галереи». Здесь есть 20+ вариантов того, как добавить галерею изображений, вот только некоторые из них:

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

Вариантов отображения много, но логика работы и настройка у них похожи.

Меню «‎Контент». Тут заменяем или удаляем фото, загружаем новые, добавляем подписи и Alt-теги к каждому.

Меню «‎Настройки». Здесь можно откорректировать моменты, которые касаются отображения информации. Вот что тут можно сделать.

• Настроить ширину блока: задать свою или сделать на всю ширину экрана.
• Изменить высоту: задать фиксированное значение в пикселях или растянуть на весь экран.
• Активировать Zoom on Click (по клику изображение увеличивается).
• Скруглить углы изображений (можно отдельно для мобильной версии).
• Настроить адаптацию изображений. Рекомендуем оставить масштабирование по умолчанию, иначе картинки могут «прыгать».
• Добавить/убрать управляющие элементы.
• Настроить переключение слайдов: можно включить автосмену и задать скорость в миллисекундах.
• Добавить текст: заголовок, описание, подписи к картинкам.
• Задать анимацию появления (стандартные эффекты Тильды).

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

Теперь покажем, как сделать галерею в Тильде в зероблоке. Добавьте на страницу Zero Block, и внутри него нажмите на плюсик в верхнем левом меню и выберите Add Gallery.

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

• Stretch: Cover — картинка помещается целиком, Contain — масштабируется внутри блока.
• Loop: зацикливание галереи (если изображения долистать до конца, то все начнется с первого).
• Autoplay (S): можно выставить скорость переключения слайдов в секундах;
• Zoom on Click: по клику изображение увеличивается.
• Arrows и Dots: настройки управляющих элементов (стрелок и точек), можно изменить их внешний вид и расположение относительно картинок.

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

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

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

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

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

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