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

Обновили в 2022 году.

Этот сайт целиком построен на Tilda

Почему стоит выбрать Tilda

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

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

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

Примеры созданных с помощью конструктора ресурсов можно найти в разделе MadeOnTilda на официальном сайте проекта. Обратите внимание на пример интеграции «Тильды» и WordPress. «Лайфхакер» использует конструктор для создания лонгридов, а основной сайт проекта работает на WP.

Пример интеграции одного движка в Tilida

У Tilda есть недостатки, которые будут рассмотрены ниже. Но главный из них нужно обсудить сразу.

Стоимость

Пользователям доступны три тарифных плана: Free, Personal и Business.

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

Важный момент: пользователи бесплатного тарифа могут зарегистрировать сайт только на поддомене. URL выглядит так: vash-site.tilda.ws. Это не влияет ни на пользовательский опыт, ни даже на доверие к сайту со стороны поисковых систем.

Для корпоративного сайта, контент-проекта, интернет-магазина лучше использовать тарифный план Personal за 500 рублей в месяц. После оплаты пользователь получает доменное имя в зоне .ru или .com, возможность создать до 500 страниц и использовать 1 Гб дискового пространства. Также платный тариф открывает полный доступ к библиотеке модулей.

Доступ к конструктору стоит 6 000 рублей в год. Это неоправданно дорого. Полноценный сайт на любой CMS, например, WordPress, Joomla!, Drupal, OpenCart, обойдется гораздо дешевле.

Например, один из ведущих хостинг-провайдеров рунета, по состоянию на начало 2022 года, предлагает услугу виртуального хостинга за 1 545 рублей в год. Бонусом пользователь получает четыре домена в зонах .ru и .рф и бесплатный SSL-сертификат.

Тариф Business включает все возможности Personal. Дополнительно пользователь может создавать до пяти сайтов. Главное отличие – возможность экспортировать код и установить Tilda на свой сервер.

За подключение по тарифу Business нужно платить 1 000 рублей в месяц. Обратите внимание, услуги хостинг-провайдера нужно оплачивать отдельно.

Выбор тарифа зависит от формата сайта и потребностей владельца.

Тариф & Характеристики	Цена в год	Возможности	Кому подходит
Free	Бесплатно	Сайт на поддомене, до 50 страниц, до 50 Мб на диске	Фрилансерам, которым нужен небольшой сайт-визитка
Personal	6000 рублей	Сайт на платном домене, до 500 страниц, 1 Гб на диске, полный доступ к библиотеке модулей	Блогерам, издателям, компаниям, E-коммерсантам
Business	12 000 рублей	Возможности тарифа Personal, опция экспорта кода, до 5 сайтов на одном аккаунте	Никому. На сервер лучше установить CMS с открытым кодом. Даже некоторые коммерческие CMS обойдутся дешевле

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

Начните с планирования

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

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

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

Полезная информация есть в наших гайдах и статьях:

• «Как обеспечить читабельность контента».
• «Визуальная иерархия в UX: как направить внимание пользователя».
• «Как написать, оптимизировать и сверстать статью».

Если вы решили делать страницы с нуля с помощью библиотеки блоков, начните с создания прототипов. Используйте Axure RP или другие инструменты прототипирования. Эскизы страниц можно нарисовать и на бумаге. А в крайнем случае просто перечислите блоки, которые должны быть на каждой странице. Второй способ подойдет тем, кто не доверяет собственному вкусу и не имеет ни малейшего представления о дизайне, функциональности и юзабилити сайтов.

Воспользуйтесь готовыми шаблонами страниц из библиотеки. В каталоге они объединяются по тематическим категориям: «Бизнес», «Магазин», «Событие», «Блог», «Контакты» и «Анкета».

Окно создания новой страницы

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

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

Результатом планирования должно стать четкое представление о будущем сайте. Запишите как минимум следующую информацию:

• цель и задачи работы ресурса;
• структуру сайта: список и иерархию страниц;
• функциональность и дизайн основных страниц.

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

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

Что такое семантическое ядро и как его составлять

Как настроить сайт на Tilda: базовые опции

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

Нажмите кнопку «Активировать»

Перейдите в раздел «Мои сайты», создайте новый ресурс и укажите его название.

Нажмите кнопку «Создать новый сайт»

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

Заполняем название, описание и выбираем домен

Перейдите в разделы «Аналитика» и «SEO» и подключите сайт к системам «Яндекс.Метрика» и Google Analytics. В этом же разделе можно добавить на сайт контейнер Google Tag Manager. Если вы впервые делаете сайт, подключайте «Метрику» и Analytics напрямую.

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

Нам нужен номер счетчика

Вставьте номер в поле «Яндекс.Метрика» в разделе настроек сайта «Аналитика и SEO» в панели «Тильды».

Подключаем счетчик «Яндекс.Метрики»

Аналогичным образом подключите счетчик Google Analytics. Для этого нажмите кнопку «Подключить» в строке Google Analytics. Примите запрос от приложения tilde.cc на доступ к аккаунту Google Analytics. Выберите счетчик и сохраните изменения. Если на сайте уже есть страницы, опубликуйте их повторно.

Подключаем счетчик GA к Tilda

Перейдите в раздел «SEO», чтобы подключить сайт к службам Search Console и «Яндекс.Вебмастер».

Нажмите кнопку «Подключить» рядом с названием соответствующего сервиса, примите запрос от приложения tilda.cc на доступ к аккаунту. Нажмите кнопку «Зарегистрировать сайт».

После автоматической регистрации на панели появится статус «Домен подтвержден». Система предложит добавить в Search Console карту сайта. Воспользуйтесь этой возможностью.

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

Таким же способом зарегистрируйте ресурс в «Яндекс.Вебмастер».

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

Как подключить платный домен к сайту на Tilda

После регистрации домена в личном кабинете на сайте регистратора войдите в панель управления услугами. В DNS-записи укажите IP сервера Tilda 178.248.234.146.

Если вы зарегистрировали домен в Reg.ru, в личном кабинете перейдите в раздел «Управление доменом – DNS-серверы». А вот так можно отредактировать DNS у регистратора / хостинга Beget:

Нажмите кнопку «Редактировать DNS»

Укажите DNS-серверы ns1.reg.ru и ns2.reg.ru. Это нужно, чтобы использовать зарегистрированный в Reg.ru домен на стороннем хостинге.

Задаем адреса

Вернитесь в раздел «Управление доменом» и выберите подраздел «Управление зоной».

Нам нужен раздел «Управление доменами»

Удалите существующие записи класса A и добавьте вместо них новую запись.

Редактируем ресурсные записи домена

Добавьте IP сервера «Тильды» и сохраните изменения.

В разделе «Добавить запись CNAME» укажите поддомен www. Это нужно, чтобы сайт был доступен по адресам вида vashsite.ru и www.vashsite.ru.

В поле Canonical name добавьте значение «tilda.ws.», а в поле Subdomain – значение «www».

Редактируем CNAME домена/p>

В панели управления Tilda укажите домен в соответствующем разделе настроек сайта. Сохраните изменения.

Добавляем настроенный домен

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

Как создавать страницы сайта на Tilda

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

Нажмите кнопку «Создать новую страницу»

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

Шаблонные страницы Tilda состоят из модулей, которые можно настраивать, менять местами, удалять и добавлять.

Чтобы вызвать меню редактирования, достаточно навести курсор на модуль.

Обратите внимание на кнопки вверху рабочего пространства

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

Выбираем вариант обложки

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

Обратите внимание на возможность выбора тега для заголовков блоков, которые расположены на странице первыми. Для основного заголовка важно указать тег H1. Для заголовков второго и третьего порядка доступны теги H2 и H3.

Настраиваем внешнее представление страницы

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

Указываем подзаголовок, заголовок и описание

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

Редактируем текст прямо в окне предпросмотра

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

Дублируйте, удаляйте, прячьте любые элементы

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

Работать с модулями очень удобно

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

Открываем карту блоков

После редактирования модулей и контента уделите внимание настройкам страницы. Соответствующий раздел доступен в вертикальном меню в верхней части экрана или в выпадающем меню «Еще».

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

Заполняем все обязательные поля

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

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

Первая картинка (по умолчанию) и есть бейдж

В настройках Facebook и SEO есть дополнительные возможности. В разделе «Отображение в поисковой выдаче» нажмите кнопку «Задать специальные meta-данные». Здесь можно при необходимости изменить title и description. Не тратьте время на указание ключевых слов, так как поисковые системы не учитывают метатег keywords.

Отредактируйте каноническую ссылку на страницу: сделайте URL удобным для пользователей. Например, вместо автоматически сгенерированной ссылки на страницы контактов или портфолио vashsite.tilda.ws / page1554510.html укажите ЧПУ vashsite.tilda.ws / contact или trubnikoff.tilda.ws / portfolio соответственно.

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

Настраиваем как будет выглядеть сниппет

В настройках отображения в «Фейсбуке» можно указать ID приложения и аккаунт в Twitter.

Вкладка «Экспорт» настроек страницы доступна только владельцам бизнес-аккаунтов. На вкладке «Действия» можно перенести, удалить или дублировать страницу.

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

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

Чтобы добавить на страницу микроразметку Schema.org, реализованную через JSON-LD, воспользуйтесь бесплатным генератором кода. Создайте скрипт. В дополнительных настройках страницы нажмите кнопку «Редактировать код». На открывшейся странице добавьте и сохраните микроразметку.

Размечаем элементы страницы семантическими тегами

После публикации страницы проверьте корректность микроразметки с помощью инструмента Google.

Валидация пройдена успешно

Подробнее о внедрении структурированных данных через JSON-LD читайте в нашей статье о новой реальности в поиске.

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

После публикации страница станет доступна всем пользователям. Теперь создайте остальные страницы: «Услуги», «Портфолио», «О нас», «Контакты», «Блог».

Как работать с внутренними страницами сайта

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

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

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

Пример обложки для страницы с портфолио

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

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

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

Нас интересуют настройки списка страниц

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

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

Выбираем подходящий формат виджета

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

Редактируем параметры блока

Вы сделали страницу портфолио со ссылками на реализованные проекты и конверсионной кнопкой.

Пример созданной страницы

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

Как сделать страницу на Tilda с чистого листа

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

Нажмите кнопку выбрать «Выбрать»

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

Настраиваем вид страницы

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

Созданная с чистого листа страница блога

Вы создали основные страницы сайта. Уделите внимание навигационному меню.

Как сделать меню сайта на «Тильде»

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

Настраиваем новое меню

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

Кастомизируем внешний вид меню

В разделе настроек контента «Логотип» добавьте название сайта. Если у вас есть логотип, загрузите его.

Этот шаг необязательный

Добавьте ссылки на профили в соцсетях, отредактируйте кнопку Contacts. Укажите настройки страницы и опубликуйте ее.

Так выглядит модуль на готовой странице

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

Нажмите кнопку «Настройки сайта»

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

Назначаем меню в подвал

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

Обратите внимание на верхнее меню

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

Что еще может Tilda

С помощью дополнительных возможностей конструктора Tilda можно решать специальные задачи. Некоторые из них перечислены ниже.

Интеграция с WordPress

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

Чтобы интегрировать Tilda с WordPress, необходимо оплатить бизнес-тариф и установить любой подходящий плагин.

CMS WordPress имеет достаточно платных и бесплатных инструментов для создания лендингов и оформления лонгридов. Учитывайте это при оценке целесообразности оплаты бизнес-тарифа.

Подготовка писем для рассылки

Конструктор писем можно найти в панели управления Tilda. Инструмент позволяет делать письма из готовых шаблонов и отправлять их подписчикам через сервисы SendGrid или MailChimp. Также можно экспортировать код на другие платформы email-маркетинга.

Созданные письма можно хранить на субдомене вида nashi-pisma.tilda.ws. Шаблоны писем редактируются и настраиваются, как страницы сайтов на Tilda.

Этот шаблон можно кастомизировать

Создание пользовательских блоков

Эта функция подойдет специалистам, которые имеют как минимум базовые представления о веб-дизайне. С помощью редактора Zero Block они могут создавать модули страниц самостоятельно.

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

Кнопка доступна с любой страницы

Интеграция с внешними сервисами

Сайт на «Тильде» можно интегрировать с внешними службами:

• CRM;
• системами приема платежей;
• формами для получения контактов.

Для интеграции в настройках сайта выберите меню «Формы» и «Платежные системы».

У Tilda широкие возможности для интеграций со сторонними сервисами

Создание промокодов

Чтобы создать и опубликовать промокод, откройте соответствующее меню в разделе «Платежные системы» в настройках сайта. Укажите подходящие параметры и опубликуйте промокод.

Подраздел «Промокоды» находится в разделе «Платежные системы»

Электронная торговля

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

В разделе «Бизнес» есть адаптированные для электронной торговли шаблоны страниц.

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

В разделе «Другое» есть модули для интеграции сайта на «Тильде» с платформой для создания ecommerce-сайтов «Эквид».

В два клика мы можем сделать полноценный интернет-магазин на Tilda

Пользовательская страница 404

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

Сперва 404-я создается, затем назначается в этом разделе («Еще», «Страница: 404 Ошибка»)

Tilda CRM

Осенью 2018 года Tilda предложила пользователям полезный инструмент – бесплатную CRM. Чтобы работать с системой, выберите соответствующий раздел в вертикальном меню и нажмите кнопку «Создать новый лист».

Откройте раздел CRM

В настройках в разделе «Сайт» подключите к CRM сайт.

Будем настраивать подключение CRM-системы к сайту

В настройках сайта подтвердите подключение CRM. Для этого можно выбрать настройки блока страницы и перейти в раздел «Формы».

Подключаем CRM

После подключения все заявки с сайта будут приходить в CRM. Если заявка получена по телефону, ее можно добавить в систему вручную с помощью кнопки «Добавить заявку».

Есть одна заявка

В заявке оператору доступны контактные данные клиента. Здесь можно создавать примечания и отвечать на заявки. Чтобы ответить клиенту по электронной почте, нужно перейти по ссылке «Открыть карточку» и перейти на вкладку «Письмо».

Оцениваем заявку

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

Изучаем поступившие заявки

Tilda или сайт на движке?

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

Что вы потеряете, если выберете Tilda вместо WordPress

Деньги

За доступ к полной функциональности Tilda придется платить как минимум 6 000 рублей в год. Есть тариф Free, с которым можно создать на сайте до 50 страниц. Пользователи плана Free могут добавлять на страницы только базовые модули.

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

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

Безопасное соединение

По умолчанию сайты на поддомене «Тильды» доступны по https. После оплаты тарифа Personal или Business можно купить SSL-сертификат и настроить доступ к сайту по безопасному протоколу через сервис CloudFlare.

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

Удобство внедрения микроразметки

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

На страницах сайта на WordPress можно задать базовые типы разметки, например, Article или BlogPosting, для всех страниц публикаций. Это можно делать с помощью SEO-комбайнов, например, All in One SEO Pack. Также есть отдельные плагины, например, WPSSO Schema JSON-LD MarkUp.

Оптимизация скорости загрузки страниц

Пользователи Tilda практически не могут влиять на скорость загрузки страниц. Можно только удалять со страниц отдельные модули и сжимать изображения. В остальном придется довериться разработчикам «Тильды».

Приемлемо, но лучше улучшить

Пользователи WordPress могут самостоятельно оптимизировать скорость загрузки страниц.

Ускоренные мобильные страницы

Пользователи Tilda пока не могут внедрять AMP. У пользователей WordPress такая возможность есть. Google охотно направляет пользователей на ускоренные страницы.

Доступ к файлам сайта

У владельцев сайтов на «Тильде» такой возможности нет, а у «Вордпресса» есть. Впрочем, доступ к файловой системе обычно нужен продвинутым пользователям движка.

Редактирование карты сайта и файла robots.txt

Tilda создает sitemap.xml и robots.txt автоматически, и пользователи не могут их редактировать. На WordPress карту сайта и файл robots.txt можно создать самостоятельно с помощью плагинов, например, All in One SEO Pack. Пользователь может редактировать карту и директивы для поисковых роботов.

Что вы приобретете, если выберете Tilda вместо WordPress

Деньги

Если вам нужен одностраничный сайт или онлайн-визитка с портфолио и контактными данными, дешевле работать с «Тильдой». Сайт-портфолио на Tilda можно сделать бесплатно, но он будет доступен на поддомене.

Простота редактирования шаблона

С «Тильдой» любой пользователь без специальных знаний может почувствовать себя дизайнером. Для изменения шаблонов на WordPress нужны специальные знания.

Визуальная привлекательность страниц

Этот пункт – продолжение предыдущего. С помощью «Тильды» можно красиво оформить страницу сайта. Это не требует специальных знаний и много времени.

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

Простота

На Tilda проще создать сайт и управлять им. За простоту придется расплачиваться деньгами и ограничениями в функциональности ресурса.

Что в итоге

Конструктор Tilda – удобный и эффективный инструмент для создания сайтов. Он не имеет всех функций полноценного движка. Но функциональность CMS нужна далеко не всем пользователям. Едва ли не главное достоинство «Тильды» – возможность быстро сделать визуально привлекательный сайт. Ограниченность конструктора может быть плюсом для пользователей без опыта. Платформа защитит их от серьезных ошибок, которые могут снизить эффективность ресурса.

Что такое Tilda

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

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

Из каких блоков состоит лендинг

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

«Дюна» — первый роман из цикла «Хроники Дюны» американского писателя-фантаста Фрэнка Герберта. Действие происходит в далеком будущем, в космической империи, где знатные дома владеют целыми планетами. Важнейшей из них является песчаная, пустынная планета Арракис, так как на ней добывают пряность — вещество, необходимое пилотам для космических перелетов. Роман получил несколько экранизаций, последняя и самая масштабная вышла в 2021 году под руководством режиссера Дени Вильнёва.

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

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

  Обложка — это визитная карточка лендинга. На этом экране мы кратко описываем продукт, иногда добавляем «call to action» — кнопку для покупки, форму регистрации или окошко, в котором можно оставить контакты. Это самый важный блок, и если он не сработает, то пользователь может сразу закрыть страницу.

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

• Преимущества. Список с причинами выбрать именно нас, а не конкурентов.

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

• Call to action. В конце еще раз предлагаем пользователю совершить нужное нам действие — даем ссылку на скачивание программы или форму для регистрации или контактов.

Что еще можно добавить на лендинг:

• Отзывы. Обычно этот блок включает серию кратких цитат клиентов с их фотографиями.
• Цены. Информация о стоимости продукта и тарифах.
• Целевая аудитория. Блок, отвечающий на вопрос «кому подойдет этот продукт».
• Кейсы. Примеры выполненных работ — особенно актуально для компаний, чьи результаты можно представить в виде изображений. Например, для студий дизайна или архитектурных бюро.

Как добавлять и изменять блоки

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

Чтобы добавить первый элемент, выберите его в «Библиотеке блоков» — варианты разделены по категориям.

У большинства блоков есть два варианта редактирования — «Контент» и «Настройки». Обе кнопки находятся в левом верхнем углу блока.

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

В меню «Настройки» можно изменить дизайн экрана: установить ширину колонок, отредактировать отступы, заменить шрифты в блоке или добавить простую анимацию. 

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

Что такое Zero Block и в каких ситуациях он нужен

Zero Block — это встроенный редактор внутри Tilda. В нем можно создавать свои блоки вместо тех, что уже есть в библиотеке. Чтобы это сделать, пролистайте «Библиотеку блоков» до конца и выберите «Нулевой блок».

Zero Block поможет сделать что-то необычное. Например, сложную анимацию или градиентный переход между элементами, чтобы блоки плавно перетекали друг в друга.

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

• Визуальная уникальность нужна сайту гораздо меньше, чем его способность представлять продукт — а с этим справятся и стандартные блоки.
• Иногда уникальность все усложняет — проверенные стандартные блоки могут помочь достичь более высокой конверсии, чем что-то необычное.
• Если заказчику понадобится изменить текст или картинку в Zero Block без помощи дизайнера, он может все сломать.
• Стандартные блоки автоматически адаптируются под компьютеры, планшеты и смартфоны — в Zero Block придется настраивать элементы для каждого экрана вручную.

Где брать иллюстрации для лендинга

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

Если клиент не предоставил изображения, можно использовать бесплатные стоки, например, Unsplash и Freepik. У этого способа есть свои сложности:

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

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

Еще один инструмент, который я использую при создании изображений — это Figma. Она поддерживает много плагинов, с помощью которых можно создавать объекты для декорирования сайтов на Tilda. Например, 3D-фигуры или эффекты для оформления заголовка. Все это можно сохранить в формате PNG и добавить на сайт.

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

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

Где брать тексты для лендингов

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

На лендинге не должно быть огромных полотен текста, его нужно делить на небольшие части. Обычно человек легко читает только три-четыре строчки. Также важно поддерживать консистентность — если у нас есть несколько пунктов в одном блоке, то в них должно быть примерно равное количество текста.

Лучше всего, если заказчик предлагает дизайнеру составить ТЗ для копирайтера — тогда текст не придется адаптировать под дизайн страницы. Бывает и так, что заказ для дизайнера включает копирайтинг, но тогда нужно выбирать: либо отказаться, либо попросить больше денег. Можно потратить на текст больше часов, чем на дизайн, при этом стоимость проекта останется той же. 

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

Что такое шрифтовая пара и как ее составлять

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

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

Шрифты бывают двух видов:

• антиква — с засечками;
• гротеск — без засечек.

К первым относятся, например, Times New Roman, Georgia, Adobe Garamond. Ко вторым — Helvetica, Roboto, Open Sans.

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

Что взять на заметку, чтобы быть в тренде

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

Например, у заказчиков востребован минимализм — правда, после всех дополнений клиента он часто пресыщается деталями и становится «псевдоминимализмом».

Также часто встречаются заказы на проекты в стиле «глассморфизм» — дизайн с эффектом матового стекла.

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

Также сохраняется тренд на крупную типографику с гротескными шрифтами.

Уходит тренд на табличность в верстке — разделение страницы на поля, очерченные линиями.

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

Иллюстрация: Аня Макарова для Skillbox Media

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

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

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

1. Зарегистрируйтесь в Tilda, если у вас ещё нет аккаунта.

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

3. Нажмите на кнопку «Создать новую страницу» — откроется каталог шаблонов Tilda. Выберите пустую, так как вы будете делать страницу с нуля.

4. По умолчанию эта страница будет называться Blank page. Чтобы поменять её название, нажмите на «Настройки» и напишите «Главная».

1. Нажмите кнопку «Все блоки», в появившейся панели нажмите «О компании» и выберите любой шаблон. Советуем взять шаблоны с номерами AB402 или AB603 — они будут указаны в серой плашке около названия.

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

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

2. Наведите курсор на блок и нажмите «Контент». В появившемся меню в заголовке напишите своё имя, в описании — кратко о себе. Подзаголовок заполните по желанию — если оставить его пустым, то и на сайте он отображаться не будет. В блоке «Изображение» загрузите свою фотографию. Затем нажмите «Сохранить и закрыть».

3. Наведите курсор на блок и нажмите «Настройки». В появившемся меню найдите пункты «Отступ сверху» и «Отступ снизу». Сверху укажите 2.5 line, а снизу — 0. Затем нажмите «Сохранить и закрыть».

1. Наведите курсор на меню и нажмите на плюсик — откроется меню с выбором модулей.

2. Обычно, чтобы коротко рассказать об услугах, используют структуру из трёх колонок. Поэтому советуем выбрать шаблон FR201 в категории «Преимущества».

3. Наведите курсор на блок и нажмите «Контент». В появившемся меню нажмите «Шапка блока» и в заголовке напишите «Услуги», а в описании — коротко о том, чем вы занимаетесь.

4. В блоке «Карточки» напишите три услуги, которые вы будете предоставлять клиентам, и описания к ним. А ещё в этом блоке удалите все картинки с иконками — в нашем случае эти абстракции не будут ничего говорить о вашей квалификации, поэтому они не нужны. Нажмите «Сохранить и закрыть».

5. Наведите курсор на блок и нажмите «Настройки». В появившемся меню найдите пункты «Отступ сверху» и «Отступ снизу». Сверху укажите 5 line (150 px), а снизу — 6 line (180 px). Затем нажмите «Сохранить и закрыть».

1. Наведите курсор на блок с услугами и нажмите на плюсик — откроется меню с выбором модулей.

2. Выберите шаблон TL02B в категории «Заголовок». Наведите курсор на этот блок, кликните на текст и напишите «Портфолио». Затем нажмите «Настройки», в появившемся меню найдите пункты «Отступ сверху» и «Отступ снизу». Сверху и снизу укажите 0. Нажмите «Сохранить и закрыть».

3. Наведите курсор на меню и нажмите на плюсик. Выберите шаблон IM10. Наведите курсор на этот блок и нажмите «Контент». Измените в нём текст — напишите короткое описание вашего проекта. Затем — поменяйте иллюстрацию.

4. Нажмите «Настройки», найдите пункт «Отступ сверху» и «Отступ снизу». Сверху укажите 2 line (60 px), а снизу — 0. Нажмите «Сохранить и закрыть».

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

1. Наведите курсор на последний блок и нажмите на плюсик — откроется меню с выбором модулей. Выберите шаблон CN102 в категории «Контакты».

2. Наведите курсор на блок и нажмите «Контент». В появившемся меню в поле заголовка напишите «Связаться со мной». Из второго и третьего блоков просто удалите всё.

3. Ниже укажите, где именно вам можно написать: телефон, почта, Telegram или другие соцсети.

4. Нажмите «Настройки», в появившемся меню найдите пункт «Отступ сверху» и «Отступ снизу». Сверху и снизу укажите 5 line (150 px).

1. На верхней панели в правом углу нажмите кнопку «Предпросмотр» и проверьте свой сайт. Не забудьте протестировать и мобильную версию — в режиме предпросмотра нажмите на иконку с ноутбуком и вместо неё выберите телефон. При необходимости исправьте все ошибки.

2. Нажмите кнопку «Опубликовать». В появившемся меню введите название сайта — для сайта-визитки уместно писать в адресе своё имя, например dashaivanova.tilda.ws.

3. Если вы заметили какие-то ошибки, то их можно поправить в любой момент через редактор Tilda.

Другие инструкции по Tilda

Научитесь: Дизайнер сайтов на 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.