Гайд по landing page: как создать доступный сайт на Тильде

Тильда — современный конструктор сайтов, который позволяет создать функционал от простой отправки заявки до сложного калькулятора или сайта мероприятия. Подходит для многостраничных сайтов, но чаще всего используется для landing page. Основное преимущество сервиса — вы можете самостоятельно вносить изменения на сайт. Для этого не потребуется участие программиста, дизайнера или верстальщика.

Кому подходит сайт на Тильде

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

• Стартапы — при незначительных вложениях вы получаете эффектную презентацию идеи.

• Локальный бизнес — одностраничный сайт помогает заявить о себе и получить эффективный канал взаимодействия с пользователями. 

• Личный бренд — сайт позволяет отразить характер вашей деятельности.

• Организаторы мероприятий — лендинг позволяет оплатить участие в режиме онлайн.

Еще один эффективный метод применения Тильды — открытие нового направления. Создание одностраничного сайта при минимальных затратах помогает проверить спрос на новый продукт или услугу компании. 

Возможности и интеграции Tilda: прокачайте свой сайт

Бесплатный тариф Тильды позволяет встраивать видео с YouTube или Vimeo, добавлять музыку с SoundCloud или забавные ролики с Coub. Сайт автоматически адаптируется под мобильные устройства, а статистику посещения веб-ресурса позволяют отслеживать встроенные сервисы. 

Расширить функциональность конструктора можно, добавив 40+ сторонних сервисов. Доступна интеграция виджетов для бронирования, форм опросов, сервисов аналитики, платежных систем, фотогалереи из Instagram, кнопок соцсетей, калькулятора и других элементов. Причем для этого не нужно владеть языками программирования. 

Сервисы веб-аналитики

Сервисы аналитики Яндекс. Метрики или Google Analytics позволяют проанализировать количество визитов, просмотров страниц, число заявок из форм и другие показатели. Эти данные помогут адаптировать сайт к высокому сезону, прогнозировать увеличение расходов на рекламу, а также улучшить удобство пользования лендингом.

Калькуляторы 

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

Формы опросов

Чем больше информации вы знаете о клиенте, тем эффективнее можно решать его проблемы и увеличивать прибыльность компании. В конструкторе сайтов доступна отдельная категория «Формы». Их можно интегрировать с сервисами для сбора данных Mailchimp, GetResponse, Google Forms и другими. 

Фидбеки и клиентская поддержка

Чтобы быстро задать вопрос менеджеру, оформить заказ или оставить отзыв без дополнительных переходов, нужны виджеты обратной связи. Они же значительно повышают конверсию. В Tilda доступны популярные сервисы обратной связи Callback Hunter, Jivosite и Chatra.

Музыка и звуковые эффекты

Музыкальный плеер эффективно использовать для блогов, промо-страниц продуктов, ивентов, студий звукозаписи, а также для портфолио ди-джеев и музыкантов. Песни, звуковые эффекты и дикторскую озвучку можно встраивать в фрагмент статьи, интервью, подкаста или аудиокниги. Или использовать в качестве портфолио работ, без длинного текста. В конструкторе сайтов возможна интеграция с SoundCloud, Mixcloud и Яндекс.Музыка — сервисы помогут подобрать треки исполнителей со всего мира и вставить их на страницу с помощью HTML-кода. Кстати, таким образом вы не нарушаете авторские права. Мы не рекомендуем бесплатно скачивать трек или даже покупать его, а затем размещать на странице — воспользуйтесь вставкой посредством кода. 

Этапы создания лендинга

Разработка лендинга на Tilda не занимает много времени, но включает в себя несколько обязательных этапов: 

• Анализ конкурентов — воспользуйтесь поисковиком или найдите конкурентов в соцсетях, после чего составьте таблицу с результатами. Выделите сильные и слабые стороны конкурента, стоимость его услуг и так далее. 

• Анализ целевой аудитории — определите, кто ваша целевая, что и в каком формате нужно ей предложить. Выделите цели, «точки боли» и способы решения проблем потребителей.
  Лендинг не должен просто информировать о продукте. Его цель — закрыть потребность клиента. Например, в супермаркетах сладости для детей часто размещают на уровне пола. Почему? Там их точно заметят маленькие дети. Это пример хорошей работы с ЦА.

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

• Создание прототипа — прототип схематично изображает структуру лендинга, тексты, графические и мультимедийные элементы, а также ссылки, которые будет содержать веб-ресурс. Прототипирование помогает протестировать удобство расположения элементов на сайте. Прототип можно нарисовать от руки или использовать специальные сервисы: Mockingbird и Axure. Первый работает онлайн, а второй необходимо устанавливать на ПК.  

• Реализация дизайна — если вы продаете инфопродукты или мастер-класс по digital-маркетингу, пользователь должен дойти до кнопки «Оплатить». Ничто не должно отвлекать внимание от кнопки целевого действия, в противоположном случае это плохой дизайн.  

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

• Запуск и тестирование — измерьте эффективность заголовка, кнопки, изображения и других элементов, чтобы повысить эффективность лендинга. Для этого можно использовать, например, сервис Google Optimize. Он бесплатный, удобен в пользовании, работает в связке с Google Analytics. 

Качественную реализацию перечисленных этапов обеспечивают в специализированных агентствах. Специалисты также настраивают рекламу и оптимизируют landing page под поисковые системы.   

Дизайн лендинга: выбираем дизайн, шрифт и цвета

Веб-сайт должен вызывать доверие и формировать позитивное впечатление — в противоположном случае пользователь закроет вкладку и не станет вашим покупателем. Дизайн и принципы разработки лендингов постоянно обновляются, но принципы, благодаря которым формируется надежный образ, не меняются в течение многих лет. Что формирует впечатление пользователя от веб-сайта? Какие элементы повышают доверие к нему? Это качество дизайна, доступность информации, разнообразный и релевантный контент, а также связь с другими веб-сайтами.

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

Большое влияние на восприятие оказывает подобранная цветовая гамма. Грамотное применение цветов повышает узнаваемость бренда на 80%. Выбранные оттенки также влияют на решение потребителя, могут вызывать аппетит или стимулировать покупку: 

• Желтый цвет считается самым счастливым. 75% продаваемых в США карандашей окрашены в желтый цвет.

• Кнопка CTA (призыва к действию) красного цвета может повысить уровень конверсии на 20% и более.

• Красный цвет в брендинге упаковок и логотипов используют более чем 60% ритейлеров.

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

• Красный и оранжевый — самые популярные цвета среди продуктовых брендов. Они повышают чувство голода и стимулируют импульсивные покупки. 

60–90% суждений о бренде основаны исключительно на цветах. Кроме того, при совершении покупок 90% покупателей ориентируются на цветовую гамму. Что еще повышает доверие пользователей при просмотре лендинга? Шрифт. Пользователи скорее всего не знают название шрифта на вашем лендинге, но они безошибочно могут определить, когда с ним что-то не так. Шрифт может быть нечитаемыем, может не подходить сайту или не соответствовать сфере вашего бизнеса. 

Disney использует декоративный шрифт. Однако подойдет ли он финансовой компании? Вряд ли. Считается, что тонкий шрифт подходит прогрессивным, современным технологичным компаниям. Его же оптимально использовать для эстетичного блога или fashion-брендов, а также ювелирных компаний и студий красоты. Шрифтов с засечками лучше избегать финансовым или технологическим организациям — они будут снижать их авторитет. 

Ошибки в оформлении landing page: как «убить» доверие пользователя?

Согласно исследованию американской консалтинговой компании по UI/UX дизайну Nielsen Norman Group, большинство пользователей находится на сайте 59 секунд. Плохой дизайн может значительно сократить это время. Какие ошибки приводят к закрытию лендинга в первые секунды? 

• Отсутствие разделения на блоки. Создавая большие отступы между блоками и разделяя их цветом, вы повышаете восприятие контента, а также упрощаете навигацию по лендингу и поиск нужной информации. 
• Всплывающие попапы с опросами. Закидывая посетителя лендинга вопросами в первые секунды навигации по сайту могут привести к тому, что потенциальный клиент уйдет, а ваши вопросы останутся без ответа. 
• Использование закрытого контента. Посмотреть информацию о продукте после регистрации, сделать дополнительные клики, чтобы развернуть информацию — закрытый контент снижает интерес и доверие пользователя к сайту. 
• Нечитаемый текст. Используя черно-белое фоновое фото, располагайте надписи яркого оттенка на затемненном участке изображения, чтобы улучшить восприятие текста.  
• Перегруз цветов. Большое количество используемых цветов отвлекает внимание и вызывает путаницу: пользователь не может выделить, какая информация важнее. Используйте 1–2 цвета, чтобы выделить приоритетные элементы.

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

Тарифы Tilda: бесплатный, персональный и бизнес

В Tilda доступны три тарифных плана: Free, Personal и Business. В бесплатный включены базовые дизайны блоков, редактор для создания дизайна с нуля Zero Block и название сайта вида mywebsite.tilda.ws. Самый дорогой, бизнес-тариф, обойдется в 15 долларов в месяц при оплате за год. Он подойдет для предпринимателей, которые ведут несколько бизнесов. 

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

Все ли так гладко? Минусы конструктора Tilda

Несмотря на популярность Тильды, у конструктора все же есть недостатки. Главный из них — готовых многостраничных шаблонов на платформе нет. Каждый блок сайта необходимо разрабатывать отдельно. Есть также ограничения по загрузке файлов на лендинг. Размер изображения не должен превышать 10 Mб, а максимально допустимый общий объем фото на сайте — 1 Гб. 

Tilda VS Wordpress: что выбрать для лендинга?

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

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

Перенос сайта с Тильды на WordPress

Если вы задумались о SEO-продвижении или расширении функциональности сайта, может потребоваться его перенос с Тильды. Помимо оптимизации под поисковые системы это позволит гибче работать со структурой сайта, устранять технические ошибки, которые влияют на рейтинг веб-ресурса в поисковиках, а также добавлять неограниченное количество страниц. В отличие от Tilda, WordPress при помощи плагинов позволяет работать с мета-тегами и alt-атрибутами. Если Tilda — это лендинги с красивым дизайном и быстрым запуском проекта, то Вордпресс — это функциональность и развитие в поисковике.

Разработать лендинг на Тильде или Вордпрессе, а также перенести сайт с одной CMS на другую могут специалисты Landing Page Studio. Мы занимаемся созданием красивых, функциональных сайтов для сфер ритейла, красоты и здоровья, строительных компаний и так далее.