Как создать сайт на Tilda с нуля: простое руководство для начинающих

Сайт можно сделать и без программистов. И даже без дизайнеров, если у вас есть желание разобраться в конструкторе вроде Tilda. Главное не спешить и не иметь завышенных ожиданий. Мы собрали пошаговое руководство по Tilda для новичков: расскажем, с чего начать, как не запутаться в блоках и почему сначала лучше написать текст, а уже потом заниматься украшательством.

Если нужно быстро собрать сайт — Tilda вполне подойдет. Особенно если вы:

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

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

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

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

Главное — понять, зачем вам сайт, какая у него задача: продавать? рассказывать? собирать заявки? Вам нужен сайт или лендинг? А может, квиз-лендинг? Если с этим ясно, то половина работы уже сделана. Иначе легко запутаться в шаблонах и блоках, начать бесконечно менять цвета и картинки и в итоге забыть, ради чего все затевалось. Нам нравится правило: 20% усилий приводят к 80% успеха.

Тильда предлагает около 700 шаблонов сайтов, на любой вкус и случай. Но не обязательно искать идеальный. Если уж берете шаблон, то лучше выбрать тот, который близок по смыслу, и адаптировать под себя.

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

Наш совет по работе с Tilda: если хотите запустить сайт в ближайшее время, то рекомендуем сразу взять платный тариф. Для начала подойдет Personal (больше про тарифы тут).

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

Чтобы начать, перейдите на сайт Тильды и нажмите «Попробовать бесплатно». Укажите email, имя и придумайте пароль. После подтверждения почты вы попадете в рабочую область. Здесь будут храниться все ваши сайты и страницы.

1. Нажмите «Создать новый сайт» и задайте название проекта. Это название будет видно только вам.
2. Далее нажмите «Создать новую страницу». Тильда предложит выбрать шаблон или начать с пустого листа.

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

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

Здесь все просто: впишите название проекта, добавьте описание и настройте субдомен, если пока не подключаете свой. Название и описание в этом разделе не играют SEO-роли, это чисто для вашего удобства.

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

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

1. Зайдите в «‎Расширенные настройки».
2. Подгрузите шрифт вручную (лучше всего использовать формат .woff).
3. Один шрифт можно использовать в разных начертаниях (light, normal, medium, bold). Обычно достаточно пяти вариантов на проект, а чаще и меньше.
4. Назначьте один шрифт для заголовков, другой для текста.

Если нужно больше шрифтов на проект — ищите невзрачную надпись «‎Добавить второй шрифт» на этапе подключения своего шрифта. Поэтапно можно добавить и третий, и четвертый шрифт, а дальше мы не заглядывали. Эта фишка появилась в Тильде относительно недавно. Конечно, трудно представить, кому нужно 20+ шрифтов одновременно (может, если у вас совсем крейзи-дизайн), но все-таки приятно осознавать, что такая возможность существует.

Если используете Google Fonts или Adobe Fonts, то их можно подключить по ссылке. Это удобно и довольно быстро. Вот здесь наш емкий гайд по настройке шрифтов в Тильде. Он о том, как подключить внешний шрифт, настроить, выбрать шрифтовую пару.

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

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

Задать избранные цвета вы сможете и потом, в процессе работы над страницами. Просто кликните на выпадающий список под палитрой и выберите «‎Сохраненные цвета». Нажимая на +, можно добавить 15+ цветов, чтобы они всегда были под рукой при работе и со стандартными, и с зероблоками. Тогда не придется постоянно копировать #hex-номер, можно сразу выбрать готовый цвет.

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

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

Встроенная аналитика Тильды показывает базовые данные:

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

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

Это раздел, который многие игнорируют, а зря. Здесь, кроме основной информации, есть удобный инструмент: вы можете нажать на «SEO-рекомендации» и увидеть список всех страниц с проблемами. Вот несколько примеров.

• На странице нет H1 или их два (что бывает, если вы продублировали блок с Н1).
• Не указано описание или оно дублируется.
• Страница закрыта от индексации (хотя не должна быть).

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

Здесь же можно запретить индексацию определенных страниц (например, политики конфиденциальности, 404, страницы входа в ЛК). Используйте это, чтобы поисковик не индексировал мусор.

Здесь можно в несколько кликов выгрузить сайт в архив со всеми HTML-файлами, CSS-стилями, скриптами и изображениями. Это удобно, если вы хотите перенести сайт на свой хостинг и больше не зависеть от платформы. Но важно учитывать, что при переносе сайта с Тильды у вас перестанут работать формы на прием и передачу данных. Все нужно будет настраивать заново на новом стеке или другой платформе.

Этот раздел будет полезен, если вы хотите взаимодействовать с пользователями, а не только использовать сайт как витрину. После подключения CRM или email-уведомлений не забудьте:

• привязать форму ко всем нужным страницам;
• проверить, куда приходят заявки (на почту, в Telegram, CRM и т. д.);
• повторно нажать «Опубликовать», иначе данные не отправятся.

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

Если ваш сайт предполагает онлайн-продажи — например, вы продаете консультации, курсы или физические товары, — без подключения платежной системы не обойтись. Выберите подходящий сервис (CloudPayments, ЮKassa, Stripe, PayPal и др.). Дальше Введите данные, обычно это ID, ключ API и адреса для уведомлений. Все данные можно получить в личном кабинете выбранной системы.

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

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

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

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

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

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

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

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

Прежде чем делать сайт на Тильде, советуем собрать структуру сайта, то есть продумать его смысловые части. Что будет написано на главной? Какой контент и в каком порядке вы хотите добавить на странице с услугами? Мы уже составляли руководство по структуре лендинга. С сайтом история та же: сначала понимаем, чего хотим, а уже потом идем воплощать это в Тильде.

Если вы запланировали многостраничный сайт, то нужно будет создать несколько страниц: главную, «О нас», «Услуги», «Контакты», блог и так далее. В Тильде это сделать очень просто.

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

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

Страницы в Тильде состоят из блоков. Одна смысловая часть = один блок. Например, обложка, слайдер с отзывами, форма для заказа.

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

Блоки можно менять местами, удалять, скрывать из видимости для пользователя.

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

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

В основе всех стандартных блоков лежит 12-колоночная сетка. Это удобно, потому что все элементы выстраиваются ровно и не разъезжаются.

• Ширину блока можно задать в колонках: например, 6 из 12 — это половина страницы.
• Блок можно выровнять по левому краю, по центру или по правому. Чаще всего используют левое выравнивание.
• Чтобы проверить, как работает сетка, в настройках блока можно включить отображение направляющих — нагляднее не придумаешь.

У каждого блока можно задать отступы сверху и снизу. Это важно, чтобы элементы не слипались и выглядели «вольно дышащими». На десктопе можно задать, например, по 100 px, а на мобилке — уменьшить до 60−75 px. Все это делается в тех же настройках блока.

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

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

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

Они настраиваются через кнопку «Контент». Там меняются заголовки, кнопки, поля, тексты после отправки заявки. Есть и квизы, они ведут пользователя по разным сценариям, в зависимости от ответов.

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

Что еще интересного есть в стандартных блоках Тильды:

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

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

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

• Они требуют навыков: базовых знаний о типографике, сетках и композиции, умения работать с версткой на Тильде, grid-контейнерами, window-контейнерами и autoscale.
• Зероблки не адаптируются автоматически, в отличие от стандартных. Нужно настраивать макет вручную под каждое разрешение (десктоп, мобильные, планшеты). Без опыта легко сделать красиво в одном разрешении и случайно испортить в других.
• Зероблоки сложнее администрировать (вносить изменения). Одно изменение может сломать всю верстку, и за этим нужно тщательно следить.

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

• + Плюс — добавление элементов: текст, изображение, фигура, кнопка, видео, тултип, форма, галерея, вектор, HTML. Все это добавляется вручную, по одному.
• Брейкпоинты — разрешения экранов, для которых можно настроить адаптив. По умолчанию их 5: 320−480, 480−640, 640−960, 960−1200, 1200+. Если какие-то вам не нужны (например, 480), их можно отключить. Или добавить дополнительные — например, 1440. Все это делается через значок шестеренки.
• Save и Close — кнопки сохранения и выхода. Если вы случайно закроете блок, Tilda предложит сохранить изменения.

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

Сразу рекомендуем кликнуть на «‎Слои» и оставить появившееся окно открытым. Это удобно, если в блоке много элементов: вы можете переименовать слои, группировать и быстро ориентироваться в структуре.

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

• Grid Container — сетка из 12 колонок. Можно включить/отключить, настроить гаттер (расстояние между колонками), задать отступы по краям.
• Window Container — адаптация под высоту окна. Если включено, блок будет подстраиваться под экран.
• AutoScale — подгонка ширины под любое разрешение. Удобно, если вы хотите, чтобы сайт выглядел одинаково на 2K и 4K экранах.
• Background Color / Image — настройка фона: цвет или изображение.
• Behaviour — фиксированный фон (fixed) или обычный (scroll). Также можно добавить затемнение, чтобы текст лучше читался.
• Position / Overflow — управление тем, как блок будет вести себя на странице: фиксироваться при скролле, накладываться на другие элементы и т. д.
• Isolation — настройка приоритетности блока. Используется редко, но бывает полезна в сложных макетах.
• Autolayout — относительно новая функция, похожая на Figma. Она позволяет группировать элементы и задавать отступы между ними автоматически.

Autolayout дает возможность группировать несколько элементов (например, заголовок и подзаголовок) в единую композицию, которая будет автоматически подстраиваться при изменении размеров экрана.

Вы можете:

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

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

В целом каждый элемент имеет плюс-минус одни и те же настройки.

• Position — координаты на артборде. Можно задать вручную или с помощью направляющих.
• Container — привязка к сетке: Grid, Window и другие.
• Align — выравнивание: по левому краю, по центру, по правому.
• Color и Size — цвет и размер, включая кегль шрифта, насыщенность, начертание (normal, medium, bold).
• Font — выбор из шрифтов проекта или подключенных через Google Fonts / Adobe Fonts.
• Weight — начертание шрифта. Например, заголовки можно задать полужирными, а основной текст — regular.
• Overflow — обрезка или отображение элементов, выходящих за границы блока.
• Visibility — можно задать, на каких разрешениях элемент будет отображаться.

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

Не так давно Тильда добавила разных эффектов для элементов, чтобы можно было кастомизировать дизайн с меньшими усилиями. Например, мы уже юзали эффект размытия. Можно задать прозрачность (opacity ~15%) и включить blur-фон, и получится эффект матового стекла. Работает не только с фоном, но и с текстом или графикой. Попробуйте разные эффекты, если хотите добавить атмосферности.

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

• X / Y — координаты относительно левого верхнего угла артборда.
• W (width) — ширина. H (height) — высота.
• Align — можно привязать элемент к левому краю, центру или к правому краю.
• Container — задать тип контейнера: по гриду (grid-container) или по ширине окна (window-container).

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

Зероблоки поддерживают видео из YouTube, Vimeo, ВКонтакте, Rutube, а также прямые ссылки на mp4-файлы. Нажмите + и добавьте видео, вставьте ссылку на нужный ролик, настройте его поведение.

• Autoplay — видео начнет воспроизводиться автоматически (будет без звука, чтобы не шокировать посетителя).
• Loop — зацикливание (если вам нужно, чтобы ролик играл по кругу).
• Начало и конец — можно указать с какой секунды начинать и на какой останавливать.
• Обложка (preview) — загрузите картинку, которая будет отображаться до начала воспроизведения.
• Иконка воспроизведения — можно выбрать ее размер и цвет, чтобы она не выбивалась из дизайна.

Такие ролики хорошо работают на первом экране или в разделе с кейсами. Главное не перегружать: если на странице слишком много видео, это замедлит загрузку. Умеренность тут — ваш лучший друг.

Тултип — это небольшие всплывающие подсказки, которые появляются при наведении или клике. Что можно настроить:

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

Basic Animation. Это простые частично преднастроенные анимации. Можно задать анимацию при появлении, параллакс и фиксацию по достижению триггера.

Step‑by‑step (пошаговая анимация). Вы создаете последовательность из шагов, например: первый шаг — элемент перемещается снизу вверх, второй — увеличение прозрачности и т. д. Можно копировать анимацию с одного элемента и вставлять ее на другие. Получаются синхронные эффекты.

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

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

Добавляем форму через +. Заходим в настройки формы и видим список 20 доступных полей. Там есть все, что нужно:

• имя, email, телефон;
• текстовое поле на одну или несколько строк;
• чекбокс;
• выпадающий список;
• дата, время, файл, счетчик и даже калькулятор (да, можно собрать простенький расчет стоимости на месте).

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

• Email;
• Telegram;
• CRM (например, amoCRM, Bitrix24);
• Google Таблицы;
• Notion, Trello и почти все, что угодно.

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

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

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

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

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

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

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

Выберите 2−3 цвета, которые отражают ваш стиль. Этого достаточно, чтобы сайт не выглядел пестро. Можно ориентироваться на правило 60−30−10: 60% базового цвета, 30% вспомогательного и 10% акцентного — как раз для кнопок, ссылок и других кликабельных элементов. Такой баланс делает визуал аккуратным и помогает триггерить пользователя на нужное действие.

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

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

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

Теперь про самое важное: как сайт будет собирать заявки. На сайте может быть:

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

Добавляете форму через «+» → «Формы». Настраивается она через вкладку «Контент», а куда отправлять данные — через «Мои сайты» → «Настройки сайта» → «Формы». Если нужна помощь — читайте подробнее о том, как настроить кнопку в Тильде.

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

Не забудьте протестировать: отправьте себе заявку, посмотрите, как она выглядит. Добавьте страницу «Спасибо» или сообщение после отправки. Это даст пользователю ощущение завершенности.

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

Тильда позволяет посмотреть, как ваш сайт выглядит на:

• десктопах,
• планшетах (в двух ориентациях),
• смартфонах (тоже в двух ориентациях).

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

• Убирайте лишний текст. На мобильных все должно быть проще.
• Если элементы перекрываются — разбейте на несколько блоков.
• Проверьте кликабельность: кнопки должны быть достаточно крупными.

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

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

В руководстве Tilda понятно написано, как разобраться с доменами, DNS и SSL. Если для вас это темный лес, то с этими инструкциями вы должны разобраться. Больше тонкостей вы узнаете из нашего руководства по SEO-настройке сайта на Тильде.

В настройках каждой страницы тоже можно настроить несколько SEO-параметров.

• Заголовок, он же Title — заголовок страницы (то, что видит пользователь в поиске и во вкладке браузера).
• Описание, оно же Description — короткое описание, попадающее в сниппет (то, что видит пользователь под заголовком статьи при поиске в яндексе или гугле).
• Keywords — по желанию здесь можно указать ключевые фразы, которые описывают содержание страницы.
• Каноническая ссылка на страницу — главный url страницы для поисковых роботов. Обычно мы оставляем это поле пустым, если не предвидится дублей страницы или A/B-тестов.
• Еще можно запретить поисковым роботам индексировать эту страницу или переходить по ссылкам на этой странице.

Дополнительно к описанию каждой картинки нужно прописать alt-теги, а каждому заголовку в блоках присваивать тег H1, H2 или H3. Это делается в настройках блока.

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

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

Где найти SEO-рекомендации в Тильде

SEO-рекомендации от Тильды

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

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

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

• Навигация — все пункты меню работают, переводят на нужные страницы.
• Кнопки и ссылки — кликабельны, ведут туда, куда нужно, не открывают пустых страниц.
• Формы — отправляются, заявки доходят, все протестировано.
• Спасибо-страница или поп-ап — появляется после отправки формы.
• Адаптив — сайт выглядит нормально на телефоне, планшете и десктопе.
• Тексты — без опечаток, читаются легко, нет канцелярита.
• Изображения — не растянуты, не обрезаны, подгружаются быстро и предварительно сжаты в специальных сервисах, например TinyPNG.
• Метатеги — прописаны Title, Description, alt-тексты у картинок.
• Иконка сайта (favicon) — установлена, отображается в браузере.
• Интеграции — подключены формы, аналитика, CRM (если нужно).
• Платежные системы — работают, все проверено на тестовой оплате.
• Домен — подключен, DNS-записи прописаны, все открывается.
• Яндекс Метрика или Google Analytics — установлены, данные собираются.

Если все отмечено — можно нажимать кнопку «Опубликовать». Ваш сайт становится доступен в интернете.

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

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