landing page html код
Как сделать лендинг самому – пошаговая инструкция
Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому – бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать продающую структуру лендинга из 9 блоков.
Здесь мы рассмотрим вариант бесплатного создания лендинга из html шаблона. Кстати, ваш лендинг будет на 100% адаптивным подо все мобильные устройства. А это сегодня важно.
Итак, вот пошаговый план самостоятельного создания лендинга:
И прежде всего давайте скачаем основу для нашего будущего лендинга – готовый профессиональный html шаблон.
#1 – Скачиваем бесплатный html шаблон лендинга
Вообще, лендинги – это не такая уж и таинственная штука. Это просто отдельная страница в интернете, на которой вся информация “заточена” под конкретное целевое действие посетителя. В отличие от обычных сайтов, у одностраничников, как правило, нет меню и ссылок на другие разделы сайта (хотя бывают и исключения).
То есть все, что вам надо сделать – это найти подходящий html шаблон, и отредактировать его под свои нужды. Что делать с этой страницей потом, мы разберемся ниже. А сейчас – скачайте например вот этот бесплатный шаблон лендинга. С ним мы и будем работать.
#2 – Заменяем картинку на главном экране
Когда скачаете – откройте папку “blue” и внутри вы найдете несколько файлов с расширением html. Кликните два раза на тот, который называется index.html.
В вашем браузере откроется шаблон, как он выглядит сейчас. Согласитесь, неплохо?
Теперь нам надо его отредактировать. И удобнее всего это делать с помощью программы Notepad++. Скачайте её и установите себе на компьютер.
Первое, что мы сделаем – это поставим нормальную картинку на главный экран нашего лендинга. Вам надо найти большое изображение, которое подходило бы под вашу тематику. Для этого зайдите, например, на Яндекс-Картинки, и введите свой запрос.
Укажите размер файла “Большой”. Пока для тренировки можете скачать вот это изображение. Мы как будто делаем лендинг для профессиональных юридических услуг.
Теперь копируйте это изображение в папку “images”. Поменяйте его название на “banner.jpg”. То изображение, которое уже называется “banner.jpg” в этой папке, переименуйте во что-нибудь другое.
Обновите страницу с лендингом в вашем браузере. У вас теперь должно выглядеть, как на скриншоте ниже.
Если выглядит что-то не так, то проверьте, правильно ли вы написали называние изображения, и точно ли вы скопировали картинку туда, куда надо.
Если все ОК, то переходим к редактированию текста.
#3 – Редактируем текст на главном экране
Кликайте правой кнопкой мыши по файлу “index.html” и выбирайте “Открыть с помощью – Notepad++”.
Перед вами откроется исходный код нашего шаблона, во всей его красе. Если вы раньше не имели дела с html, то вас этот вид может немного напугать – много циферок, буковок и непонятных значков. Но ничего страшного тут на самом деле нет. Нам надо просто заменять текст, который написан черным цветом.
И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.
Сначала поменяем заголовок. Вместо “Alpha” напишем что-нибудь по нашей теме. Напоминаю, что тут мы продаем юридические услуги. Значит можно сформулировать это примерно так: “Срочная подготовка и сдача налоговой декларации для вашего бизнеса”. Вставляем этот текст вот сюда, между тегами
После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:
Получилось не очень симпатично, потому что заголовок большой, и растянулся на весь экран. Попробуйте после слова “налоговой” вставить тег
. Он сработает как разрыв в предложении, и часть текста перенесется на новую строку. Мне кажется, что так получится лучше.
Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа – прописываем наши конкретные предложения. Например: “Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН – от 5400р. ЕНВД без сотрудников – от 2100р.” Вставляем этот текст вот сюда:
Теперь меняем текст кнопок таким же образом. Пишем на белой “Заказать”, на прозрачной – “Подробнее”.
В итоге у нас получается вот такой главный экран лендинга:
#4 – Затемняем фоновую картинку
Более светлый называем, например “overlay2.png”, а более темный – просто “overlay”.
После этого опять сохраняем наш html шаблон и обновляем страницу в браузере. На мой взгляд, так выглядит уже намного лучше:
Далее таким же образом вы меняете весь текст в шаблоне, подставляя то, что вам нужно. Если вы сомневаетесь, что именно надо писать на вашем лендинге – используйте структуру лендинга из 9 блоков.
#5 – Заменяем форму подписки
Единственное, с чем у вас могут возникнуть сложности – это с формой подпиской в самом низу лендинга. Это надо регистрироваться в каком-нибудь сервисе рассылок, генерировать форму, вставлять её в лендинг и прочее.
Предлагаю решить эту проблему просто – вместо формы подписки укажите ваш телефон. Так вы получите больше конверсий/заказов.
То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:
Теперь наш призыв к действию будет выглядеть так:
#6 – Загружаем лендинг на хостинг
Когда шаблон лендинга отредактирован, вам нужно выложить его в интернет. Для этого вы приобретаете домен и хостинг у любого провайдера (например у Reg.ru), и закачиваете вашу страницу на хостинг. Только переименуйте сначала папку “blue” во что-нибудь более подходящее. Например “services”. Тогда адрес вашего лендинга будет выглядеть так: yourdomain.ru/services/index.html
После загрузки вы можете сменить расширение html на php. Тогда ваш новый лендинг будет открываться просто по адресу: yourdomain/services/.
#7 – Привлекаем целевую аудиторию
Итак, мы рассмотрели пошаговый план, как сделать лендинг самому и бесплатно. Теперь вам надо позаботиться о том, чтобы на ваш лендинг приходила целевая аудитория. Для этого рекомендую почитать статью о том, как самостоятельно настроить контекстную рекламу.
Не забудьте скачать мою книгу «Автостопом к миллиону». Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет = )
Создание Landing Page имеет большой спрос в последнее время и это не случайность. Продающие страницы действительно очень хорошо работают и приносят прибыль, но неправильное её создание может привести к обратному результату.
Как правильно создать продающую страницу?
Важной особенностью Landing Page является её оригинальность и красота, которые подкрепляются точным и ёмким изложением информации о продукте. Именно соблюдение всех условий позволяет достичь той необходимой конверсии, которая задумывалась в создании продающей страницы.
Сегодня я хотел бы поговорить о том — как же создать красивую продающую страницу. Хотелось бы отметить, что любая Landing Page должна иметь разделение на слайды (этапы), чтобы последовательно представить всю информацию: компания, продукт, выгода, отзывы, заказать (к примеру). Важно обратить внимание на оформление переходов между блоками, чтобы пользователь понимал что к чему относится.
В данном примере оформления Landing Page будут представлены самые разнообразные разделители, среди которых можно выбрать самый подходящий именно для вас. Помимо этого, в примерах будут представлены различные варианты оформления блоков продающей страницы, а также красивые иконки, которые позволяют пользователю проще ориентироваться и получать удовольствие от просмотра.
Как создать Landing Page
Какие только одностраничники мы с вами не видели — все были краше другого. Разделители на них были самыми разнообразными, которые только можно было придумать, чтобы подчеркнуть уникальность своей продающей страницы. Так как же выделится среди других?
В примере можно посмотреть достаточно большую страницу с самыми разными разделителями. Создание их не требует ни одной картинки — только css3 и SVG-иконки, что означает очень ёмкий вес страницы и отсутствие нагрузки на сервер.
Для создания эффекта «Точки», нам необходимо воспользоваться псевдо-классами:
Полный путеводитель по созданию лендингов, которые продают
Мы продолжаем знакомить вас с лучшими статьями по веб-дизайну. Сегодня мы перевели свежую статью на Medium о создании эффективных посадочных страниц. Перевод выполнен «Я люблю ИП».
Лендинги — это посадочные страницы, которые созданы специально для достижения определённых целей конверсии. Иногда в качестве лендинга выступает главная страница (хотя многие считают, что она не может быть настоящим лендингом). Но чаще всего создаются специальные посадочные страницы для определённых маркетинговых кампаний.
Цели конверсии могут включать всё, что угодно, начиная с оформления покупки и заканчивая заказом бесплатной информации. Как только у вас есть конкретная цель и вы понимаете ваш рынок, вы можете создавать, тестировать и оптимизировать лендинги, которые помогут вам лучше всего достигнуть поставленных целей.
Зачем нужен лендинг?
Самой большой ошибкой маркетолога будет направить траффик с любой рекламы или PR кампании на главную страницу сайта. Скорее всего, ваша главная страница не имеет ничего общего с этой кампанией. И это только запутает ваших посетителей.
Посадочная страница, наоборот, имеет непосредственное отношение к рекламной кампании. Она может повторять её язык и использовать те же изображения. И когда посетитель попадает на эту страницу, вы можете направлять его именно так, как вы хотите. Такой опыт является для пользователя более целостным, комфортным и понятным.
Лендинги существуют для того, чтобы захватить и удержать внимание посетителей так, как это не умеет делать обычная главная страница. Они привлекают внимание именно к той информации, к которой вы хотите, вместо того, чтобы оставить посетителя наедине с кучей информации на главной странице.
Узнайте вашу целевую аудиторию
Поймите, как работает текст лендинга
Есть два основных подхода к тому, как должны работать лендинги.
Представители «старой школы» считают, что лучше всего работают длинные лендинги. Они являются своего рода эквивалентом длинных, многостраничных писем времён прямой почтовой рассылки. Мы все видели такие лендинги: вы просто бесконечно скроллите через информацию и призывы к действию на странице без особого дизайна. (Это классические посадочные страницы с белым фоном, выделениями светло-жёлтого цвета, красными заголовками и призывами к действию, с которыми мы все давно знакомы.)
PickEvent — отличный пример длинного лендинга.
Другие считают, что короткие лендинги, возможно, разбитые на несколько страниц и образующие воронку продаж, работают гораздо лучше, чем длинные. У каждого подхода есть свои плюсы и минусы, и каждый из них лучше подходит для разных целей.
Короткие лендинги лучше использовать, если призыв к действию не требует больших затрат или обязательств со стороны пользователя и не несёт в себе очевидных рисков (например, подписка на рассылку или пробная версия). Также короткие лендинги лучше подходят для целей, основанных на импульсах. Или когда ваша компания или продукт уже хорошо известны и не требуют длинных пояснений.
Длинные лендинги лучше работают для целей, основанных на нужде, и при более высоких рисках (пользователю требуется больше уверенности, чтобы совершить действие). Также они лучше походят для новых или сложных товаров. Иными словами:
Чем больше времени, энергии, нервов или денег нужно потратить человеку, тем длиннее должен быть лендинг.
Длинный лендинг отвечает на большее количество потенциальных вопросов, тем самым уменьшая беспокойство. Также он может убедить большее количество потенциальных клиентов совершить покупку без необходимости связаться с вами для получения дополнительной информации, ускоряя процесс и снижая затраты. Во многих ситуациях длинный лендинг может привести к большему числу конверсий, чем короткий. Вот лишь один из примеров, компании Crazy Egg удалось увеличить конверсию на 363 %, сделав главную страницу длиннее в 20 раз.
Если же ваш потенциальный клиент уже знает, что он ищет, то короткий лендинг, наоборот, может повысить конверсию. Вот другой пример, когда сокращение страницы примерно на треть привело к увеличению конверсии на 11 %.
Если вы, как дизайнер, не будете писать непосредственно текст, то можете направить того, кто будет это делать, написать либо длинный, либо короткий текст в зависимости от вашей целевой аудитории (особенно, если этот кто-то не является профессиональный копирайтером).
Разбейте текст на части
Независимо от того, какой длины у вас текст, важно разбить его на части, чтобы его легче читать (или сканировать).
Чтобы разбить текст, также можно использовать элементы дизайна. Изображения, линии, области с другим форматированием и т. д. помогут разбить контент и сделать его одновременно более красивым и читабельным.
Ещё один момент по поводу разбивки текста: добавьте несколько призывов к действию в определённых интервалах по всей странице. Когда ваш пользователь будет готов совершить действие, ему не придётся скроллить наверх или вниз, чтобы найти кнопку. В идеале, призыв к действию должен быть в каждом разделе на странице.
У вас может быть только одна цель
У каждого лендинга должна быть только одна цель. Эта цель может быть запросить информацию, совершить покупку, подписать на пробную версию или что-то ещё.
Если целей больше, то внимание будет разделяться между ними, размывая эффект. Поэтому решите, какая цель самая важная, и сосредоточьтесь только на ней. Вы можете добавить дополнительную цель (например, подписать на рассылку) на странице подтверждения после того, как будет достигнута основная.
Коэффициент внимания
Коэффициент внимания вашего лендинга равен тому, сколько у вас на странице ссылок на число целей конверсии (которое всегда должно быть равно 1). Поэтому чем больше на странице ссылок, которые не ведут непосредственно к цели, тем выше коэффициент внимания. В идеале, он должен быть равен 1:1.
Именно поэтому нужны лендинги, вместо того чтобы отправлять людей просто на главную страницу. На главной странице коэффициент внимания может быть равен 10:1, 25:1 или даже 100:1. Это значит, что, помимо вашей основной цели, за внимание пользователя будут бороться слишком много вещей.
Запомните: у вашего лендинга должен быть только одна цель. Если у вас несколько целей, у вас должно быть несколько лендингов и несколько рекламных кампаний.
Изучите конкурентов
Прежде чем приступить к созданию лендинга, изучите ваших конкурентов. Какие лендинги они используют, длинные с кучей текста или короткие, на несколько страниц, в виде воронки продаж? Есть ли у них лендинги вообще?
После этого вы можете решить, насколько вы хотите отличаться от нормы в индустрии. Или несильно, или вы можете сделать что-то совершенно другое.
Откуда идёт траффик?
Траффик на посадочную страницу обычно идёт с одного из двух источников. Это оплачиваемая реклама или PR/ маркетинговая кампания.
Текст должен совпадать
Если ваши пользователи приходят с рекламной кампании, убедитесь, что текст лендинга совпадает с текстом рекламного объявления. Например, если реклама предлагает бесплатную пробную версию, то лендинг тоже должен предлагать бесплатную пробную версию, а не подписку на рассылку.
Если вы используете баннеры или видео рекламу, убедитесь, что лендинг совпадает с ними по стилю. Используйте ту же самую цветовую схему, фотографии и другие элементы для всей кампании.
Если это просто текстовое объявление, убедитесь, что его заголовок полностью совпадает с заголовком вашего лендинга.
У вас есть такой же контроль, если вы отправляете пользователей на ваш сайт из своих социальных сетей или с корпоративного блога (или с платных постов в других блогах). Убедитесь, что ваше сообщение совпадает во всех этих источниках.
Если пользователи приходят из других источников, которые вы не можете контролировать, то в этом случае необходимо, чтобы заголовок лендинга чётко дал понять, почему они здесь и что они здесь найдут. Вы можете попытаться повторить сообщение из пресс-релиза, но имейте в виду, что его могут изменить в зависимости от источника.
Первое впечатление важнее всего
Первое впечатление, которое производит ваш лендинг, играет важную роль. Если оно плохое, то посетитель покинет сайт до того, как он успеет на нём что-нибудь сделать. Если — хорошее, то всё будет с точностью наоборот.
Например, главная страница Ghost. Это отличный пример хорошего первого впечатления, в котором есть все упомянутые элементы.
Призыв к действию
Вся цель лендинга заключается в том, чтобы побудить пользователей к определённому действию. Поэтому призыв к действию — это самый важный элемент на странице. Чаще всего это кнопка, иногда — ссылка или форма. Оптимизируя только один этот элемент, вы можете значительно увеличить конверсию. На призыв к действию влияют несколько факторов. Это дизайн (кнопки, формы или ссылки), расположение на странице, текст призыва и окружающий контент.
Простой способ повысить конверсию — это заменить притяжательные местоимения. Вместо «твой» или «ваш» используйте «мой». Многие исследования показывают, что это простое изменение может увеличить конверсию почти в два раза. Это персонализирует призыв к действию и очень тонко выражает установившиеся отношения.
Цвет кнопки вашего призыва к действию также может коренным образом повлиять на поведение людей. Нет какого-то одного цвета, который лучше всего работает для каждого лендинга. Но безусловно верно то, что призыв к действию должен быть контрастным и отличаться от всего остального на странице.
Ваша цветовая палитра состоит в основном из синих или зелёных оттенков? Сделайте кнопку красной или оранжевой. Используете нейтральные цвета? То любой яркий цвет подойдёт вам больше, чем ещё один серый.
Ballpark хороший пример того, как призыв к действию выделяется и контрастирует с остальными элементами на странице.
Считается, что красный цвет означает «опасность» и заставляет пользователя остановится. Но исследования показали, что в некоторых ситуациях красный цвет может превзойти зелёный. Сайту Performable удалось увеличить конверсию на 21 %, изменив цвет кнопки с призывом к действию с зелёного на красный. Одно из возможных объяснений кроется в том, что на всей странице активно используется зелёный цвет, поэтому зелёная кнопка не была такой контрастной, как красная.
Вы не хотите, чтобы вокруг вашего призыва к действию было много другого контента. Отделите его достаточным количеством белого пространства, чтобы он выделялся и привлекал к себе внимание.
То, где вы расположите призыв к действию, также играет важную роль. В идеале, призыв к действию должен появляться в определённых интервалах в зависимости от длины вашей страницы. Если лендинг короткий, то одного призыва к действию будет достаточно. Если длинный, то стоит сделать несколько призывов к действию и расположить их равномерно на странице (или один и зафиксировать его), чтобы посетитель сразу мог перейти к действию.
Уделите время на то, чтобы протестировать и оптимизировать ваш призыв к действию. Это поможет вам максимально увеличить конверсию. Потратив всего неделю (или месяц) на тест лендинга, можно получить совсем другие результаты за всё время кампании.
Ещё один вид призыва к действию — это форма на странице. Здесь действуют те же самые принципы: цвет, текст и контрастность призыва к действию. Но для успеха важен ещё один момент — в форме должно быть как можно меньше информации, чтобы снизить обязательства со стороны пользователя.
Если для выполнения их целей вам достаточно адреса электронной почты, то попросите указать только его. Если вам нужно больше информации (например, для выполнения платежа), попробуйте разбить форму на две части или даже перенести её на следующую страницу, оставив на главной только кнопку.
Несмотря на то, что написанием текстов для лендинга занимаются копирайтеры, а не дизайнеры, вам будет полезно узнать, каким должен быть заголовок. Хороший заголовок для лендинга должен учитывать целевую аудиторию и то, что они ищут. Вы должны подчеркнуть в заголовке основную пользу, которую принесёт для них ваш продукт.
Ваш заголовок также должен быть направлен на совершение действия и динамичным. Он должен быть ясным и позитивным. Не концентрируйте в заголовке на негативе. Заголовок может быть настолько длинным, насколько вам это нужно, но не слишком. Сокращайте его до тех пор, пока он не станет наиболее эффективен.
Хороший пример — сайт Dropmark. Заголовок «Все ваши вещи в одном простом, визуальном, личном месте» (“All your stuff in one simple, visual, private place”) передаёт основные преимущества сервиса и при этом остаётся ясным и понятным.
Изображения, которые вы используете на странице, должны подтверждать ваше основное сообщение. Они должны совпадать с текстом по восприятию.
Помните, что человеческое лицо (даже если это просто герой из мультика) с большей вероятностью привлечёт к себе внимание, чем любой другой элемент на странице. Это означает, что иногда человеческое лицо может отвлекать от заголовка. Необязательно, что это плохо. Но в таких случаях, вам нужно дополнительно убедиться, что изображение человека, которое вы используете, поддерживает ваше сообщение.
Фотографии людей — это один из вариантов, но есть и другие. Если вы делаете лендинг для приложения или онлайн-сервиса, то используйте скриншоты. С их помощью вы сможете показать то, что получат ваши пользователи. То же самое касается и обычного продукта: покажите его фотографии.
Основная мысль заключается в том, что изображения должны подтверждать ваше сообщение, снижать возможные риски и мотивировать пользователей совершить действие.
Стоковые фотографии против обычных
В зависимости от вашего продукта и цели конверсии, использование в лендинге видео высокого качества — это отличный способ повысить конверсию. Видео увеличивает время, которое пользователи проводят на сайте, и может лучше передать сообщение для тех, кто не готов читать много текста. Видео также может лучше передать информацию о более сложных продуктах или услугах, чем текст.
Groove хорошо использует видео для того, чтобы передать своё предложение.
Видео, которое показывает вас или ваших сотрудников, также может увеличить доверие среди ваших посетителей. Люди доверяют другим людям, а не сайтам.
Единственное, что я не рекомендую делать с видео, это включать его автоматически, когда кто-то заходит на сайт. На каждую конверсию, которую вы получите таким способом, найдутся минимум трое, которым это не понравится и которые покинут ваш сайт.
Если вы записываете скринкаст, то добавьте голос после того, как будет готово видео. Это сделает запись более профессиональной, так как вам не придётся концентрироваться сразу на двух вещах.
Ещё один способ использовать видео — это поместить его в качестве фона за призывом к действию. Если это сделано хорошо, то вы сможете привлечь внимание к призыву к действию, одновременно рассказывая о своём продукте. Отличный пример такого использования можно посмотреть на сайте Dragdis:
Несмотря на то, что видео может стать приятным дополнением для вашего лендинга, использовать его не обязательно. Вы можете создать профессиональный, эффективный лендинг без видео. Но в некоторых случаях видео может быть оказаться очень полезным.
Социальные доказательства
Социальное одобрение — это большой мотиватор. Знание того, что вашим продуктом или сервисом пользуются другие, может помочь убедить самого нерешительного.
Именно поэтому лучше включить на страницу отзывы ваших пользователей. Но сделайте так, чтобы они отделялись от основного контента. Отзывы возле призыва к действию могут быть ещё более убедительными.
Если у вас нет отзывов, подумайте, как ещё вы можете продемонстрировать социальное одобрение. Это могут лайки вашей страницы или перепосты (от нескольких сотен до нескольких тысяч, в зависимости от сферы вашей деятельности).
A/B тестирование
A/B тестирование помогает значительно увеличить эффективность страницы. На конверсию влияет очень много факторов, и без тестирования вы не сможете понять, что действительно работает, а что нет.
В идеале, за раз нужно проверять только один элемент. Например, вы можете протестировать два разных заголовка, или два разных цвета для кнопки, или два макета. Но не тестируйте сразу все три вещи одновременно.
Установите аналитику важнейшей информации
На этом этапе вам также нужно установить аналитику важнейшей информации, чтобы отслеживать не только результаты тестов, но и вообще эффективность страницы в долгосрочной перспективе.
Инструменты для создания более эффективных лендингов
Есть много инструментов, которые вы можете использовать для быстрого и простого создания, тестирования и оптимизации лендингов, чтобы не начинать с нуля.
Unbounce
Unbounce даёт инструменты для создания, публикации и A/B тестирование лендингов без необходимости писать код. Стоимость тарифных планов начинается от 49$ в месяц и включает бесплатную пробную версию в течение 30 дней.
Convert
Convert — это приложение для проведения A/B тестов. Тесты можно создавать с помощью визуального редактора, а также с доступом к HTML и CSS. Для использования тестов на сайте нужно вставить небольшой кусок кода. Приложение незаметно интегрируется с Google Analytics. Цены начинаются от 125$ в месяц, есть 15-дневная пробная версия.
Optimizely
Optimizely предлагает инструменты для оптимизации с лёгкой установкой. С его помощью лендинг можно оптимизировать для каждого конкретного пользователя, что в свою очередь может привести к повышению конверсии. У них также есть бесплатная версия.
Visual Website Optimizer
Visual Website Optimizer — ещё одно приложение, которое помогает оптимизировать и персонализировать лендинги. Оно включает такие функции, как A/B тестирование, раздельное тестирование URL, многовариантные тесты, обратная связь, анализатор лендинга, тепловые карты и многое другое. Тарифы начинаются от 49$ в месяц, есть бесплатная пробная версия.
Instapage
Instapage помогает создавать адаптивные лендинги всего за несколько минут, без каких-либо навыков дизайна. Страницы интегрируются с большим количеством популярных маркетинговых инструментов. Вы даже можете опубликовать их на WordPress или GoDaddy. У них есть бесплатный план для сайтов с сотней посетителей в месяц, платные тарифы начинаются от 29$ в месяц.
Lander
Lander помогает создавать лендинги специально для малого бизнеса. В приложении есть простой редактор, функция A/B тестирования и интеграция с Facebook Pages. Цены начинаются от 22$ в месяц, сервис можно попробовать бесплатно в течение 30 дней.
HubSpot Landing Pages
HubSpot Landing Pages позволяет создавать лендинги за секунды и тестировать их часто и рано. В приложении есть редактор drag & drop, умные формы, адаптивные страницы, умный контент и многое другое. Это часть приложения HubSpot Marketing, стоимость которого начинается от 200$ в месяц.
Эксперименты Google Analytics
Эксперименты Google Analytics позволяют протестировать различные варианты страницы в зависимости от ваших пользователей. Они входят в аккаунт Google Analytics.
Usability Hub
Usability Hub — это сайт, где вы можете протестировать ваш дизайн или макет на реальных людях. Загрузите ваш дизайн, выберите тип теста (5-ти секундный тест, клик тест, тест предпочтения или навигации), они покажут его своим пользователям, и вы получите детальный отчёт о результатах. У них есть бесплатный план (чтобы провести тесты, вам сначала нужно самим в них поучаствовать) или платный от 99$ в месяц.
10 примеров отличных лендингов
Basecamp
У Basecamp всегда были отличные лендинги. У них низкий коэффициент внимания на странице, и почти все ссылки имеют непосредственное отношение к призыву к действию. А сама кнопка контрастная к остальной странице.
Benchmark
Главная страница Benchmark — ещё один пример отличного лендинга. Несмотря на то, что навигация вверху увеличивает коэффициент внимания, вся остальная страница ясно рассказывает о продукте и о его преимуществах. Текст кнопки («Начните бесплатную версию») также является достаточно убедительным.
Manpacks
Manpacks использует для кнопки яркий зелёный цвет и надпись, которая привлекает к ней внимание. В качестве социального доказательства они приводят публикации о них в прессе.
WebDAM
Лендинг WebDAM о том, как выбрать систему для хранения информации, — это отличный пример использования формы. На странице минимум изображений, всё внимание сосредоточено на призыве к действию, который является контрастным. Они дают достаточно информации, чтобы ответить на все потенциальные вопросы, а в качестве социального доказательства приводят отзывы клиентов.
Shopify
Лендинг Shopify для бесплатной пробной версии — это ещё один прекрасный пример простой формы на простой посадочной странице. Там представлена только самая необходимая информация в виде списка. Но так как это лендинг бесплатной версии, для которой достаточно указать только адрес электронной почты, то это стратегия работает.
Invision
Invision использует видео на заднем фоне, чтобы привлечь внимание к призыву к действию.
Stripe
На главной странице Stripe есть чёткий и ясный призыв к действию, красивые визуальные элементы и достаточно контента, чтобы ответить на потенциальные вопросы. И вместо того, чтобы сконцентрироваться на подписках, они увлекают пользователя дополнительной информацией.
Evernote
Лендинг Evernote для функции Work Chat использует очень ясный призыв к действию: «Попробовать Work Chat» на кнопке, которая выделяется на странице. Все изображения подходящие и призваны поддержать цели конверсии.
SuperTasker
SuperTasker использует на своей странице анимированный баннер, который предлагает дополнительную информацию, но остаётся при этом минималистичным и чистым. Призыв к действию очень чёткий, с хорошим контрастом.
Acorns
Acorns также имеет хорошо заметный призыв к действию на своей странице, с хорошим контрастом по отношению к фону. Заголовок чёткий и понятный, а графика поддерживает само сообщение и цели конверсии.
Посадочная страница против главной
Как уже было сказано выше, некоторые считают, что главная страница не может быть такой же эффективной как лендинг. Но здесь можно возразить, что многие главные страницы сейчас функционируют как универсальные лендинги с одной единственной целью конверсии.
До тех пор, пока всё внимание на главной странице сосредоточено на цели, которая совпадает с целью вашей рекламной кампании, она может функционировать как лендинг.
Очень хороший пример — главная страница Flow. Она выглядит как обычный лендинг, с чётким призывом к действию и длинным текстом в поддержку конкретной цели конверсии. За исключением нескольких ссылок в шапке (Pricing, Features, Blog и Log In) коэффициент внимания остаётся равным 1:1.
Лучшие практики по созданию лендингов
В заключение вот краткое содержание того, о чём мы говорили. Используйте этот список в качестве проверки при создании лендинга в следующий раз.
Хороший лендинг может увеличить вашу конверсию в геометрической прогрессии. Навыки по созданию таких лендингов пригодятся вам как дизайнеру, особенно если это будет хорошо влиять на бизнес ваших клиентов.
Сделать дизайн лендинга не сложнее, чем любой другой страницы, но для этого нужно обладать дополнительной информацией и знать лучшие практики.