Как сделать лендинг на тильде
Как сделать сайт на Тильде: пошаговая инструкция
Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде ― о том, с какими сложностями столкнулась и сколько времени на это ушло.
Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia. Советы Антона включила в этот материал.
Перед созданием сайта я отвела день на подготовку: продумала структуру сайта, подобрала контент, сделала прототип, выбрала цвета и шрифт.
Структура сайта
Структура сайта зависит от задачи и типа сайта. Например, студии дизайна интерьера нужно показать готовые проекты, а организатору онлайн-курса — рассказать о программе.
У многостраничников и интернет-магазинов своя структура, а у лендингов ― традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты.
Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.
Чтобы продумать структуру лендинга, я использовала шаблон с универсальными блоками и оставила только те, что решают мою задачу: обложка, команда, главные цифры, содержание курса, цены, FAQ, контакты.
Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6‒7 блоков, а продавцу буровых установок может не хватить пятнадцати.
Подготовка контента для сайта
Дальше я подготовила текст и фотографии. Вот несколько советов по подготовке текста:
В блоге Тильды есть статья, которая поможет написать полезный текст для сайта.
Я подобрала иллюстрацию для главной страницы, скачала фотографии авторов курса, сделала скриншоты страниц с уроками.
Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды — 1680px по большей стороне.
Если у вас много иллюстраций на сайте, сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдёт. Сжимать фото можно на бесплатном сервисе Optimizilla.
Прототипирование
Прототип — схема сайта, которая показывает, как будут располагаться кнопки, текст, картинки и другие элементы. Мне как начинающему ребята советовали нарисовать прототип на бумаге или расписать структуру сайта в гуглдоке.
В Svoemedia делают прототипы и согласовывают проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде.
Шрифты, цвета, иконки
Для начинающих самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.
Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.
Лучше не использовать на сайте больше 2‒3 цветов. Один цвет — основной, остальные — акцентные.
Советуем не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».
Я не стала искать иконки, решила ограничиться стандартными иконками Тильды. Мои коллеги-дизайнеры для поиска иконок пользуются сайтами Flaticon или Thenounproject. На первом сайте иконки бесплатные, их можно скачать в любом цвете и в формате SVG. На втором сайте — хорошие подборки, можно найти несколько разных иконок в едином стиле.
курс
Введение
в цифровой дизайн
Вёрстка в Тильде
Вёрстка сайта заняла один день. Чтобы быстро собрать сайт на Тильде, я взяла готовый шаблон. Впоследствии от него осталось только три блока, остальное я добавляла из библиотеки блоков Тильды.
Собирать сайт из блоков было легко, интерфейс Тильды интуитивно понятный. Мне даже не пришлось обращаться к инструкциям на этом этапе. Если вам что-то будет неясно, в справочном центре Тильды — ответы на все вопросы.
Вот несколько блоков моего лендинга:
Все стандартные блоки Тильды хорошо сочетаются между собой. И лучше не вносить много правок.
Проверяйте, чтобы одинаковыми были цвета, формы кнопок, отступы, размер шрифта для заголовков разных уровней и основного текста.
Мысленно проведите две линии слева и справа ― элементы сайта не должны выходить за эти линии.
Отрегулировать ширину блока можно в его настройках. Можно установить ширину 12 колонок.
Чтобы сайт на Тильде не выглядел шаблонным, его можно кастомизировать. Есть несколько простых приёмов, которые помогут сделать сайт непохожим на все остальные:
Опытные дизайнеры часто всё делают в zero. Начинающим для кастомизации лучше попробовать сторонние сервисы, которые легко интегрируются с Тильдой. Например, на сайт можно добавить фотогалерею из Instagram, калькуляторы, интерактивные картинки.
Действия перед публикацией сайта
Я собрала всё в Тильде, но мне предстоит ещё один важный этап: оптимизация и тестирование. У нас есть чеклист, который дизайнеры Svoemedia каждый день используют в работе. В нем всё, что нужно сделать перед публикацией сайта с нашими лайфхаками. Ещё у Тильды есть инструкции для каждого из этих действий.
Я перечислю только самое важное, без чего сайт не будет функционировать полноценно. Вот что нужно сделать:
Что в итоге
Чтобы сделать сайт на Тильде, за который не будет стыдно, нужно продумать структуру, написать текст, подобрать картинки, собрать всё в Тильде, оптимизировать, протестировать и опубликовать.
Чтобы сайт получился достойным, вдохновляйтесь сайтами из вашей ниши. Смотрите, что в них работает и почему, применяйте лучший опыт на своём сайте.
Создание лендинга заняло 2 дня: один на подготовку контента и прототип и день на вёрстку в Тильде, оптимизацию и тестирование.
Инструкция: как сделать лендинг для онлайн-школы без дизайнера и программиста
Лендинг (или landing page) — одностраничный сайт. Его цель — продать товар или услугу посетителям. Сегодня расскажем, как сделать такую продающую страницу с помощью конструктора Tilda: быстро, просто, можно бесплатно.
Что такое Tilda
Tilda или «Тильда» — конструктор сайтов: лендингов, визиток, корпоративных порталов и так далее. В нём можно создать любой веб-ресурс без знаний, кода буквально за полчаса. Всё настраивается мышкой и клавиатурой, а результат впечатляет — конструктор используют даже крупные компании.
Лендинг банка «Точка» тоже сделан на Tilda
Создание сайтов на «Тильде» проще, чем разработка на обычных CMS. Чтобы получить стандартный веб-ресурс, нужно заказать его разработку у программиста, привлечь дизайнера, SEO-оптимизатора и других диджитал-специалистов. А в конструкторе можно сделать всё самому.
Основные преимущества Tilda:
У Tilda есть больше 480 шаблонов для разных сайтов, готовая интеграция с 12 сервисами для лендингов, интеграция с другими веб-ресурсами через API и многое другое.
Предусмотрено несколько тарифов: один бесплатный, два платных. На бесплатном функции ограничены, можно создать 1 сайт до 50 страниц. На платном Personal доступны 1 сайт, более 50 страниц, подключение своего домена, полная коллекция блоков. На платном Business всё то же самое, но можно создавать до 5 сайтов и экспортировать исходный код. Цена начинается от 500 рублей.
Для дизайнеров есть «нулевой блок», чтобы верстать страницы без шаблонов. Полный список возможностей смотрите на сайте «Тильды».
Как создать лендинг на Tilda
Сначала определитесь, какой тариф вам нужен. Если готовы мириться с некрасивым URL лендинга, не платите. Адрес сайта будет выглядеть примерно так: project89098219.tilda.ws.
А если хотите потом перенести лендинг на свой домен, получить максимум возможностей редактирования или создать несколько продающих страниц, заплатите за расширенный тариф.
Зарегистрироваться на сайте просто — достаточно придумать пароль, указать адрес электронной почты и имя. После регистрации создайте проект: его название ни на что не влияет, оно нужно, чтобы вы сами поняли, какой сайт соответствует проекту. Когда зайдёте в проект, нажмите «создать новую страницу».
В новом проекте нет ничего — нажмите сюда, чтобы создать лендинг
Перед вами откроется список шаблонов. Лендинги расположены в первом разделе «Бизнес». Посмотрите список и выберите подходящий шаблон — в базе уже есть готовые решения для разных типов бизнеса. Если хотите сделать что-то уникальное, выберите пустую страницу — она первая в списке. Работать с шаблонами проще, поэтому в примере мы будем использовать шаблон «универсальный лендинг».
Лайфхак: если хотите посмотреть, как выглядит шаблон полностью, наведите на него курсор. Изображение будет прокручиваться.
В шаблоне уже есть подсказки: что и где писать, какую информацию нужно разместить, куда добавить логотип.
В Tilda есть готовые решения для разных типов бизнеса
Когда выберете шаблон, попадёте в меню редактирования. Чтобы поменять текст, достаточно кликнуть на него мышкой. А чтобы изменить цвет заголовков, подзаголовков, фона, нажмите на «Настройки» нужного блока.
На одном экране можно полностью изменить весь блок: и содержание, и оформление
Доступны стандартные средства форматирования. Например, можно написать текст, выделить его и сделать жирным, подчёркнутым, изменить размер, выравнивание, межстрочное расстояние.
Выделите текст, и вверху появится панель для визуального редактирования
Даже без фона вы можете сделать нормальное форматирование и расставить цветовые акценты — например, выделить оффер или контакты.
Лайфхак: если случайно удалите весь текст, не сможете потом просто кликнуть по тому же месту и написать новый. Текст можно снова добавить через «Контент».
В «Настройках» можно менять всё что угодно. Например, убрать из шапки сайта пункты меню или оставить их, чтобы пользователь сразу мог перейти к контактам, преимуществам, другому экрану. А ещё можно поставить свои ссылки на кнопки социальных сетей, добавить нужный URL в конверсионные кнопки, поменять там текст, описания преимуществ и так далее.
Изображения можно заменить, просто кликнув по ним. Только будьте внимательны с размерами файлов: лучше, чтобы они были такие же, как в шаблоне. Иначе оформление может «полететь».
Нажмите на изображение и загрузите своё в открывшемся окне: по ссылке или с компьютера
Если нужно быстро поменять всё оформление блока, можно сделать это за пару нажатий мышкой. Нажмите на цифры в левом верхнем углу и выберите подходящее. Эта функция есть не на всех блоках — иногда чтобы полностью изменить оформление, надо добавить новый модуль.
Нажмите сюда, а потом наведите курсор на какую-нибудь строку — сбоку покажут, как выглядит это оформление
Чтобы полностью поменять структуру лендинга, можно добавлять новые и удалять старые блоки. Например, убрать экран с рассказом о компании и добавить модуль, в котором опишете программу обучения на вашем курсе. Сделать это просто.
Так можно удалять и добавлять новые блоки
Через функцию добавления новых блоков можно добавить якорные ссылки. Потом их нужно разместить в шапке сайта. Например, если добавили якорную ссылку перед блоком с формой обратной связи и контактами, разместите в шапке сайта ссылку «Контакты» — пользователь сразу сможет перейти к ним. Такие ссылки доступны только на платных тарифах.
После того как всё настроили, можете посмотреть, как будет выглядеть сайт, заполнить метаданные для него, задать общие настройки.
У Tilda очень много возможностей — например, в «Настройках» можно установить, как сайт будет выглядеть в поисковой выдаче и на Facebook
Если выберете платный тариф, получите больше возможностей — например, сможете выбирать больше типов оформления, перенести сайт на свой домен или хостинг.
Создать лендинг на Tilda легко. Но недостаточно просто разобраться в конструкторе и сделать пару блоков. Чтобы лендинг работал, нужно грамотно подойти к его оформлению.
Что сделать, чтобы лендинг работал
На самом деле сделать надо не так уж и много. Можно начать с малого — выбрать структуру, соответствующую вашему бизнесу. В шаблонах Tilda уже есть подсказки, можно просто следовать им.
Изучите свою целевую аудиторию перед тем, как создавать лендинг. Узнайте, сколько им лет, чем занимаются, какие цвета любят, какие термины не хотят видеть. И пишите понятный текст для конкретных людей: тогда он «выстрелит».
Чтобы повысить конверсию стандартного, шаблонного лендинга, заранее проработайте структуру. Важно составить её так, чтобы потенциальный покупатель понял свою выгоду от покупки. Чаще всего в структуре используют:
Можете вдохновиться примерами сайтов на Tilda— посмотрите, как делают лендинги и другие веб-ресурсы разные компании, чтобы подобрать оптимальную структуру для своей ниши.
Правильная структура — ещё не всё. Лендинг должен внушать доверие. Поэтому пишите правду — не стоит приукрашивать реальность, особенно если всё перечисленное вами можно легко проверить. А ещё не усложняйте восприятие — пишите коротко, понятно и ёмко.
Ваш лендинг должен быть простым, понятным и серьёзным. Тогда он будет работать хорошо.
На Tilda можно быстро создать конверсионный лендинг, если разобраться с настройками конструктора и писать просто, понятно для целевой аудитории. Чтобы получить максимальную отдачу, тестируйте разные изменения на лендинге: смотрите, как влияют на конверсию цвета кнопок, заголовки, расположение модулей. Тогда сможете найти самый удачный вариант.