Что нельзя изменить у блока на tilda
Обновление в библиотеке блоков Тильды — меню второго уровня с подменю ME601B из категории «Меню» и панель с логотипом, главными и второстепенными пунктами меню FT306 из категории «Подвал». Рассказываем подробно о новых блоках и показываем, как они выглядят.
Блок ME601B из категории «Меню». Второй уровень с подменю
Блок поможет создать многоуровневую навигацию по сайту с помощью меню второго уровня с подпунктами, которые открываются по клику или ховеру.
Можно задать разную ширину меню и подменю, настроить количество колонок и цвет фона, в том числе отдельно для мобильной версии. Также можно настроить толщину, цвет и радиус скругления бордюра, добавить тень, задать для меню отступ сверху и выбрать, отображать или скрывать иконку меню второго уровня.
Добавляются пункты с помощью карточек, которые удобно копировать и перемещать при создании навигации. В настройках блока можно изменить отступы между пунктами, выбрать стиль активного пункта меню и задать изменения стиля при наведении.
Блок FT306 из категории «Подвал». Панель с логотипом, главными и второстепенными пунктами меню
Новый футер с основными и второстепенными пунктами меню поможет выстроить иерархию в навигации. Основные пункты будут более заметны, второстепенные — меньше и прозрачнее.
Можно настроить ширину подвала и расстояние между пунктами, чтобы красиво разместить любое количество ссылок. Также можно добавить логотип или заголовок и настроить типографику.
Что нельзя изменить у блока на tilda
В категорию «Форма и кнопка» входят блоки, без которых сложно представить себе современный сайт или лендинг. Функция таких блоков — получить целевое действие на странице: купить билеты, прочитать подробнее, заполнить форму и оставить данные и многое другое. В библиотеке Тильды появилось три новых блока этой категории. Рассказываем о каждом из них подробнее.
Блок BF103. Кнопка для мобильной версии, зафиксированная внизу экрана
Блок позволяет добавить на сайт кнопку, которая будет по умолчанию отображаться на экранах шириной до 640px. Посетитель точно не сможет пропустить кнопку — она всегда зафиксирована в нижней части экрана.
В настройках можно задать время появления и исчезания кнопки, если необходимо.
Для привлечения ещё большего внимания к кнопке можно добавить анимацию. Также в настройках блока можно изменить цвет и размер кнопки, цвет фона и текст при наведении, задать скорость анимации и многое другое.
Блок BF104. Гигантская кнопка во всю ширину экрана или с отступами
Кнопка занимает всю ширину экрана и выглядит стильно. Есть возможность добавить на элемент иконку стрелки или убрать её, выбрать подходящий тип анимации появления кнопки и другие эффекты.
Помимо стандартных настроек, можно добавить отступы по бокам кнопки или уменьшить её ширину до 12 колонок.
Блок BF504. Поп-ап форма в углу экрана
Всплывающее окно, которое появляется в нужное время в нужном месте и предлагает человеку понятную пользу, повышает конверсию сайта. С помощью нового блока можно ненавязчиво предложить посетителю подписаться на рассылку, получить чек-лист и многое другое.
Чтобы поп-ап работал, необходимо добавить один из блоков-триггеров из категории «Другое» — T183 для появления поп-апа при скролле, T188 для появления по таймеру или T723 для появления при закрытии окна.
Подробнее о работе с поп-апами
Данные о нажатии всех кнопок на сайте можно отправлять в системы аналитики. Для этого необходимо установить соответствующую галочку в настройках блока.
Чем отличается zero-блок от стандартного на Тильде?
Zero-block (зеро-блок) — это блок-редактор с помощью которого создаются уникальные, нестандартные решения. Зеро-блок дает возможность размещать элементы и текст как угодно и в каком угодно количестве; придумывать свою структуру; подключать сложную анимацию; настраивать прозрачность и размеры элементов; вручную создавать адаптивную версию под мобильные устройства. Нет ограничений, как в стандартном блоке. Благодаря этому лендинг на зеро-блоках получается уникальным.
Примеры для сравнения зеро-блоков и стандартных:
Первый экран для этого лендинга я выполнил с помощью двух стандартных блоков: меню и обложка. Они имеют возможность изменения размера символов, смены цвета кнопок и текста, прикрепления логотипа, написание заголовка и подзаголовка. На этом все. Я не могу добавить еще элементов, дополнительный текст, создать собственную анимацию.
Также пришлось в фотошопе юриста разместить на темно-сером фоне и сохранить одной картинкой, так как несколько изображений конкретно этот блок не позволяет добавить.
А вот альтернатива. Как видите, здесь я смог добавить:
- Дополнительный текст про стоимость
- Поместить за юристом линии + пункты на них
- Добавить плашку «Александр Барко»
- Сделать кнопку с 3D тенью + рядом с кнопкой разместить телефон
- Заменить стандартные иконки соц. сетей на свои
- Добавить дескриптор рядом с логотипом
Здесь похожая ситуация. Тот же стандартный блок с теми же возможностями. Для фона сделал картинку в фотошопе с белым фоном, поместил поверх изображение комнаты с синей тенью. Сам фон статичный и не меняется.
А вот вариант зеро-блока для этого сайта. Здесь есть:
- Дескриптор возле логотипа
- Свои иконки соц. сетей
- Не одно статичное изображение, а слайдер, который сменяет 4 фото
- Под текстом «за 5−7 месяцев» синяя линия
- Дополнительные пункты преимуществ с иконками
- Рядом с кнопкой продающий текст
Давайте я покажу еще несколько примеров первых экранов, выполненных с помощью zero-block.
Что в итоге?
Стандартные блоки являются готовыми шаблонными вариантами, но могут стать хорошим решением если:
- Нужно сделать сайт быстро и нет времени на создание чего-то уникального
- У Вас маленький бюджет, но настало время создать собственный сайт
- Хочется попробовать самому сверстать сайт, но нет дизайнерских навыков и времени разбираться в зеро-блоках
С помощью zero-блоков:
- Ваш сайт будет выглядеть дороже и лучше, что выделит Вас среди конкурентов
- Повысится лояльность клиентов, так как стильный сайт подчеркивает статус Вашей компании
- Ваши продукт или услуга будут креативно презентованы
- Лендинг не будет «как у всех», что повысит количество заявок и уменьшит их стоимость
- Сайт станет частью узнаваемого бренда. Шаблонными блоками не создать собственные дизайн и стиль сайта
Zero Block: отзывчивый дизайн
Grid Container — основная рабочая область . В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если мы располагаем элементы внутри Grid Container, то независимо от размера экрана они будут находиться внутри сетки из 12 колонок.
По оси X Grid Container всегда позиционируется по центру.
То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.
Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.
Положение контейнеров относительно друг друга по оси Y
Если вы хотите, чтобы ваш блок занимал всегда 100% высоты экрана, для этого нужно задать высоту Window Container, отличную от высоты Grid Container. Соответственно, нужно в настройках артборда указать 100% высоты для Window Container.
Затем определить выравнивание Grid Container относительно экрана: сверху, по центру или по низу. По умолчанию стоит выравнивание по центру.
Изменение контейнера и начала координат для элемента
Изменение контeйнера
По умолчанию все элементы привязаны к Grid Container и начало координат находится в левом верхнем углу.
Но иногда требуется привязать элемент не к сетке, а к экрану. Например, вы хотите, чтобы логотип всегда был в левом верхнем углу любого экрана.
Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.
Теперь на любом экране логотип будет в левом верхнем углу.
Если мы хотим привязать элемент, например, к правому верхнему углу , то логика будет та же: задаем контейнер: Window Container и начало координат: ось X — right, ось Y — top.
Координаты элемента
У каждого элемента в рабочей области есть координаты — положение относительно начала координат по оси X и по оси Y.
Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.
Начало координат по умолчанию у всех элементов находится в левом верхнем углу Grid Container. Но оно может смещаться и находиться в одной из девяти точек прямоугольника: справа вверху, слева внизу и т.д.
Чтобы поменять положение начала координат, откройте меню +Container (по умолчанию оно свернуто).
Если вы зададите начало координат Center Center , то это упростит работу над адаптивной версией для разных экранов.
Создание «резиновых» элементов
Мы предусмотрели, чтобы размер элементов так же мог задаваться в процентах. Таким образом получаются «резиновые» элементы, которые меняют размер, в зависимости от окна браузера.
Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.
На видео видно, что правая часть блока всегда заполняет половину экрана.
Параметры желтого прямоугольника: Container — Window, ширина — 50%, высота — 100%, смещение по оси Х — 50%.
Пример: создание полноэкранной обложки
Рассмотрим на примере как создать обложку со следующими параметрами:
— фоновое изображение занимает всю площадь экрана
— заголовок, подзаголовок и кнопка всегда по центру экрана
— стрелка «вниз» всегда по низу экрана
В настройках артборда добавим фоновое изображение и зададим ему параметр: Window Container Height — 100%.
Для заголовка, подзаголовка и кнопки определим начало координат — Center / Center и, при необходимости зададим смещение по оси Y.
Для стрелки назначим контейнер Window Container, начало координат: Center / Bottom и сместим ее на 70 пикселей вверх. Это значит, что кнопка всегда будет на 70 пикселей выше нижнего края окна браузера.
Посмотрим, что получилось: фоновая картинка заполняет всю область экрана, заголовок, текст и кнопка выровнились по центру, а стрелка — по низу.
Посмотреть пример вживую http://help.tilda.ws/zero-block-example
Масштабирование элементов под ширину экрана
По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.
С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.
Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.
Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.
При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.
Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.
Важно: Данная настройка работает только для элементов, которые привязаны к Grid контейнеру и не будет влиять на элементы, привязанные к Window.
Особенности работы с масштабированием
Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.
Будьте внимательны при загрузке изображений: они должны быть подходящего размера, чтобы не потерять в качестве при масштабировании под большие экраны.
Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.