Виктория Кучинова
Главная проблема большинства современных лендингов – все они будто сделаны под копирку. А где же креатив, огонь, где дизайнерские безумства?
В этой подборке я собрала интересные фишки и необычные эффекты. Часть из них сделали разработчики и веб-дизайнеры «Текстерры», часть нашлась на просторах рунета. Не обошлось и без примеров отвратительного дизайна и откровенной шизы – в конце статьи вас ждет знакомство с хомяком-убийцей и Снегурочкой с ведром.
Смотрите, вдохновляйтесь, применяйте понравившиеся идеи на практике, миксуйте их со своими и не забывайте проводить A/Б-тестирования – вот единственно правильный рецепт создания убойных посадочных страниц.
И, главное, помнить, что лендинг – не самодостаточный инструмент. Для конверсий, лидов и продаж нужен качественный трафик. А добыть его сложно без комплексного продвижения .
Обычно на одностраничниках используют стандартную форму заявки с несколькими полями. Чаще всего клиенту нужно указать контактные данные – имя-фамилию, почту или телефон. Но в некоторых сложных сферах лучше раскрыть тему подробнее. Вот как это сделали в «Текстерре»: в форме лендинга dellservers.ru клиент может выбрать модуль, параметры, задачи сервера. Может сбросить значения, если что-то пошло не так.
Для чего это нужно? Владелец лендинга в любом случае получит свои лиды – даже если полей в форме всего два-три. Но вот клиенту будет интересно копнуть поглубже. Не просто заказать, а самостоятельно выбрать свой вариант.
На лендинге планировщика задач wunderlist.com/ru – сразу два призыва к действию, которые усиливают друг друга: «Создать бесплатную учетную запись» и «Загрузить Wunderlist». Пользователи кликают по обеим ссылкам, конверсия растет, а лендинг выполняет свою работу на отлично.
Это не новая, но по-прежнему работающая фишка. Покажите клиентам, чего вы добились, в цифрах: это понятнее, нежели абстрактные фразы «мы лучшие», «у нас сотни выполненных проектов» и так далее. Посмотрите на лендинг smartprogress.do : сразу видно, сколько человек уже присоединились к проекту, сколько целей поставили, сколько достижений выполнили.
Безликие шаблонные лендинги – бр-р, что может быть унылее! Оживите свой одностраничник, добавьте огня, заинтересуйте потенциального клиента. Например, на странице услуг «Текстерры» по созданию сайтов размещены фото сотрудников, которые непосредственно этим и занимаются. Посетитель заходит и видит: ага, моим ресурсом будут заниматься не абстрактные разработчики, а вполне живые Святослав, Полина, Артем и другие.
На многих лендингах и сайтах задать вопрос можно только через форму. А это значит, нужно указывать имя и фамилию, оставлять телефон и электронную почту. Иногда вообще приходится вводить капчи и коды – ужас! Понятно, что это делается для того, чтобы получить лиды. Но есть и другой вариант – как на лендинге «Церебро Таргет». Если вы зарегистрированы во «ВКонтакте», ничего заполнять не нужно – бери и пиши. И клиенту удобно, и владельцу хорошо – контакт оставлен, можно работать дальше.
Можно попросить клиентов рассказать о своих впечатлениях и опубликовать полученные тексты на лендинге. Но загвоздка в том, что посетитель никак не проверит – реальные это отзывы или фейковые. Лучше пойти дальше и убедить посетителей в этом. На лендинге huskypark.info , который разрабатывала «Текстерра», приводятся слова клиентов из «Инстаграма» со ссылками на их аккаунты. Все честно – зайдите и убедитесь.
Лендинг создан для приложения Qubi . Это игра для детей 3+ лет и взрослых. Суть игры проста. На первом шаге пользователь по предложенной схеме склеивает реальный бумажный, картонный или деревянный кубик.
Потом он устанавливает приложение, открывает его на смартфоне и «смотрит» на кубик через камеру устройства.
На экране смартфона или планшета кубик оживает. Пользователь играет в трехмерный вариант «Змейки», «2048», «Лабиринта». При этом управлять игрой нужно с помощью реального кубика. Чтобы управлять кубиком двумя руками, нужно использовать специальную подставку для смартфона, которую можно собрать самостоятельно.
Трехмерную модель кубика можно увидеть на иллюстрации (gif).
Клиент попросил сделать лендинг, который подчеркивает особенность игры: использование трехмерной дополненной реальности. В частности, он хотел видеть эффект перемещающихся граней трехмерного кубика, активная грань которой вписана в экран устройства посетителя.
Мы реализовали трехмерность с помощью 3D-трансформаций CSS3. Переходы между гранями кубика сделаны с помощью чистого JavaScript с отслеживанием событий drag и touch. Благодаря необычным переходам между экранами у пользователя создается ощущение объемности экрана. Это особенно ярко выражено на рабочей версии посадочной страницы.
Для финальной версии лендинга мы сделали более реалистичный вариант кубика. В отличие от рабочей версии, в финальной вращение кубика происходит снаружи, а не изнутри. Ощущения трехмерности усиливаются благодаря анимации заголовков.
Лендинг полностью адаптивный.
Необычность лендинга «ДСК.Color» заключается в возможности самостоятельно выбрать цвет мебели и предметов интерьера с помощью интерактивной палитры.
Компания «ДСК.Color» окрашивает любые поверхности в разные цвета. Можно заказать окраску мебели, бытовой техники, велосипедов, музыкальных инструментов и других предметов. Клиент может выбрать любой цвет.
Самая востребованная услуга – окраска мебели и предметов интерьера. На нее приходится около 80 % работ клиента.
Клиент попросил сделать яркий и запоминающийся лендинг «с призывом окрасить все вокруг». У него были идеи сделать изображения мебели в формате 3D, чтобы посетитель «мог покрутить и рассмотреть окрашенный предмет с разных сторон».
Мы предложили клиенту идею: дать посетителю возможность самостоятельно выбрать цвет мебели и предметов интерьера.
Для этого на посадочной странице предлагалось изображение комнаты, в которой основные предметы посетитель может раскрашивать с помощью открывающейся по клику палитры. На основе выбранных цветов и предметов пользователь может рассчитать стоимость услуг. Первый прототип выглядел так.
Клиенту идея очень понравилась, поэтому мы сделали рабочий прототип лендинга. На нем основная часть выглядела уже так.
Договорились с клиентом оставить возможность окрашивания стола, стульев, двери и кухонного гарнитура. Это основные предметы, которые красит компания.
После согласования прототипа в работу включились дизайнер и верстальщик. Первый нарисовал все предметы в svg (это формат графики). Второй сверстал и добавил к областям svg палитру цветов. После этого реализовали модальное окно. С его помощью пользователь может перепроверить цвета и предметы и отправить заявку на услугу.
С помощью прелоадера или спиннера можно сделать более удобным и визуально привлекательным любую посадочную страницу. В этом разделе поговорим о прелоадерах и посмотрим на примеры этих элементов, созданные специалистами «Текстерры».
Прелоадер или спиннер – знак, который появляется на экране до загрузки страницы. Эти элементы вы видите ежедневно, когда пользуетесь интернетом. Ниже пример прелоадера.
Прелоадер решает практическую задачу: сообщает пользователю, что страница загружается, а также заменяет собой визуально непривлекательную картину загрузки. Это нужно пояснить.
Из-за технических особенностей работы браузеров страницы сайтов загружаются неравномерно. Во время загрузки верстка может «плыть». Если страница загружается несколько секунд, а не доли секунды, пользователь какое-то время наблюдает непривлекательную картину.
Прелоадеры реализуются с помощью стандартных инструментов фронтенд-разработки: HTML, CSS, JavaScript и дополнительных библиотек и фреймворков, например, jQuery, React.
Мы создаем уникальные прелоадеры, в том числе анимированные. Вот несколько наших работ.
Для лендинга Qubi мы сделали прелоадер, который повторяет навигационное меню. Это позволяет пользователю понять принцип управления страницей до ее загрузки.
На сайте Levellen Interiors мы использовали прелоадер в виде логотипа компании. Это дополнительный элемент брендинга сайта.
На лендинге представлена информация об аренде помещений в бизнес-центре. Главный секрет посадочной страницы находится в разделе «Офисы». Здесь пользователь может посмотреть наличие свободных офисов на каждом этаже здания.
При наведении курсора на свободный офис всплывает кнопка «Подробнее».
Нажатие кнопки направляет пользователя на страницу с информацией об офисе и его фотографиями. С этой страницы можно оставить заявку на аренду помещения.
Наш дизайнер нарисовал формы офисных помещений, рисунки сделаны в формате svg. Эти рисунки накладываются на планы этажей. Когда администратор сайта в панели управления отмечает, что офис свободный, скрипт включает отображение рисунка на плане и возможность перейти на страницу с информацией и формой заказа. Когда администратор отмечает, что офис занят, скрипт отключает изображение рисунка на плане.
В этом примере нет сложных технических фишек и дизайнерских эффектов – весь лендинг вывозит красивая картинка: фон, цвета, аппетитные фотографии астраханской икры. Одностраничник astrahancaviar.ru – хороший пример того, как благодаря дизайнеру продукт хочется приобрести. И немедленно съесть!
Напоследок о наболевшем – несколько примеров ужасных лендингов. Для контраста, фейспалма, бессильной агонии и всего такого. Не буду расписывать, что в них не так – предлагаю вам самим решить эти задачки. Ита-а-ак…
Лучший сервис для создания первого лендинга. Комплект из пары десятков одностраничных шаблонов подскажет наилучшие варианты оформления и подачи предложения. Редактор позволяет в считанные минуты собрать из готовых адаптивных блоков эффективную страницу. Главное - расположить секции в логическом порядке и красиво преподнести оффер. Изображения, табы, таймер для акций, отзывы, наглядная карта, коммуникации, включая заказ обратного звонка, и многое другое присутствует в полном объёме.
Меню лендинга поддерживает анкорные ссылки для быстрого доступа к секциям. Эффект параллакса, широкоформатные блоки с красивой подачей изображений и видеофоны помогут создать насыщенную и полезную страницу. Всплывающие окна позволят акцентировать внимание посетителей на акциях. Бесплатное подключение SSL укрепит доверие клиентов, отправляющих вам личные данные через форму. Оптимальный рецепт: выбираете наиболее близкий по тематике шаблон, заполняете своим контентом и публикуете, ничего структурно не меняя.
Плюсы:
Минусы:
Хотите получить скидку? Активируйте промокод UGUIDE-25 и сэкономьте -25% при оплате любого тарифного плана.
Специализированный конструктор посадочных страниц. Предназначен для тестирования маркетинговых гипотез, арбитража трафика и заработка на офферах веб-предпринимателями. Подходит и новичкам, и опытным пользователям. Редактор позволяет собирать страницы из готовых секций и виджетов, последовательно добавляя их один за другим. Выбор их достаточный: прайс, отзывы, этапы, таймлайн, таймер, таблица, заголовки, кнопка, галерея, свой код HTML, обратный звонок, живой чат, панели соцсетей и прочие.
Эффективные структуры дизайна для уверенных продаж, сдобренные эффектами переходов, корректно отображаются на всех типах экранов. Изюминка сервиса - отличная подача статистической информации. Конверсия в процентах, точки падения продаж, посещаемость по источникам и прочее - всё понятно для новичков и достаточно детально для опытных веб-мастеров. Подключение SSL бесплатное. Добавление всплывающих окон позволит получить ещё больше лидов. Простой в использовании и эффективный конструктор.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
Wix - конструктор для создания лендингов с богатым, разнообразным дизайном и полным набором маркетинговых уловок. Можно нарисовать запоминающийся, уникальный шаблон либо воспользоваться одним из многочисленных готовых вариантов - заполняете своим контентом, и страница готова к публикации. Богатый набор приложений позволит добавить эффекты, таймеры, всплывающие окна, отзывы, интеграции социальных сетей, анимированные счётчики посетителей, подарочные карты, красивые формы обратной связи, сбора подписок, записи на приём и прочее по смыслу задачи.
Богатый набор виджетов, встроенный графический редактор, анимации, наборы иконок, растровых фигур и эффекты скроллинга позволят создать яркий лендинг, претендующий на высокую конверсию. Для работы с клиентской базой имеется встроенная CRM, возможность настройки маркетинговых и триггерных рассылок, для анализа результатов - Google Analytics. Использование Wix Code позволит настроить расписание вывода данных в зависимости от времени суток, региона и прочих вещей. Структура лендинга реализуется через анкорные ссылки на области макета.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
LPGenerator - один из самых мощных специализированных конструкторов лендингов. В принципе, это идеальный сервис в своей нише. Относительная сложность редактора компенсируется огромными возможностями по кастомизации дизайна и функциональности страниц. Более 250 профессиональных шаблонов из 22 категорий. Продуманный и гибкий процесс прорисовки страницы с нуля, можно править код макетов вручную и загружать собственные. Есть витрина товаров с пагинацией - качественный мини-магазин внутри лендинга.
Полный набор инструментов для анализа конверсии и маркетинга (всесторонняя статистика, A/B-тесты, воронка продаж, источники трафика, цели конверсии, CRM, рассылки и прочее) позволяют выжать максимум эффекта со страниц. Редактор визуальный, виджетов очень много, есть удобный конструктор секций, мониторинг версий страницы с анализом конверсии и т. д. Аудитория системы - веб-студии и опытные разработчики. Для новичков есть «Академия лидогенерации» - мощный курс, который окажется полезным большинству пользователей.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
uCoz - удачный выбор для продвинутых разработчиков. Позволяет работать с кодом, есть конструктор шаблонов, в котором легко выстроить блочную структуру одностраничника. Для новичков наилучший вариант - использование премиум-шаблона, их очень много и там всё есть: красивый дизайн, правильная структура, функциональность (формы, заказ чего-либо, витрина и т. д.). Кроме того, продвинутая система сбора статистики поможет отслеживать эффективность страницы и продвигать, ведь контекстную рекламу можно контролировать прямо из панели управления.
Редактор поддерживает подключение сторонних PHP-скриптов и загрузку собственных шаблонов. При наличии опыта собрать лендинг - дело 1-2 вечеров. Сервис поддерживает синхронизацию с социалками, онлайн-чатами, конструкторами форм, калькулятором услуг и прочими полезными штуками. Кастомизация страниц происходит, в основном, через правку кода, хотя визуальный редактор тоже есть. Это вариант для тех, кто знает, как нужно верстать лендинги либо новичков, желающих опубликовать страницу на основе подарочного премиум-дизайна.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
PlatformaLP - специализированный конструктор посадочных страниц. Около полусотни классных шаблонов, куча стандартных виджетов, а также профильных вроде счётчиков/вкладок/декораций/спойлеров и визуальный редактор, позволяющий гибко отрегулировать структуру, содержимое каждой секции страницы для десктопного и мобильного формата в отдельности. Есть корзина - можно продавать онлайн. Поддерживается вставка HTML-кода, а также интеграция сторонних сервисов - Bitrix24, amoCRM, GetResponse, RoboKassa, MailChimp, Яндекс.Касса, JustClick, Mailer, Unisender, SendPulse и LeadVertex.
Поддерживаются мультилендинги: можно создать несколько вариантов посадочной страницы для демонстрации в различных регионах. Эффективность можно измерять A/B-тестами, аналитические данные получать от Google или Яндекса. Ещё можно добавить реакции лендинга на поведение посетителя - всплывающие окна различного содержания при уходе со страницы, прокрутке до футера, повторном заходе, подачи заявки, заполнении формы и т. д. Основано это на работе с Cookie (сообщение на согласие их использования есть). Можно включить lazy load для изображений (ускоряет загрузку страниц), добавить анимации, использовать Google Fonts.
Плюсы:
Минусы:
Стоимость за месяц:
Пакеты расширения для бизнес-планов:
Сервис, хорошо приспособленный для сборки посадочных страниц. Два десятка профильных шаблонов хорошего качества, удобный визуальный редактор плюс возможность бесплатной публикации лендинга на своём домене. Набор виджетов и готовых блоков достаточен для публикации страниц классической структуры, а в меру гибкая кастомизация поможет украсить дизайн. Можно просто заменить стоковый контент в секциях шаблона своим и публиковать страницу.
Поддерживаются интеграции 16 полезных сервисов (PayPal, Google, MailChimp и др.), стандартные SEO-настройки и приём онлайн-платежей. Значительно изменить стоковый шаблон можно при помощи инструментов дизайнера, идущих в комплекте. Новичкам пригодится шпаргалка прогресса сайта со списком задач и ссылками на области панели управления, в которых они решаются. Также есть эффекты, возможность командной разработки, гибкая настройка шрифтов и языков сайта. Всё это упаковано в приятный и простой интерфейс.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
LPMotor - специализированный сервис, предлагающий создание посадочной страницы с нуля, готовых блоков либо с использованием адаптивных шаблонов (около 100 штук, качество отличное). Визуальный редактор позволяет редактировать каждый элемент в отдельности, регулировать позиции, комбинировать в произвольном порядке блоки, секции и шаблоны секций, детально настраивать их внешний вид, создавать переходы между блоками (скос, закругление, угол), добавлять эффекты, а также скрывать отдельные блоки от показа на ПК или мобильных устройствах. Удобен для новичков.
Есть встроенная CRM хорошего качества, возможность тестирования вариантов одной и той же страницы (A/B-тест) и автоворонка продаж - интерфейс для настройки автоматических действий в случае выполнения пользователем заданного сценария (заполнил форму - получил письмо и т. д.). Поддерживаются всплывающие окна и множество интеграций: Jivosite, VK, Facebook, MailChimp, UniSender, GetResponse, Яндекс.Касса/Деньги, JustClick, amoCRM, PayPal, RoboKassa, Bitrix24, Yagla и прочее. Встроенная система сбора статистики приличная. Можно настроить получение уведомлений о заявках по SMS на почту или в Telegram. Есть анти-спам.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
Стоимость подключения автоворонки продаж (пробный период - 7 дней):
Flexbe - сервис, рассчитанный на сборку посадочных страниц только из готовых блоков. Подходит для новичков. Шаблонов около 20 штук, качество хорошее, блоки адаптивные. Для каждой секции можно выбрать набор отображаемых элементов и немного подкрутить дизайн. Готовых секций достаточно для сборки лендинга классической структуры. Доступно несколько шрифтовых пар для быстрой смены, есть эффекты параллакса и отдаления, настройки градиента и затемнения, поддерживаются якоря в меню. SSL подключается
автоматически при добавлении домена. Можно вставить свой HTML-код на страницу.
Сервис поддерживает интеграцию приложений базовой важности (amoCRM, Bitrix24, CallbackHunter, Jivosite, GetResponse, UniSender), создание мультилендигов/геолендингов и предоставляет доступ к API. Приём онлайн платежей возможен через Яндекс.Касса, RoboKassa и карту Тинькофф. Можно подключить почтовые сервисы Google, Mail.ru и Яндекс. Кроме того, есть встроенная CRM среднего уровня и система сбора статистических данных. Можно настроить формат показа страницы при шаринге в социальных сетях. Присутствует мобильное приложение iOS/Android и настройки появления всплывающих окон.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
Mobirise - бесплатная программа (Mac, Windows, Android), позволяющая собирать посадочные страницы из готовых блоков. Шаблоны представлены расширениями - платными наборами ($20-40) блоков, заточенных под конкретную задачу (бизнес, магазин, юрист, портфолио, ресторан и т. д.). Из коробки даётся 4 бесплатных шаблона. Также есть расширения для добавления интеграции социальных сетей и средств комментирования, перводчик, Soundcloud, Google Analytics, SEO-инструменты, а из платных - пакет иконок, корзина с оплатой через PayPal, редактор кода страниц и слайдер изображений.
Набор блоков (количество, структура, назначение) зависит от выбранного шаблона. Каждую секцию можно настроить, выбрав отображаемые элементы, цвета, эффекты, размеры и прочее. В целом, даже на бесплатном шаблоне блоков множество - их хватит с лихвой для сборки нормального лендинга со всеми фишками (отзывы, преимущества, колонки, табы, таймлайны, таймер, мультимедиа, прайс, карта, социалки и всё остальное). Страницы получаются адаптивные по умолчанию. Базовые SEO-настройки присутствуют. Для публикации страниц нужно купить хостинг и домен. Рекомендуем обратить внимание на пак со всеми платными расширениями.
Плюсы:
Минусы:
Стоимость:
Цель посадочной страницы - заинтересовать посетителя и подтолкнуть к совершению запланированного вами действия. Исходя из этого тезиса нужно выстраивать блоки в порядке, ведущем к максимальному эффекту в вашем конкретном случае. Любой из вышеописанных конструкторов лендингов способен реализовать эту формулу. Иногда можно просто заменить демо-контент шаблона своими данными, получив хорошую страницу, - структура этих дизайнов не с потолка берётся, их собирают со знанием дела.
Тем не менее, существуют общепринятые направляющие, по которым собирают лендинги. Уже всё выверено давно - что работает, а что нет. Хотя для каждого конкретного случая нужно тестировать индивидуально, шлифуя нюансы до блеска (поменяли местами кнопки/блоки, цвет акцента, основной шрифт, формулировку оффера, количество полей в форме, расположение блока социалок - всё это может играть роль, нужно искать удачное сочетание). В целом, схема создания лендинга во всех конструкторах примерно одинакова:
Характер и порядок секций имеет огромное значение. Суть в том, что по мере листания страницы посетитель должен заразиться желанием последовать вашему предложению. И сделать это. А какие же блоки использовать для достижения цели? В каком порядке? 100% рецепта успеха любой страницы из любой ниши не существует, но кое-что можно обозначить:
В зависимости от характера вашего предложения можно использовать расписания мероприятий, меню блюд, ответы на популярные вопросы, фото команды, корзину с витриной и прочее. Важно соблюдать анатомию страницы. Например, меню кафе - это часть оффера, должна идти в чуть выше середины страницы, фото команды - ближе к футеру, как и FAQ. Всё по логике, но суть одна.
Благодаря конструкторам, любой человек может быстро опубликовать лендинг, способный приносить доходы. Дело не только удобстве формата, но и в других нюансах: правильные шаблоны, подогнанная под решение задачи функциональность, удобство сбора статистики, наличие техподдержки, FAQ и прочего.
Оптимальными для большинства новичков будут uKit, uLanding и Wix - в них получаются хорошие лендинги. Недорого, быстро и красиво. Самый мощный профильный сервис - LPGenerator. Идущие следом PlatformaLP и LPMotor несколько уступают ему. uCoz может всё хорошо, и лендинги в том числе. Ucraft - неплохой вариант, Flexbe приятен и простоват, Mobirise - на любителя.
Не стоит рассчитывать на бесплатную публикацию полноценного лендинга. Какой бы вы сервис не выбрали, оплатите подходящий тариф - это даст кучу преимуществ, избавит от проблем и увеличит конверсию, в итоге. Универсального рецепта идеальной страницы не существует, но вы можете ориентироваться на средневзвешенную структуру и получать хорошую прибыль.
Landing page, или целевая страница - это одностраничный сайт, целью которого является конверсия, или превращение посетителей в покупателей. Выделяют три наиболее распространенных способа создания лендингов:
Если насчет первого способа комментарии излишни, то второй и третий стоит рассмотреть более подробно.
Онлайн-сервисы по созданию landing page
Всемирная Сеть — просто кладезь различных онлайн-сервисов по созданию сайтов. Чаще всего это программы-конструкторы, с помощью которых можно собирать из секций, редактировать и тестировать всего за несколько часов различные варианты лендинг пейдж. На данных сервисах, как правило, уже представлены готовые шаблоны различной тематики. Посетителю только и остается, что подготовить текст и тематические изображения для шаблона и запустить рекламу.
Если говорить в целом, то пользователи конструкторов получают огромные преимущества, в частности, им не нужны специальные знания различных программ для создания лендинг пейдж, они значительно экономят время, которое позволяет начать продавать услуги и товары уже сегодня, и бюджет.
При этом многие конструкторы предлагают , но либо на некоторый промежуток времени, либо с ограниченным функционалом, но это немного дешевле, чем заказывать с нуля готовый сайт. Также, чтобы воспользоваться конструктором, необходимо зарегистрироваться.
Согласно рейтингам, наиболее популярными конструкторами для лендингов сегодня являются Tilda, Flexbe, platformalp. LPgenerator тоже имеет своих поклонников. Вот результаты недавнего опроса среди пользователей (2017):
Редакторы html дают возможность, что называется «с нуля» написать лендинг пейдж. Но, безусловно, они годятся только для тех пользователей, которые имеют представления о том, что такое код и как пишутся программы и сайты. В интернет-пространстве много как платных (довольно недешевых), так и бесплатных редакторов.
Остановимся на обзоре бесплатных программ для создания одностраничников, так как платные особо не нужны для создания обычного лендинг пейдж. Если же вы планируете работать на поприще сайтостроения, то одним из лучших редакторов является редактор Adobe Dreamweaver, но и цена этого инструмента немалая.
Список бесплатных и наиболее популярных html-редакторов
В целом, если вы задались целью самостоятельно написать свой лендинг, то мы рекомендуем вам создать прототип, в котором вы будете менять содержимое под каждую конкретную кампанию или товар. Таким образом вы избежите потерь времени, связанных с разработкой с нуля.
Какой из способо лучший — сказать трудно, ведь у каждого бизнеса свои требования. Кому-то важен уникальный дизайн, разработанный профессиональной командой разработчиков на заказ, а кто-то не может доверить создание сайта и выбирает самостоятельную разработку; для кого-то важно время, а кто-то ограничен в бюджете.
Вы можете попробовать каждый способ и прийти к собственному выводу. Но наиболее оптимальным в плане соотношения стоимости и результата на сегодняшний день остаются конструкторы. Они позволяют без значительных затрат и в короткий срок , при этом не требуют от вас абсолютно никаких знаний из области сайтостроения (и даже дизайна: в большинстве сервисов есть готовые шаблоны).
Что выбрать — безусловно решать вам.
В LPgenerator в течение 7-ми дней вам дается возможность оценить полный функционал платформы, выбрав любой и настроив его под себя в интуитивном и удобном редакторе лендингов. За это время в ы можете поработать с огромным количеством макетов, широким набором виджетов и постоянной помощью технической поддержки. Такой вариант подойдет как для профессионалов, так и для новичков, которые ищут способы, как сделать landing page своими руками. в системе и попробуйте сами!
Высоких вам конверсий!
Landing page - это специальная страница, попав на которую пользователь должен совершить конкретное действие. Например, заполнить форму для заказа товара или подписки на рассылку, зарегистрироваться, позвонить по телефону, указанному на этой странице, и тому подобное.
Лендинг пейджи называют разными фразами, но все они несут одну смысловую нагрузку. Это страница входа, посадочная страница, страница захвата, продающая страница.
Лендинг пейдж в рунете сократили, как ЛП.
По адекватной цене от 5 000 руб. до 10 000 руб. на cms Wordpress. На основе платной премиум темы вы получите в собственность лендинг страницу, за которую не придется платить ежемесячно. Вордпресс является гибкой платформой и позволяет разрабатывать продающие одностраничники с красивым дизайном, а не только многостраничные интернет-магазины.
Другой вариант - это одна страница для вашего бизнес предложения без админки и возможности добавлять новые страницы. Стоимость с подбором ключей и корректировки (оптимизации) вашего предложения или с вашим готовым текстом от 5 000 до 15 000 руб.
Сегодня у нас с вами практический урок с техническими моментами. Итак…
Лендинг пейдж – это обычная веб-страничка в интернете, созданная по известным технологиям HTML, CSS, Java, с добавлением изображения и текста. Текст называется продающим и пишется по законам копирайтинга. Landing page можно сделать вручную или на любом движке с помощью плагинов.
В корне страница index.html;
Для картинок папка «images» или «image»;
Для файлов стилей папка «css».
Лучшая программа для создания лендинг пейдж.
Основа для веб-документа:
Верстка может быть табличная, но лучше с дивами -
Вы можете пойти по двум направлениям:
Первое – нарисовать дизайн лендинг пейдж в фотошопе , затем разрезать на нужные элементы и сверстать свой авторский дизайн в программе.
Второе – Подобрать готовое изображение для фона веб-страницы или сделать самому. В листе стилей прописать эту картинку, как фон.
Эти уроки высокого качества и они намного сэкономят время при обучении. Вы сможете делать целевые странички самостоятельно и профессионально.
По составлению продающего текста и заголовка нужно написать отдельный урок. У продающего копирайтинга много интересных маркетинговых ходов и фишек. Сейчас остановимся на основных моментах.
Заголовок должен быть точным. Из него уже должно быть понятно, о чем речь и что предлагается.
Текст нужно делать коротким, чтобы весь дизайн поместился на первом экране пользователя. Иными словами, чтобы не приходилось прокручивать страницу вверх-вниз.
В продающем тексте указываются основные преимущества, выгоды. Нужно в нескольких предложениях убедить человека в необходимости приобрести данный товар либо услугу. Постарайтесь объяснить, почему мне это нужно?
Форма или кнопка заказа должны быть самым ярким и единственным пятном на странице, и притягивать глаз посетителя. На кнопке или возле формы хорошо писать призыв к действию. Чтобы человеку не нужно было думать, а просто следовать этому призыву «жми», «заполни форму» и т.д.
Все, ничего лишнего.
По поводу различных фишек с сертификатами нужно экспериментировать, добавлять значки сертификатов или нет.
К примеру, добавление счетчика «сколько осталось до окончания акции или скидки» повышает конверсию. А значки сертификатов, нет. Но это все индивидуально и зависит от ниши, цели создания посадочной веб-странички.
Для того, чтобы узнать какой вариант вашей страницы будет конверсионным, пользуйтесь А/Б тестированием . Сервисы для этого: Google Website Optimizer, сервис рассылок, которым вы пользуетесь. Очень удобный интерфейс и возможность провести тестирование разных вариантов одной продающей страницы.
Сегодня мы определились со структурой, дизайном и текстом для лендинг страниц.
Во втором уроке мы продолжим практическое создание целевой страницы. Хорошим подспорьем при этом будут эти бесплатные HTML, CSS, Dreamweaver и другие.
Можно говорить, что важно количество шаблонов, можно говорить, что нужен простой функционал, можно говорить, что цены играют самую важную роль, но не нужно забывать о том, что поддержка пользователей идет не на последнем месте.
Если бы не было той самой отзывчивой техподдержки, которая 24/7 отвечает на вопросы в течение 5 минут, LPTrend был бы уверенным середняком. Но она есть, и именно поэтому он занимает одни из самых высоких строчек в разных топах конструкторов.
Итог: Добротный, интересный и недорогой сервис с возможностью заказа лендинга. Хороший функционал, стабильная работа и адаптация лендингов под мобильные устройства делают этот конструктор интересным для профи и новичков.
Российский конструктор, специально заточенный под создание одностраничников. Согласитесь, нечасто видишь российскую разработку, которая реально вышла на рынок и закрепилась там.
Тобиз – как раз тот вариант. За 2 года работы сервиса создатели сумели найти свою аудиторию, которая на данный момент составляет более 1500 тысяч вебмастеров.
Итог: Крепкий российский середнячок – вот как можно охарактеризовать конструктор. Нет ничего выдающегося, но при этом есть неплохая система , база знаний со всеми фишками сервиса и советами по созданию лендингов, а еще простой интерфейс и понятный функционал.
Говорить что-то о популярности этого конструктора просто бессмысленно. по ТВ для IT продукта не то чтобы нова, но есть много других, более дешевых каналов продвижения.
Но уж если разработчики запустили дорогостоящую рекламу в СМИ, то значит они уверены в себе и своем продукте. Качественный, красивый и простой конструктор – вот что можно сказать о Виксе.
Итог: В плане продвижения лендингов, Викс оставляет желать лучше. И от этого все его беды. Для визиток и обычных сайтов конструктор подходит идеально. Но для лендингов есть варианты и лучше.
К концу 2015-го года, количество сайтов, созданных на конструкторе Umi, перевалило за 1 миллион. Достаточно солидный показатель за работу с 2011-го года.
Главной фишкой Юми является перенос сайтов с одной системы на другую с полным сохранением позиций в поисковых системах. Как бы там ни было, но хотя бы присмотреться к этому конструктору стоит.
Итог: Для создания и запуска первого лендинга, Юми подходит просто идеально. Сначала можно будет пользоваться лишь бесплатными виджетами, а с течением времени и увеличением потребности, прикручивать различные платные примочки. В соотношении цена/качество – один из самых интересных вариантов.
Молодой, развивающийся и интересный конструктор для , визиток и одностраничников. Главной специализацией являются магазины, поэтому для лендингов функционал будет несколько урезан.
Итог: Лучше всего работать с Nethouse при создании интернет-магазина. Для лендинга довольно средний функционал и количество шаблонов. Но если вы хотите «дешево» и топорно – работать с Nethouse достаточно просто и выгодно.
Если диафан – конструктор, то вы можете смело называть все компьютеры тетрисами. Конечно, у него есть несколько особенностей конструктора вроде шаблонов, понятного интерфейса и достаточно простой системы создания сайтов, но при этом в каком еще конструкторе вы сможете просто взять и выкупить весь свой сайт, перенеся его на другой ?
В каком сервисе вам нужно будет лишь заплатить отступные за шаблон и вы получите полноценный сайт без привязки к кому-либо? А если добавить к этому еще и стандартные примочки CMS, вроде кучи виджетов, полноценного продвижения и кастомизация шаблонов с помощью HTML и CSS.
Итог: Для новичков однозначно нет. И для бизнесменов, которые не знают основ программирования – тоже нет. И в принципе для новичков, которые только-только начинают заниматься одностраничниками это тоже будет не лучший вариант. Боевое крещение в самой гуще сражения – вот что будет с тем, кто решит в качестве первого конструктора использовать диафан. А вот для вебмастеров, которые не первый год работают в сфере , диафан – идеальный вариант.
Совет 3. Если есть возможность – используйте уникальный дизайн.
Вопреки расхожему мнению, только часть названий сайтов запоминаются. Большинство же порталов угадываются по дизайну и оформлению. Особенно если вы были на таком сайте несколько раз.
Иметь шаблонный дизайн сайта чревато двумя сложностями: ошибочное признание вас за другой сайт и ошибочное признание другого сайта за вас. Вы же не хотите, чтобы ваш дизайн ассоциировался у какого-нибудь пользователя с мошенниками?
Помимо этих причин, есть еще одна банальность – шаблонные дизайны очень унылы и скучны. В большинстве случаев это какая-то стандартная мешанина из однотипного текста, картинок и чего-то там еще, что пришло в голову унывавшему дизайнеру. Что-то действительно качественное будет стоить денег.
Но не отчаивайтесь, получить хороший дизайн лендинга бывает просто: вы можете купить понравившийся дизайн во внутреннем магазине конструктора или заказать его у . В любом случае работа средней руки будет стоить не дороже 5-7 тысяч рублей.
Совет 4. Внимательно относитесь к рекламе.
На эффективность лендинга влияют два параметра: его вид и реклама. И если с его внешним видом мы более-менее разобрались, то рекламу еще не затрагивали.
Грамотно настроенная рекламная кампания – ключ к успешной работе лендинга. При этом вы должны понимать, что не количество оставленных контактов, не количество посетителей и не объем вопросов, которыми вас заваливают потенциальные клиенты – показатель того, как круто работает лендинг. В первую очередь он должен продавать.
Именно для того, чтобы он продавал, вы должны сильно возиться с рекламой. Выбирать , анализировать её предпочтения, давить на слабые места, использовать сильные места своего продукта.
От того, насколько грамотно вы подберете картинку к своему рекламному объявлению, может зависеть кликнет по нему 30 человек или 300. Именно поэтому прежде чем пенять на то, что лендинг не продает, позаботьтесь о том, чтобы ваша реклама работала на все 100%.
Совет 5. Анализируйте работу вашего лендинга.
И последний пункт – постоянный анализ работы вашего лендинга. Помните, что просто создать лендинг и сделать продающий одностраничник – две большие разницы.
Неважно, что вам нравится, а что не нравится. Хотите ли вы использовать этот блок на своем сайте или нет. Важно лишь то, будет ли это эффективно или нет.
Именно поэтому при работе с лендингами лучше отойти от своих вкусов и провести несколько тестов и во время них понять, в каком именно виде страница будет приносить прибыль.
В мире арбитражников – людей, которые занимаются перепродажей трафика, бытует мнение, что ни один креатив не может жить долго. И это касается не только рекламы, но и лендингов. Не призываю вас каждый месяц менять лендинг, но хотя бы раз в несколько месяцев дорабатывать, исправлять и находить что-то новое нужно обязательно.
Если следовать этим простым советам, можно достаточно легко создавать неплохие посадочные страницы, тратя на них минимум времени и максимум усилий.
Создавать лендинги с помощью конструкторов очень просто. И если еще пару лет назад создать свой сайт было долгим и зачастую ненужным для бизнеса делом, то сейчас в эпоху повальной нужно работать с каждым каналом привлечения, увеличивая свой оборот и прибыль.
И сейчас, когда нет времени на то, чтобы тратить несколько месяцев на запуск новой площадки, и денег на то, чтобы обращаться к профессионалам – на помощь приходят конструкторы сайтов. На этих площадках вы за один вечер сможете создать то, что будет приносить вам клиентов минимум полгода.
Из огромного выбора различных площадок, на которых можно создать достойный одностраничник, выберете ту, которая нравится именно вам. Потом найдите необходимые инструменты и сделайте то, что вам понравится. А потом исправьте и сделайте так, как нужно. И тогда у вас получится качественная, интересная и прибыльная площадка для превращения обычных посетителей в клиентов.