Как создать сайт на Tilda: инструкция для новичков

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

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

• Доступны не все блоки из каталога конструктора.
• Нельзя подключить свой домен — опубликованный сайт будет располагаться по адресу вида site.tilda.ws.
• Можно создать только 1 проект с 50 страницами на 50 МБ дискового пространства.
• Нельзя убрать лейбл «Made on Tilda» внизу страницы.

Бесплатный тариф хорош, если вы хотите потренировать свои навыки создания сайтов на Tilda или делаете визитку/портфолио.

Для крупных сайтов, спецпроектов, интернет-магазинов, блогов потребуются возможности платных тарифов. Их два: Personal (750 р/мес) и Business (от 1200 р/мес). Между ними два ключевых отличия:

1. На Personal можно создать только 1 проект с 500 страницами на 1 ГБ дискового пространства, на Busines — 5 проектов с аналогичными параметрами.
2. На Business поддерживается экспорт кода. Это значит, что вы можете создать страницу на Тильде, а затем интегрировать её с другим сайтом, используя различные сценарии публикации.

У тарифа Business есть несколько пакетов услуг, которые отличаются только количеством доступных проектов. Максимум на одной учётной записи можно создать до 30 сайтов.

Совет: если вам нужен один сайт и не требуется экспорт кода, выбирайте тариф Personal. По функциональности он ничем не уступает тарифу Business.

Создание проекта

После авторизации на Tilda вы попадаете в панель управления, которая называется «Мои сайты». Здесь будут ссылки на все ваши проекты.

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

В панели управления появился первый проект. Это наш будущий сайт, но у него пока нет ни одной страницы. Исправим это.

Создание страниц

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

Главная задача сейчас — создать и настроить первую страницу.

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

• «Бизнес» — шаблоны для сайтов-визиток, портфолио, страниц корпоративных порталов.
• «Магазин» — шаблоны для страниц интернет-магазинов.
• «Событие» — макеты для лендингов и отчётов о мероприятиях.
• «Блог» — примеры структуры для записей в блог и спецпроектов в СМИ.
• «Контакты» — шаблоны для страницы с контактными данными.
• «Анкеты» — свёрстанные макеты различных опросников и форм регистрации.
• «Внутренние» — несколько вариантов внутренних разделов многостраничных сайтов: те же контактные данные, сведения о компании, новости, вопросы.

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

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

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

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

В редакторе Тильды используется bootstrap-сетка из 12 столбцов. По ней вы будете выравнивать контент. Страница верстается строго вертикально. Вы добавляете блоки один за другим и меняете очередность их появления на экране при скролле.

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

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

1. Настройки — здесь вы указываете ширину блока, размер отступов, выравнивание, выбираете анимацию, управляете цветами, размером шрифта.
2. Контент — здесь вы вставляете текст, заменяете фотографии и делаете для них подписи, наполняете галереи.

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

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

Перед публикацией страницы нажмите на кнопку «Настройки». Вам нужно заполнить несколько важных полей.

• Заголовок — это название страницы, которое будет отображаться в поисковой выдаче, на вкладке в браузере, при публикации ссылки в соцсетях и отправке через мессенджеры.
• Описание — информация о том, какой контент размещён на странице. Описание тоже выводится в поисковой выдаче и при публикации ссылки на страницу.
• Адрес — уникальный URL, который ведёт на страницу.

На вкладке «Бейджик» вы можете выбрать изображение, которое будет использоваться при публикации ссылки на страницу. Отображение в Фейсбуке и поисковой выдаче настраивается на одноимённой вкладке. Можно использовать заголовок и описания, добавленные на вкладке «Главное», или задать специальные метаданные.

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

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

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

Работа с Zero Block

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

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

В Zero Block можно добавить следующие элементы:

• Текст
• Изображение
• Геометрическую фигуру
• Кнопку
• Видео
• Всплывающую подсказку
• Блок для вставки HTML-кода
• Форму
• Галерею

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

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

Главное преимущество Zero Block — пошаговая анимация. Именно благодаря ей он стал таким популярным инструментом среди дизайнеров. Пошаговая анимация позволяет создавать интерактивные сайты, которые стали визитной карточкой конструктора Tilda.

Настройка анимации

Конструктор предлагает два типа анимации:

• Basic Animation — стандартные эффекты. Например, фиксация, параллакс или плавное появление блока на странице.
• Step-by-step Animation — пошаговое изменение состояния элемента для создания уникального поведения.

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

Пошаговая анимация настраивается только в редакторе Zero Block. Её можно применить к любому элементу интерфейса. В настройках есть раздел «Step by Step Animation». Чтобы приступить к добавлению шагов, нажмите «Add».

Для начала нужно выбрать условия старта анимации. Всего их пять:

• Element on Screen — старт при отображении элемента.
• Block on Screen — старт при отображении блока.
• On Scroll — анимация работает только во время скролла.
• On Hover — старт при наведении курсора.
• On Click — старт анимации по клику.

У начала также есть три дополнительные настройки:

• Start Trigger — привязка анимации к области, при появлении которой будет срабатывать условие (верх, центр или низ окна).
• Trigger Offset — смещение старта анимации относительно триггера.
• Loop — зацикливание проигрывания.

Чтобы посмотреть, как это работает, используйте кнопки «Play Element» и «Play All». В первом случае проигрывается анимация выбранного элемента, во втором — поведение всех элементов, которые есть на экране. Но прежде чем запускать предварительный просмотр, нужно настроить шаги — то есть показать конструктору все этапы анимации.

Шаги добавляются кнопкой «Add Step». Дальше нужно изменить состояние элемента. Всего есть 7 свойств:

1. Duration — продолжительность воспроизведения анимации. Если включено зацикливание (Loop), то после завершения анимация запускается заново.
2. Move — местоположение элемента. Можно задавать его конкретными значениями или просто передвигать элемент мышкой.
3. Scale — размер.
4. Opacity — прозрачность.
5. Rotate — поворот элемента.
6. Easing — выбор эффекта воспроизведения: Linear — линейное, easeIn — замедление на старте, easeOut — замедление перед винишем, easeInOut — замедление на старте и перед финишем, bounceFin — небольшой рывок перед началом анимации.
7. Delay — задержка перед воспроизведением.

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

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

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

Подготовка сайта к публикации

У нас есть готовый проект со всеми свёрстанными страницами. Осталось подготовить его к публикации — подключить домен, проверить настройки, добавить счётчики от Яндекса и Google для сбора статистики.

При создании сайта мы указали только его название. Теперь нужно заполнить остальные важные поля. Для этого нажмите на кнопку «Настройка сайта». Откроется знакомое окно, в котором нужно выполнить следующие действия:

1. На вкладке «Главное» добавьте описание сайта — эта информация будет отображаться при публикации ссылки в соцсетях и мессенджерах.
2. На вкладке «Главная страница» выберите, какую страницу пользователь будет видеть первой при открытии сайта.
3. На вкладке «Домен» подключите свой домен (подробнее о том, как это сделать, чуть ниже).
4. На вкладке «Аналитика» подключите инструменты от Google и Яндекса. Можно указать номер счётчика, который отображается в кабинете на сервисе аналитики, или нажать на кнопку «Подключить» и разрешить Tilda Publishing доступ к аккаунту.
5. На вкладке «SEO» нажмите на кнопку «Посмотреть» в разделе «SEO-рекомендации». Мастер проверит все страницы и выдаст рекомендации по их оптимизации. Здесь же можно подключить Google Search Console и Яндекс.Вебмастер.
6. На вкладке «Шапка и подвал» выберите созданные хедер и футер, которые должны отображаться на каждой странице (актуально для многостраничных проектов).
7. На вкладке «Ещё» загрузите фавикон (в противном случае в браузере будет отображаться значок Тильды), измените цвет или уберите лейбл (пункт Platform Label), укажите страницу 404.

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

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

На платных тарифах можно добавить на сайт домен. Его придётся регистрировать на других площадках. Чтобы привязать домен к сайту, нужно в его настройках добавить запись А и указать в ней IP-адрес 185.165.123.36.

Для поддомена или домена с www создаётся ещё одна запись А с адресом 185.165.123.36.

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

Сценарии публикации

На Tilda есть 7 сценариев публикации. Количество доступных вариантов зависит от того, какой у вас тарифный план.

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

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

Ещё один вариант — подключение субдомена. Например, у вас есть интернет-магазин на CMS, но вы хотите дополнить его спецпроектом с рассказом о брендах одежды. Вы создаёте субдомен — например, special.myshop.ru. Затем подключаете его к проекту на Tilda. После обновления записей DNS контент, свёрстанный на конструкторе, будет доступен по привязанному субдомену. В обоих случаях все данные хранятся на сервере Tilda.

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

1. Вы верстаете проект на Тильде, а затем берёте весь код и размещаете его на своем сайте. Это может быть весь проект или только его часть — например, отдельные страницы со специальным оформлением.
2. Более продвинутый вариант — полная интеграция с сайтом. Вы создаёте контент на Тильде, а затем экспортируете код и получаете проект с элементами стиля основного сайта.
3. Ещё более сложный подход — автоматическая интеграция через API. Вы создаёте контент на Tilda, затем публикуете его, и он появляется на основном сайте, вписываясь в его макет. Настройка этого варианта требует участия веб-разработчиков.
4. Интеграция с сайтом на WordPress с помощью плагина — та же интеграция, только максимально удобная благодаря расширению, созданному разработчиками Tilda.

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

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

Вывод

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

Для создания интерактивных сайтов с впечатляющей анимацией и уникальным дизайном разработчики используют мощный Zero Block. Чтобы создавать в нём привлекательные и функциональные блоки, нужно пройти обучение. В справке Tilda даже есть бесплатный учебник с видеоуроками, объясняющими основные операции. Если времени на обучение нет, то можно первое время обходиться стандартными блоками. В них тоже есть анимация, пусть и не такая интересная, как в настройках Zero Block.

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