Как сделать скролл в тильде зеро блок

Обновлено: 04.07.2024

Часто лендинги для предпринимателей — тёмный лес. Страшно, непонятно и ещё сверстать надо! А если хочется свой дизайн, а не стандартный, то вообще жутко. На самом деле, всё не так страшно. Специалист по лендингам Олеся Зайко рассказала, как с помощью зеро-блоков Тильды собирать нужные блоки лендингов, которых нет в шаблонах. Время на прочтение — около 11 минут.

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

Когда я делала свои первые лендинги, я не использовала зеро-блок. Он меня пугал. Нет, серьёзно, я открывала его, смотрела на эти шаблонные картинки с надписями – и сразу же закрывала.

Теперь как минимум половину блоков я собираю в зеро. Его ещё называют нулевым блоком. Более того, я подумываю о том, чтобы перейти на вёрстку в зеро полностью, не используя готовые блоки.

Что же изменилось? Я увидела те возможности, которые даёт зеро-блок. Мне нравится гибкость его настроек. И то, что в нём можно сверстать любой дизайн.

Итак, эта статья для тех, кто уже пробовал работать в Тильде, и для тех, кто в глаза не видел эту платформу. Для тех, кто уже собирал в зеро-блоке какие-то простые вещи, и тех, кто открыл и сразу закрыл его в смятении.

Я пройдусь кратко по основным возможностям зеро и покажу пошагово создание визитки с помощью основных функций зеро-блока.

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

Когда без зеро-блока не обойтись

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

Итак, ситуации, в которых нужен зеро-блок:

Типовые блоки не всегда позволяют установить шрифт для каждого экрана. Итог: на десктопе будет крупный шрифт, а на планшете – мелкий. А на телефоне – мельчайший. Это неудобно.

Некоторые стандартные блоки в Тильде сделаны сразу в формате зеро. И вот тут уже, хочешь не хочешь, приходится разбираться и настраивать зеро-блок на ходу.

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

Лайфхак

Важно – перед тем, как переводить имеющийся блок (особенно, если вы уже изменили там текстовую часть и добавили свои картинки) в зеро-блок, сделайте одну вещь. Она сэкономит вам кучу времени и нервов.

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

Для чего это делается?

Другое дело, если вы продублировали информацию. Тогда у вас останется и стандартный блок, и новый зеро. Потом просто удалите тот, который не нужен.

Начало работы в нулевом блоке и его возможности

А теперь внимание. Всё, что есть на экране – удаляйте. Ctrl+A, Delete. Пусть останется только чистый лист.

Мы видим, что в нулевом блоке можно добавлять:

текст,
изображение,
фигуру,
кнопку,
видео,
подсказку,
код,
форму,
галерею.

То, как настраивать каждый из этих пунктов, можно найти в Руководстве Тильды.

Я хочу показать, как собрать и адаптировать самый простой экран в зеро-блоке: добавить фотографию, подпись, кнопку.

В нулевом экране можно за пять минут (реально за пять, я засекала) собрать самую простейшую визитку.

Как собрать простую визитку в зеро-блоке

Делай раз. Добавляю свою фотографию

Нажала на квадрат. Нажала на Settings справа внизу.

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

Делай два. Добавляю текст

Пишите здесь всё, что ваша душа пожелает. При нажатии на текстовый элемент переходите в его настройки. Это та же кнопка Settings справа внизу.

Здесь вы можете изменить цвет, размер и другие характеристики, а также выровнять текст с помощью вкладок Left, Center, Right.

Вот несколько важных нюансов:

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

Делай три. Добавляю телефон

Делай четыре. Добавляю кнопку

Для этого я щёлкаю по кнопке и захожу в Settings. Там я:

Меняю текст в поле CAPTION.
Ставлю в Url ссылку на блок /form (который добавлю позднее – там будет форма заявки с моими контактами и соцсетями).
Удаляю цвет из поля BGCOLOR – чтобы сделать кнопку прозрачной. В этом же поле можно изменить цвет кнопки.
Меняю размер шрифта кнопки в поле SIZE.
Вручную растягиваю размер кнопки, чтобы она была пошире – и заодно перетаскиваю её на нужное место.
Опускаюсь в настройках чуть ниже и в поле BORDER ставлю цвет обводки кнопки.
И указываю толщину обводки в поле BRDR.SIZE.

Адаптация для разных экранов

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

Проверка вёрстки

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

Проверить это можно так.

Полезные ресурсы

Зеро-блок так прекрасен и всемогущ, что его можно изучать почти бесконечно. Я постаралась показать вам самые простые вещи. Считаю, что начинать можно с малого, а уже по ходу дела разбираться более подробно.

Приведу здесь ресурсы, которыми пользуюсь.

Чат Тильдошной в телеграме, где можно задавать дурацкие (и не очень) вопросы.
Канал Tilda Publishing в YouTube.

Всем удачи в создании своих страниц и сайтов. Добавляйтесь ко мне в Фейсбук, будем общаться.

Олеся приглашает на бесплатную консультацию, на которой ответит на ваши вопросы по созданию сайта. Запись на сайте.

Олеся Зайко, специалист по лендингам

1. Создаём своё меню в Zero block. Если в нем есть элементы, которые должны "вылазить" за края высоты Zero block, изучите функцию Overflow;

2. В генератор вставляем id Zero block;

3. Настраиваем показ на мобильных устройствах;

4. Выбираем фиксацию: сверху или снизу;

5. Появление при прокруте от начала страницы оставляем 0;

6. Добавляем блок Т123 и вставляем в него сгенерированный HTML код;

2. Указываем нужное количество пикселей, после которых появится меню;

3. Добавляем блок Т123 и вставляем в него сгенерированный HTML код;

ВАЖНО: В случае если выбрали фиксацию меню снизу, а у Вас на сайте есть внизу плашка "Made on Tilda", меню будет автоматически скрываться.

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

UPD! Исправлен код, теперь слайды не выпадают !

Если есть вопросы, пишите в ЛС в VK, с вопросом прикладывайте ссылку на страницу, только так я смогу что-либо подсказать.

Ещё один метод сделать слайдер в Tilda, только с применением стандартного блока CR30N. В слайды можно превратить любой блок, включая Zero block. Минус этого слайдера только один - он полноэкранный. Хотя может и не минус, а скорее сужает область применения)). Плюс в том, что не нужно подключать сторонние плагины. Если вам необходим слайдер из мелких элементов, то лучше использовать слайдер из статьи "Карусель в Zero block на Owl Carousel".

У Тильды есть десятки блоков меню, однако у них стандартный функционал: логотип, пункты меню, соцсети, кнопку, описание. Но часто перед дизайнерами встают нестандартные задачи, например вставить иконки, написать 2 номера телефона и т.д. С ростом популярности платформы стало появляться много дополнительных возможностей, которые реализуются с помощью html кода, вставленного в контент сайта.

HTML-код фиксированного меню, которое появляется при прокрутке

Необхоимо создать блок меню ME403 с заданной шириной. Затем создать Zero-блок с выравниванием всех элементов в контейнере относительно "window". В поле с кодом вставить номер Zero-блока и ширину, которую мы задали в меню-гамбургере. Следите, что все элементы в Zero-блоке правее границы в указанные вами количество пикселей будут не видны при открытии меню.

Читайте также: