Что такое класс шейп элемента в зеро блоке
Zero Block: создание собственных блоков
Как автоматически импортировать макет из Figma в Zero Block
В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.
В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
Размер кнопки и фигуры меняется во всех направлениях.
Ниже — координаты положения элемента. Могут быть заданы в пикселах или в процентах. Ниже мы рассмотрим этот момент подробнее.
Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.
Прямоугольник : измените длины сторон, потянув мышкой за контрольные точки.
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.
Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Обзор нулевого блока в Тильда (Zero Block)
Привет, ребята! На связи Евгений Тридчиков, и в этом видео мы разберем работу с нулевым блоком на платформе Тильда. Напомню, что в прошлом видео мы изучили настройки готовых блоков.
Итак, создаем нулевой блок. По умолчанию, Зеро Блок содержит набор элементов: пару текстовых блоков и шейпы.
Обратите внимание, что вместо кнопки “Контент” появилась кнопка “Редактировать блок”. А настройки сократились до нескольких опций.
Элементы нулевого блока
Переходим в режим редактирования и рассмотрим интерфейс нулевого блока.
Инструментарий нулевого блока
Сверху слева набор инструментов
Мы можем добавить на артборт такие элементы, как:
Точки адаптации
Правее точки адаптации. Здесь вы видите то, как выглядит зеро блок на разных устройствах и ориентации устройства.
Точки адаптациии Зеро блока
По большому счету, адаптивность блока так и настраивается: вы просто двигаетесь по брейкбоинтам и настраиваете контент в соответствии с видимой частью.
Обратите внимание, что элементы в разных точках адаптации по умолчанию наследуют свойства десктопа.
Вы можете изменить свойства элемента в определенной точке. При этом свойство элемента в других брейкпоинтах останется неизменным.
Элементы интерфейса
Правее точек адаптации кнопки “Сохранить”, “Закрыть” и ссылка на полную справку по Зеро Блоку. Если вы внимательно изучите этот справочный раздел, то данное видео можно не смотреть. Справка предлагает исчерпывающую информацию.
“Три точки” открывают дополнительные опции интерфейса в виде горячих клавиш. Здесь вы можете:
Панель слоев
Отдельного внимания заслуживает панель слоев, которая вызывается сочетанием клавиш CMD+L. Когда вы начинаете адаптировать нулевой блок для каждой точки адаптации, некоторые элементы могут перемешаться и наложиться друг на друга.
Панель слоев, не дает запутаться
Чтобы не запутаться, помогает панель слоев. Здесь можно перетаскивать слои, то есть элементы, относительно друг друга, блокировать от редактирования, скрывать/отображать выбранные слои.
Настройки элементов
Ниже располагается плавающая кнопка опций. Она отображает настройки выбранного элемента или настройки артборта, если ни один элемент не выделен.
Настройки зависят от выделенного элемента
Настройки зависят от типа выбранного элемента. Для вашего удобства они разбиты на разделы. Вверху блок выравнивания. Ниже позиционирование, где можно задать положение относительно координат сетки или окна.
Далее внутреннее выравнивание, типографика и цвета. Ниже непрозрачность, z-индекс, тип тега, что удобно для сео-оптимизации текстового блока, базовая анимация и пошаговая анимация.
Групповое выделение элементов
Обратите внимание, что если выделить несколько элементов (делается это с помощью зажатой клавиши SHIFT или объемным выделением мышкой), появляются настройки группы элементов.
Здесь вы можете выровнять элементы относительно друг друга или относительно сетки контейнера.
В левом углу дашборда показаны границы сетки и видимого окна.
Смотреть видео
В следующем видео мы разберем варианты анимации. Если видео получилось полезным, поделитесь с коллегами! С вами был Евгений Тридчиков, и я желаю вам великолепного дня!
Как узнать класс элемента в Zero Block
Большое полотно с кодом справа и элемент слева, на который вы кликнули, будут подсвечиваться синим.
Класс элемента, в данном случае, на скриншоте мы подчеркнули линией красного цвета.
С недавнего времени в Тильде появилась возможность вручную задавать классы элементам в Zero Block.
Для того чтобы задать класс элементу зайдите в редактор Zero Block и кликните правой кнопкой мыши по нужному вам элементу. В появившемся контекстном меню выберите пункт Add CSS Class Name
ИП КОЛТАШОВА АЛЕКСАНДРА ВАДИМОВНА
Свидетельство о гос. регистрации: 54 № 5 150 134
ИНН: 540 618 483 335
ОГРНИП: 316 547 600 156 201
Дата постановки на учет: 25 августа 2016
Р/с: 4080 2810 5045 0000 0701
БИК: 44 525 999
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
К/с: 3010 1810 8452 5000 0999
ИНН: 5405047736
КПП: 540501001
ОГРН: 1195476069887
Р/с: №40702810004500006839
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
БИК: 044525999
К/с: 30101810845250000999
Как сделать слайдер на Тильде из зеро-блоков
Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на Tilda из zero-блоков.
Примеры, каким образом Вы можете оформить слайдер у себя на сайте. В нем могут находится карточки товаров, изображения, текст, фигуры и др.
Этапы создания слайдера
Примечания!
Вы можете сделать автоматическое переключение слайдера, вставив этот код в тег /script:
//автопролистывание слайдов(true), отключить автопролистывание (false)
autoplay:true,
//скорость пролистывания слайдов
autoplayTimeout: 3000,
//остановка автопролистывания при наведении
autoplayHoverPause:true>);
>);
Адаптация под мобильные устройства:
В мобильной версии не поместится вместить две, три и более карточек. Поэтому 2 варианта:
1. Растянуть шейп вертикально и делать карточки внутри него тоже вертикально друг за другом. Все должно работать, как на ПК. Просто слайдер станет вертикальным и длинным.
2. Сделать горизонтально, чтобы карточки выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально.
Важно, чтобы не конфликтовал код, сделать два блока. Один слайдер для ПК с отображением с 1200рх и до бесконечности с моим кодом выше, а второй до 1200рх и с горизонтальным скроллом
Два и более слайдеров на одной странице:
Если Вы хотите сделать несколько таких слайдеров на одной странице, то не забудьте поменять в новом коде: класс шейпа, ID слайдов, ссылки на стрелки (например, «#slider_left1» и «#slider_right2»), а также ОБЯЗАТЕЛЬНО класс «tildoshnaya-slider-owl» смените на какой-нибудь другой (например, «tildoshnaya-slider-owl1»)
Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.
Zero Block: отзывчивый дизайн
По оси X Grid Container всегда позиционируется по центру.
То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.
Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.
Но иногда требуется привязать элемент не к сетке, а к экрану. Например, вы хотите, чтобы логотип всегда был в левом верхнем углу любого экрана.
Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.
У каждого элемента в рабочей области есть координаты — положение относительно начало координат по оси X и по оси Y.
Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.
Мы предусмотрели, чтобы размер элементов так же мог задаваться в процентах. Таким образом получаются «резиновые» элементы, которые меняют размер, в зависимости от окна браузера.
По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.
С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.
Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.
Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.
При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.
Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.
Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.
Будьте внимательны при загрузке изображений: они должны быть подходящего размера, чтобы не потерять в качестве при масштабировании под большие экраны.
Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.