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

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

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

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

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

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

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

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

C Tilda интегрированы двадцать сервисов: email, Google Drive, MailChimp, SendGrid, GetResponse, UniSender, SendinBlue, Mailerlite, SendPulse, AmoCRM, «Мегаплан», Pipedrive, Zoho CRM, Hubspot, «Битрикс24», Telegram, Slack, Trello, Zepier и Webhook.

Можно получать заявки на email, формировать списки рассылок или собирать лиды в системе управления данными клиентов (CRM).

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

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

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

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

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

5. Профессиональный редактор Zero Block для дизайнеров

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

6. Сервисы приёма платежей

При создании интернет‑магазина на Tilda можно подключить удобную вам платёжную систему и получать оплату онлайн законно. В Tilda доступно к подключению 14 сервисов для приема оплат: Cloudpayments, Robokassa, PayPal, «ЮMoney», «ЮKassa», «Альфа‑Банк», Сбербанк, «Тинькофф Банк», LiqPay, bePaid, 2Checkout, PayAnyWay, Stripe и WayForPay.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tilda Education

В дополнение к сервису создания сайтов на платформе есть онлайн‑журнал Tilda Education — библиотека знаний о веб‑дизайне и маркетинге. Практические руководства и видеоуроки ответят на конкретный вопрос «как?» и помогут в ежедневной работе. Статьи из раздела «Дизайн» содержат инструменты для поиска идей, расширения профессионального кругозора, формирования визуального вкуса и отслеживания трендов веб‑дизайна. Истории пользователей Tilda вдохновляют на создание собственных проектов, а курсы помогают освоить базовую теорию дизайна и повысить свою компетенцию в веб‑паблишинге.

На Tilda выпущено пять курсов, которые можно пройти самостоятельно в любое удобное время: «Создание Landing pag», «Дизайн в цифровой среде», «Интернет‑маркетинг с нуля», «Анимация в вебе» и видеокурс про метод продуктовой разработки Jobs‑to‑be‑Done.