Как убрать блок made on tilda

Как снять сайт с публикации Tilda?

Как удалить сайт из Тильда?

Для того, чтобы удалить сайт, перейдите в Настройки сайта → Действия и нажмите кнопку «Удалить сайт». Сайт можно восстановить из корзины аккаунта в течение суток с момента удаления, после этого он удаляется полностью без возможности восстановления.

Как опубликовать сайт с тильды?

Итак, способ первый, самый простой. Вы создаете проект на Тильде и в настройках проекта указываете название, которое затем будет частью адреса сайта. Загружаете контент, редактируете внешний вид и, когда все готово, нажимаете кнопку «опубликовать». Ваш проект получит адрес вида mybrand.tilda.ws.

Как временно закрыть сайт на тильде?

Можно ли редактировать сайт на тильде после публикации?

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

Как удалить аккаунт в Tilda?

Перейдите на страницу https://tilda.cc/identity/deleteaccount/ Введите слово DELETE с клавиатуры и текущий пароль. В открывшемся окне введите проверочный код, поступивший на адрес электронной почты аккаунта.

Как убрать made on Tilda бесплатно?

Лейбл Made on Tilda можно убрать в Настройках сайта → Еще → Platform Label → «Не выводить», сохранить изменения и переопубликовать все страницы.

Как перенести сайт с Tilda на свой хостинг?

Чтобы экспортировать страницу, перейдите в Настройки страницы → Экспорт. Чтобы экспортировать проект целиком, перейдите в Настройки сайта → Экспорт. При экспорте вы получаете статичный html плюс все необходимые файлы (картинки, CSS, JS).

Нужно ли покупать хостинг для сайта на тильде?

Как опубликовать все страницы Tilda?

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

Как заморозить сайт на тильде?

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

Как прекратить работу сайта?

Как остановить сайт?

Можно ли изменить сайт после публикации?

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

Как редактировать сайт в тильде?

Добавлять и редактировать контент можно либо прямо со страницы — кликните на текст для редактирования или перетащите изображения, чтобы добавить картинки. Либо через меню «Контент» (оранжевая кнопка). Каждый блок, в зависимости от типа (изображение, текст, видео, кнопка) имеет собственные настройки.

Мобильная версия сайта на Тильде

УСЛУГИ

Зачем нужна мобильная версия сайта

Начну с краткого экскурса.
Для чего нужна мобильная адаптация?

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

Почему же Тильда?

Я ярый приверженец конструктора Tilda Publishing. Потому что, ребята очень активно развиваются, сама платформа не глючная (я знаю, о чем говорю, у меня за спиной работа не в одном десятке конструкторов). Широчайшие возможности. Даже если что-то не удается реализовать в стандартном функционале, то есть энтузиасты, которые помогают пользователям с реализацией кода.

Из коробки в Тильде идет интеграция со множествами сервисами (оплаты, рекламы и аналитики от Яндекс и Google, CRM, email-рассылок и тд.)

Особенно хорошо продвигаются сайты на Тильде в поиске. Есть чек-лист проверки сайта под SEO, настройка переадресации и редиректов.

Есть прекрасный функционал мультилендинга, что значительно увеличивает конверсию с платного трафика.

Что-то я отвлекся. На самом деле, конструктор Tilda я могу расхваливать часами)))
Перейдем к адаптации.

Настройка диапазона видимости в Tilda

Мобильная адаптация стандартных блоковна платформе Tilda

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

Но для этого надо нажать на иконку ноутбука, где настраиваются отступы.
Вообще, Tilda мне нравится еще и тем, что они лаконично и удобно вписывают настройки в интерфейс. То, что может навредить в дизайне сайтов молодому дизайнеру, они прячут.
А вообще, функционал стандартных блоков конструктора крайне ограничен и сложные проекты разработчику на них сложно создать. Для этого на помощь приходит Zero!

Мобильная версия на Зеро (Zero) в Tilda

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

Кстати, возможно, кто-то не знает, но в Тильде можно конвертировать стандартный блок в Зеро. Не все, но многие.

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

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

Отключение адаптивной верстки

Расширение-помощник для работы в адаптацией в Тильде

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

Разработчики дали возможность сами выбрать, сколько оплатить. Цена в месяц. Минимальная стоимость около 250 руб.

С этим расширением легко массово настраивать выравнивание и сетку (Grid Window контейнер). Для текстовых элементов, есть возможность (как в Фигме) одной кнопкой сделать все буквы с большой или маленькой буквы.

Есть возможность предпросмотра штрифтов из Google Fonts. Именно предпросмотра. Для этого вы в Зеро в Тильде включаете определенный штрифт, расширение его подтягивает из Гугл шрифтов, для предпросмотра, а при выходе, он сбрасывается. Это сделано для того, чтобы вы могли быстро перебирать штрифты и выбирать понравившиеся. А потом, подключать в Тильде.

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

Также, можно массово включать и копировать sbs-анимацию.

Более подробно обо всех функциях можете прочитать на сайте разработчика.

В Zero, лучше делать все по порядку.

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

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

Не уделяйте много времени всем разрешениям, которые настраиваются в Тильде!

Уделяйте много времени только трем разрешениям:
— от 0 до 320 px,
— от 320 до 480 px,
— от 1200 до ∞

Почему так? Потому что это самые популярные разрешения, с которых заходят пользователи на сайты.
Нет смысла прорабатывать планшеты и разрешения маленьких старых мониторов, просто потому, что максимум 5% людей зайдут именно с них.
То есть, прорабатываем мобилки и компы (ноуты). Остальное, просто должно все вмещаться в видимую зону.

Верстка текста и заголовков в Zero (на мобильных)

Для тех пользователей, которые верстают текстовые блоки в редакторе зеро в Тильде.

Многие замечали, наверное, что если мы чередуем стандартный блок и зеро, где есть текст или заголовок, то у них разные отступы на телефонах.
Частое сочетание, когда стандартный блок заголовка, а текст сверстанный в зеро. У стандартных блоков стоит отступ 20 пикселей от края экрана (Window), а в зеро, стандартно на мобильной версии 10 px по Grid.

Чтобы это исправить, нужно просто в Zero задать отступ 20 px и поставить Window контейнер.
Так как разрешения мобильных экранов, пестрят разнообразностью, то текст нужно выровнить аккуратно по всей ширине экрана телефона. Для этого надо в настройках ширины текстового контейнера, переключить с пикселей на %. (На скрине ниже показано) и отрегулировать чтобы текст занимал всю ширину экрана, но и были отступы примерно по 20 px от левого и правого края экрана.

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

Мобильное меню в Тильде

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

И всю эту информацию, надо уместить потом в мобильной версии.

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

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

Если есть вопросы по Тильде, задавайте в конце этой страницы, после видео.

Инструкция: создаем лендинг на Tilda через Zero Block

Лендинг – идеальный инструмент для быстрого запуска новых товаров, услуг и акций. Теперь вовсе необязательно привлекать сторонних подрядчиков, чтобы создать свою посадочную страницу: достаточно будет конструктора сайтов на Tilda в Zero Block. Вместе создадим первый экран лендинга, адаптированный под все распространенные устройства.

Интерфейс Zero-редактора

Чтобы приступить к работе, переходим на уже созданный ранее лендинг либо создаем новый и нажимаем на кнопку «Создать новую страницу»:

В случае, если мы создали новый сайт, Tilda сама предложит добавить первый блок. Выбираем иконку Zero:

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

Нажимаем на плюс и прокручиваем боковое меню в самый низ. Нажимаем по кнопке «Нулевой блок»:

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

Для редактирования содержимого нажимаем по кнопке «Редактировать блок»:

Чтобы удалить содержимое, достаточно выделить курсором все элементы и нажать на кнопку del на клавиатуре. Алгоритм такой же, как в Photoshop, Paint или любой другой офисной программе.

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

Артборд

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

Ширина блока составляет 1200 px – это максимально возможная ширина лендинга. Большинство ноутбуков имеют ширину экрана 1344 px, и с большей шириной сайт рискует просто не поместиться на экран. Появится горизонтальная прокрутка, что негативно скажется на пользовательском опыте и, как следствие, на конверсии. Адаптировать сайт под меньшее разрешение мы можем (вплоть до 320 px), но об этом чуть дальше в статье.

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

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

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

За это отвечает параметр Overflow в настройках артборда. Доступно 3 параметра:

Модульная сетка

Обратите внимание на вертикальные полосы в артборде. Это направляющие линии, которые используются для позиционирования элементов. Их отображение можно включать и выключать – достаточно нажать на клавиатуре G. Мы ориентируемся на них, когда размещаем элементы, чтобы они выглядели органично и привычно для пользователя. Таким образом, нам не придется вручную считать пиксели.

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

Для создания горизонтальных направляющих нужно нажать комбинацию клавиш Ctrl+H (⌘+H для Mac), а для вертикальных – Ctrl+Shift+H (⌘+Shift+H).

Также это можно сделать через меню в правом верхнем углу:

Направляющие не отображаются на сайте, а только служат для более точного позиционирования элементов. Удалять их не обязательно – можно просто временно скрыть через то же меню (пункт Guides: Hide/Show). Если все-таки собираетесь удалять, наведите курсор на направляющую и нажмите крестик.

Настройки блока

По умолчанию настройки скрыты. Чтобы они появились, нажмите Tab на клавиатуре.

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

Не советуем устанавливать слишком большое значение. Берите максимум 700 px, иначе блок не поместится на одном экране ноутбука и ухудшит пользовательский опыт. Например, ваш оффер не будет видно, и пользователь уйдет с сайта.

Значение высоты мы можем установить как в пикелях (Grid Container Height, px), так и в процентах (Window Container Height, %). С помощью параметра Grid Container Align in window можно установить, из какой точки будет идти отчет пикселей: из центра, верней или нижней границы.

Присутствует также возможность изменить цвет фона или добавить изображение:

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

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

Сравните оригинальное фото и получившийся результат.

Как и настройки артборда, слои по умолчанию не отображаются. Для начала работы с ними нужно нажать комбинацию клавиш Ctrl+L (либо ⌘+L для MacOS). Этот инструмент позволяет нам схематично посмотреть на элементы, из которых состоит Zero Block.

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

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

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

Доступные элементы

Для добавления элементов на артборд необходимо нажать в левом верхнем углу на плюс, после этого появится выпадающий список с доступными элементами:

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

Настройки всех элементов начинаются с настроек позиционирования.

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

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

Text – самый понятный элемент. Создает обычный текст.

Текст

В первую очередь это выравнивание (слева, по центру, справа), цвет, кегль, шрифт и отступы. Учитывайте, что выравнивание по ширине выполняется относительно текстового блока, а не всей страницы.

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

Для основного текста лучше не выбирать значения кегля меньше 14 px.

Есть 2 значения отступов (spacing): интерлиньяж (расстояние между строками) и кернинг (между символами). Рекомендую первое значение выбирать между 1,2–1,5, а второе не менять. В любом случае, в первую очередь ориентируйтесь на визуальное восприятие текста.

Нам также доступна прозрачность, изменение угла наклона и слоя текста.

Первые 2 параметра могут пригодиться для реализации нестандартного решения с текстом:

Для управления слоем с текстом мы можем воспользоваться четырьмя командами (слева направо):

При этом есть возможность через параметр Target выбрать, в каком окне откроется ссылка: в том же самом (Same window) или в новой вкладке (New window).

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

Чтобы добавить меню сайта, используем инструмент «Текст». Создаем первый элемент. Пусть это будет ссылка «Главная». Задаем ей основные параметры:

Я выбрал такой оттенок, чтобы он подходил под цветовую гамму сайта, но при этом на контрасте с фоном привлекал к себе внимание. Старайтесь не использовать на сайте больше 3 цветов.

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

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

Скопировать можно двумя способами: нажатием на клавиатуре Ctrl+C (⌘+C для MacOS) и Ctrl+V (⌘+V для MacOS) или через боковое меню, нажав на Copy.

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

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

Теперь добавим номер телефона и разместим его правее меню. Немного изменим его цвет – сделаем его более ярким и заметным:

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

Через него мы можем:

Теперь наш первый экран выглядит вот так:

Изображения

С помощью этого элемента, как нетрудно догадаться, мы добавляем графические элементы. Это может быть как фон, так и картинка, фото, иконка и т. д.

Добавляем элемент на артборд. Сначала он будет незаполненным.

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

Доступно 2 варианта загрузки: как файл с компьютера и по ссылке из интернета.

Для загрузки файла с компьютера нажмите по кнопке Upload file в центре окна. Для загрузки по URL нажмите по ссылке Upload from URL внизу формы.

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

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

Нам доступно изменение цвета (color), ширины (brdr.size) и скругления границы (radius). Помимо этого, можно выбрать стиль самой границы через параметр Style. Доступны такие варианты:

Что касается тени, тут гораздо больше возможностей для креатива:

Секрет удачной тени кроется в параметрах Offset, Blue, Spread. Мы можем сдвинуть одну или несколько сторон, изменить размытие или величину тени. По сути, мы можем даже фон поменять не отдельным элементом, а просто изменив тень.

Zero Block: создание собственных блоков

Как автоматически импортировать макет из Figma в Zero Block

В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.

В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.

Размер кнопки и фигуры меняется во всех направлениях.

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

Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.

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

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

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

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

Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.

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

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

Рассмотрим настройки галереи:

Stretch. Имеет два параметра: Cover и Contain.

При параметре Cover изображения будут полностью заполнять область галереи, таким образом могут обрезаться, если отличаются по формату от галереи.

При параметре Contain изображения внутри галереи будут всегда в исходном формате, таким образом при любом формате галереи не будут обрезаться.

Position. Определяет положение изображения относительно области галереи. Например, при параметре Left Top изображение будет расположено относительно левого верхнего угла галереи.

Loop. Эта настройка зацикливает слайды (изображения) в галерее. Имеет два параметра: Loop и None.

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

При параметре None зацикливания не будет и на последнем слайде галерея закончится.

Slide Speed. Определяет вид анимации смены слайдов. Имеет три параметра: None, Slow и Fast.

При параметре None будет слайды будут перелистываться без анимации.

При параметре Slow слайды будут перелистываться медленно.

При параметре Fast слайды будут перелистывать быстро.

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

Zoomable. Добавляет возможность увеличивать изображения галереи по клику. Имеет два параметра: Zoom on Click и None.

При параметре Zoom on Click изображения будут увеличиваться по клику.

При параметре None изображения не будут увеличиваться по клику.

Arrows. Набор настроек, который определяет внешний вид стрелок (кнопок).

Dots. Набор настроек, который определяет внешний вид точек под галереей. Точки отображают количество слайдов.

У каждого слайда (изображения) есть индивидуальные настройки:

Мы предусмотрели адаптацию для основных типов экранов:
1200 – max (компьютеры)
980 – 1200 (планшет горизонтальный)
640 – 980 (планшет вертикальный)
480 – 640 (смартфон горизонтальный)
320 – 480 (смартфон вертикальный)

Этого достаточно, чтобы ваш дизайн отображался корректно на всех устройствах.

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

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

Нулевой блок, или Zero Block в сервисе Tilda

Нулевой блок (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. Запомнив сочетания клавиш, сможете выполнять работу быстрее и продуктивнее, не прибегая к помощи мыши. Они позволяют сохранять, вставлять, копировать и перемещать элементы. Отменять последнее действие, изменять межстрочные и межбуквенные расстояния, размер шрифта и др.