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