Создание сайтов на Tilda с нуля

Знакомство с платформой: интерфейс, настройки сайта и структура страницы

Добро пожаловать в курс «Создание сайтов на Tilda с нуля»! Это наша первая статья, и мы начнем с самого важного — фундамента. Прежде чем мы начнем двигать пиксели и писать продающие тексты, нам нужно разобраться, как устроена «кабина пилота» в Tilda Publishing.

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

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

Личный кабинет и создание проекта

После регистрации и входа в систему вы попадаете на главную страницу — это ваш список проектов. В терминологии Tilda Проект — это отдельный сайт. Внутри одного аккаунта может быть несколько проектов (сайтов), а внутри каждого проекта — множество страниц.

Интерфейс главной страницы минималистичен:

Список ваших сайтов: Здесь отображаются карточки созданных вами проектов.

Тарифы и оплата: Информация о текущей подписке.

Профиль: Настройки вашего аккаунта (email, пароль, язык интерфейса).

Справочный центр: Ссылка на базу знаний Tilda (Tilda Education).

Чтобы начать работу, нам нужно создать новый сайт. Нажав кнопку «Создать новый сайт», вы вводите его название (оно видно только вам) и попадаете внутрь проекта.

!Схема главной страницы личного кабинета со списком проектов

Настройки сайта: Глобальное управление

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

Рассмотрим ключевые разделы настроек:

1. Главное

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

2. Шрифты и цвета

Это «сердце» дизайн-системы вашего проекта. Tilda позволяет подключить шрифты несколькими способами:

* Библиотека Tilda: Встроенные популярные шрифтовые пары (например, Roboto, Open Sans, Merriweather). * Google Fonts: Подключение шрифтов напрямую из библиотеки Google. * Adobe Fonts: Интеграция с сервисом Adobe. * Загрузка своего шрифта: Вы можете загрузить файлы шрифтов (форматы .woff, .woff2), если у вас есть на них лицензия.

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

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

3. Аналитика

В этом разделе подключаются счетчики статистики (Яндекс.Метрика, Google Analytics) и внутренняя статистика Tilda. Даже если сайт еще не готов, полезно знать, где это находится.

4. Домен

Здесь подключается ваш уникальный адрес сайта (например, mysite.com). Пока домен не подключен, сайт доступен по техническому адресу вида project12345.tilda.ws.

Интерфейс редактора страницы

Создав новую страницу (можно выбрать пустую или использовать шаблон), вы попадаете в Редактор. Это то место, где вы будете проводить 90% времени.

Интерфейс редактора состоит из нескольких зон:

Рабочая область: Центральная часть, где вы видите свой сайт таким, каким он будет (почти).

Библиотека блоков: Вызывается нажатием на кнопку «плюс» (+) между блоками или внизу страницы. Здесь собраны сотни готовых элементов, рассортированных по категориям (Обложка, О проекте, Заголовок, Изображение, Форма и т.д.).

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

!Интерфейс редактора: рабочая область, кнопки управления блоком и библиотека

Анатомия блока: Контент и Настройки

Каждый блок в Tilda имеет два основных режима редактирования. При наведении на блок слева появляются две кнопки:

Контент (Оранжевая кнопка): Отвечает за содержание*. Здесь вы пишете текст, загружаете картинки, вставляете ссылки, добавляете пункты меню. Грубо говоря, это ответ на вопрос «ЧТО показано в блоке?». Настройки (Синяя/Черная кнопка): Отвечает за внешний вид*. Здесь вы регулируете отступы, выравнивание, цвет фона, типографику (размер шрифта, межстрочное расстояние), анимацию и видимость на разных устройствах. Это ответ на вопрос «КАК выглядит блок?».

Понимание разделения на «Контент» и «Настройки» — ключевой навык. Если вы хотите поменять текст — идите в Контент. Если хотите сделать фон серым, а текст выровнять по центру — идите в Настройки.

Структура страницы: Логика построения

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

Типичная структура лендинга (посадочной страницы) выглядит так:

Хедер (Header): Меню сайта. Обычно содержит логотип, ссылки на разделы и кнопку связи/действия. Хедер помогает пользователю ориентироваться.

Обложка (Cover): Первый экран, который видит пользователь. Здесь располагается главный заголовок (Оффер), подзаголовок и кнопка целевого действия (CTA — Call to Action). Задача обложки — за 3 секунды объяснить посетителю, куда он попал и зачем ему это нужно.

Вводная часть: Блоки «О проекте» или «Преимущества». Объясняют суть предложения.

Основной контент: Карточки товаров, услуги, расписание, галерея изображений.

Доверие: Отзывы, логотипы партнеров, команда.

Целевое действие: Форма заявки, кнопка покупки или подписки.

Футер (Footer): «Подвал» сайта. Здесь дублируются контакты, ссылки на соцсети, политика конфиденциальности и копирайт.

Управление блоками

В редакторе справа от каждого блока есть панель действий (иногда скрыта под иконкой стрелочки), которая позволяет:

* Дублировать блок: Создает точную копию ниже. * Удалить блок: Убирает блок со страницы (можно отменить действие через Ctrl+Z или кнопку отмены). * Скрыть/Показать блок: Полезно, если вы работаете над блоком, но не хотите, чтобы пользователи видели его прямо сейчас. * Вырезать/Копировать/Вставить: Работает даже между разными страницами и разными проектами (в рамках одного аккаунта). * Переместить: Стрелки вверх и вниз меняют порядок блоков.

Публикация и Предпросмотр

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

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

> Важно: Любые изменения, которые вы вносите в редакторе, не видны посетителям до тех пор, пока вы снова не нажмете кнопку «Опубликовать».

Заключение

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

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

Работа со стандартными блоками: библиотека, контент и формы заявки

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

Библиотека блоков: ваш строительный магазин

Tilda предлагает более 550 готовых блоков, разделенных на смысловые категории. Чтобы открыть библиотеку, достаточно навести курсор между двумя любыми блоками (или в начало/конец страницы) и нажать на черный круг с плюсом (+).

Меню библиотеки расположено слева и напоминает каталог IKEA: здесь есть всё, от простых текстовых абзацев до сложных интерактивных карт.

!Схема меню библиотеки блоков с категориями слева и примерами блоков справа.

Основные категории блоков

Разберем самые популярные категории, с которыми вы будете работать в 90% случаев:

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

Заголовок (Title). Блоки для разделения смысловых секций. Tilda предлагает множество вариаций: по центру, слева, с подзаголовком, с декоративными линиями.

Текстовый блок (Text). Просто текст. Это может быть одна колонка, две, три или текст с буквицей. Используется для статей и описаний.

Изображение (Image). Одиночные картинки. Можно добавить подпись, сделать картинку круглой или добавить эффект увеличения по клику.

Галерея (Gallery). Слайдеры, сетки фотографий, карусели. Идеально для портфолио или фотоотчетов.

Форма и кнопка (Form & Button). Самый важный раздел для коммерческих сайтов. Здесь находятся блоки для сбора контактов, подписки на рассылку и кнопок перехода.

Подвал (Footer). Завершающий блок сайта с контактами и копирайтом.

> Совет: Не пытайтесь изобретать велосипед. Если вам нужно разместить отзывы, зайдите в категорию «Отзывы». Дизайнеры Tilda уже продумали оптимальные отступы и размеры шрифтов для этого типа контента.

Работа с контентом: наполняем блоки смыслом

Как мы выяснили ранее, у каждого блока есть кнопка Контент (оранжевая). Именно через неё происходит управление содержимым. Однако Tilda поддерживает и функцию Inline editing (редактирование на лету).

Два способа редактирования текста

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

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

Загрузка изображений

Изображения загружаются через меню Контент. Вы можете:

* Перетащить файл с компьютера (Drag-and-Drop). * Загрузить по ссылке. * Выбрать из бесплатной библиотеки Unsplash (встроена в Tilda).

Важно помнить про оптимизацию. Не стоит загружать фотографии весом 10 Мб. Tilda автоматически сжимает изображения, но для ускорения работы редактора лучше заранее подготовить файлы в формате JPG или WebP шириной не более 1920px (для обложек) или 1200px (для контента).

Формы заявки: превращаем посетителей в клиентов

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

Рассмотрим настройку формы на примере популярного блока BF103 (Вертикальная форма с множеством полей).

Настройка полей формы

Зайдите в меню Контент выбранного блока с формой и найдите раздел Поля для ввода (Input fields). Здесь вы конструируете свою анкету.

Вы можете добавлять поля разных типов:

* Email — для ввода почты (с проверкой на наличие «@»). * Phone — для телефона (можно включить маску ввода, например, +7 (999) 999-99-99). * Name — для имени. * Textarea — многострочное поле для комментария. * Checkbox — галочка (например, «Согласен с политикой конфиденциальности»). * Drop down list — выпадающий список для выбора услуги.

!Скриншот меню настройки полей ввода в блоке формы.

Куда приходят заявки?

Это самый частый вопрос новичков. Сама по себе форма на странице — это просто «дверь». Чтобы почтальон знал, куда нести письма, нужно подключить Приемщик данных.

Перейдите в Настройки сайта (в верхней панели проекта) -> Формы.

Выберите сервис, куда хотите получать заявки: Email, Telegram, Google Таблицы, Trello, CRM-системы (AmoCRM, Bitrix24).

Следуйте инструкции по подключению конкретного сервиса.

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

> Важно: После подключения сервиса приема данных обязательно нужно Опубликовать страницу заново. Иначе форма не заработает.

Тонкая настройка: отступы и ширина

Иногда стандартный блок выглядит хорошо, но «слипается» с предыдущим или кажется слишком узким. Для этого идем в Настройки (синяя кнопка).

Отступы (Padding)

В разделе «Отступы» вы можете регулировать пустое пространство сверху и снизу блока. Стандартный шаг в дизайне Tilda — 30px, 60px, 90px, 120px, 150px, 180px, 210px.

* Отступ сверху отделяет блок от предыдущего. * Отступ снизу отделяет блок от следующего.

Хорошим тоном считается использование одинаковых отступов между смысловыми блоками (например, везде по 120px или 150px), чтобы задать ритм странице.

Ширина блока (Grid Container)

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

* 12 колонок — контент на всю ширину сетки (около 1160px). * 10 или 8 колонок — контент будет уже, появится «воздух» по бокам. Это удобно для текстовых статей, так как слишком длинные строки тяжело читать. * Отступ слева (Offset) — позволяет сдвинуть блок вправо. Например, ширина 8 колонок и отступ 2 колонки разместят текст ровно по центру (2 пустых + 8 текст + 2 пустых).

Практическое задание: собираем первый экран

Попробуйте прямо сейчас создать простую структуру:

Добавьте блок из категории Меню (например, ME201).

Добавьте блок из категории Обложка (например, CR01).

В обложке через Контент загрузите красивое фото и напишите заголовок «Мой первый сайт».

Ниже добавьте блок из категории О проекте (например, AB101) и напишите пару слов о себе.

В конце добавьте блок из категории Контакты (CN101).

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

Основы Zero Block: создание уникального дизайна, слои и базовая анимация

В предыдущих статьях мы научились собирать сайты из готовых «кирпичиков» — стандартных блоков Tilda. Это быстрый и надежный способ запустить проект. Но что делать, если ваша дизайнерская задумка выходит за рамки стандартных шаблонов? Что, если вам нужно наложить текст на картинку в определенном месте, создать сложную композицию из геометрических фигур или заставить кнопку плавно появляться при скролле?

Добро пожаловать в Zero Block (Нулевой блок). Это профессиональный редактор внутри Tilda, который превращает платформу из конструктора в полноценный графический инструмент для веб-дизайна.

Что такое Zero Block и зачем он нужен?

Стандартные блоки Tilda работают по принципу жесткой сетки: вы не можете случайно сломать верстку, но и свободы перемещения элементов у вас немного. Zero Block — это чистый холст (Artboard). Здесь нет заранее заданных мест для заголовков или картинок. Вы сами решаете, где будет находиться каждый пиксель.

Ключевые отличия Zero Block:

* Свобода позиционирования: Элементы можно накладывать друг на друга, двигать с точностью до пикселя и вращать. * Ручная адаптация: В отличие от стандартных блоков, которые автоматически подстраиваются под мобильные телефоны, в Zero Block вы должны вручную настроить вид сайта для каждого разрешения экрана (об этом мы поговорим отдельно, но важно помнить это с самого начала). * Слои: Работа с элементами напоминает Photoshop или Figma.

Чтобы добавить Zero Block, пролистайте библиотеку блоков в самый низ и выберите категорию «Нулевой блок» или просто нажмите кнопку «Zero» в меню быстрого добавления.

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

Нажав кнопку «Редактировать блок» (Edit Block), вы попадаете в отдельное пространство с черным интерфейсом. Давайте разберем его анатомию.

!Схематичное изображение интерфейса редактора Zero Block с обозначением основных зон управления.

1. Рабочая область (Artboard)

Центральная часть экрана — это ваш сайт. По умолчанию вы видите сетку (Grid). В Tilda используется 12-колоночная сетка. Ширина контейнера (активной области) составляет 1160 пикселей. Все, что находится внутри этих границ, гарантированно будет видно на большинстве ноутбуков и мониторов.

2. Панель добавления элементов (+)

В левом верхнем углу (или при нажатии на «+») находится список элементов, которые можно добавить на холст:

* Text: Текстовое поле. * Image: Изображение. * Shape: Геометрическая фигура (квадрат, круг, линия). Часто используется для создания фонов, кнопок или декоративных элементов. * Button: Кнопка. * Video: Видеоплеер (YouTube, Vimeo или MP4). * Tooltip: Интерактивная подсказка (точка, при наведении на которую всплывает текст). * HTML: Блок для вставки произвольного кода. * Form: Форма заявки (с полями ввода).

3. Панель настроек (Settings)

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

Если выделить элемент, например, текст, вы увидите:

* Align: Инструменты выравнивания (по центру, по левому краю и т.д.). * X / Y: Координаты элемента. — положение по горизонтали, — по вертикали. Точкой отсчета (0,0) обычно является левый верхний угол контейнера сетки. * Width / Height: Ширина и высота элемента. * Typography / Color: Настройки шрифта и цвета.

Работа со слоями (Layers)

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

Чтобы открыть панель слоев, нажмите кнопку Layers в нижней панели инструментов или используйте горячую клавишу Ctrl + L (Windows) / Cmd + L (Mac).

Логика слоев проста:

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

Вы можете перетаскивать слои мышкой, меняя их порядок (Z-index).

Слои можно группировать (выделите несколько элементов и нажмите Ctrl + G / Cmd + G). Это удобно, чтобы двигать сразу всю композицию (например, картинку вместе с подписью).

Слои можно блокировать (замочек), чтобы случайно не сдвинуть их, и скрывать (глаз), чтобы они не мешали работе.

> Совет: Всегда давайте слоям понятные имена. Вместо «Shape 24» назовите слой «Фон кнопки». Когда элементов станет 50, вы скажете себе спасибо.

Создание композиции: выравнивание и сетка

Главная ошибка новичков в Zero Block — хаотичное расположение элементов. Дизайн любит порядок. Используйте инструменты выравнивания в панели Settings.

Grid Container vs Window Container

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

Grid Container: Элемент привязан к центральной сетке (1160px). Это самый безопасный вариант. Если экран пользователя шире 1160px, элемент останется на своем месте в центре.

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

Базовая анимация (Basic Animation)

Zero Block славится своей Step-by-Step анимацией (пошаговой), но для начала нам достаточно освоить Basic Animation. Это простые, но эффектные настройки поведения элементов при появлении или взаимодействии.

Выделите любой элемент, прокрутите панель настроек справа вниз до раздела Basic Animation.

Виды базовой анимации:

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

Fade In*: Плавное появление. Fade In Up/Down/Left/Right*: Появление со сдвигом. Zoom In*: Увеличение. * Здесь же настраивается Duration (длительность) и Delay (задержка). Например, если у вас три иконки, поставьте им задержку 0s, 0.2s и 0.4s — они появятся красиво «лесенкой», а не все сразу.

Parallax: Эффект, при котором элемент движется с другой скоростью, чем прокрутка страницы. Это создает ощущение глубины (3D-эффект).

Fix on Scroll: Фиксация элемента. Полезно, если вы хотите, чтобы кнопка «Купить» или боковое меню оставались на экране, пока пользователь читает длинный текст.

!Иллюстрация принципа работы параллакс-эффекта при прокрутке страницы.

Адаптация: краткий обзор

Это тема следующей большой статьи, но не упомянуть её нельзя. В верхней части редактора Zero Block вы видите иконки устройств: Desktop, Tablet (горизонтальный и вертикальный), Mobile (горизонтальный и вертикальный).

Важное правило Zero Block: > Изменения, сделанные на большем экране, не всегда автоматически применяются к меньшим корректно. Но изменения на меньших экранах никогда не влияют на большие.

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

Практическое задание для закрепления

Попробуйте создать простой первый экран (Hero Section) в Zero Block:

Добавьте Zero Block на страницу.

Зайдите в редактор, удалите все лишнее.

В настройках блока (Artboard settings) загрузите фоновое изображение.

Добавьте Shape (прямоугольник) черного цвета, растяните на весь экран и задайте прозрачность (Opacity) 50%, чтобы затемнить фото.

Добавьте Text с заголовком и Button (кнопку).

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

Добавьте заголовку анимацию Fade In Up.

Поздравляю! Вы сделали свой первый шаг в мир профессионального дизайна на Tilda. В следующем уроке мы детально разберем самую больную тему всех дизайнеров — адаптацию Zero Block под мобильные устройства.

Адаптивная верстка: настройка отображения на мобильных устройствах и планшетах

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

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

Почему это критически важно?

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

В Tilda подход к адаптации зависит от того, какие блоки вы используете: стандартные или Zero Block.

Адаптация стандартных блоков

Хорошая новость для новичков: стандартные блоки Tilda (обложки, галереи, текстовые статьи) — резиновые и адаптивные по умолчанию. Разработчики платформы уже прописали код, который автоматически перестраивает контент.

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

* Колонки превращаются в строки. Если на компьютере у вас было 3 колонки с преимуществами в ряд, на телефоне они встанут одна под другой. * Шрифты уменьшаются. Огромный заголовок обложки автоматически станет меньше, чтобы поместиться в экран смартфона. * Отступы сокращаются. Воздух, необходимый на десктопе, на мобильном урезается для экономии места.

Настройки мобильной версии в стандартных блоках

Несмотря на автоматизацию, вы можете влиять на отображение. Зайдите в Настройки любого стандартного блока и прокрутите вниз до раздела «Мобильная версия» (Mobile Optimization).

Здесь можно:

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

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

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

Адаптация Zero Block: полный контроль

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

В верхней части редактора Zero Block вы видите линейку с иконками устройств. Это так называемые брейкпоинты (контрольные точки экрана).

!Схема брейкпоинтов (разрешений экрана) в редакторе Zero Block.

Рассмотрим эти 5 экранов:

Desktop (1200px+): Базовая версия, которую вы создаете по умолчанию.

Laptop (980-1200px): Небольшие ноутбуки и горизонтальные планшеты (iPad Pro).

Tablet Landscape (640-980px): Планшеты в горизонтальной ориентации.

Tablet Portrait (480-640px): Планшеты в вертикальной ориентации и очень большие смартфоны.

Mobile (320-480px): Большинство смартфонов.

Главное правило наследования

Это самый важный абзац в этой статье. Запомните правило, которое спасет вам часы работы:

> Настройки в Zero Block наследуются сверху вниз: от большего экрана к меньшему.

Что это значит на практике?

* Если вы изменили размер шрифта или подвинули картинку на Desktop, эти изменения автоматически применятся ко всем экранам (ноутбук, планшет, телефон). * Если вы внесли изменения на экране Mobile, они останутся только на Mobile и не повлияют на Desktop.

Опасная ловушка: Если вы настроили мобильную версию, а потом решили поменять что-то на десктопе (например, увеличить шрифт), ваша мобильная верстка может «поехать», так как она унаследует новые параметры сверху. Поэтому старайтесь сначала утверждать дизайн десктопа, и только потом приступать к адаптации.

Алгоритм адаптации Zero Block

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

Шаг 1. Переключение на Laptop

Нажмите на иконку ноутбука. Вы увидите, что сетка стала уже (960px). Если ваши элементы вылезают за границы желтой рамки (Grid Container), выделите их и сдвиньте внутрь. Обычно здесь правки минимальны.

Шаг 2. Планшеты

На планшетах места становится значительно меньше. Здесь часто приходится:

* Уменьшать размер шрифта (Font Size). * Сужать текстовые блоки (уменьшать параметр Width у контейнера текста). * Перестраивать композицию. Например, если на ПК картинка и текст стояли рядом, на планшете их лучше поставить друг под другом.

Шаг 3. Мобильная версия (Самый сложный этап)

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

Ваши действия:

Выстройте элементы вертикально. На телефоне мы скроллим вниз, поэтому горизонтальные композиции работают плохо.

Уменьшите шрифты. Заголовок в 60px на телефоне займет пол-экрана. Уменьшите его до 30-36px. Основной текст лучше делать не меньше 14-16px для комфортного чтения.

Проверьте кнопки. Кнопка должна быть удобной для нажатия пальцем. Минимальная комфортная высота — 40-50px.

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

Инструменты для ускорения работы

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

Auto-Scale (Автомасштабирование)

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

Видимость элементов (Visible on...)

Иногда элемент, который шикарно смотрится на компьютере (например, сложное фоновое видео или огромная декоративная 3D-фигура), на телефоне просто мешает. Вы можете скрыть его.

Выделите элемент.

Откройте Settings.

Найдите раздел Devices (обычно в самом низу).

Выключите переключатель для мобильных устройств (например, Mobile: OFF).

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

> Совет: Часто для мобильной версии создают отдельный, упрощенный элемент. Например, скрывают «тяжелую» картинку для десктопа и показывают вместо неё «легкую» иконку, которая включена только на мобильных (Desktop: OFF, Mobile: ON).

Window Container на мобильных

В прошлой статье мы говорили про привязку к окну браузера (Window Container). На мобильных устройствах с этим нужно быть крайне осторожным. Экраны телефонов очень разные: от узких iPhone SE до широких Android-флагманов.

Если вы привяжете текст к левому краю окна (Left: 20px), на широком телефоне он будет выглядеть нормально, а на узком может наехать на другой контент. Для мобильных версий в 99% случаев безопаснее использовать Grid Container — привязку к центральной сетке.

Типографика и отступы: шпаргалка

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

| Элемент | Desktop (px) | Mobile (px) | | :--- | :--- | :--- | | Заголовок H1 | 60–90 | 32–40 | | Заголовок H2 | 40–50 | 24–28 | | Основной текст | 18–22 | 16–18 | | Подписи / Мелкий текст | 14–16 | 12–14 |

Также не забывайте про отступы (Padding). На десктопе мы любим «воздух» и делаем отступы между блоками по 150–200px. На мобильном телефоне такие дыры выглядят как ошибка загрузки. Сокращайте отступы между смысловыми блоками до 60–100px.

Проверка результата

То, что вы видите в редакторе Tilda, — это эмуляция. Всегда проверяйте сайт на реальном устройстве.

Опубликуйте страницу.

Откройте ссылку на своем смартфоне.

Попросите друга открыть на телефоне с другим размером экрана.

Обращайте внимание на: * Читаемость текста (не слишком ли мелко?). * Кликабельность кнопок (не перекрывают ли их другие слои?). * Отсутствие горизонтального скролла (сайт не должен двигаться влево-вправо).

Заключение

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

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

Финальные настройки: SEO-оптимизация, подключение домена, аналитика и публикация

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

Сайт, который не опубликован и не оптимизирован для поисковых систем — это как красивый магазин, построенный в глухом лесу без указателей. В этой финальной статье курса мы займемся «прокладкой дорог» к вашему проекту. Мы настроим SEO, чтобы вас любили Яндекс и Google, подключим красивое доменное имя, настроим аналитику и, наконец, нажмем заветную кнопку «Опубликовать».

SEO-оптимизация: как понравиться поисковикам

SEO (Search Engine Optimization) — это комплекс мер, который помогает поисковым системам понять, о чем ваш сайт, и показать его нужным людям. В Tilda базовые настройки SEO делаются на удивление просто и не требуют навыков программирования.

Мета-теги: Заголовок и Описание

У каждой страницы сайта есть два «паспорта», которые не видны на самом дизайне, но критически важны для поисковиков:

Title (Заголовок страницы). Это синяя ссылка, которую вы видите в результатах поиска Google или Яндекс. Также этот текст отображается на вкладке браузера.

Description (Описание страницы). Это небольшой текст под ссылкой в выдаче, кратко раскрывающий суть страницы.

!Сверху крупным синим шрифтом Title, под ним зеленым цветом адрес сайта, а ниже серым текстом Description (описание)

Как настроить: Перейдите в Настройки страницы (в редакторе страницы кнопка «Настройки» вверху) -> вкладка Главное. Заполните поля «Заголовок» и «Описание».

> Хороший Title содержит ключевой запрос и не превышает 60-70 символов. Хороший Description — это рекламное объявление длиной до 160-200 символов, призывающее кликнуть.

Иерархия заголовков (H1, H2, H3)

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

* H1 — Главный заголовок страницы. Он должен быть только один на странице. Обычно это заголовок на первом экране (Cover). * H2 — Заголовки смысловых разделов (например, «Наши услуги», «О компании», «Контакты»). * H3 — Подзаголовки внутри разделов.

Как настроить: В настройках любого текстового блока или в редакторе Zero Block выделите текст и выберите соответствующий тег (H1, H2 или H3). По умолчанию Tilda часто ставит тег div (простой текст) или H2. Обязательно проверьте, чтобы главный оффер на обложке имел тег H1.

Бейджик для соцсетей (Open Graph)

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

Как настроить: Настройки страницы -> Facebook и SEO. Здесь нажмите кнопку «Загрузить изображение» в разделе «Отображение в Facebook» (этот стандарт работает для всех соцсетей). Рекомендуемый размер картинки — 1200x630 пикселей.

Подключение домена

Пока вы работаете над сайтом, он доступен по техническому адресу вида project12345.tilda.ws. Это нормально для черновика, но несолидно для бизнеса. Вам нужен собственный домен, например, myshop.ru или portfolio.com.

Как работает подключение?

Домен — это просто запись в адресной книге интернета. Вам нужно сказать регистратору домена: «Когда кто-то вводит мой адрес, отправляй его на серверы Tilda».

Процесс состоит из двух этапов:

Покупка домена. Вы покупаете домен у регистратора (Reg.ru, Nic.ru, GoDaddy и др.) или прямо внутри Tilda (если оплачиваете тариф на год).

Настройка DNS-записей. Это самый технически сложный момент, но он делается один раз.

!Слева иконка пользователя, стрелка к иконке Регистратора домена, от него стрелка с надписью 'A-запись' к иконке Сервера Tilda с IP адресом 185.165.123.36

Вам нужно зайти в панель управления доменом на сайте регистратора и прописать A-запись (A-record). Значение этой записи должно указывать на IP-адрес Tilda: 185.165.123.36.

После того как вы прописали запись у регистратора:

Вернитесь в Tilda.

Зайдите в Настройки сайта -> Домен.

Введите ваш купленный адрес и нажмите «Сохранить».

> Важно: Обновление DNS-записей по всему миру может занимать до 24 часов. Если сайт не открылся мгновенно — это нормально, просто подождите.

HTTPS и SSL-сертификат

Видели замочек рядом с адресом сайта в браузере? Это значит, что соединение защищено (протокол HTTPS). Сайты без этого замочка помечаются браузерами как «Небезопасные», что отпугивает клиентов.

В Tilda сертификат подключается бесплатно и автоматически. После того как домен успешно привязался:

Зайдите в Настройки сайта -> SEO.

Найдите раздел Настройка HTTPS.

Включите тумблер и нажмите «Редактировать» -> «Получить сертификат» (Let's Encrypt).

Аналитика: держим руку на пульсе

Запустить сайт и не подключить аналитику — значит лететь с завязанными глазами. Вы не будете знать, сколько людей к вам заходит, откуда они и на каком этапе уходят.

Встроенная статистика Tilda

Для базового понимания ситуации достаточно внутренней статистики. Она находится в верхней панели управления проектом (кнопка Статистика).

Здесь вы увидите: * Количество сессий (визитов) и уникальных посетителей. * Источники переходов (соцсети, поиск, прямые заходы). * Географию пользователей. * Конверсию (если настроены формы заявок).

Яндекс.Метрика и Google Analytics

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

Создайте счетчик на сайте Яндекс.Метрики.

Скопируйте номер счетчика.

В Tilda перейдите в Настройки сайта -> Аналитика.

Вставьте номер в поле Яндекс.Метрика.

Сохраните изменения и обязательно опубликуйте все страницы сайта заново.

Финальный чек-лист перед запуском

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

1. Страница 404

Если пользователь ошибется в адресе страницы, он увидит стандартную ошибку браузера. Лучше создать свою красивую страницу ошибки 404 с кнопкой «Вернуться на главную». Создайте новую страницу, выберите шаблон «404» и укажите её в Настройки сайта -> Еще -> Страница 404.

2. Политика конфиденциальности

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

В Tilda это решается просто: * В настройках форм поставьте галочку «Согласие с политикой». * Создайте страницу с текстом политики (в библиотеке блоков есть готовый шаблон). * Разместите ссылку на эту страницу в «подвале» (Footer) сайта.

3. Фавикон (Favicon)

Это маленькая иконка, которая отображается на вкладке браузера перед названием страницы. Без неё сайт выглядит недоделанным (отображается пустой лист). Загрузить иконку можно в Настройки сайта -> Еще -> Favicon. Формат .ico или .png.

Публикация

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

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

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

Заключение курса

Мы прошли путь от знакомства с интерфейсом до публикации готового проекта. Вы научились: * Структурировать информацию. * Работать с готовыми блоками и создавать уникальный дизайн в Zero Block. * Адаптировать сайт под любые экраны. * Настраивать техническую часть для успешного запуска.

Tilda — это инструмент с низким порогом входа, но огромным потолком возможностей. Продолжайте экспериментировать, следите за трендами веб-дизайна и не бойтесь переделывать свои работы. Создание сайтов — это живой процесс. Удачи в ваших проектах!