Слайдер в Тильде: как сделать галерею и когда слайдер лучше убрать

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

По справке Тильды готовые слайдеры — это блоки GL01, GL19, GL20, GL21 из категории «Галерея» и блок CR30N из категории «Обложка». Порядок работы:

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

Названия и набор блоков в библиотеке Тильды обновляются. Если какого-то кода не нашли, вбейте в поиск по блокам слово «слайдер» или «галерея».

Слайдер с карточками и отзывами

Хвост «карточки в слайдере тильда» ищут, когда нужно листать не фото, а карточки услуг, товаров или отзывов. В библиотеке Тильды у части блоков карточек и отзывов есть вариант со слайдером или горизонтальной прокруткой. Удобный способ найти их — открыть категории «Отзывы» и «Карточки» и смотреть превью со стрелками.

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

Слайдер в Zero Block

Когда стандартные блоки не подходят по дизайну, слайдер собирают в Zero Block. В редакторе есть элемент галереи: его добавляют через меню элементов, а ширину и высоту меняют как у обычной фигуры. Основные настройки описаны в справке по Zero Block:

• Автопрокрутка — скорость смены слайдов в секундах. Если значение не задать, слайды сами не меняются.
• Зацикливание — после последнего слайда снова показывается первый.
• Стрелки — внешний вид и положение кнопок «вперёд» и «назад».

Есть две тонкости. Первая: галерею в Zero Block надо проверить на всех ширинах экрана, потому что адаптив здесь ручной. Вторая: если в слайдах нужен текст поверх картинки, проще сделать картинку с текстом или выбрать стандартный блок, чем собирать слои в Zero Block.

Когда Zero Block вообще стоит своих денег и времени, разбирали отдельно в статье Zero Block в Тильде.

Автопрокрутка: включать или нет

Автоматическая смена слайдов задаётся в настройках блока. В стандартных блоках время указывают в миллисекундах, в Zero Block — в секундах.

Наша позиция простая: для слайдов с текстом автопрокрутку лучше выключать. Исследование Nielsen Norman Group показывает знакомую картину: люди не успевают дочитать, теряют контроль и начинают воспринимать движущийся блок как рекламу, которую можно пропустить.

Почему слайдер на первом экране снижает конверсию

Это главная мысль статьи. Мы регулярно видим одну и ту же картину на сайтах, которые приносят на разбор: на первом экране слайдер из трёх-пяти баннеров. «Скидка 20%», «Работаем с 2010 года», «Бесплатный замер». Владелец объясняет: «Хотели показать всё сразу».

Что происходит на деле:

1. Большинство видит только первый слайд. Посетитель за несколько секунд решает, остаться или уйти. До второго слайда он часто не доживает.
2. Сообщение меняется, пока его читают. Человек начал читать про скидку, а слайд уже сменился на «работаем с 2010 года».
3. Нет одного главного предложения. Три оффера по очереди — это признание, что вы не выбрали, что главное.
4. Тяжёлый первый экран. Пять больших фото грузятся раньше заголовка и кнопки. На телефоне в слабой сети это особенно заметно.
5. Слайдер похож на баннерную рекламу. Люди привыкли пропускать то, что мигает и меняется.

Что ставить вместо слайдера: один заголовок с конкретной выгодой, подзаголовок с фактами, одно фото, которое показывает результат, и кнопку. Остальные «слайды» — скидку, опыт, гарантию — разнесите по блокам ниже. Как собрать такой экран, подробно разобрали в статье первый экран сайта.

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

Когда слайдер в Тильде действительно нужен

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

• Портфолио и выполненные работы. Ремонт, мебель, ландшафт, свадьбы. Человек ищет «похоже на то, что хочу я».
• Фото одного объекта. Номер в гостинице, дом на продажу, зал для банкета — несколько ракурсов одного места.
• Отзывы. Особенно скриншоты из мессенджеров и карточек на картах, если их много.
• Сертификаты и документы. Их редко читают целиком, но важно показать, что они есть.
• До и после. Пара фото в одном слайде работает лучше, чем два отдельных слайда.

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

Слайдер, сетка или лента: что выбрать

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

Простой тест: если посетителю нужно увидеть хотя бы три-четыре работы, чтобы поверить вам, покажите их сразу сеткой. Если работ много и они похожи, слайдер сэкономит место. Мы часто комбинируем: сетка из шести лучших работ и под ней кнопка «Смотреть все», которая открывает полную галерею.

Ещё одна деталь из практики: подписи к фото работают сильнее самих фото. «Кухня 12 м², 9 дней, 640 000 ₽» под снимком отвечает на три вопроса, которые иначе зададут менеджеру по телефону. Про то, как снимать и подбирать фото для сайта, — в статье фото для сайта.

Слайдер и скорость сайта

Каждый слайд — картинка. Пять фото по 1–2 мегабайта на первом экране превращают лёгкую страницу в тяжёлую.

Что делать:

1. Сжимайте фото перед загрузкой. Для слайдера на всю ширину хватает 1 600–1 920 пикселей по длинной стороне.
2. Не ставьте слайдер первым блоком, если без этого можно обойтись. Блоки ниже первого экрана Тильда подгружает позже.
3. Ограничьте число слайдов. Восемь хороших работ лучше тридцати средних.
4. Для мобильной версии проверьте, не обрезаются ли важные части фото. Если вместо фото хочется поставить ролик, сначала прочитайте, что видео делает со скоростью, в статье видео в Тильде.

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

Условный пример: слайдер против одного экрана

Пример условный, не кейс студии. Компания по остеклению балконов, реклама в Директе, 2 000 переходов в месяц.

Было: на первом экране слайдер из четырёх баннеров с автопрокруткой каждые 3 секунды. Конверсия в заявку — 1,5%, то есть около 30 заявок.

Стало: один экран с заголовком «Остекление балкона под ключ от 35 000 ₽ за 1 день», фото готового балкона, кнопка «Рассчитать стоимость». Слайдер работ перенесли в третий блок, без автопрокрутки.

Если конверсия выросла бы хотя бы до 2,5%, заявок стало бы около 50 при том же бюджете. При клике 60 ₽ и бюджете 120 000 ₽ заявка подешевела бы с 4 000 до 2 400 ₽. Это условный расчёт, но направление изменения мы видим на практике постоянно.

Частые ошибки со слайдерами на Тильде

• Фото разного размера. Слайдер прыгает по высоте при каждой смене слайда. Подготовьте все фото в одной пропорции.
• Текст поверх пёстрого фото. Белые буквы на светлой части снимка не читаются. Нужна подложка или затемнение.
• Стрелки сливаются с фото. На светлых снимках белые стрелки не видны. Проверьте все слайды, а не только первый.
• Слайдер на два слайда. Листать нечего, лучше поставить два фото рядом.
• Тридцать слайдов без подписей. Человек устаёт на пятом и не понимает, что смотрит.

Как проверить слайдер на своём сайте

1. Откройте сайт на телефоне и попробуйте пролистать слайдер пальцем. Свайп должен листать слайды, а не прокручивать страницу.
2. Посмотрите, видно ли стрелки и точки на светлых и тёмных фото.
3. Проверьте, не обрезается ли важное на фото на узком экране.
4. Если есть автопрокрутка, попробуйте дочитать текст слайда до смены. Не успели — выключайте.
5. В Метрике откройте карту скроллинга и посмотрите, сколько посетителей вообще доходят до блока со слайдером. Как это сделать, описано в справке Метрики.
6. Если слайдер на первом экране — сравните, сколько людей уходит сразу. Высокий процент отказов с рекламы — повод его убрать.

Если хотите, чтобы кто-то со стороны посмотрел на первый экран и структуру сайта, оставьте контакты. Скажем, что убрать, а что оставить.