Как сделать сайт на Тильде: пошаговая инструкция

14.12.2018
3492
Подпишитесь, чтобы получать новые статьи на почту

Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде, о том с какими сложностями столкнулась и сколько времени на это ушло.

Обучение в онлайн-университете: курс «Дизайн для начинающих»

Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia.

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

Структура сайта

Антон Чиков:
«Структура сайта зависит от задачи и типа сайта. Например, студии дизайна интерьера нужно показать готовые проекты, а организатору онлайн-курса — рассказать о программе.
У многостраничников и интернет-магазинов своя структура, а у лендингов есть традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты».

Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.

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

Антон Чиков:
«Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6-7 блоков, а продавцу буровых установок может не хватить 15-ти».

Подготовка контента для сайта

Дальше я подготовила текст и фотографии. Несколько советов как подготовить текст для сайта:

  1. Текст должен быть простым и понятным. Представьте, что рассказываете клиенту о своей компании или продукте. Так все и запишите, а потом перечитайте вслух.
  2. Выделите главное и добавьте интересные подробности. Не старайтесь расписать на сайте всё, что возможно.
  3. Включите зануду: придирайтесь к словам, найдите неясные моменты, ответьте на свои вопросы.

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

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

Антон Чиков:
«Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды  — 1680px по большей стороне.
Если у вас много иллюстраций на сайте — сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдет. Я сжимаю фото на бесплатном сервисе Optimizilla»
.

Прототипирование

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


Вот такой прототип лендинга у меня получился

Антон Чиков:
«Мы делаем прототипы и согласовываем проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде».

Шрифты, цвета, иконки

Для новичка самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.

Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.


Основные цвета нашего сайта: черный, желтый, голубой. Цвет фона — белый и серый

Антон Чиков:
«Не используйте на сайте больше 2-3 цветов. Один цвет — основной, остальные — акцентные.
Советую не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».


Тильда предлагает несколько пар шрифтов, этого более чем достаточно. Установить шрифт можно в настройках сайта

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

Верстка в Тильде

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

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

Вот несколько блоков моего лендинга:

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


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

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

  1. Загрузите видео на обложку вместо фото. Это сделать просто, и сайт будет выглядеть эффектно.
  2. Подключите анимацию к блоку. Когда на сайте все движется, информацию тяжело воспринимать, поэтому лучше с ней не перебарщивать.
  3. Разбавьте стандартные блоки zero-блоками. С их помощью картинку или текст располагают в определенном месте, а не там, где они в стандартных блоках. Но потом этот блок придется отдельно адаптировать для мобильных устройств.  

Антон Чиков:
«Я редко использую в работе стандартные блоки, все делаю в zero. Новичкам для кастомизации советую попробовать сторонние сервисы, которые легко интегрируются с Тильдой. Например, на сайт можно добавить фотогалерею из Instagram, калькуляторы, интерактивные картинки».

Действия перед публикацией сайта

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

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

  • Проверить ссылки — в правильное ли место они ведут.
  • Проверить, как сайт выглядит на мобильных, если вы использовали zero-блоки.
  • Настроить и протестировать формы приема данных.
  • Сделать базовое SEO.

Антон Чиков:
«Минимум, что нужно сделать по SEO — прописать заголовки: H1, H2, H3 и так далее. Заголовок H1 содержать ключевой запрос, по которому ваш сайт будут искать.
Еще пропишите title и description. Их видно в поисковике и когда отправляете ссылку на свой сайт. Тильда позволяет прописать разные варианты заголовка и описания для отображения в поисковой выдаче и при шеринге в социальных сетях»
.

  • Добавить документы о защите персональных данных, если собираете информацию о пользователях: имя, e-mail, телефон и другое.
  • Добавить фавикон и бейджик для соцсетей.
  • Подключить домен.
  • Включить индексацию в настройках сайта.
  • Проверить оптимизацию для поисковиков через Тильда-панель вебмастера.

Итоги

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

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

Создание лендинга заняло 2 дня: один на подготовку контента и прототип, и еще день на верстку в Тильде, оптимизацию и тестирование.

Читать еще: «Обзор конструктора сайтов Tilda: возможности, ограничения, советы»


Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Ирина Сорогина
SMM-специалист Svoemedia
Университет интернет-профессий
Мы используем файлы cookie
Чтобы улучшить работу сайта и предоставить вам больше возможностей для обучения. Продолжая использовать сайт, вы соглашаетесь с условиями использования файлов cookie.