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

Введение в Tilda: обзор интерфейса, регистрация аккаунта и выбор структуры сайта

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

Что такое Tilda Publishing?

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

Ключевые особенности Tilda:

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

Шаг 1. Регистрация аккаунта

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

Перейдите на официальный сайт Tilda Publishing.

Нажмите кнопку Регистрация в правом верхнем углу.

Введите ваше имя, электронную почту и придумайте пароль.

Нажмите Зарегистрироваться.

> Tilda часто предлагает новым пользователям 2 недели бесплатного доступа к тарифу Personal. Это отличная возможность протестировать все платные функции, такие как подключение своего домена или использование блоков из категории «Магазин».

Тарифные планы

Вам не обязательно сразу платить. У Tilda есть бесплатный тариф Free, но он имеет ограничения: нельзя подключить свой домен (адрес сайта будет вида projectname.tilda.ws), недоступны некоторые блоки и формы сбора данных. Для обучения на этом курсе нам по большей части хватит бесплатного функционала, но для реального проекта обычно требуется тариф Personal.

Шаг 2. Обзор интерфейса

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

!Схема главной панели управления (Дашборда) в Tilda

Главная панель (Дашборд)

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

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

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

После создания проекта вы увидите кнопку Настройки сайта. Это «центр управления полетами». Здесь находятся:

* Главное: Название и описание сайта. * Шрифты и цвета: Здесь задаются глобальные настройки шрифтов для всего проекта. Вы можете выбрать готовые пары из библиотеки или загрузить свои. * Домен: Сюда мы вернемся, когда будем подключать красивое имя сайта (например, mysite.ru). * Аналитика: Подключение счетчиков Яндекс.Метрики и Google Analytics. * Еще: Здесь можно загрузить фавикон (значок сайта во вкладке браузера) и настроить страницу 404.

Редактор страницы

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

Интерфейс редактора состоит из следующих элементов:

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

Управление блоком (при наведении). Когда вы наводите курсор на любой блок, слева и справа появляются кнопки управления.

Самые важные кнопки в редакторе:

Настройки (Settings). Отвечает за внешний вид*. Здесь меняются отступы, цвет фона, выравнивание, типографика, анимация. Контент (Content). Отвечает за содержание*. Здесь вы меняете текст, загружаете фотографии, вставляете ссылки.

!Элементы управления блоком: Настройки и Контент

Шаг 3. Выбор структуры сайта

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

Типы структур

Существует два основных подхода к структуре сайта на Tilda:

Лендинг (Landing Page) или Одностраничный сайт.

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

Многостраничный сайт.

Классический сайт, где каждый раздел (О нас, Услуги, Контакты, Блог) находится на отдельной странице. Ссылки в меню ведут на новые URL-адреса. Для чего подходит:* Корпоративные сайты, интернет-магазины с каталогом, онлайн-школы, СМИ.

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

Не пытайтесь делать это сразу в Tilda. Возьмите лист бумаги или откройте заметки.

Пример простой структуры для сайта фотографа:

Первый экран (Обложка): Кто я, уникальное предложение, кнопка «Заказать съемку».

Обо мне: Краткая биография и фото автора.

Портфолио: Галерея лучших работ (свадьбы, портреты, репортаж).

Услуги и цены: Карточки с тарифами.

Отзывы: Слайдер с комментариями клиентов.

Контакты: Телефон, соцсети, форма обратной связи.

!Сравнение структуры многостраничного сайта и лендинга

Практическое задание: Подготовка

В рамках этого курса мы будем создавать сайт-визитку (портфолио). Это универсальный формат, который позволит изучить 90% функционала Tilda.

Ваша задача сейчас — не просто прочитать, а выполнить действия:

Зарегистрируйтесь на Tilda.

Создайте новый проект и назовите его «Мой первый сайт».

Зайдите в Настройки сайта -> Шрифты и цвета и выберите шрифтовую пару, которая вам нравится (например, Roboto + Georgia).

Создайте пустую страницу и сохраните её.

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

Частые ошибки новичков

* Игнорирование мобильной версии. Tilda делает адаптив автоматически, но всегда нужно проверять, как ваш текст смотрится на узком экране. В редакторе сверху есть переключатель видов устройств. * Слишком много стилей. Не используйте больше 2-3 шрифтов и 3-4 основных цветов на сайте. Это делает дизайн «грязным». * Отсутствие воздуха. Не бойтесь оставлять пустое пространство (белый фон) между блоками. Это помогает читателю воспринимать информацию.

Теперь, когда у вас есть аккаунт и понимание интерфейса, вы готовы к строительству. До встречи в следующем уроке!

Основы верстки: работа со стандартной библиотекой блоков, контентом и типографикой

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

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

Логика библиотеки блоков Tilda

Как мы уже упоминали, сайт на Tilda собирается как конструктор LEGO. Библиотека блоков — это ваш набор деталей. Она содержит более 500 готовых решений, разделенных на категории.

Чтобы открыть библиотеку, нажмите на значок (+) (плюс) в любом месте страницы или кнопку Все блоки внизу экрана.

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

Хотя категорий много, 80% работы строится на использовании нескольких базовых разделов:

Обложка (Cover). Это первый экран сайта. Самый важный блок, который пользователь видит при загрузке. Обычно содержит заголовок, подзаголовок, фоновое изображение и кнопку целевого действия (например, «Купить» или «Узнать больше»).

О проекте (About). Блоки для текстового описания компании или персоны.

Заголовок (Title). Отдельные блоки для разделения смысловых секций.

Текстовый блок (Text). Для основного контента статьи или описания.

Изображение (Image) и Галерея (Gallery). Для визуального контента.

Колонки (Columns). Удобны для размещения преимуществ или этапов работы.

!Меню выбора блоков в левой части экрана редактора

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

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

1. Контент (Content)

Эта вкладка отвечает за смысл. Здесь вы:

* Пишете тексты заголовков и описаний. * Загружаете фотографии и иконки. * Указываете ссылки для кнопок. * Добавляете пункты в списки (например, карточки товаров).

> Важно: Хотя текст можно редактировать прямо на странице, кликнув по нему курсором, я рекомендую использовать вкладку «Контент» для загрузки изображений и работы со сложными структурами (карточки, слайдеры).

2. Настройки (Settings)

Эта вкладка отвечает за внешний вид. Здесь вы:

* Меняете выравнивание (слева, по центру, справа). * Настраиваете ширину блока (количество колонок). * Задаете цвет фона и типографику. * Управляете отступами (воздухом). * Настраиваете анимацию появления.

!Панель управления блоком при наведении курсора

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

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

Иерархия заголовков

В веб-дизайне существует строгая иерархия заголовков, которая важна не только для визуального восприятия, но и для SEO (продвижения в поисковиках).

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

В настройках блока (раздел «Типографика») вы всегда можете назначить тег заголовка. Следите, чтобы иерархия не нарушалась: за H1 всегда следует H2, за H2 — H3.

Ширина строки и читаемость

Одна из частых ошибок новичков — делать текстовые блоки во всю ширину экрана. Человеческому глазу трудно читать длинные строки: приходится постоянно вертеть головой или терять строчку при переходе взгляда.

Золотое правило: Оптимальная ширина строки составляет 60–80 символов (примерно 8–10 колонок в сетке Tilda). Не растягивайте основной текст на 12 колонок, если его много.

Сетка и отступы: создаем «воздух»

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

12-колоночная сетка

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

В настройках любого блока вы увидите параметр Ширина блока (в колонках) и Отступ слева (в колонках).

* Если вы поставите ширину 12 колонок — контент займет всю полезную ширину. * Если поставите 8 колонок и отступ 2 колонки слева — контент встанет ровно по центру, оставляя приятные поля по краям.

!Визуализация структуры страницы с вертикальными направляющими

Вертикальные отступы (Padding)

Никогда не лепите блоки друг к другу. Заголовок нового раздела не должен «прилипать» к предыдущему тексту.

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

Рекомендации:

* Стандартный отступ между смысловыми блоками: 120px – 150px. * Минимальный отступ: 90px. * Внутри одного смыслового блока отступы могут быть меньше (например, 30–60px).

Не бойтесь пустого места. Оно помогает пользователю «выдохнуть» перед новой порцией информации.

Работа с изображениями

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

Форматы. Для фотографий используйте JPG. Для графики с прозрачным фоном (логотипы, иконки) — PNG или SVG.

Вес файла. Старайтесь не загружать изображения весом более 1 Мб (для обложек) и 300–500 Кб (для обычных фото). Tilda автоматически оптимизирует картинки, но исходник лучше сжимать заранее (например, через сервисы TinyPNG).

Качество. Избегайте размытых, пиксельных изображений и стоковых фото с «искусственными» улыбающимися людьми. Живые, настоящие фото (даже снятые на телефон) часто работают лучше.

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

Давайте применим теорию на практике. Вернитесь к вашему проекту «Мой первый сайт».

Добавьте обложку. Выберите блок из категории «Обложка» (например, CR01). Загрузите туда красивое фоновое фото, напишите заголовок (H1) «Мое портфолио» и подзаголовок с вашей профессией.

Добавьте рассказ о себе. Используйте блок из категории «О проекте» (например, AB01). Напишите 2–3 абзаца текста. В настройках установите ширину текста 8 колонок и отступ слева 2 колонки (чтобы текст был по центру).

Настройте отступы. Зайдите в Настройки текстового блока и установите отступ сверху 150px и снизу 150px.

Добавьте контакты. Выберите блок из категории «Контакты» (например, CN01) и заполните свои данные.

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

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

Продвинутый дизайн в Zero Block: создание уникальных элементов и настройка анимации

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

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

Сегодня мы переходим от «сборки конструктора» к настоящему веб-дизайну и верстке.

Что такое Zero Block?

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

Ключевые отличия от стандартных блоков:

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

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

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

После добавления блока нажмите кнопку Редактировать блок (Edit Block). Откроется новый интерфейс с черным фоном вокруг рабочей области.

!Обзор интерфейса редактора Zero Block: рабочая область, инструменты и настройки

Основные элементы управления

Верхняя панель (+). Здесь вы добавляете элементы на холст:

* Text — текстовый блок. * Image — изображение. * Shape — геометрическая фигура (квадрат, круг, линия). * Button — кнопка. * Video — видеоплеер. * Tooltip — всплывающая подсказка. * HTML — код (для продвинутых пользователей). * Form — форма сбора данных.

Панель настроек (Settings) справа. Это ваш главный пульт управления. Здесь задаются координаты (, ), размеры (, ), цвет, прозрачность, шрифты и выравнивание.

Слои (Layers). Чтобы открыть список слоев, нажмите кнопку Layers в нижней панели или горячую клавишу F. Это критически важно, когда у вас много элементов, и одни перекрывают другие.

Работа с сеткой и позиционированием

В Zero Block, как и во всей Tilda, используется 12-колоночная сетка. По умолчанию ширина рабочей области (Grid Container) составляет 1160 пикселей.

Grid Container vs Window Container

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

* Grid Container: Элемент привязан к центральной части сайта (сетке). Если экран монитора очень широкий, элемент останется в центре. Это безопасно и рекомендуется для текстов. * Window Container: Элемент привязан к краям окна браузера (в процентах или пикселях). Используется для фоновых изображений, меню, прилипающих к краю, или декоративных элементов, уходящих «за обрез».

> Совет: Если вы новичок, старайтесь держать весь важный контент (текст, кнопки) внутри Grid Container (между направляющими линиями), чтобы он гарантированно отображался корректно на всех ноутбуках.

Адаптивность: 5 экранов

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

Сверху над рабочей областью вы видите иконки устройств:

Desktop (1200px+) — компьютеры.

Laptop (960–1200px) — ноутбуки и планшеты горизонтально.

Tablet (640–960px) — планшеты вертикально.

Phone Landscape (480–640px) — смартфоны горизонтально.

Phone Portrait (320–480px) — смартфоны вертикально.

!Пять уровней адаптивности (брейкпоинтов) в Zero Block

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

Алгоритм работы:

Сверстайте идеальный блок на Desktop.

Переключитесь на Laptop. Поправьте съехавшие элементы, уменьшите шрифт, если нужно.

Переключитесь на Tablet. Повторите.

И так до самого маленького экрана мобильного.

Анимация в Zero Block

Анимация оживляет сайт, направляет внимание пользователя и создает «вау-эффект». В Tilda есть два типа анимации.

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

Простые эффекты появления элементов при загрузке страницы или скролле. Настраивается внизу панели Settings.

* Animation: Fade In (появление), Slide Up (выезд снизу), Zoom In (увеличение) и т.д. * Duration: Длительность анимации. * Delay: Задержка перед началом.

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

2. Step-by-Step Animation (Пошаговая анимация)

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

Чтобы включить её, нажмите Edit напротив пункта Step-by-Step Animation.

Основные понятия SBS-анимации:

* Event (Триггер): Какое событие запускает анимацию? * On Scroll — при скролле страницы (самый популярный вариант для параллакса). * On Hover — при наведении мыши. * On Click — при клике. * Element on Screen — когда элемент появляется на экране.

* Steps (Шаги): Вы создаете ключевые кадры. Например: Шаг 1:* Элемент находится в точке А, прозрачность 0%. Шаг 2:* Через 200 пикселей скролла элемент перемещается в точку Б, прозрачность 100%.

!Принцип работы Step-by-Step анимации: изменение свойств объекта между шагами

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

Практические советы для работы в Zero Block

Группировка. Выделите несколько элементов и нажмите Ctrl + G (или Cmd + G на Mac). Это позволит двигать и выравнивать их как единое целое.

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

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

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

Заключение

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

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

А пока — переходите к домашнему заданию, чтобы закрепить знания о Zero Block!

Адаптивность и техническая оптимизация: мобильная версия сайта и базовое SEO

Поздравляю! Вы уже прошли большой путь: от регистрации аккаунта до верстки сложных дизайн-концепций в Zero Block. Ваш сайт выглядит красиво на экране вашего ноутбука. Но как он будет выглядеть на смартфоне в метро? И самое главное — как люди найдут ваш сайт в Google или Яндексе?

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

Часть 1. Адаптивность: почему это критически важно

Статистика неумолима: более 60% трафика в интернете приходится на мобильные устройства. Если ваш сайт неудобно читать с телефона, пользователь закроет его через 3 секунды. В Tilda адаптивность реализована двумя способами, в зависимости от того, какие блоки вы используете.

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

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

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

Однако, автоматика не всегда идеальна. Иногда шрифт кажется слишком крупным, или отступы — гигантскими. Как это исправить?

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

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

Прием «Дублирование и скрытие»

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

В Tilda есть мощный инструмент: ограничение видимости блока по ширине экрана.

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

Зайдите в Настройки блока.

Найдите раздел Диапазон видимости на устройствах.

Ползунком выберите, на каких экранах показывать этот блок.

Сценарий использования: У вас есть сложная инфографика. На компьютере она смотрится шикарно. На телефоне — мелко и непонятно. * Шаг 1: Создаете блок с инфографикой и в настройках ставите видимость: от 980px до макс (только ПК). * Шаг 2: Создаете новый блок, где та же информация подана простым списком или текстом. В настройках ставите видимость: от 0 до 980px (только планшеты и телефоны).

Таким образом, пользователи ПК увидят графику, а пользователи телефонов — текст. Сайт будет удобен для всех.

Адаптивность в Zero Block

Как мы обсуждали в предыдущем уроке, Zero Block не адаптируется сам. Это ваша зона ответственности. Если вы нарисовали дизайн для Desktop, но не настроили остальные 4 экрана (Laptop, Tablet, Mobile Landscape, Mobile Portrait), на телефоне все элементы могут «уехать» за край или наслоиться друг на друга.

Чек-лист проверки Zero Block: * Текст не выходит за границы экрана (нет горизонтального скролла). * Кнопки достаточно крупные, чтобы нажать пальцем (минимум 40-50px в высоту). * Шрифт основного текста не меньше 14-16px. * Элементы не перекрывают друг друга.

Часть 2. Базовое SEO: как подружиться с поисковиками

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

Мета-теги: Title и Description

Это то, что видит пользователь в результатах выдачи Google или Яндекс еще до того, как перейдет на ваш сайт.

!Структура сниппета в поисковой выдаче: заголовок, ссылка и описание

Чтобы настроить их:

Нажмите Настройки страницы (вверху редактора).

Перейдите во вкладку Главное.

* Заголовок (Title): Самая важная строка. Должна содержать ключевой запрос. Плохо:* «Главная» Хорошо:* «Свадебный фотограф в Москве | Портфолио Ивана Петрова» * Описание (Description): Краткий анонс (сниппет). Он должен привлекать внимание и отвечать на вопрос «О чем эта страница?». Пример:* «Профессиональная фотосъемка свадеб, love-story и семейных праздников. Опыт 10 лет. Первые фото через 3 дня. Посмотрите портфолио!»

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

Когда вы отправляете ссылку на сайт в Telegram, WhatsApp или ВКонтакте, подтягивается красивая картинка и текст. Если это не настроить, соцсеть подтянет случайное фото или логотип Tilda.

В Настройках страницы перейдите во вкладку Соцсети (Facebook and SEO).

Загрузите специальное изображение (рекомендуемый размер 1200x630 px).

Укажите заголовок и описание (обычно дублируют SEO-теги).

Человекопонятные URL (ЧПУ)

По умолчанию адрес вашей страницы выглядит так: mysite.tilda.ws/page1234567. Это некрасиво и непонятно поисковикам.

В Настройках страницы в поле Адрес страницы задайте понятное имя на латинице: * Для страницы «О нас»: about * Для контактов: contacts * Для портфолио: portfolio

Тогда ссылка станет красивой: mysite.ru/contacts.

Теги заголовков (H1, H2, H3)

Мы говорили об этом во втором уроке, но для SEO это критично. Роботы Google сканируют структуру вашего текста.

* H1 — должен быть один на странице. Это название всей страницы. * H2 — названия смысловых блоков. * H3 — подзаголовки внутри блоков.

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

Альт-текст для изображений (Alt)

Поисковики не умеют «смотреть» картинки, они их читают. Атрибут Alt — это текстовое описание изображения.

Нажмите на блок с изображением -> Контент.

Рядом с загруженным фото нажмите на иконку «троеточие» или «карандаш».

В поле SEO: Alt напишите, что изображено на фото.

Пример:* «Свадебная фотосессия в парке Горького».

Это поможет вашим картинкам попасть в поиск по картинкам (Google Images).

Часть 3. Техническая оптимизация

Эти настройки делаются один раз для всего проекта в разделе Настройки сайта.

Фавикон (Favicon)

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

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

Загрузите файл формата .ico или .png.

Страница 404

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

HTTPS и домен

Для серьезного проекта нужен свой домен (например, mysite.ru). После покупки и подключения домена (это делается в разделе Домен), обязательно настройте HTTPS.

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

В Tilda сертификат подключается бесплатно в разделе SEO -> Настройка HTTPS.

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

Вернемся к вашему проекту «Мой первый сайт».

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

Пропишите мета-теги. Для главной страницы задайте Title и Description. Придумайте привлекательное описание.

Настройте URL. Замените pageXXXXXX на home или index для главной, и понятные слова для остальных страниц.

Загрузите бейджик. Найдите или сделайте картинку для соцсетей и загрузите её в настройки страницы.

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

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

Запуск проекта: подключение домена, настройка форм приема данных и публикация

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

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

Настройка приема данных (Формы и CRM)

Сайт-визитка или лендинг редко создаются просто «чтобы было». Обычно цель — получить контакт потенциального клиента (лида). В Tilda за это отвечают блоки с формами. Но куда уходят данные после того, как пользователь нажал кнопку «Отправить»?

По умолчанию данные никуда не сохраняются, пока вы не подключите приемщик данных.

!Схема маршрутизации заявки от пользователя к владельцу сайта

Шаг 1. Выбор сервиса приема данных

Перейдите в Настройки сайта -> Формы. Здесь вы увидите список всех доступных интеграций. Самые популярные варианты:

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

Google Таблицы. Данные автоматически попадают в таблицу (Excel-формат). Удобно для анализа и совместной работы.

Telegram. Мгновенные уведомления о новых заказах прямо в мессенджер.

Tilda CRM. Встроенная бесплатная система управления клиентами внутри Tilda. Это профессиональный инструмент, где можно менять статусы заявок (например, «Новый», «В работе», «Оплачено»), создавать карточки клиентов и смотреть статистику.

> Я настоятельно рекомендую подключить Tilda CRM как основной источник хранения данных и Telegram для оперативных уведомлений.

Шаг 2. Подключение сервиса к сайту

Рассмотрим на примере Email:

В разделе Формы выберите Email.

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

Перейдите в редактор вашей страницы.

Нажмите кнопку Контент у блока с формой.

Вверху вы увидите чек-бокс (галочку) напротив подключенного Email. Обязательно поставьте эту галочку!

Нажмите «Сохранить и закрыть».

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

Подключение собственного домена

Сейчас адрес вашего сайта выглядит примерно так: project12345.tilda.ws. Это технический поддомен. Для серьезного проекта нужен собственный домен второго уровня, например, mysite.ru или mycompany.com.

Что такое домен и DNS?

Домен — это уникальный адрес в интернете. Вы арендуете его у регистратора (например, Reg.ru, Nic.ru, GoDaddy) обычно на 1 год с правом продления.

Чтобы при вводе вашего домена открывался сайт на Tilda, нужно настроить DNS-записи (Domain Name System). Грубо говоря, нужно сказать всему интернету: «Тот, кто ищет mysite.ru, должен идти на сервер Tilda».

Инструкция по подключению

Процесс состоит из двух этапов: настройки на стороне регистратора и настройки в Tilda.

Этап 1. На стороне регистратора домена

Зайдите в личный кабинет на сайте, где вы купили домен.

Найдите раздел «Управление DNS» или «Настройка зоны».

Вам нужно изменить (или создать) запись типа A (A-record).

Укажите IP-адрес Tilda: 185.215.100.100.

!Пример настройки A-записи для подключения домена

Этап 2. В настройках Tilda

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

Введите ваше купленное имя (например, mysite.ru) и нажмите «Сохранить».

Система проверит настройки. Если вы только что прописали A-запись у регистратора, Tilda может сказать «Домен не подключен». Не паникуйте. Обновление DNS по всему миру занимает от 3 до 24 часов.

Настройка HTTPS (SSL-сертификат)

Современный сайт обязан работать по защищенному протоколу HTTPS. Браузеры помечают такие сайты значком «замочка». Сайты без HTTPS помечаются как «Небезопасные», что отпугивает посетителей.

В Tilda сертификат подключается бесплатно:

В Настройках сайта перейдите в раздел SEO (или иногда это вынесено в раздел Домен).

Найдите пункт Настройка HTTPS.

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

Сертификат выдается автоматически, но это может занять от 30 минут до нескольких часов после того, как домен окончательно «привяжется».

Финальная проверка перед запуском (Pre-flight check)

Прежде чем рассказывать о сайте миру, пройдитесь по чек-листу:

Фавикон. Загружен ли значок сайта? (Настройки сайта -> Еще).

Страница 404. Настроена ли страница ошибки? (Настройки сайта -> Еще).

Политика конфиденциальности. Если у вас есть формы сбора данных, по закону вы обязаны разместить ссылку на политику обработки персональных данных и галочку «Я согласен» в форме. В Tilda это настраивается в разделе «Формы».

Тестовая заявка. Обязательно сами заполните форму на сайте и проверьте, пришло ли письмо/уведомление.

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

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

* Редактор: Здесь вы вносите изменения. Они сохраняются автоматически, но посетители их не видят. * Опубликованный сайт: Версия, доступная пользователям в интернете.

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

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

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

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

Что дальше?

Аналитика. Подключите Яндекс.Метрику, чтобы следить за посещаемостью.

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

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

Спасибо, что были с нами на этом курсе. Желаю вашему проекту высоких конверсий и стабильной работы!