Как сделать меню в зеро блок на тильда
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Крутое видео))) Но пока у меня не сработало) Почему-то при нажатии кнопки скрытый блок не показывается, есть только некоторое движение вниз по якорной ссылке и все. В чем может быть причина?
Kanivets Design
подскажите,пожалуйста, как сделать несколько скрытых блоков из 1 блока, допустим у меня в блоке несколько кнопок,которые ведут на скрытые,какая иерархия в таком случае должна сохраняться?
Данил Игошев
Здравствуйте, у меня блок сразу открыт. подскажите где и что не так?
Александр Челикиди
Анна Рыбалко
Спасибо, Вы делаете очень полезную работу!
Ольга Цьоць
Спасибо! А можно как то при нажатии на кнопку скрыть ее? то есть, человек нажимает на кнопку "показать еще", у него открывается скрытый блок, а кнопка исчезает
Эмилия Ганза
не могу найти ссылку на код в описании
Tops from Gily
подскажите пожалуйста, почему в итоге картинки не прогружаются в скрытом блоке?( и иногда виден код в самом предпросмотре, так все работает, очень полезное и крутое видео)
Елизавета Черкунова
Спасибо большое, огонь получается))) Я, кстати, не стала ставить якорные ссылки, все работает еще и лучше - при закрытии блока обратно, нет такого быстрого скрола, все плавно и красиво)
Абкерим Бекиров
У меня блоки криво отображаются после открытия
Что делать?
Антон Присяжный
не хватает модификатора плавного скрола, этот код взят с мо-ти, но там есть добавление плавного скрола
Оксана Кузнецова
Здравствуйте, а не подскажете, почему на мобильных наоборот все блоки раскрытые и скрываются по клику? Задумка же открыть скрытые блоки, а получается наоборот?
Олег Бабынкин
Здравствуйте, а почему у меня все наоборот? Изначально скрытый блок виден, а при нажатии исчезает? Где я мог ошибиться?
Спасибо!
Не пойму как настроить если задан диапазон видимости на устройствах.
Например, если для скрываемого блока был задан показ в диапазоне >0-
Pupsik Vupsik
Frantishek Zlotka
галерея в скрытом блоке не подгружает картинки, есть какое-то решение для этого?
Иван Чужинов
Спасибо за видео! Класс! А если при нажатии на кнопку нужно, чтобы открылось 2 или 3 блока, как это сделать?
Роман Добронравов
Спасибо! Продолжай в том же духе) было бы классно увидеть что-то по рекламе и продвижению!
Екатерина Дьякова
спасибо за полезное видео. подскажите пожалуйста, как сделать так чтоб при нажатии второй кнопки первый блок закрывался, а второй появлялся?
Alena Sheremeteva
Наиполезнейшее видео, спасибо! :)
Только вопрос: как сделать, чтобы при нажатии на вторую кнопку скрывалось содержимое первой кнопки и т.д.? У меня несколько кнопок в одном зеро-блоке)
Нулевой блок (Zero Block) — редактор в Тильде, позволяющий реализовать разнообразные концепты и идеи, создавать блоки для индивидуального адаптивного дизайна сайта и редактировать каждый элемент в них. По функциональности не уступает популярным профессиональным графическим редакторам.
Можно собрать полноценный сайт или лендинг на Tilda только из нулевых блоков или миксовать их с обычными блоками Тильды. Теперь подробнее рассмотрим интерфейс зеро блока и разберем его функционал.
Создание Zero Block
Рис. 1. Добавляем зеро блок
Вот так выглядит добавленный зеро блок. По умолчанию в нем уже содержится ряд элементов – это шейп-файлы и блоки с текстом.
Рис. 2. Вид зеро блока
Первая — это основная рабочая область, сетка, состоит из 12 колонок, как и в Тильде.
Рис. 3. Редактирование нулевого блока.
Вторая область — обозначает границы окна браузера. Ширина Grid Container фиксированная – 1200 px, регулировать высоту можно при помощи мышки, или прописав в настройках нужное значение. При клике на пустую область, отобразятся настройки артборда, можно поменять цвет блока или добавить фоновое изображение.
Набор инструментов
Text – текстовый блок, можно выбрать шрифт, поменять цвет, настроить межстрочное или межбуквенное расстояние и т.д.
Image – добавляет изображение, редактирует размер и форму, может задать ссылку на изображении, кликнув посетитель попадает на адресную страницу.
Shape – объект (по умолчанию квадрат) трансформируемый в другие геометрические фигуры (окружность или прямоугольник). На фигуры можно ставить ссылки, менять цвет, обводку или тень.
Button – кнопка, меняется ее внешний вид (форма, размер, цвет, настраивается типографика), добавляется текст и ссылка, устанавливается реакция при нажатии или наведении (цвет надписи или фона меняются).
Video – размещает на страницу видео-файлы с популярных видеохостингов (Youtube, Vimeo). Расположение и размеры плеера настраиваются.
HTML – добавляет сервисы, виджеты и другие элементы на страницу сайта с помощью HTML-кода.
Tooltip – всплывающая при нажатии или наведении курсора интерактивная подсказка (текст или изображение), настраиваются анимация, цвет, тень и размер.
Form – форма обратной связи с функцией подключения сервисов приема данных.
Gallery – устанавливает слайдер фотографий, количество изображений, размер и положение настраиваются. Воспроизводится по клику или автоматически.
Адаптация дизайна для экранов
Настроить адаптив можно переключив точки адаптации, расположенные вверху экрана. Проверяем, корректность отображения на устройствах с разным размером экрана.
Горячие клавиши
Стоит начать с того, что в работе с Тильдой существует несколько различных ситуаций, в которых вам может понадобиться сделать ссылку:
- Создание ссылки в тексте.
- Создание ссылки в готовом блоке.
- Создание ссылки с элемента в Zero Block.
- Создание якорной ссылки.
Создание ссылки в тексте
Ниже вам будут доступны дополнительные настройки: цвет текста, цвет и толщина линии, rel="nofollow".
Создание ссылки в готовом блоке
Создание ссылки с элемента в Zero Block
Чтобы на Тильде сделать ссылку с элементов Image и Shape, необходимо кликнуть на элемент левой кнопкой мыши, затем нажать на кнопку Settings в правом нижнем углу. В открывшемся окне открываем секцию Link и указываем ссылку в поле URL. Также можно настроить дополнительные параметры: Target (открывать или нет в новом окне) и Rel Nofollow (запрет перехода по ссылке для поискового робота).
Для элемента Button все идентично предыдущим двум элементам, но в окне настроек отсутствует секция Link. Ссылка указывается в поле URL.
Создание якорной ссылки
Если у вас остались вопросы о том, как на Тильде сделать ссылку, пишите их в комментариях к этой статье.
Нам потребуется zero block тильды. Для примера, возьмем страницу из шаблонов и переконвертируем в зеро.
Затем выделим элемент и откроем панель настроек.
Идем в раздел пошаговая анимация тильды, и выбираем анимацию при скролле.
Настраиваем необходимые параметры, чтобы закрепить блок при скролле в тильде есть параметр FIX, по умолчанию там NONE, нужно заменить на FIXED. Тогда наша кнопка будет ездить за пользователем. Далее нажимаем сохранить и возвращаемся в редактор, нажимаем ПУБЛИКОВАТЬ.
На выходе получаем необычную анимацию кнопки, которая еще и повышает конверсию, ведь она сопровождает пользователя по всему сайту.
Читайте также: