Zero Block — это встроенный в Tilda профессиональный редактор, который позволяет создавать уникальные блоки с любым дизайном. Это мощный инструмент, но он требует понимания основных принципов.Прежде чем начать, оцените, действительно ли вам нужен Zero Block. В 80% случаев достаточно стандартных блоков с их настройками. Zero Block стоит использовать, если вы хотите:

• Воссоздать уникальный макет из Figma или Photoshop.

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

• Досконально контролировать положение и поведение каждого элемента.

🛠 Шаг 1: Добавление и интерфейс

• Добавьте блок: в редакторе страницы нажмите кнопку «Zero» внизу или найдите его в конце библиотеки блоков в категории «Другое».

• Войдите в редактор: нажмите кнопку «Редактировать блок» или «Block Editor» на добавленном блоке.

• Поймите контейнеры — это ключевая концепция:

• Grid Container (Сетка): основная рабочая область. Это фиксированная по ширине сетка (по умолчанию 1200px, 12 колонок). Элементы внутри неё привязаны к колонкам.

• Window Container (Окно): обозначает границы окна браузера. Элементы можно привязать к его краям, чтобы они всегда были, например, в углу экрана.

🧩 Шаг 2: Работа с элементами

1. Добавление: нажмите «+» в левом верхнем углу редактора. Можно добавить текст, изображение, фигуру, кнопку, видео, форму и другие элементы.

2. Настройка: выделите элемент. Нажмите Tab, чтобы открыть/закрыть панель настроек справа. Здесь вы управляете всем:

• Положение: задайте координаты (X, Y) в пикселях или процентах.

• Размер: ширина и высота.

• Контейнер: выберите, к чему привязан элемент — к Grid (сетке) или Window (окну браузера).

• Внешний вид: цвет, шрифт, тень, прозрачность и т.д.

📐 Шаг 3: Ключевые техники дизайна

• Привязка к краям окна: чтобы элемент (например, логотип) всегда был в левом верхнем углу любого экрана, в его настройках выберите Container: Window, а начало координат — Top / Left.

• Создание «резиновых» элементов: чтобы блок всегда занимал половину экрана, выберите Container: Window, а ширину и высоту задайте в процентах (например, 50% и 100%).

• Группировка: выделите несколько элементов (зажав Shift или Cmd/Ctrl+A) и нажмите Cmd/Ctrl+G. Это упрощает перемещение и настройку анимации для сложных композиций.

• Слои: нажмите Cmd/Ctrl+L, чтобы открыть панель слоёв. Здесь можно менять порядок наложения элементов (что сверху, что снизу), блокировать или скрывать их.

📱 Шаг 4: Адаптивность под разные экраны.
Это обязательный шаг. После настройки блока на десктопе проверьте, как он выглядит на планшетах и телефонах.

1. В верхней части редактора нажмите на иконки типов экранов (например, Desktop, Tablet, Mobile).

2. Настройте элементы для каждого типа экрана отдельно: вы можете менять размер шрифта, положение, а в некоторых случаях — скрывать или показывать элементы на определённых разрешениях.

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

💡 Советы и частые задачи

• Горячие клавиши: ускоряют работу. Основные: Tab (панель настроек), Cmd/Ctrl+Z (отмена), Cmd/Ctrl+C/V (копировать/вставить), 0-9 (быстрое изменение прозрачности).

• Как сделать полноэкранную обложку:

1. В настройках артборда (клик на пустом месте) для фонового изображения установите Window Container Height: 100%.

2. Текст и кнопки привяжите к Grid Container, а начало их координат установите Center / Center, чтобы они были по центру.

• Конвертация обычного блока в Zero Block: если почти подходящий блок из библиотеки требует доработки, в его настройках найдите кнопку «Convert to Zero Block». После этого его можно редактировать как Zero Block.

🚫 Чего следует избегать

• Не пренебрегайте проверкой на мобильных устройствах.

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

#тильда #тильдаобучение #тильдакурсы #tilda #tildadesign #tildaконструктор #дизайн #зероблок #zeroblock #сайтынатильде #вебдизайн

Клиент

Лариса Ловцевич — бизнес-психолог и eхecutive–коуч с 25-летним опытом управления организациями здравоохранения в компаниях-лидерах рынка.

Цель

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

Задачи

🔸 Разработка технического задания
🔸 Разработка логотипа и дизайна сайта
🔸 Верстка на Тильде и настройка интеграций

Этап 1. Разработка технического задания

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

Первоначальная идея с лендингом начинала трещать по швам из-за избыточного (впервые!) контента от заказчика, но договорились продавать основную услугу "Разовую консультацию", дальше по воронке "Коучинг в контракте" и отдельным продуктом в самом низу "Коучинг для бизнеса". С учетом, что для каждого продукта появится отдельная микро-страничка с пояснением сути и ожидаемого результата клиента.

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

Этап 2. Прототипирование и дизайн

История с продуктовыми микро-страницами родилась на этапе прототипирования, когда стало понятно, что контента для типового pop-up многовато. Написав тексты, вычитали вместе и по отдельности с заказчиком и внесли правки.

Из ТЗ у нас были рефы и пища для разработки дизайн концепции. Помучавшись с разработкой логотипа (тут отдельная история) и подбором "дорогого и глубокого" темно-синего цвета мы быстро согласовали концепт и загрузили дизайнера.

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

Этап 3. Верстка и настройки

Подобрали домен, сверстали через автоскейл широкоэкранную десктоп версию, а потом адаптировали под мобилку.

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

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

Проект от обычных отличали три момента:
1) Разработка лого. Мы ни разу не разрабатывали логотипы (стоит написать отдельно).
2) Широкоэкранная верстка. Давно хотел попробовать сам. Результат уже можно посмотреть на готовом сайте.
3) Зрелось заказчика. Детально погружалась в задаваемые вопросы, тексты, прототип, дизайн-концепцию. Задавала много вопросов, комментировала и конкретизировала что нравится, что не нравится. Уважительно, адекватно, в меру и по делу. Халтура вскрылась бы на раз😂

Виктор Бохан. Руководитель "BuroBohan"

Команда проекта

Виктор Бохан и Екатерина Русакова

Посмотреть готовый сайт можно по ссылке