Меню в Zero block на Тильда
Необходимо разместить блок T123 из раздела «Другое» и добавить туда код:
.fixed < position: fixed; top: 0; width: 100%; transition: transform 250ms linear; /* время появления/исчезновения меню — 250 мс */ z-index: 998; >.pinned < transform: translateY(0%) >.unpinned
Чтобы фиксация к окну браузера заработала с вашим Zero блоком, вам указать ID вашего блока.
Посмотреть ID блока можно прокрутив в самый низ в «Настройках» блока.
( new ) Вы можете скачать и установить расширение, которое поможет найти id блока ещё быстрее.
Меню на Тильде в Zeroblock
У Тильды есть десятки блоков меню, однако у них стандартный функционал: логотип, пункты меню, соцсети, кнопку, описание. Но часто перед дизайнерами встают нестандартные задачи, например вставить иконки, написать 2 номера телефона и т.д. С ростом популярности платформы стало появляться много дополнительных возможностей, которые реализуются с помощью html кода, вставленного в контент сайта.
HTML-код фиксированного меню
HTML-код фиксированного меню, которое появляется при прокрутке
.fixed < position: fixed; top: 0; width: 100%; transition: transform 250ms linear; /* время появления/исчезновения меню — 250 мс */ z-index: 99999; >.pinned < transform: translateY(0%) >.unpinned
HTML-код меню-гамбургера на zero-блоке
Необхоимо создать блок меню ME403 с заданной шириной. Затем создать Zero-блок с выравниванием всех элементов в контейнере относительно «window». В поле с кодом вставить номер Zero-блока и ширину, которую мы задали в меню-гамбургере. Следите, что все элементы в Zero-блоке правее границы в указанные вами количество пикселей будут не видны при открытии меню.
.t451m__container < padding: 0px !important;>.t451m .t451m__close < background-color: transparent;>.t451m__close_icon span
Если вы front-end или back-end разработчик, то с легкостью добавите необходимые функции к этому коду. В выпадающем меню на Tilda нельзя выделить пункты при наведении. Это тоже решается с помощью html-кода.
Иногда стандартного выпадающего меню недостаточно. Хочется сделать выпадающие блоки на всю ширину экрана с произвольным расположением пунктов меню.
/*Настройка высоты вкладок */ .t228__list_item < height: 80px; display: inline-block !important; padding: 0 15px !important; >/*Настройка вкладок */ .t228 .t-menu__link-item < height: inherit; display: table-cell !important; vertical-align: middle; >/*Цвет вкладок при наведении */ .t228__list_item:hover < background:#171717; -webkit-transition: all 0.35s; transition: all 0.35s; >/*Настройка для блока FT302 */ [data-record-type="420"] < position: fixed; width: 100%; top: 80px; z-index: 990; left: 0; opacity: 0; -webkit-transition: all 0.35s; transition: all 0.35s; visibility: hidden; background: linear-gradient(to bottom, #171717 45%, #484848); >/*Появление меню при наведении на вкладку */ .t228__list_item:hover .mainmenu
Материал я собрала с 4 разных сайтов для своего удобства и для удобства дизайнеров, которые будут пользоваться ими.
Как сделать меню сайта
Чтобы добавить на сайт меню, откройте библиотеку блоков, категорию «Меню» и выберите подходящий тип. Настройте его через кнопку «Контент».
О дизайне меню — то, как меню работает и как оно выглядит, читайте в статье:
Дизайн меню и применение на практике
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Настройка пунктов меню
Пункты в меню можно настроить двумя способами:
1. Прописать название пунктов меню и ссылки вручную
Укажите абсолютную ссылку на страницу, например:
http://mysite.com/about
Либо относительную:
/about
Адреса отдельных страниц задаются в настройках каждой страницы:
Не указывайте внутренний адрес страницы в редакторе Тильды, например:
По этому адресу открыть страницу можете только вы. В меню она работать не будет.
2. Воспользоваться помощником для расстановки ссылок
Наведите мышку на пункт меню. Вы увидите два варианта, как можно поставить ссылку: «Выбрать страницу» и «Выбрать блок».
Если нажать «Выбрать страницу», то появится список страниц вашего сайта. Кликайте на нужную страницу и ссылка поставится автоматически.
Если нужно поставить ссылку к блоку на странице, нажмите «Выбрать блок». Вы переместитесь на страницу для выбора блока. Кликните в тот блок, к которому должен быть совершен переход, при нажатии на пункт меню и ссылка поставится автоматически.
Как сделать меню сразу для всех страниц
Чтобы сделать меню сразу для всех страниц проекта (сайта), создайте пустую страницу, добавьте на нее блок меню и настройте его. Затем перейдите в настройки сайта, на вкладку «Шапка и подвал» и назначьте эту страницу как Header. Нажмите «Опубликовать все страницы».
Меню для перемещения внутри одной страницы
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Если вы хотите, чтобы в ссылке был не номер блока, а название раздела, используйте якорные ссылки.
Чтобы переход по странице был плавным, добавьте модификатор «Плавный скрол до локальной якорной ссылки». Это блок Т178 в категории «Другое».
Меню для двуязычного сайта
Чтобы сделать двуязычный сайт, создайте два проекта. Обычно удобно сделать сначала версию на одном языке, а потом скопировать проект и перевести на другой язык.
Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.
Как сделать второй уровень меню
Создать меню второго уровня можно двумя способами:
1. Добавить подпункты меню в основном блоке
Добавьте на страницу блок меню.
Перейдите в Контент блока → Список пунктов меню → нажмите «Добавить пункты второго уровня» — слева появятся иконки «+» .
Чтобы добавить второй уровень, нажмите на «+», укажите заголовок подпункта и его ссылку. Нажмите на «+» несколько раз, чтобы добавить необходимое количество подпунктов.
Нажимайте на иконку «+», чтобы увеличить количество подпунктов.
Опубликуйте страницу и посмотрите как выглядит меню второго уровня.
На десктопных устройствах второй уровень меню отображается в виде выпадающего списка при наведении курсора, на мобильных открытие происходит по тапу.
Важно : основной пункт, для которого используется подменю, не будет кликабельным при наличии подпунктов. Если нужно, чтобы он был активен, продублируйте его заголовок и ссылку в меню второго уровня.
Чтобы подсказать посетителям сайта пункты меню, в которых есть второй уровень, включите иконку в Настройках блока меню → Настройки подменю → Показывать иконку меню второго уровня.
2. Использовать блок ME601/ME601A
Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Zero Block: список горячих клавиш
S; Переход в Select Tool D; Переход в Draw Tool B; Переход в Bend Tool E; Переход в Edit Tool ⇧ + H; Отразить объект по горизонтали в Select Tool ⇧ + V; Отразить объект по вертикали в Select Tool ⇧ при масштабировании; Пропорциональное масштабирование ⌥ при масштабировании; Свободное масштабирование из центра ⇧ + ⌥ при масштабировании; Пропорциональное масштабирование из центра ⌘/Ctrl + Z; Отменить действие ⌘/Ctrl + ⇧ + Z; Вернуть отмененные изменения ⌘/Ctrl + C; Копировать ⌘/Ctrl + V; Вставить ⌘/Ctrl + A; Выделить все элементы ⇧ при выделении точек или векторных элементов; Выделение нескольких элементов Стрелочки на клавиатуре; Движение элемента на 1 пиксель Стрелочки на клавиатуре с зажатым Shift; Движение элемента на 10 пикселей Backspace или Delete; Удалить элемент ⌘/Ctrl + I; Импортировать SVG [;Переместить элемент векторного изображения выше в слоях ];Переместить элемент векторного изображения ниже в слоях ⌥/Alt + [;Перенести элемент выше в слоях на один шаг ⌥/Alt + ];Перенести элемент ниже в слоях на один шаг ⌥/Alt + перетаскивание мышью в Select Tool; Сделать копию элемента в Select Tool ⌘/Ctrl + перетаскивание мышью в Edit Tool; Без отражения ⌥/Alt + перетаскивание мышью в Edit Tool; Отразить угол Двойной клик в Edit Tool; Переключить режим кривой
Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
Показать/спрятать слои
Добавить горизонт. направляющие
Добавить верт. направляющие