27.09.2022

Горизонтальный скролл в мобильной версии в Тильде

Настройка о которой многие не знали.
Поговорим о том, как на Tilda сделать горизонтальный скролл на любых разрешениях, но главное, в мобильной версии
Время чтения статьи около 6 минут.
Также, после статьи, есть подробная видеоинструкция

Что такое Overflow?

За видимость элементов вне экрана, отвечает в Тильде (в Zero-block) настройка Overflow
У него есть три состояния: Hidden, Visible и Auto

Hidden

Hidden — включена по-умолчанию. Она означает, что все элементы, которые не попадают в видимую часть экрана, не показываются.
Многие таким способом скрывают элементы, которые используют на других разрешениях экранов.
Например, если в мобильной версии, у нас не должна отображаться какая-то фотография, мы просто вытаскиваем ее за пределы видимой части нужного разрешения в редакторе Тильды
Будьте внимательны, вынося элементы за пределы на экранах от 1200 до макс.
Возможно, кто-то перешел на сайт, на котором, таким образом скрыт элемент, с разрешением экрана гораздо больше вашего. И он его увидит

Visible

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

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

Но, не забывайте, когда захотите, скрыть какие-то элементы, на мобильном разрешении, что у вас включена эта настройка

Ниже, пример действия Overflow —> Visible, когда рядом с контентной частью, есть элементы
Так работает Visible

Auto

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

Именно эта настройка нужна, для того, чтобы был горизонтальный скролл
Демонстрация работы
Кнопка 8
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
Кнопка 5
Кнопка 6
Кнопка 7
Очень полезна в мобилках. Я ее часто ранее использовал, когда в Тильде не было блока с тегированием, когда тегирование делал в Зеро

Еще, эту настройку можно использовать для таблиц, сделанные на Зеро блоке

В общем, если вы понимаете, что у вас есть контент, который никак не влазит на маленьком разрешении экрана, то смело ставьте эту настройку и не мучайтесь.
Тут демонстрация только для мобильных
— A place in the openspace
— All facilities access: printer, beverages, lockers, etc.
— Access from 10:00 till 23:00
DAY PASS
€10
Per day
MONTH PASS
— Permanent workplace
— All facilities access: printer, beverages, lockers, etc.
— Access from 10:00 till 23:00
— Conference room for 1 hour a day
€180
Per month
TEAM PASS
— Permanent workplace
— All facilities access: printer, beverages, lockers, etc.
— Day-and-night access
— Conference room for 1 hour a day
— Invitations to all events
€300
Per month

Теперь к нюансам

1. Часто используют Overflow Visible, с высотой контейнера 0
На примере ниже, я показал, как делается наложение элементов на стандартный блок

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

3. Следите, что вы прячете. Если нет особой надобности, то лучше спрятанные элементы удалить вовсе

4. Если все таки, какие то элементы, вы скрываете таким способом, то чтобы они наверняка не попали на глаза посетителям, с большими экранами, рекомендую в настройках ставить Opacity (прозрачность) 0

Видео: Как сделать горизонтальный скролл в Zero-блоке

Возможно YouTube скоро работать не будет
У меня есть канал в Rutube. Переходите и подписывайтесь на него. Там я аналогично выкладываю все видео. Давайте не теряться ;) Мой канал Рутуб
Рекомендуемые статьи
Последние видео с канала

Подпишитесь на новинки

На канале в телеграм вышел цикл видеоуроков «Создание интернет-магазинов на Тильде»
Made on
Tilda