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

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

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

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

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

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

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

Масштаб рабочей области от 20 от 300%. Такой диапазон позволяет удобно работать с элементами на артборде. Вы можете приблизить рабочую область, чтобы взаимодействовать с мелкими детали, или максимально отдалить, чтобы увидеть всю рабочую область, например, когда элементов на ней много.

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

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

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

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

Видео. Добавляйте на сайт видео из Youtube, Vimeo, VK Видео, Rutube или Kinescope. В Zero Block вы сможете регулировать его пропорции и положение на странице.

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

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

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

Векторный редактор. Создавайте и редактируйте векторные элементы, не выходя из Zero Block. Редактор позволяет создавать фигуры любой формы, а также изменить импортированные svg-объекты.

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

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

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

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

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

Если вы привыкли рисовать макет сначала в графических редакторах, то с помощью Zero Block вы сможете легко перенести его на сайт в том виде, в котором задумали. Для этого в Zero Block есть сетка в 12 колонок и индивидуальные параметры у каждого элемента: координаты, размеры, позиционирование относительно сетки (или краев экрана), параметры прозрачности и тень. Благодаря этим инструментам, вы можете воссоздать ваш макет в Zero Block.

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

Если вы создаете страницу сайта или лендинг и не можете найти подходящий блок в библиотеке Тильды, используйте Zero Block. Разберем на конкретных примерах.

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

Если вы хотите изменить подход к чтению и вести читателя другими путями, Zero Block — отличный инструмент.

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

В Zero Block удобно работать со слоями — заезжать одними изображениями на другие, а также текстом на плашки, кнопками на фотографии. Используйте наложение нескольких элементов друг на друга. Каждый из них вы можете позиционировать по разным параметрам, создавая дополнительные эффекты.

Чтобы не запутаться в большом количестве элементов, используйте инструмент «Слои» (Layers). Там вы можете управлять всеми элементами в блоке: менять местами, скрывать и ставить замок.

Чтобы открыть слои, нажмите горячие клавиши ⌘+ L или Cntrl + L для Mac, для Windows — Cntrl + L.

Zero Block позволяет собирать сложные композиции из множества элементов — текста, изображений, линий, плашек, кнопок. Вы также можете объединять несколько элементов в один объект. Например, чтобы сделать карточку для статьи и дать на неё ссылку. Такую группу элементов можно анимировать, задавать отступы, наложить тень и редактировать другие настройки. Чтобы создать объектную группу, выделите несколько элементов, сгруппируйте и в настройке Group выберите Object.

На лендинге новых шрифтов на Тильде блок про каждый шрифт состоит из множества элементов.

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

Когда хочется изменить что-то в обычном блоке и это нельзя сделать с помощью настроек.

Если вы выбрали стандартный блок Тильды и хотите его немного изменить или что-то добавить, а нужных параметров нет в настройках, воспользуйтесь функцией «Конвертировать в Zero Block». Тогда выбранный блок можно будет редактировать как Zero Block. Эта функция доступна для большинства блоков Тильды.

Разберем по этапам. Например, изменим блок с тарифами: вынесем иконки за пределы карточки с информацией.

Примеры других блоков, конвертированных в Zero Block:

Стандартные блоки Тильды имеют много настроек. Добавьте максимально подходящий вам блок из библиотеки и, открыв вкладку «настройки», посмотрите, можно ли с помощью них добиться нужного вам результата. Возможно, Zero Block вам не понадобится.

Приведенные ниже примеры созданы из стандартных блоков Тильды.

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

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

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

Для работы в редакторе выберите удобную для вас тему интерфейса — стандартную, светлую или тёмную. Также для каждой из них можно уменьшить интерфейс, чтобы он занимал меньше места на экране. Где включить: перейдите в Zero Block → Нажмите Tab → Zero Block settings → Theme.

Помимо текста, изображения, плашек и кнопок в Zero Block можно добавлять еще несколько более сложных элементов.

В Zero Block есть возможность добавить и настроить видео из YouTube, VK Видео, Vimeo, Kinescope и Rutube. Можно менять размер и соотношение сторон видео, его прозрачность, задавать тень и применять анимацию.

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

В Zero Block вы можете добавить любые элементы при помощи вставки HTML кода. Например: интерактивные элементы, онлайн-запись, музыкальные плееры, календари, калькуляторы, посты из соцсетей. Можно настроить позиционирование этих элементов на каждом экране.

Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом или изображением. Он может быть полезен, когда вы, например, рассказываете про какой-то сложный предмет и хотите на фото описать его составные части. Или вы продаете дома в строящемся поселке — можно нарисовать схему и отметить на ней каждый участок.

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

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

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

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

У каждого элемента можно задать координаты относительно четырех сторон экрана или сетки, изменить параметры прозрачности, тени, можно повернуть элемент, а также задать ему ссылку при нажатии.

Удобнее работать с элементами макета позволяют линейки — горизонтальная линия вверху и вертикальная в левом краю экран, из которых можно «достать» направляющие. Линейки и направляющие помогут задать нужное расположение элементов в макете, следить за отступами и выравниванием, сохранять одинаковые размеры и пропорции элементов. Чтобы включить линейки, перейдите в Настройки внутри Zero Block → Show Rulers.

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

Zero Block таит в себе много неочевидных возможностей. Вот некоторые эффекты, которые вы можете использовать на своем сайте.

Для ховера (эффекта при наведении) в Zero Block используйте кнопку. Вы можете сделать ее любого размера, а, настроив параметры скругления, превратить в круг. Если вы хотите сделать ее видимой только при наведении, сделайте ее бесцветной, а для ховера выберите прозрачность 30 и любой цвет.

Расположите такую кнопку поверх элементов, на которых вы хотите настроить ховер. Это могут быть и изображения, и текст. Если нужно, задайте кнопке ссылку.

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

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

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

В Zero Block также можно задать разные параметры для осей X и Y. Это может пригодиться, когда вы хотите сделать карточки, которые будут скроллиться по горизонтали, без вертикального смещения.

Если задать X: hidden, Y: visible/auto, в Zero Block появляется вертикальный скролл и блок фиксируется, пока не будет отображён весь контент по оси Y.

А если установить X: visible/auto, Y: hidden, контент за пределами рабочей области по оси X будет показываться по горизонтальном скроллу.

Нулевой блок на странице можно зафиксировать, чтобы он оставался при сколле сверху или снизу страницы. Это пригодится, например, для создания фиксированного меню с нестандартным дизайном. Чтобы настроить фиксацию, перейдите в Settings → Position and Overflow.

Также можно настроить, чтобы блок появлялся не сразу, а через несколько скроллов (Appear Offset). В этом случае можно применить однин из двух вариантов анимации появления — Fade in или Slide up/down.

В Zero Block базово предусмотрено пять разрешений экранов для адаптации сайта: 320, 480, 640, 960 и 1200px. Вы можете увеличить их количество, добавив контрольные точки — брейпоинты. С помощью брейпоинтов можно добиться идеального расположения всех элементов сайта на заданных разрешениях. Гибкая настройка может пригодиться, например, когда на сайт заходят с устройств с нестандартными разрешениями экрана.

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

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

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

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

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

Пример индивидуальной композиции на каждом экране:

Если вам не понравился дизайн адаптивов и хотите начать с нуля, можно очистить настройки элементов для младших разрешений экранов. Для этого выберите один или несколько элементов → перейдите в контекстное меню с помощью правой кнопкой мыши → Clear Adaptive Design.

Автолейауты в Zero Block — способ вёрстки в нулевом блоке, который позволяет быстрее верстать макеты, менять в них контент и адаптировать дизайн под разные разрешения экранов. Он удобен для создания таких элементов, как карточки, кнопки с несколькими элементами, пункты меню и других. Подробная информация о настройках автолейаутов в нулевом блоке доступа в Справочном центре.

Автолейауты управляют размещением элементов в группе относительно друг друга. После установки направления и расстояний они автоматически выстраиваются в соответствии с этими правилами, независимо от изменений в содержимом группы. Например, если при создании галереи понадобилось добавить еще одно изображение в группу, оно «встанет» согласно заданным правилам — не нужно будет двигать другие элементы группы вручную.

Посмотрите туториал по работе с автолейаутами:

Появление каждого элемента в Zero Block можно анимировать. Мы предусмотрели шесть видов анимации:

У каждого вида анимации есть параметры. Разберем, что они означают.

Duration — длительность анимации в секундах. Чем больше значение, тем медленнее анимация.

Distance — расстояние от исходной точки анимации до конечного местоположения объекта. Указывается только для тех видов анимации, где объекты появляются с какой-либо стороны.

Scale — Размер элемента в начале анимации в процентах от исходного размера. Этот параметр задается при появлении через увеличение или уменьшение. Если значение больше 100 — объект изначально больше и уменьшается до основных параметров, если меньше 100 — наоборот, объект увеличивается до исходного значения.

Delay — задержка воспроизведения анимации в секундах. Если значение нулевое, анимация начнется сразу, как только блок появится на странице.
Когда может быть полезна задержка? Если значимый объект перекрывается или зачеркивается другим объектом. Если на одном экране несколько объектов с анимацией, то, чтобы она не появлялась вся сразу, поставьте каждому элементу разную задержку. Так вы сможете управлять взглядом зрителя, ведя его от одного элемента к другому.

Trigger Offset — расстояние в пикселях от нижнего края экрана, при котором элемент появляется на странице. По умолчанию анимация элемента начинается, как только он пересечет нижний край экрана. Чтобы анимация началась позже, когда объект будет в зоне видимости для зрителя, а не в самом низу, задайте расстояние от нижнего края окна, при котором начнется анимация. Если объект изначально находится на меньшем расстоянии, чем значение этого параметра, то его не будет видно, пока пользователь не проскроллит дальше.

Когда вы задали необходимые параметры, проверьте как выглядит анимация, не выходя из редактора. Сделав активным объект, которому вы задали анимацию, нажмите «Play element» для воспроизведения анимации этого элемента и «Play all», если вы анимировали несколько объектов и хотите посмотреть, как они сочетаются.

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

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

При анимации такого типа элемент проходит шаги анимации во время скролла страницы.

Примеры анимации по скроллу:

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

Такая анимация начинает воспроизводиться, когда элемент появляется на экране.

Элемент на экране (element on Screen) — анимация начинает воспроизводиться, когда элемент пересекает нижнюю границу браузера и появляется на странице.

Блок на экране (block on Screen) — анимация воспроизводится, когда нулевой блок, в котором находится элемент, пересекает нижнюю границу браузера и появляется на странице.

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

При таком событии анимация воспроизведется, когда пользователь кликнет на элемент.

У каждого вида анимации есть дополнительные настройки:

Тригер начала анимации (Start Trigger) — к чему будет привязано начало анимации. Есть выбор из трех областей — верхней границы (on Window Top), центра экрана (on Window Center) и нижней границы (on Window Bottom).

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

Смещение начала анимации (Trigger Offset) — расстояние в пикселях от выбранного тригера, через которое воспроизводится анимация.

Зацикливание анимации (Loop) — параметр, который позволяет повторять заданные шаги бесконечно. При заданном параметре Loop with Reverse анимация элемента будет зациклена и повторится бесконечное количество раз. Чтобы анимация проигрывалась один раз, нужно установить Loop Once.

Плавность анимации (Easing) – настройка плавности анимации. В Тильде можно выбрать один из 29 типов изингов, которые будут влиять на отображение настроенной анимации. Выбранный тип сглаживания можно изменить с помощью кривых Безье.

Вы можете протестировать получившуюся анимацию с помощью кнопок Play Element (проиграть анимацию этого элемента)/ Play All (проиграть анимацию всех элементов в блоке). Такая опция доступна для всех видов анимации кроме анимации по скроллу.

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

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

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

С помощью настроек шага можно изменять свойства элемента, к которому применена анимация.

Вы можете задать положение (Move), размер (Scale), прозрачность (Opacity) элемента и угол поворота элемента (Rotate).

Параллакс при скролле. Когда вы применяете к элементу эту анимацию, скорость его движения будет отличаться от скорости остальных элементов во время скролла страницы. В настройках вы можете задать скорость его движения — при маленькой скорости от 0 до 100 он будет двигаться медленнее скролла, при высокой от 100 до 200 он будет двигаться значительно быстрее.

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

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

Также в настройках есть возможность задать, что будет являться триггером для фиксации: верхний край окна, нижний или центр. «Trigger Offset» позволяет контролировать отступ от края окна, чтобы элемент не прилипал к нему вплотную. Также он полезен, когда хочется зафиксировать несколько элементов одновременно на определенном расстоянии друг от друга.

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

Если вы создаете блок с нуля в зеро, то для начала стоит создать всю страницу, чтобы посмотреть, как этот блок сочетается с остальными. Но после этого не забудьте настроить его адаптивность. Если вы переводите в Zero Block и просто меняете текст, даже если на первом экране все выглядит отлично, проверьте адаптивность. Из-за разного кегля и длины строки текст на остальных экранах может выглядеть по-разному.

Если вы хотите, чтобы два элемента постоянно находились в одном положении относительно друг друга, задавайте им позиционирование относительно одних и тех же сторон либо Grid Container, либо Window Container.

Подробнее о том, как настроить позиционирование элементов, читайте в Справочном центре:

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