Одностраничный сайт (далее лендинг пейдж) является лицом компании или презентабельной визиткой продаваемого товара или услуги в интернете. Очень важно, чтобы он понравился пользователю с первых же секунд, иначе он попросту закроет станицу. Чтобы этого не произошло, нужно максимально оптимизировать содержание страницы - разобраться в структуре лендинга, а также выделить ключевые особенности, на которые должна в первую очередь обратить внимание целевая аудитория.

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

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

Запомните! Конверсия даже в 2% является неплохим результатом, свидетельствующим о необходимости дальнейшего совершенствования.

Советы создания лучшего лендинга с актуальными примерами

Одна посадочная страница - один товар

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

• внимание клиента должна привлекать лишь одна услуга/товар;
• к вышеупомянутому должно присутствовать одно короткое, но емкое описание + подробное, скрытое в технических характеристиках или особенностях;
• подогреть заинтересованность скидкой или дополнительной комплектацией;
• в конечном итоге, предложить оставить электронную почту для оповещения обо всех изменениях.

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

Именно принцип реализации одного товара/услуги с указанием четких конкурентных преимуществ позволит добиться желаемого результата.

Пример по данному совету - посадочная страница Goodwin.

Наличие точной инструкции

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

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

• лаконичный дизайн;
• четкий оффер на тематические запросы;
• навигационное передвижение по странице посредством поиска совпадений и т.д.

Максимально точным примером, работа которого заключается в совершении всего нескольких действий, но гарантирующих конверсию, является предложенный принцип создания таких сайтов на конструкторе tobiz.net.

Ясность призыва к действию

Знали ли вы, что в первые 15 секунд целевую страницу покидают около 80% посетителей. Чтобы этого не произошло с вашим одностраничным сайтом, целевой посетитель должен как можно быстрее найти ответ на свой целевой вопрос. Причинами этому служат:

• отсутствие информации, отвечающей на ключей запрос на первой трети страницы;
• отсутствие конкретного оффера.

К последнему можно отнести многочисленные анимации, не имеющие за собой смысловой нагрузки, более 50% текста на странице написано Caps Lock. Даже эти два, казалось бы, незначительные фактора смогут оттолкнуть покупателя от поиска кнопки совершения заказа. Помимо прочего, последняя должна быть также на первой половине страницы, непосредственно возле товара - снизу или справа от него.

Размер кнопки должен быть на 20-30% меньше, нежели само предложение в текстовом формате, или на 50-70% в сравнении с его же изображением.

Практический пример на одностраничном сайте компании VSC

Занимается данная компания оформлением виз, но это, в аспекте создания личного лендинга, совершенно не важно. Уникальность данного примера заключается в:

• подчеркивании исключительности (уникальности) услуги/товара посредством цифр;
• четком и лаконичном подчеркивании того, насколько выгодным является именно их предложение;
• мотивационном действии к совершению заказа через две красные кнопки, которые размещены сразу под предложением и в конце детального описания услуги.

Стиль продвижения через «вопрос-ответ»

Кто сказал, что одностраничник маленький и скучный? Используя опыт компании Enjoy me box можно заинтересовать пользователя на уровне обычных наводящих вопросов, типа «Вы согласны с тем, что купить дешевле лучше, нежели дороже?», после чего последует вопрос с указанием желаемого размера скидки.

Если скидка предложенная покупателем совпала с имеющейся, то на экране появляется сообщение следующего плана: «Все готово! Осталось лишь оплатить…». Если же разница существенная, то достаточно указать то, что товар обойдется несколько дороже, но доплатив именно эти, к примеру, 15%, вы получаете то или иное преимущество.

Сама же компания Enjoy me box одно время использовала в качестве аргументирующего фактора к актуальной цене, предоставление дополнительных 6 месяцев гарантии на товар. После этого, количество покупок возросло в несколько раз, а конверсия одностраничного сайта с 34% поднялась до 57%.

Совет с практическим примером лучше всего применять к товарам, стоимость которых начинается от 3 000 рублей, а технические характеристики или ключевые особенности имею от четырех или более аргументирующих пунктов.

Продающий заголовок - емкое коммерческое предложение, которое должно иметь в себе не менее одной ключевой особенности товара/услуги.

Оптимальное количество слов в продающем заголовке - восемь. Предельное - 14. Простыню, независимо от шрифтов, никто читать не будет.

Помимо такого емкого зазыва в самом начале страницы, которые, кстати, должен еще и быть кросплатформенным - полностью помещаться на экране любого устройства, при его верстке лучше использовать теги h1 или h2. Тег h3 и далее, попросту теряются на фоне публикуемой информации и кнопки «Купить».

Пожалуй, интересным примером станет посадочная страница компании «Тандем Вест», где после каждого изменения продающего заголовка (зависит от поступлений новой мебели) конверсия меняется на 40, а иногда и 65%.

Золотое правило - три-четыре слова + одно-два конкурентных преимущества, + несколько разбавочных слов.

Параллельные призывы к действию как саморегулирующийся усиливающий фактор

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

Взглянув на сайт компании «Просто КАСКО», не увидишь ничего необычного. Но, если присмотреться, то в поле зрения, без прокрутки страницы вверх или низ, находится целых два призыва к действию - «Узнать стоимость» и «Подобрать КАСКО». Это, казалось бы, обычная навигация, но несущая в себе основной посыл - цену и сроки получения. Оперируя этой информацией, всего после одного клика, с большей долей вероятности сделает заказ.

В данном случае, роль кнопки «Купить» играет именно ее отсутствие - лаконичное замещение навязчивости информативностью.

Качественный контент - залог успеха

Текст на одностраничном сайте должен быть коротким, с минимальным количеством стоп-слов, а также воды. Исключительно суть и факты, изложенные в 1 000 или 1 500 тыс. символов.

Только после формирования базы статей, можно переходить к дизайну. Именно так и сделала компания «Зеленый капитан». Казалось бы, кому нужна земля через интернет? Но, именно в данном случае, используя стимулирующий к общению контент, после прочтения которого возникает вопрос, требующий ответа, с переводом на второю частью, где имеется ответ и форма общения с реальным менеджером, более 50% посетителей сделали свой заказ.

Пускай это будут небольшие заказы по 150-700 рублей, но итоговое месячное значение можно заполучить количеством. Главное, что нужно сделать, - наполнить одностраничник емкими статьями и организовать онлайн-чат. В данном случае, клиент видит заинтересовать компании в решении его возникшей необходимости, а только оптом обращает внимание на финансовую составляющую вопроса.

Онлайн чат стоит недорого. Более того, его оператором можете стать именно вы или знакомый.

Исключить лишнее

Все что нужно для совершения посетителем покупки - качественный призыв, один визуальный эффект, контакты обратной связи и та самая красная кнопка «Купить». Если минимальное количество содержимого вызывает сомнения, то, в качестве примера, можно ознакомиться с лендинг пейджем детской школы "Каратэ-до-Шито-рю Сейщукан". Тут только одно эффектное изображение ребенка и слово «Здоровый» заставят родителей ознакомиться с возможностью отдать ребенка в секцию.

В случае с продающим сайтом, достаточно лишь заменить ребенка, например, на освежитель воздуха и несколько изменить тестовый призыв. Вместо бесплатного занятия поставить «При заказе ионизированная вода в подарок». Такая вода стоит копейки в любом разливочном автомате. Бутылка и этикетка - дело пяти минут. Вот, собственно, и весь процесс создания лендинга без всего лишнего.

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

Правильное оформление текста - залог визуального сдерживания целевой аудитории

Чем читабельнее текст, тем выше его коэффициент полезного действия в итоговой месячной конверсии.

Чтобы добиться максимальной читаемости, независимо от дизайна посадочной страницы, необходимо придерживаться следующий правил:

• Шрифт - 16 кегль.
• Допустимые шрифты: Georgia, Open Sans, PT Sans, Arial, PT Serif, Clear Sans, Garamond.
• Предельная длина одной строки - до 80 символов.
• Абзацы - минимум 3 предложения, максимум - 5.
• Подзаголовки как разделяющие маркеры - после 2-4 абзацев.

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

• Списки, таблицы - обязательное условие (без ограничения в пределах того же одного текста).
• Обязательны списки, цитаты, таблицы.

Демонстрация результата - фактор уверенности покупателя

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

Естественно, фотографии и отзывы могут быть выдуманными. Главное правило - фото уникальные, как, собственно, и текст самого отзыва.

Для вдохновения принципом и механизмом демонстрации достижений работы одностраничного сайта, можно обратить внимание на сайт белорусской компании «Прорабыч».

Продуманная структура - путь следования за взглядом посетителя

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

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

При размещении контента запрещено использовать подчеркивания.

Итог

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

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

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

Терминология, цены и назначение

Для начала давайте разберемся в терминологии. Landing page, LP, лэндинг, одностраничник, целевая или посадочная страница – все это синонимы.

Кто-то создает всего одну хорошую страницу, на которой рассказывает все самое интересное о предложении (услуге, товаре, компании). В пределах одного листа, без ссылок. За исключением внутренних (ссылка в начале статьи ведет в середину текста).

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

В интернете можно найти разные предложение и за 5 000, и за 250 000. Все зависит от амбиций и портфолио компании или частника. Если брать ТОП-100 студий дизайна, то около 7% изготовят страничку чуть дешевле 50 000 рублей, прайс 34% превышает 700 000 рублей, а средней ценой считается половина миллиона.

Когда нужны лэндинги? Допустим, у вас есть магазин компьютерной техники, а принтеры никто не покупал вот уже 18 лет. Все распечатывают документы на работе. Тогда вы делаете акцию и продаете современные, восхитительные и самые прекрасные аппараты всего по 15 000 за штуку.

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

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

Почему не создать в таком случае страницу на собственном сайте или не разместить информацию где-то в другом месте? Если проводить аналогию, то лэндинг это все равно что билборд (огромный рекламный щит на улице), который принесет больше пользы, нежели публикация в местной газете.

Какой товар можно продавать через одностраничные сайты? Любой. Можно . Некоторые пытаются впарить таким образом даже зонты, одежду, услуги по ремонту. Чуть ниже можете увидеть рисунок. Эту страницу лучшей не назовешь.

После фразы, что покупка зонта гарантированно вызовет зависть подруг, хочется удариться головой об стол, но, как видите, разработчикам все это не мешает брать со своих клиентов 15 – 20 тысяч рублей.

Можно ли было сделать лучше, учитывая, что продавать надо зонты? Да. Бесспорно.

Как минимум нужно убрать информацию о зависти друзей, оригинальности аксессуара (боженьки, это зонт!), подарке, который поднимает настроение, и гарантированности качества. Кто будет продавать некачественную вещь? Я вообще не понимаю зачем об этом говорить, для чего люди так часто пишут эту фразу? Это не дает никакой информации о товаре, не действует на потребителя, короче говоря, бред.

Зачем выставлять читателя идиотом? «Ммм, качественно говорите. Конечно же, раз вы упомянули об этом, то я наверняка пойду к вам. У вас же качественно».

Как продать заказчику идею

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

Преимущество сайта перед продающей страницей заключается в самодостаточности. Его можно создать и ждать конверсии из поисковых систем, даже не задумываясь о рекламе. Одностраничник без рекламы не получит той конверсии (отдачи), на которую мог бы рассчитывать клиент. Вам, как разработчику, необходимо это объяснить.

Но как в таком случае мотивировать заказчика все-таки сделать одностраничный сайт?

Объясните, что не использовать интернет – глупо. В отличие от любого другого канала для размещения рекламы – здесь можно увидеть конверсию. Заказчик не только проанализирует пользу, но и повлияет на нее. Если сравнивать с газетами, журналами или телевидением – преимущество очевидно.

Если говорить о стоимости рекламы, то здесь она значительно ниже. Есть вариант платить за просмотры. Потенциальный клиент, уже заинтересовался предложением, иначе он бы не кликнул по ссылке. Один переход придется не больше 100 рублей, это максимум. Если лендинг будет хорошим и хотя бы каждый пятый читатель захочет приобрести товар или услугу, то эти вложения окупятся.

Удачные лендинги

Существует масса правил каким должен быть хороший ленд. Вы без труда можете найти русские шаблоны и схемы. В их использовании нет ничего дурного, особенно для новичка. Вы изучаете основы, без которых не обойтись.

Если на данном этапе соберетесь пороть отсебятину, придумывать что-то свое, что «взорвет интернет», то скорее всего облажаетесь и расстроите человека, который заказывает у вас сайт (). Далеко не факт, что публика примет ваше видение.

Чтобы менять или нарушать правила – их необходимо знать.

Допустим, элементарный пример. На заре времен кто-то придумал ставить на продающие сайты счетчики. Можете посмотреть на предыдущей картинке. Сейчас они практически не используются. Тогда их считали признаком хорошего тона и знаний трендов.

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

В студия Артемия Лебедева взяли правило создания ажиотажа вокруг предложения, но использовали знания по-своему. Вы открываете промо-страницу, видите текст в котором вам предлагают поскорее занять какой-либо домен в зоне «.москва», а через несколько секунд слова начинают разбирать чьи-то руки, появляются иконки: «Занято». В общем крах!

Стыдно сказать, даже у меня появилось желание что-то да купить, хотя мне «Москва» совершенно не интересна, но вдруг! ! Очень интересная интерпретация правила.

Вот еще один интересный прием от российского агентства Actis Wunderman. Вместо стандартной прокрутки на сайте используется вот такая выползающая штуковина, которая проходит через всю страницу и открывает новый экран. Кстати, обратите внимание на подачу текста. Весьма-весьма…

Посмотрите насколько эффектно смотрится хоть и довольно простой, но яркий и стильный лендинг от студии Agima. Люди любят кнопочки и в агентстве Агима это знают.

Минималистические продающие одностраничники могут выглядеть не хуже. Кстати, разделение экрана на две части в 2015 году считается трендом.

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

Скачать примеры одностраничников

Предлагаю Вам скачать мою подборку отличных лендингов в PSD и HTML формате — https://yadi.sk/d/jWLLVKa8sjWUa (архив весит 865 Mb)

Как создавать и где учиться

Если хотите поскорее освоить создание одностраничников, то рекомендую интересный курс по созданию Landing Page «ГЕНИЙ ПРОДАЮЩИХ САЙТОВ» от Сергея Садовникова. Он рассказывает о классном конструкторе сайтов с которым справится даже ребенок, откровенно говоря, он функционален, и вы сможете зарабатывать неплохие деньги.

Естественно не по 250 тысяч рублей, я не хочу вас обманывать. Такие суммы простому смертному получать трудно, автор в промо-ролике называет это число ради красного словца. Однако, могу вас заверить что сам курс ничуть не страдает от этой маленькой лжи, сказанной ради привлечения большего числа учеников, можно сказать во спасение.

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

Несмотря на то, что это конструктор – он очень мощный. С ним работают даже некоторые крупные студии. Ваши знания не пропадут зря.

Вот только придется научиться им пользоваться. Все не так уж просто, но об этом чуть позже. Давайте попробуем, все равно это в течение 14 дней можно делать бесплатно.

Будем узнавать как сделать сайт одностраничник на примере сервиса www.LpGenerator.ru . В правом верхнем углу кнопка «Бесплатная регистрация». Нажимаем.

Сразу расскажу о ценах. «Белый лэйбл» — тариф для агентств и маркетологов. Нам с вами до них далеко. Возможно, когда-нибудь вы захотите расширить возможности, но пока об этом говорить рано.

2 – 4 000 рублей в зависимости от объемов производства. Не так уж дорого. Особенно если учитывать, что у вас есть возможность управления всеми необходимыми инструментами прямо из администраторской панели: контекстная реклама, статистика и многое другое.

Кстати, такой момент: никто не дарит вам доменные имена. Вы просто можете купить их где-то и подключить к сделанному лендингу.

Итак, пока мы просто «Хотим попробовать». Они нам обещали 14 дней бесплатно. Мы ничего не теряем.

Да-да, вы не оставляете мне выбора. Я прям-таки мечтаю узнать «Что у вас еще есть». Нажимаем кнопку внизу страницы.

Ну наконец-то нужная страница. Да, я уже давно «Готов тестировать».

Ха, как бы не так. Это еще не конец. «Хочу зарегистрироваться».

Наконец-то. Введите логин и пароль. Затем «Давайте делать классный лендинг».

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

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

Взгляните на то, что вам будут присылать. Хуже от этого не будет.

В начале я обрадовался, что на следующей странице разработчики поместили видео, которое поможет понять основы работы в генераторе. Но затем я посмотрел этот ролик. Очень сложно, постарайтесь не испугаться.

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

Все, мы наконец-то там, где надо.

Пока обратите внимание только на шаблоны с лупой. Замок свидетельствует о том, что для использования дизайна нужно оплатить аккаунт.

В магазине целевых страниц вы увидите только платные шаблоны.

Цену вы узнаете после того как кликните по картинке с понравившимся дизайном.

Чтобы вернуться к предыдущему меню выберите «Веб».

Кликаем по макету. Он открывается в новом окне. Выбираем его и приступаем к редактированию.

Перед вами появляется панель инструментов. Можно начинать работу.

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

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

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

Тем не менее, если вы разберетесь в генераторе, то вам наверняка понравится работа с ним и вы научитесь делать профессиональные проекты.

На этом я вас оставляю. Теперь у вас есть выбор. Вы можете попытаться сами овладеть профессиональным конструктором, дождаться новых публикаций в моем блоге (чуть позже я расскажу, ), поискать самостоятельно информацию в интернете или научиться пользоваться более простым конструктором вместе с Сергеем .

Я с вами прощаюсь, надеюсь статья была полезной, а выбор уже сделан. До новых встреч!

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

В сегодняшней статье мы собрали для вас 50 лучших шаблонов одностраничных сайтов для вашего бизнеса.

1. Oxygen

Потрясающий отзывчивый одностраничный HTML5 шаблон. Oxygen отлично подойдет для портфолио агентства, малого бизнеса или представления приложения.

2. Boxify

Бесплатный и стильный HTML5/CSS3 шаблон с качественными эффектами. Boxify можно использовать для создания портфолио компании.

3. Agency

Бесплатный одностраничный HTML5 шаблон, который позволяет выбирать цветовую палитру. Agency отлично подойдет для создания .

4. Leroy

Отзывчивый HTML шаблон на базе Bootstrap Framework. Используйте Leroy для создания сайта мероприятия, ресторана или сервиса.

5. Alpha

6. GEEK

7. Multi

Бесплатный отзывчивый одностраничный HTML5 шаблон. Multi идеален для сайтов малого бизнеса и портфолио.

8. Halcyon Days

Этот HTML5/CSS3 шаблон отличается плавными эффектами и идеальным дизайном. Используйте Halcyon Days для портфолио или сайта стартапа.

9. Elegance

Стильный HTML шаблон с широкими возможностями по расширению функциональности за счет плагинов. Elegance идеально оптимизирован под мобильные экраны.

10. Corporal

Бесплатный и отзывчивый одностраничный бизнес-шаблон. Corporal создан на базе Twitter Bootstrap 3.2.x, FontAwesome 4.x и может похвастаться такими компонентами, как Portfolio Gallery, Contact Form и многими другими.

11. Walk & Ride

Современный шаблон с превосходным дизайном. Walk & Ride отлично подойдет для продвижения мобильного приложения.

12. WOO

Лаконичный и современный одностраничный шаблон, который идеально подойдет для продвижения технических продуктов. WOO отлично работает в большинстве браузеров и на мобильных устройствах.

13. Simplex

Отзывчивый одностраничный шаблон с современным плоским дизайном и html5 css3. Simplex – хороший шаблон для малого бизнеса.

14. Xeon

15. Sprint

16. Mamba

17. Amoeba

18. Smoothy

Ищите качественный скроллинг эффект? Smoothy – то, что вам нужно! Это шаблон создан на Bootstrap и идеально отображается на всех мобильных устройствах.

19. Flex

20. Aqual

21. Karma

Бесплатный одностраничный шаблон на HTML5. Karma идеально отображается на мобильных устройствах и подходит для малого бизнеса и некоммерческих организаций.

22. SkyTouch

23. Green

Отзывчивый HTML шаблон, который адаптируется под экраны разных размеров. Используйте Green для продвижения своего малого бизнеса.

24. Brushed

25. Essentia

26. Kreative

Отзывчивый html5/CSS3 одностраничный шаблон. Kreative отличается простым и лаконичным дизайном и подходит для сайта компании и портфолио.

27. Scroll

Хотите создать одностраничник в стиле Apple? Используйте Scroll – шаблон с потрясающим эффектом прокрутки.

28. STORM

HTML5 шаблон с поддержкой retina идеально отображается на любых экранах. STORM создан на базе Bootstrap 3 с HTML5 / CSS3 и отлично подойдет для любого бизнеса.

29. Blink

Современный и элегантный HTML шаблон с универсальным дизайном. Blink идеален для фрилансеров, фотографов, интернет-студий и веб-агентств.

30. Crexis

Отзывчивый шаблон на базе Twitter’s Bootstrap 3.3. Crexis отличается лаконичным профессиональным дизайном, который прекрасно подойдет креативным студиям. малому бизнесу агентствам.

31. Mountcool

Идеальный HTML5 шаблон с parallax эффектом, который отличной подойдет для продвижения продукта. Mountcool – выбор дизайнеров, фотографов, фрилансеров и агентств.

32. Wunderkind

Потрясающий универсальный шаблон с Google шрифтами, более 1000 иконок, прекрасными стилями меню и многими другими приятными функциями. Wunderkind очень легко настроить под свои нужды.

33. Elise

Одностраничный HTML шаблон на базе AJAX, который идеально подойдет любому бизнесу. В Elise можно использовать YouTube видео для шапки, а также сделать ее плавающей, выбрать любой из Google шрифтов. Особенно порадуют функции блога и SEO.

34. RockoX

35. TRINITY

36. Flair

Отзывчивый профессиональный retina ready HTML5 шаблон на базе Twitter’s Bootstrap 3. Flair может похвастаться множеством функций: 10 стилей домашней страницы, таблицы, parallax, CSS3 анимация и многое другое.

37. This One

38. Xone

Лаконичный, современный и отзывчивый шаблон. У Xone множество функций: Google шрифты, Google карты, слайдер Revolution Slider, портфолио, фоновое parallax изображение и многие другие.

39. SAGA

SAGA может похвастаться 15 вариантами домашней страницы, интеграцией с Twitter, безграничным выбором цветов от LESS, анимированными эффектами и Flickr BG изображениями.

Продающие сайты. Что это такое? Каждый второй скажет: “Конечно же, это лендинги!”. Они же одностраничники, они же лендинг пэйдж, они же продающие страницы.

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

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

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

Критерии оценки сомнительны

По какому принципу оценивать ? Какие брать за основу? Как составить рейтинг ТОП-10 сайтов?

Где брать сайты на конкурс? Всё это усложняет ситуацию в создании настоящего и честного рейтинга лучших сайтов.

К тому же, мы не знаем сколько продаж компании совершают через подобные сайты. Им же нельзя позвонить и спросить: “А какая у вас ?” или “Сколько Вы получаете заявок из ?”.

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

Ага, размечтались!

Поэтому я сделал проще. Стал искать и просматривать рейтинги и подборки лучших лендингов. И знаете что?

Сайт долго загружается, а это может очень сильно повлиять на показатель отказов. То есть люди будут уходить с него быстрее, чем увидят предложение.

2. Мастерская “Dinero”

Это не сайт, это целый фильм об одном “персонаже” - деревянном кошельке. Если бы он стоил 1 000- 2 000 р., то сайт бы провалился.

6. Проект “Большая сушка”

Большинство женщин (их целевая аудитория) слышали о проекте “Бешеная сушка”. Их реклама к запуску заполоняет весь интернет. И это не удивительно, когда инвестируются миллионы на трафик.

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

Видно, что к созданию подходили основательно, чего только одни тексты стоят. Но вот только совершили они одну большую ошибку - не сделали кнопку призыва в самом конце.

А это влияет на отток посетителей, в силу того, что они не видят логичного закрытия всей истории.

7.

Мы сами пользуемся системой взаимоотношений с клиентами Битрикс24. Но так как у нас тема не “ ”, то сайт системы Мегаплан превзошёл все ожидания.

Они через него донесли все главные моменты своей системы, после чего ты понимаешь, что это лучшее, что есть для бизнеса.

Из наших пожеланий по улучшению - добавить видео-обзор системы, так как у всех прямых конкурентов он есть. И также сделать более понятные призывы, а именно, заменить заголовки (не кнопки) на “Начните пользоваться бесплатно” или что-то в этом роде.

Кстати! Если Вы хотите использовать в качестве своей CRM-системы, то советую не забыть промо-код “Megastart”. Так Вы получите скидку на первую покупку 10% и 14 дней бесплатного использования.

8. Банк для предпринимателей “Точка”

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

Для усиления эффекта мы бы добавили ещё несколько блоков, которые давят на логику. Так как сейчас сайт больше направлен на эмоции. В некоторых случаях это могло быть правильным решением, но так как у нас выбор банка, то одними эмоциями тут не обойтись.

9. Оснащение тренажерных залов “Goodfit”

Интересный переход сайта из чёрной гаммы в белую с голубым. Но помимо интересного дизайнерского решения, в данном лендинге используется отличная игра заголовков.

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

Для полной упаковки не хватает видео-презентации от лица генерального директора. Наверняка он у них в отличной физической форме.

И также было бы отлично добавить цифры к кейсам. То есть сколько стоит зал, который получил клиент. Но это не критично, а желательно.

10. Торговый центр “МЕТРОПОЛИС”

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

Хотя вставлю свои 5 копеек. Я, конечно, понимаю, что на этот сайт должны попадать люди, которые знакомы с этим центром. Но также на него будут попадать люди, которые будут видеть его впервые.

А значит логично было сделать небольшой дескрипшен (описание в несколько слов о компании), чтобы посетитель сразу знал куда попал и что его ждёт там.

Только Россия!?

Да, в своем обзоре я главным образом сконцентрировался на самые лучшие одностраничный сайты рунета, хотя в мире есть очень много достойных, хороших вариантов.

Причем, самое главное (и оно же самое удивительное), лендинг пейдж в буржунете использует не только малый бизнес, но и даже крупный бизнес.

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

Это сайт, состоящий из множества лендингов. Практически многостраничный сайт. Но все-таки лендинг.

https://youtu.be/ClF-txTHGnc

Но, я специально не выкладываю их landing page здесь, потому что они другие. Пускай все говорят о том, что мы повторяем всё за западом, но в данном случае я считаю иначе.

Мы, русские, другие. У нас другой тип мышления, так как мы живём в другой стране.

Например, у Американца почти нет опасений в голове, что компания возьмёт деньги и растворится. Так как у них всё защищено на десять рядов, что только один PayPal стоит.

У нас же, в России, этот страх стоит в первых рядах. Поэтому у них на сайте мало убеждающих блоков доверять компании, а у нас их тьма.

Я могу приводить ещё десятки аргументов, что у нас с ними будут разные лучшие лендинги. Поэтому прошу простить, но их вариантов здесь не будет.

Лучше наслаждайтесь нашими русскими решениями. Моделируйте наши тексты и блоки. А в зарубежных сайтах просто берите хорошие идеи для дизайна.

Коротко о главном

Теперь, когда Вы просмотрели всех претендентов, я не призываю Вас вслепую на них ориентироваться, но посмотреть лучшие landing page для примера определенно стоит.

Как минимум, у кого-то можно взять идею интересно сделанной анимации. Или, например, кто-то из создателей в совершенстве знает свою и использует это в течении всего лендинга. В общем, изучить, сделать выводы и перенять стоит.

И кстати говоря, если Вы ищите идеи для своего первого лендинга, можете попробовать создать его самостоятельно. Так Вы поймёте что Вам нужно и что это не так просто, как кажется на первый взгляд.

Используйте для этого , например Платформа LP . А уже потом, мы ждём Вас к нам в гости на совместную разработку.

Давайте прямо здесь и сейчас сделаем классный одностраничный сайт для продажи товара (или товаров), которые у вас есть. Сделаем его бесплатно и своими руками, используя готовый шаблон. В конце прочтения этой статьи у вас будет готовый одностраничник, который можно запускать в работу. Погнали.

Прежде всего, давайте скачаем бесплатный html шаблон одностраничника, из которого мы и сделаем наш сайт.

Бесплатный шаблон одностраничного сайта для товаров

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

Сейчас этот одностраничник продает системы видеонаблюдения. Но вы можете его отредактировать и поставить туда любой ваш товар.

Главные отличительные особенности этого лендинга под продажу товаров:

• Есть место для большой картинки товара на главном экране;
• Есть мини-каталог, чтобы вы там разместили несколько вариантов вашего товара;
• Есть отдельные всплывающие окна с описанием товара и кнопкой «купить»;
• Встроена и настроена форма обратной связи (в том числе «заказать звонок»);
• Есть блок под акцию с настроенным «вечным» таймером обратного отсчета;
• Универсальный дизайн шаблона позволяет использовать его для любого товара;
• Он бесплатный =)

Если вы скачали шаблон, то давайте перейдем к его редактированию. И начнем с самого важного — первого экрана.

Как оформить главный экран одностраничника

Как я уже писал ранее в статье , самая важная часть вашего одностраничного сайта — это первый экран. То есть это тот экран, который посетители видят при загрузке сайта.

Этот экран должен сразу дать ответы на главные вопросы:

• Что мы продаем?
• Почему это надо покупать именно у нас?
• Как связаться с нами для того, чтобы это купить.

У нашего шаблона есть достаточно места для того, чтобы ответить на все эти вопросы. Вот, что нам надо поменять

1. Заголовок с описанием товара
2. Картинку с изображением товара
3. Ключевые конкурентные преимущества (ККП)
4. Номер телефона
5. Адрес для отправки заявки и страницу переадресации

Давайте все это и проделаем.

Заголовок с описанием товара

Чтобы поменять заголовок с описанием товара — открываем файл index.html в папке с шаблоном. Открывать его лучше всего с помощью программы Notepad++ .

Менять нам надо только тот текст, который написан черным цветом. Прежде всего поменяйте заголовок страницы, который вставлен в тег . Сейчас там написано «Видеонаблюдение». Меняем это на название вашего товара.

Вот сюда нам и надо вписать название нашего товара. И у меня к вам огромная просьба — не надо лишнего креатива. Не надо изголяться и придумывать «интересные» описания. Ваши описания должны быть понятны даже при беглом просмотре.

А еще не надо усложнять описания «красивыми словами». Возьмем хотя бы для примера заголовок, который стоит сейчас — «Готовые решения систем видеонаблюдения…» Почти все слова здесь лишние.

Понятно, что они готовые. И понятно, что это какие-то решения. То есть здесь описание очень перегружено ненужными словами. Можно просто оставить «Системы видеонаблюдения для…» Смысл от этого нисколько не изменится. Поэтому пишите максимально просто, чтобы сразу было понятно — что вы продаете.

Фразу «доставка по РФ бесплатно» можно оставить (если вы действительно доставляете бесплатно). Если же доставка у вас платная, то сделайте акцент на другом конкурентном преимуществе. Например — «Доставка по РФ за 48 часов».

Теперь переходим к редактированию изображения товара.

Картинка с изображением товара

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

Поэтому постарайтесь сделать так, чтобы картинка с вашим товаром была:

А. Понятная
Б. Красивая

Поскольку мы продаем какой-то товар, то здесь изображение подобрать не так сложно, как для какой-нибудь услуги. Поэтому не поленитесь это сделать. Меняем изображение мы в папке «images/header». Там оно лежит под названием «cam.png», и имеет размер 451х341 пикселя.

Чтобы лишнего не лазить в код — найдите изображение такого же размера (либо обрежьте свое изображение до такого размера), и назовите его точно так же. Потом просто замените старое изображение на новое. После этого картинка на главном экране лендинга поменяется на то, что вам нужно.

Ключевые конкурентные преимущества (КПП)

Теперь нам надо сесть и крепко подумать — что же мы укажем на главном экране в качестве наших ключевых конкурентных преимуществ. Подзаголовок типа «Продано более 100 экземпляров» можно оставить как есть. Пусть работает как «социальное доказательство» качества нашего товара.

Но вот все остальное надо обязательно заменить. Только, пожалуйста, не пишите «Быстро — Качественно — Недорого». Вам надо написать такие преимущества, чтобы они выделяли вас на фоне конкурентов. А про «быстро — качественно» пишут все, кому не лень.

Вот для примера какие ККП можно написать:

• Доставка по РФ в течение 48 часов
• 100% возврат денег, если товар не подошел
• 1500 моделей в наличие
• Продажа напрямую от производителя
• Сертификат качества ISO
• Поставляем товар Кремлю и в Букингемский дворец
• 25 лет на рынке
• Государственная лицензия номер…

Все эти пункты отвечают на вопрос «почему надо покупать именно у нас». То есть мы показываем свои неоспоримые преимущества перед конкурентами. И делать это надо тоже четко, кратко и убедительно. Никакие «непреодолимые возможности», конечно, не убедят посетителей в нашей уникальности.

Форма заказа

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

Телефон меняется просто, вот здесь:

Форма отправки заявки редактируется в отдельном файле — «sendMessage.php». Откройте его с помощью все той же программы Notepad++, и впишите два изменения. Первое — это укажите ваш почтовый адрес для отправки вместо «[email protected]» на строке номер 9.

Второе — это замените страницу переадресации после отправки заявки. Это вы сможете сделать после того, как загрузите готовый одностраничник к себе на хостинг. Сейчас там стоит просто «index.html» (строка 36).

В результате после отправки будет появляться окно «Спасибо за заявку, мы скоро с вами свяжемся». А через три секунды страница перезагрузится и переадресуется на страницу 404.

Вот чтобы такого не было — впишите туда полный url адрес вашего одностраничника..html. Именно туда у меня и настроена переадресация. Попробуйте отправить заявку со странички , и вы увидите, как это работает.

Радует, что в данном шаблоне все формы заявки по всему лендингу настраиваются в одном месте. То есть вам не надо будет повторять все эти действия и для «обратного звонка» и для «заказа по акции». Просто один раз редактируете «sendMessage.php».

Блок «Акция» и таймер

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

В нашем шаблоне сейчас стоит призыв привести друга и получить за это деньги.

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

Поэтому обязательно придумайте какой-нибудь подарок, который вы будете дарить людям, если они оформят заказ прямо сейчас, пока не истекло время на таймере.

Кстати, на счет таймера. Его можно оставить так, как он есть. Тут задано время 24 часа. Сомневаюсь, что кто-то будет сидеть у вас на лендинге целые сутки и ждать, что случится, когда истечет время (а после истечения времени таймер просто обновится и отчет пойдет снова).

Но если очень захочется отредактировать параметры таймера — делается это в файле «js/jquery.countdown.js».

Возвращаясь к вариантам акции — вот, что можно использовать:

• Подарок за оформление заказа прямо сейчас
• Специальная скидка
• Специальные условия (бесплатная доставка, расширенная гарантия)
• 2 по цене 1
• и прочее

Текст блока «акция» редактируется в том же index.html, вот здесь (строки 181 — 194):

А после блока акции переходим к мини-каталогу товаров.

Мини-каталог товаров

Одностраничник для продажи товара отличается тем, что там должно быть специальное место для описания ассортимента. Ведь, как правило, товар у нас не один, а в нескольких комплектациях.

Конечно, теоретически можно делать отельную страничку под каждую позицию вашего товара. Но практически вы с ума сойдете делать столько лендингов. Да и люди не так часто ищут какие-то конкретные модели. Они вводят в Яндекс просто «системы видеонаблюдения купить», и дальше выбирают уже на сайте.

Хорошо, что в нашем шаблоне одностраничника место для каталога как раз предусмотрено. И сделано это довольно элегантно. Подробное описание товара всплывает по нажатию кнопки «подробнее», в отдельном окне. А значит описание не будет занимать драгоценное место на лендинге.

Кроме того, есть место для большой картинки. Его можно использовать для того, чтобы поставить большое и привлекательное изображение, либо добавить УТП к каждой отдельной позиции товара. Обратите внимание, например, на надпись в красной рамке «Выбор программы Квартирный вопрос».

Она создает впечатление, что именно ваша компания — выбор программы. А это очень сильное конкурентное преимущество. Подумайте, может и ваш товар стал «выбором» какой-нибудь независимой проверяющей группы.

Изображения товаров редактируются в папке «images/goods».

Как и в случае с изображением на главной странице — подбирайте картинки такого же размера, и давайте им такие же названия, а потом заменяйте оригинальные изображения в папке. Это избавит от лишнего копания в коде html.

Подробные описания товаров редактируются вот здесь, под надписью «Модальные окна подробнее» (начиная со строки 409):

И да, вы можете удалить или добавить позиции товаров. если их у вас больше или меньше, чем в нашем шаблоне. Главное — сначала сохраните куда-нибудь резервную копию документа, чтобы быстро все восстановить, если случайно что-нибудь «поломаете».

Раздел «Почему выбирают нас»

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

Обратите внимание на две важные вещи в этом блоке. Во-первых, эти два подблока действительно должны зеркалить друг друга. Если в первом вы пишите «Завышение цен из-за перекупщиков», то во втором должны написать «Работаем напрямую от производителя, без посредников».

Второе — это простота языка. Это встречается очень редко, но тут уже в шаблоне написано очень хорошо. Например — «80% предложений на рынке — посредники. И посредники посредников. Делают наценку 200-300%… » Постарайтесь писать так же просто и емко, как будто вы просто разговариваете со своим добрым знакомым.

Что касается технической части, то редактируются эти разделы в том же самом index.html, вот здесь (начиная со строки 306):

Прочие разделы одностраничника

Теперь у нас остались только разделы с сертификатами и отзывами. На место сертификатов можно вставить просто сканы ваших уставных документов (ОГРН, ИНН). Даже если у вас нет никаких специальных сертификатов и лицензий — официальные документы вызовут дополнительное доверие.

С отзывами вы можете поступать так, как вам вели совесть. В абсолютном большинстве случаев у тех, кто торгует товарами через одностраничники, никаких отзывов нет и быть не может. Люди просто заказывают, а вы просто доставляете. Никакая обратная связь не собирается. И уж точно никто не присылает вам свои фотографии с развернутыми отзывами.

Но опять-таки почти на всех одностраничных сайтах есть отзывы со счастливыми лицами клиентов. Если бы одни и те же лица не повторялись так часто на разных лендингах, то еще полбеды.

Но в последнее время я начал замечать, что отзывы работают в обратную сторону. Люди не верят отзывам. И если они видят фальшивые отзывы, но начинают подозревать, что и все остальное, что написано на одностраничнике — неправда (хотя все остальное как раз может быть чистой правдой).

Поэтому я бы вам все же рекомендовал либо собирать настоящие отзывы, либо вообще удалить этот блок со своего лендинга. В крайнем случае проведите сплит-тест. Сначала направьте рекламу на страницу без отзывов, а потом добавьте отзывы. И посмотрите, как изменится конверсия.

Запуск одностраничника в работу

Теперь, когда у вас есть готовый лендинг пейдж под продажу товаров — загружайте его к себе на сайт. Если у вас еще нет домена и хостинга — приобретите их, например вот здесь . А дальше просто загружайте всю папку на хостинг (не забудьте указать страницу переадресации в файле sendMessage.php). Кстати, расширение у файла «index.html» после загрузки моно поменять на.php. Тогда адрес ваши страницы будет более коротким и красивым — «http://yourdomain/page/»

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

Сохраните эту статью в закладки, чтобы не потерять. Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)