Как сделать стильный сайт? Tilda Publishing!

Лера Мерзлякова

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

Tilda Publishing

Sasha_Petrov/shutterstock.com

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

1. Дизайн-код

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

Tilda: дизайн-код

Например, обложка (первый экран). Она состоит из фотографии, заголовка, описания и иногда кнопки. Вы оцениваете контент, который у вас есть, выбираете подходящий вариант из 30 обложек, меняете фото и текст — готово. Не нужно думать, какого размера должен быть шрифт или отступ между заголовком и описанием, в каком месте должна располагаться кнопка. Дизайнеры подумали за вас. Естественно, все параметры можно изменить, если есть уверенность и понимание того, что делаете. Но в качестве отправной точки заранее спроектированные блоки — очень хорошая опора.

Tilda: готовые блоки

2. Гибкость использования

Разработчики продумали семь способов использовать Tilda: подключить собственный домен или субдомен, оставить сайт на субдомене Tilda, экспортировать сайт и разместить на своём сервере, сделать часть сайта на Tilda и встроить её в существующий сайт, наладить публикацию через API. Для интеграции с сайтом на WordPress и «Битриксе» есть плагины.

3. Сервисы приёма данных из форм

C Tilda интегрированы девять сервисов: email, Google Docs, MailChimp, SendGrid, UniSender, GetResponse, AmoCRM, «Мегаплан» и «Битрикс24». Можно получать заявки на email, формировать списки рассылок или собирать лиды в системе управления данными клиентов (CRM).

4. Добавление уникальных элементов

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

Сервисы, которые легко добавить к проекту на Tilda:

  • Таймлайн для мероприятий — Timeline.knightlab.
  • Интерактивные карты — Storymap.knightlab.
  • Продажа билетов на мероприятие — TimePad.
  • Интерактивные изображения — Thinglink.
  • Обратная связь — Uservoice.

Начало работы в Tilda Publishing

Начало работы в Tilda Publishing

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

Шаблоны в Tilda Publishing

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

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

Редактирование в Tilda Publishing

Общие рекомендации по созданию сайта

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

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

Раздел #madeontilda поможет лучше понять возможности платформы и найти вдохновение. Здесь собраны примеры хороших работ пользователей.

Примеры работ, сделанных на Tilda Publishing

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

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

Пример меню

Обязательно подключите фирменный шрифт. Tilda позволяет подключить шрифты из Typekit и Google Fonts либо собственный.

Опубликуйте сайт. Задайте ему имя, используя субдомен Tilda, подключите собственный домен или экспортируйте код и разместите на своём сервере.

Не забудьте о статистике. Зарегистрируйтесь в сервисе Google Analytics или «Яндекс.Метрика», получите код и пропишите его в настройках.

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

Преимущества Tilda Publishing

  1. Не нужно знать код. Вам не придётся учиться кодить или просить о помощи знакомых программистов. Все настройки в удобном редакторе.
  2. Дизайнер не нужен. Блоки спроектированы профессионалами, все пропорции выверены и гармоничны.
  3. Адаптивный дизайн. Блоки спроектированы так, чтобы не приходилось корректировать дизайн для планшетов и смартфонов. Сайт отлично выглядит на всех устройствах.
  4. Простое редактирование. Если вы делаете сайт для клиента, то в дальнейшем он сможет оперативно вносить изменения и поддерживать сайт самостоятельно, без помощи профессионалов.
  5. Домен или экспорт. Сайт подключается к собственному домену либо экспортируется в виде кода для размещения на другом сервере.
  6. Встроенная аналитика. Можно посмотреть посещения и пользователей (в том числе по страницам). Плюс счётчики Google или «Яндекса» подключаются в специальном интерфейсе простым указанием номера.
  7. Оптимизация для поисковиков. Вы контролируете, как сайт выглядит в поисковой выдаче или социальных сетях.
  8. Гибкая настройка. Любые специальные элементы добавляются с помощью вставки HTML-кода.
  9. Большой выбор шрифтов. Подключите любой шрифт из Typekit, Google Fonts или используйте свой.
  10. Формы приёма данных. Ваши клиенты смогут подписаться на обновления, оставить свой телефон или email. Интегрировано девять сервисов приёма данных.

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

Free. Один сайт, 50 страниц, 50 МБ места на сервере. Адрес сайта вида mysite.tilda.ws. Бесплатно.

Personal. Один сайт, 500 страниц, 1 ГБ места на сервере. Подключение домена и полная коллекция блоков. Пятьсот рублей в месяц при оплате за год.

Business. Пять сайтов, 500 страниц (для каждого сайта), 1 ГБ места на сервере. Экспорт кода. Тысяча рублей в месяц при оплате за год.

Tilda Education

Tilda Education

В дополнение к сервису создания сайтов на платформе есть раздел образования — библиотека знаний по веб-дизайну и онлайн-журналистике. Раздел состоит из трёх частей: «Практика», «Развитие» и «Курсы». «Практика» — это объёмные руководства, которые отвечают на конкретный вопрос «как?» и помогают в ежедневной работе. «Развитие» содержит инструменты для поиска идей, расширения профессионального кругозора, формирования визуального вкуса и отслеживания трендов веб-дизайна. Курсы помогают освоить базовую теорию дизайна и повысить свою компетенцию в веб-паблишинге. Уже выпущен курс «Дизайн в цифровой среде», готовится к выпуску курс по интернет-маркетингу.

Valera L
2016-03-02 11:48:57
Прекрасная статья вслед за "Советы начинающему блогеру " Может, на тарифе Personal за 6000 в год они и продвигать сайт будут?
Igor Gorshkov
2016-03-02 11:54:36
Отличная статья и функционал у конструктора приличный. Но тарифы.... 🆘
Пётр Диденко
Пётр Диденко
2016-03-02 11:58:46
Да, кошмар. 7.5 долларов в месяц. Ни одному бизнесу не потянуть. За исключением Газпрома и Сбербанка, возможно.
Igor Gorshkov
2016-03-02 12:02:26
Было бы ещё рублей 100 - 200, то возможно было бы попробовать
Лера Мерзлякова
Лера Мерзлякова
2016-03-02 12:22:33
Для этого есть бесплатный план Free. Для личных нужд и чтобы «попробовать» его более, чем достаточно.
Igor Gorshkov
2016-03-02 12:23:42
🛂
Алексей Пономарь
Алексей Пономарь
2016-03-02 13:24:28
начните с Medium
Максим Веретенников
2016-03-02 13:30:28
Грабеж! Не один супер мега пупер конструктор не стоит таких денег. Проще нанять джентльмена который сваяет нам сайтик "под ключ". Получится конечно чуть дороже, но уже через год сайт себя оправдает =)
Алексей Пономарь
Алексей Пономарь
2016-03-02 13:37:12
Джентельмен за 12 тысяч сделает сайт? С хостингом? Ну-ну.
Valera L
2016-03-02 14:12:19
И - прекрасный ответ на комментарий вслед за прекрасной статьей! Алексей, "Medium" - это что вообще такое? Для сравнения недорогой хостинг стоит 7,5-10$ за год, 4$ - домен второго уровня в зоне .ru, конструктор, аналитика, поисковики - бесплатно Лайфак от лайфхакера как избежать траты 6000 на подобные сервисы: http://lifehacker.ru/kak-sdelat-sajt/
Алексей Пономарь
Алексей Пономарь
2016-03-02 15:03:31
Давайте по порядку. Хостинг за 10$ в год (это где такие цены сейчас?) замучает вас примерно через месяц и вам придется искать что-то хотя бы на уровне 5$ в месяц (минимальный инстанс на DO, кажется, стоит столько). Любой бесплатный конструктор будет ничем не лучше бесплатного тарифа тильды. остальное...ну да, бесплатно, заплатите своим временем в любом случае. В рубрике «как сделать сайт» мы рассказываем прежде всего не о том, как не платить денег, а о том, как сделать сайт хорошо.
Igor Gorshkov
2016-03-02 15:57:14
пусть он сначала отдаст много за разработку, а на хостинг можно и самому залить. Мои заказчики именно так и делали. Средняя стоимость сайта от 5000,так что вполне что за 12000- можно отличный сайт сделать, а если на бесплатном движке делать и просто дизайн заказать, то и дешевле выйдет. Так что этот конструктор ооооочень дорогой и не факт как у него нормально с серверами, а то может деньги отдашь, а через час сайт уже лежит.
Пётр Диденко
Пётр Диденко
2016-03-02 16:04:38
Как говорится, "мы все Вам завидуем" http://ura.ru/news/12674
Igor Gorshkov
2016-03-02 16:07:04
А причем тут ЭТО!!!
Пётр Диденко
Пётр Диденко
2016-03-02 16:10:00
Мы все завидуем Вам, так как у Вас столько времени вот этим всем заниматься, что было бы очень здорово, если бы у нас самих и большинства читателей ЛХ оно тоже было бы в таких количествах. Ну правда... Зачем вот это вот всё нужно? Сайт для бизнеса. Лендинг. Промо-страницы. Тыкнул пару раз, получилось офигенно, направил туда людей из вконтакта, купил чуть контекста, сидишь, принимаешь заказы. ПРОФИТ. И всё это - за полчаса и без мутных "джентльменов" и необходимости знать слово "хостинг". Вот.
Алексей Пономарь
2016-03-02 16:11:48
На ЛХ, например, лонгриды на тильде сделаны, проблем ни разу не замечали.
Igor Gorshkov
2016-03-02 16:12:57
Ну как я понял у них тариф FREE.
Пётр Диденко
Пётр Диденко
2016-03-02 16:15:36
Сейчас на рынке труда не очень ценятся те, кто умеет делать сайты за 5000 рублей и разбирается в хостинге за $4. Гораздо больше может заработать тот, кто за полчаса на Тильде или похожем конструкторе может наворотить то, что приносит деньги тут и сейчас.
Алексей Пономарь
2016-03-02 16:20:43
У кого у них? Я вам как руководитель Лайфхакера рассказываю это :) Тариф у нас не FREE :)
Igor Gorshkov
2016-03-02 16:22:01
все равно не вижу смысла, очень дорого...Для лендинга тем более дорого.
Vladimir S.
2016-03-06 00:08:22
Конструкторы часто "упрекают" в обилии лишнего кода, который плохо влияет на выдачу... Это стереотип или на самом деле так?
Факты мира
2016-03-09 14:16:38
так в машине тоже лишние детали могут быть, но основная ее функция - передвижение :)