Как сделать стандартный блок выше зеро блока тильда

Добавил пользователь Валентин П.
Обновлено: 02.09.2024

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

3. Вписываем id нашего меню в генератор;

4. В генераторе прописываем настройки для активного пункта и при наведении;

5. В зеро блоке, где у нас меню, каждому пункту задаем якорную ссылку либо id блока или ссылку на другую страницу;

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

ВАЖНО: Если указали в пунктах меню и ссылку и id блока или якорную ссылку, то будет выделяться несколько пунктов одновременно. Советуем так не делать)

Итак, создаем нулевой блок. По умолчанию, Зеро Блок содержит набор элементов: пару текстовых блоков и шейпы.

Обратите внимание, что вместо кнопки “Контент” появилась кнопка “Редактировать блок”. А настройки сократились до нескольких опций.

Элементы нулевого блока

Переходим в режим редактирования и рассмотрим интерфейс нулевого блока.

Сверху слева набор инструментов

Мы можем добавить на артборт такие элементы, как:

текстовый блок,
изображение,
шейп (то есть фигура),
кнопку,
видео,
тултип (то есть интерактивную подсказку),
HTML код
и форму.

Точки адаптации

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

По большому счету, адаптивность блока так и настраивается: вы просто двигаетесь по брейкбоинтам и настраиваете контент в соответствии с видимой частью.

Обратите внимание, что элементы в разных точках адаптации по умолчанию наследуют свойства десктопа.

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

Элементы интерфейса

Правее точек адаптации кнопки “Сохранить”, “Закрыть” и ссылка на полную справку по Зеро Блоку. Если вы внимательно изучите этот справочный раздел, то данное видео можно не смотреть. Справка предлагает исчерпывающую информацию.

“Три точки” открывают дополнительные опции интерфейса в виде горячих клавиш. Здесь вы можете:

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

Панель слоев

Отдельного внимания заслуживает панель слоев, которая вызывается сочетанием клавиш CMD+L. Когда вы начинаете адаптировать нулевой блок для каждой точки адаптации, некоторые элементы могут перемешаться и наложиться друг на друга.

Чтобы не запутаться, помогает панель слоев. Здесь можно перетаскивать слои, то есть элементы, относительно друг друга, блокировать от редактирования, скрывать/отображать выбранные слои.

Настройки элементов

Ниже располагается плавающая кнопка опций. Она отображает настройки выбранного элемента или настройки артборта, если ни один элемент не выделен.

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

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

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

Здесь вы можете выровнять элементы относительно друг друга или относительно сетки контейнера.

В левом углу дашборда показаны границы сетки и видимого окна.

Смотреть видео

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

Привет, ребята! На связи Евгений Тридчиков, и в этом видео мы разберем работу с нулевым блоком на платформе Тильда. Напомню, что в прошлом видео мы изучили настройки готовых блоков. Итак, создаем нулевой блок. По умолчанию, Зеро Блок содержит набор элементов: пару текстовых блоков и шейпы. Обратите внимание, что вместо кнопки “Контент” появилась кнопка “Редактировать блок”. […]

Если кратко - делаете зеро-блок. Вставляете блок с нужным HTMLем. Добавляете в этот html специальный JS-код, которые перенесет его в зеро-блок. А теперь по порядку.

После того как сохранили зеро блок, нажимаем правой кнопкой на нашем текстовом элементе (у меня это "Загрузка виджета от вКонтакта"). Появится контекстное меню. В этом меню выбираем "Просмотреть код" или "Inspect" или "Исследовать элемент" (зависит от браузера)

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

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

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

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

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