Горячие клавиши тильда zero block windows

Обновлено: 03.07.2024

Мы рассказывали, как с помощью модульного конструктора Tilda создавать отличные современные сайты. Но бывают ситуации, когда в голову приходит идея, которую не получается реализовать с помощью стандартных средств, встроенных в конструктор. Zero Block даёт возможность с лёгкостью спроектировать свой оригинальный блок.

Почему это круто

В редакторе Zero Block можно нарисовать что угодно и тут же опубликовать результат без участия верстальщика и программиста.

Любые элементы, произвольное расположение — никаких ограничений.

Так, как будто вы рисуете на бумаге. Только в вебе и очень быстро.

Редактор стал частью существующего интерфейса. В основе Tilda — модульная система: сайт собирается из готовых блоков, которые спроектированы дизайнерами. Редактор позволяет создавать свои блоки и комбинировать их с готовыми либо рисовать сайты с чистого листа. В любом случае сохраняется высокая скорость производства.

Для кого этот инструмент

Это инструмент для дизайнеров. Технически редактор освоить несложно. Но так как дизайн будет создаваться с нуля, потребуются профессиональные знания.

Специалистам, работающим с графическими редакторами, будут знакомы стандартные горячие клавиши и основные приёмы работы с объектами.

Как это работает

Создаёте страницу в Tilda.
Добавляете «нулевой блок».
Создаёте дизайн.
Настраиваете адаптивность.
Сайт готов.

С чем можно работать

В редакторе можно добавлять и редактировать текст, картинки, в том числе фоновые изображения, простые фигуры (прямоугольник, круг, линию), видео, кнопки, формы захвата, всплывающие подсказки и HTML-код. Поддерживаются слои, поэтому объекты можно накладывать друг на друга.

Можно настраивать типографику (размер шрифта, его тип, насыщенность, межстрочное и межбуквенное расстояние), цвет, прозрачность элементов, добавлять тени и обводки, создавать эффект наведения для кнопок.

Внутри редактора есть стандартная для веба сетка из 12 колонок и 2 рабочие области: внутри сетки и внутри условного окна браузера. Все элементы могут быть привязаны либо к контейнеру сетки, либо к окну.

Адаптивность и отзывчивый дизайн

Zero Block позволяет адаптировать дизайн для всех типов экранов так, чтобы сайт хорошо отображался и на мониторе с диагональю 27 дюймов, и на iPhone 5.

В редакторе Zero Block можно настроить анимацию элементов разной сложности. С её помощью можно управлять вниманием пользователя, расставив акценты на странице.

В Zero Block есть два вида анимации — базовая и пошаговая. Базовая — это простая анимация, например, появление через прозрачность, параллакс по скроллу, фиксация и другие. Они часто применяются в веб-дизайне, поэтому чаще всего базовой анимации бывает достаточно. С помощью пошаговой анимации можно задать собственный сценарий движения по шагам и создать яркий сложный эффект.

Нулевой блок (Zero Block) — редактор в Тильде, позволяющий реализовать разнообразные концепты и идеи, создавать блоки для индивидуального адаптивного дизайна сайта и редактировать каждый элемент в них. По функциональности не уступает популярным профессиональным графическим редакторам.

Можно собрать полноценный сайт или лендинг на Tilda только из нулевых блоков или миксовать их с обычными блоками Тильды. Теперь подробнее рассмотрим интерфейс зеро блока и разберем его функционал.

Создание Zero Block

Рис. 1. Добавляем зеро блок

Переходим в меню блоков, в самом конце меню под вкладкой «Другое», находим «Нулевой блок».

Вот так выглядит добавленный зеро блок. По умолчанию в нем уже содержится ряд элементов – это шейп-файлы и блоки с текстом.

Рис. 2. Вид зеро блока

Главные функции стандартного блока сохраняются: вырезать, удалить, копировать, скрыть или переместить. Присутствуют привычные «Настройки», но кнопка «Контент» заменена кнопкой «Редактировать блок», при нажатии на нее открывается рабочая область — артборд, состоящий из 2 рабочих областей: Grid Container и Window Container.

Первая — это основная рабочая область, сетка, состоит из 12 колонок, как и в Тильде.

Рис. 3. Редактирование нулевого блока.

Вторая область — обозначает границы окна браузера. Ширина Grid Container фиксированная – 1200 px, регулировать высоту можно при помощи мышки, или прописав в настройках нужное значение. При клике на пустую область, отобразятся настройки артборда, можно поменять цвет блока или добавить фоновое изображение.

Набор инструментов

Переходим в режим редактирования, нажав в левом верхнем углу экрана кнопку «Плюс». Открывается инструментарий нулевого блока. Состоящий из следующих элементов:

Text – текстовый блок, можно выбрать шрифт, поменять цвет, настроить межстрочное или межбуквенное расстояние и т.д.

Image – добавляет изображение, редактирует размер и форму, может задать ссылку на изображении, кликнув посетитель попадает на адресную страницу.

Shape – объект (по умолчанию квадрат) трансформируемый в другие геометрические фигуры (окружность или прямоугольник). На фигуры можно ставить ссылки, менять цвет, обводку или тень.

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

Video – размещает на страницу видео-файлы с популярных видеохостингов (Youtube, Vimeo). Расположение и размеры плеера настраиваются.

HTML – добавляет сервисы, виджеты и другие элементы на страницу сайта с помощью HTML-кода.

Tooltip – всплывающая при нажатии или наведении курсора интерактивная подсказка (текст или изображение), настраиваются анимация, цвет, тень и размер.

Form – форма обратной связи с функцией подключения сервисов приема данных.

Gallery – устанавливает слайдер фотографий, количество изображений, размер и положение настраиваются. Воспроизводится по клику или автоматически.

Для доступа ко всему функционалу настроек, нажмите кнопку «Settings» в правом нижнем углу экрана или клавишу Tab на клавиатуре, откроется панель настроек. Изначально она свернута, чтобы визуально освободить рабочее пространство.

Адаптация дизайна для экранов

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

Горячие клавиши

По словам разработчиков и дизайнеров, использование горячих клавиш заметно ускоряет работу, их список можно увидеть на фото выше или непосредственно в контекстном меню нулевого блока. На Windows вместо «Command» используйте Ctrl. Запомнив сочетания клавиш, сможете выполнять работу быстрее и продуктивнее, не прибегая к помощи мыши. Они позволяют сохранять, вставлять, копировать и перемещать элементы. Отменять последнее действие, изменять межстрочные и межбуквенные расстояния, размер шрифта и др.

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

Слои. Удобный инструмент для создания глубины на странице с помощью наложения элементов друг на друга и теней.

Привязка к краям экрана или сетки. Каждый элемент сайта можно позиционировать относительно сетки или экрана.

Сложная типографика. У дизайнеров есть полная свобода в создании нестандартных типографических решений.

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

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

Видео. Добавляйте на сайт видео из youtube или vimeo. В Zero Bock вы сможете регулировать его пропорции и положение на странице.

Вставка HTML. Добавляйте любые элементы в Zero Block при помощи вставки HTML кода и настраивайте позиционирование этих элементов на каждом экране.

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

Форма обратной связи. Вы можете добавить поля для ввода, подключить сервисы приема данных, задать стиль формы и применить к ней анимацию.

Анимация появления элементов. Добавляйте анимацию при появлении элементов: через прозрачность, увеличение, появление снизу, сверху, справа или слева экрана.

Пошаговая анимация. Используйте пошаговую анимацию, чтобы сделать страницу интереснее и динамичнее. Анимацию можно добавить по клику, по скроллу, при наведении на элемент и при появлении элемента на экране.

Параллакс. Применяйте к элементам параллакс при скролле и параллакс при движении курсора мышки.

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

Привет, ребята! На связи Евгений Тридчиков, и в этом видео мы разберем работу с нулевым блоком на платформе Тильда. Напомню, что в прошлом видео мы изучили настройки готовых блоков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель слоев

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

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

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

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

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

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

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

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

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

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

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

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