В данной статье я делюсь своим опытом разработки лендингов. Разработкой сайтов, в том числе и посадочных страниц, я занимаюсь более 5-ти лет и есть чем поделиться. Статья направлена больше для новичков, кто хочет понять как создать лендинг с нуля, но также если у вас уже есть опыт разработки лендингов, надеюсь и вы найдете что-то интересное для себя.
Если вам нужна информация только по сервисам с помощью которых можно сделать landing page, то переходите сразу к этапу 5 — выбор инструмента верстки. Если же вы хотите понять алгоритм создания лендинга от А до Я, то читайте статью полностью.
Как сделать Landing page — пошаговая инструкция из 9-ти этапов
Этап 1. Подготовка
Цель лендинга
Первым делом определяемся с целью лендинга, что мы хотим получить от посетителей страницы. Как правило это что-то одно из трех:
1. Продажа товара / услуги (пример: продажа меда, продажа услуг по разработки логотипа, продажа онлайн курса);
2. Получение контакта (пример: подписка на рассылку, заявка на замер);
3. Информирование (пример: приглашение на бесплатное оффлайн мероприятие, промо страница магазина с акциями).
Определяем целевую аудиторию и что для нее важно
На этом шаге нам важно понимать кто целевая аудитория для нашего предложения, какие у нее боли, какие желания, какие страхи и что эти люди хотят получить. Все это важно понимать чтобы элементы сайта, такие как текст и дизайн, делать ориентируясь на ЦА (целевую аудиторию).
Как определить ЦА?
- Проанализируйте тех клиентов, с которыми уже работали или работаете сейчас;
- Спросите у клиентов, что для них важно. Да, прям так, просто позвоните или напишите, заранее подготовьте список вопросов;
- Вспомните, а лучше записывайте вопросы, которые вам чаще всего задают по поводу вашего продукта;
- Почитайте тематические сайты/форумы, посмотрите что волнует ваших клиентов.
Смотрим конкурентов (бенчмаркинг)
Когда вы выписали все свои мысли и идеи касательно будущего лендинга, самое время заняться анализом конкурентов (бенчмаркингом). Если вы уже знаете своих конкурентов — отлично, если еще нет, ищите в поисковиках по ключевым словам вашей ниши.
Цель анализа, это найти и посмотреть, что конкуренты делают плохо и не повторять их ошибок, и что делают хорошо, посмотреть идеи, недостающие блоки, интересные решения в плане дизайна. Это не значит что их нужно просто скопировать, конечно так делать не нужно, сохраняйте их себе, затем на этапе написания текста и разработки дизайна адаптируете под свой проект.
Как я это делаю: создаю отдельную папку с названием «Идеи» и делаю скриншоты интересных блоков.
Этап 2. Пишем текст для лендинга
Для многих (в том числе и для меня), составление текста является самым сложным этапом разработки, поэтому лично я стараюсь этот этап всегда делегировать копирайтеру.
Хаос в голове перенесите на бумагу
Просто, не думая о последовательности, перенесите все мысли и идеи по будущему ленду на бумагу. Выпишите все о чем хотите рассказать. Когда вы напишите такой список мыслей, плюс мы посмотрели идеи у конкурентов, следующим шагом мы все это объединяем и составляем блоки и структуру лендинга.
Составляем блоки лендинга
Лендинг состоит из определенных блоков, нельзя просто написать сплошной текст как статью и просто опубликовать. Это будет ужасно неудобно читать.
Вот основной список блоков, который можно встретить на 90% лендингов:
- Первый экран с УТП (уникальным торговым предложением)
- Раскрытие продукта (Описание услуги или товара)
- Информация об авторе / компании
- Отзывы
- Кейсы (Истории успеха)
- Форма / призыв к действию
- FAQ (Ответы на частые вопросы)
- Контакты / подвал сайта
Какие еще могут быть блоки на сайте:
- Факты в цифрах
- Выгоды (преимущества)
- Видео
- Портфолио
- Для кого
- Этапы сотрудничества (или Как сделать заказ, Как оставить заявку)
- Тарифы и цены
- Партнеры
- Галерея
- Расписание
- Команда
- Сертификаты, дипломы, благодарственные письма
- Документы
- Таймер
Когда готов каркас лендинга, начинаем писать текст. Вы можете это сделать сами или отдать на аутсорс копирайтеру.
Советы по составлению текста
- Главное ставим в начале. Не нужно в начале сайта писать о себе, покажите сначала свой продукт.
- Замените общие слова на факты. Не нужно убеждать посетителей в чем-либо, оставьте это право за ними.
(Пример: не пишите, что вы лидеры на рынке которым можно доверять, покажите отзывы компаний, которым вы предоставляли услуги и они остались довольны, в дополнение приложите оригинал отзыва, чтобы не быть голословным).
- Проработайте особенно хорошо первый экран и УТП.
После захода посетителя на лендинг у вас есть три секунды чтобы захватить его внимание. Если не успели, то человек закроет страницу и будет серфить дальше. Первый экран должен быть максимально релевантным запросу, через который посетитель попал на сайт.
(Пример: если человек ищет «Бухгалтерия для ИП», не нужно показывать лендинг с заголовком «Ведение бухгалтерии для ООО»).
- УТП (Уникальное торговое предложение). Проще говоря главный заголовок и описание, которое должно емко рассказать о чем данный лендинг. УТП вы можете составить по технологии 4U.
- Чем короче тем лучше. Старайтесь писать блоки с текстом как можно короче. Длинные портянки текста никто не читает, сегодня у людей всегда нехватка времени и это нужно учитывать. Если все же нужно предоставить много информации, то разбивайте ее на абзацы, блоки.
- Больше заголовков. Абзацы текста не должны быть написаны просто так, без заголовка. Большинство посетителей заходя на сайт, сначала проматывают сайт пытаясь оценить туда они попали или нет. И здесь как раз заголовки играют важную роль, потому что пробегать глазами и оценивать сайт он будет именно по ним.
Не хотите составлять текст самостоятельно? Найдите копирайтера, который сделает это за вас.
Где искать копирайтера
- Биржа копирайтинга ContentMonster.ru
- Биржа копирайтинга Etxt.biz
- Частные компании или специалисты. Их вы можете поискать через поиск или в соцсетях (Вк, Фейсбук, Инстаграм).
Обратиться к копирайтеру вы можете не только для разработки текста с нуля.
Обратиться вы можете например с готовым списком блоков, с первичными набросками, или даже уже с составленным текстом, который копирайтер «оживит», сделает более интересным, исправит ошибки.
Этап 3. Составляем прототип
Перед этапом дизайна важно составить прототип, давайте расскажу почему. Причин несколько:
- Без прототипа потратите больше времени, как ни странно 🙂 На заре своей карьеры я после написания текста, сразу делал дизайн. Я думал что так я сэкономлю время, но на деле оказалось что все тянулось еще дольше, потому что это не удобно сразу придумывать элементы дизайна без каркаса.
- Проблемы с заказчиком, если вы делаете лендинг на заказ. Такая ситуация была у всех. Вы утвердили текст и сразу начали делать дизайн, потратили кучу времени, отправляете его клиенту, а он говори что все не так и нужно переделывать, текст поменять местами и пр. Это куда сложнее сделать, когда уже дизайн готов, нежели когда у вас только прототип из текста и кружочков.
Прототип можно сравнить с наброском, который вы делаете перед написанием картины. Мало кто может взять краски и сразу написать картину. Так и здесь, сначала мы делаем набросок, смотрим как примерно получается, какие блоки можно подвигать, изменить, дополнить или убрать текст и пр.
Пример из моего кейса прототипа и дизайна, сделанного по данному прототипу.
Пример прототипа
Пример дизайна по прототипу
На прототипе мы указываем:
- Расположение текста, выделяем заголовки;
- Где будет находится графика (картинки, иконки);
- Где будут кнопки;
- На каком блоке фон будет светлым, а на каком темным.
Сервисы для прототипирования:
- Photoshop. Я делаю в Фотошопе. После того как прототип утвердим с заказчиком, удобно здесь же по прототипу делать дизайн.
- Сервис Moqups. Специальный сервис с готовыми элементами, просто перетаскивайте и добавляйте свой текст.
- На бумаге. Можете от руки набросать прототип, если лендинг не сложный, не хотите сильно заморачиваться.
Я всегда начинаю прототип на бумаге, мне так удобнее. Потом уже переношу в Фотошоп.
Используйте сетку Bootstrap
Также советую делать дизайн по сетке, чтобы в последующем он легко адаптировался под разные устройства. Если вы выберите инструментом для верстки конструктор, где дизайн сам адаптируется под различные экраны (об инструментах верстки дальше), а не используется отдельная мобильная версия сайта, тогда дизайн обязательно должен быть разработан по сетке.
Шаблон Photoshop с сеткой, который я использую в работе, вы можете скачать по ссылке.
Этап 4. Делаем дизайн
Ввсе элементы дизайна лендинга можно разбить на три части, это подбор:
- Шрифта
- Цвета
- Графики (фото, иконки, картинки)
Каждый элемент задает определенное настроение, нам важно подобрать такое сочетание всех элементов чтобы у посетителя сложилось правильное доверительно отношение к нашей компании и продукту.
Как пример: На сайте по оказанию ритуальных услуг навряд ли будут уместны яркие цвета и девушка с лучезарной улыбкой с надписью крупными буквами АКЦИЯ!.
Или же сайт про организацию праздников в серых, блеклых тонах, с черными кнопками и шрифтом с брусковыми засечками, после просмотра которого хочется впасть в депрессию, а не заказать праздник для ребенка.
Примеры конечно утрированные, навряд ли вы их встретите в жизни (хотя не исключено), но суть я думаю вы уловили.
Давайте обсудим каждый элемент подробнее.
Шрифт
Текст это основа любого сайта, поэтому шрифт не менее важен чем цвет или графика. Шрифт тоже может задавать настроение, он может быть легким или брутальным, вызывать чувство дороговизны или простоты и тд.
Отталкивайтесь от своей тематики и от того какую эмоцию вы хотите вызвать у посетителей.
Если не хотите заморачиваться и придумывать сочетания, возьмите готовые нейтральные варианты, которые я для вас подготовил. Они подойдут к любой тематике. Это:
- Выберите один или два из них и смиксуйте.
- Например:
- Заголовок — Roboto (Bold)
Текст — Roboto (Light) - Заголовок — Open sans (Bold)
Текст — Roboto (Light) - Заголовок — Pt sans (Regular)
Текст — Open sans (Light)
Где брать шрифты?
Источник: https://ichigarev.ru/sozdanie-saita/kak-sozdat-lending.html
Как сделать landing page самому? Пошаговая инструкция
На сегодняшний день лендинги, очень популярны. Почему же сейчас идёт такой БУМ этих самых лендингов? Почему только их преимущественно и заказывают?
Давайте для начала рассмотрим преимущества и недостатки посадочной страницы, т.е. лендинга и попытаемся сразу же ответить на эти вопросы. Если не хотите читать всю эту информацию, то можете сразу перейти к инструкции по созданию лендинга самостоятельно.
Недостатки landing page
- Продажа одного товара. Тут всё просто, один товар — один лендинг.
- Нет SEO оптимизации. Конечно, некоторые личности умудряются заточить свою страницу под какой-нибудь запрос и далеко продвинуть его, но много ли вы ключей сможете продвинуть с одной страницы? Ответ очевиден.
Преимущество landing page
- Конверсия. Наибольшая конверсия наблюдается у landing page. Что позволяет ему продавать товары с лучшим успехом.
- Быстрое исполнение. Для того, что бы сделать от 1 до 3-5 страниц необходимо не так много времени, как например для создания того же интернет-магазина.
- Цена.
Один из основных факторов почему выбирают именно его. По цене он всё же уступает корпоративным сайтам и интернет-магазинам.
Но, конечно же, у каждой конторе правило свои. Некоторые предлагают разработку лендинга от 100 000 и более рублей! По мне — перебор.
Не отрицаю, что будет всё сделано на высшем уровне, но у многих просто нет такого бюджета на него.
Думаю именно этот фактор привел вас на этот блог и на эту статью. Сейчас мы рассмотрим, как сделать лендинг самому, да ещё и бесплатно! Чтобы сделать landing page самому необходимо для начала:
- Понять, для чего он нам нужен
- Придумать структуру лендинга
- Скачать Notepad++
- Скачать Artisteer 4
- Запастись временем
- Приготовить чай
Для чего он нам нужен?
Зачем вы хотите его создать? Возможно как сайт-визитка для какого-то предприятия, или же как посадочную страницу для заработка на продаже инфотоваров или физических товаров. Если хотите этим заняться, то рекомендую прочитать про ТОП товаров для лендингов.
Придумать структуру лендинга
Как, что и где будет у нас расположено. Лучше всего, для начала возьмите листок и карандаш и нарисуйте примерный каркас вашего будущего сайта. Как он наиболее лучше будет смотреться, где будет описание, а где картинки. Будет ли форма обратной связи, видео, счетчик. Продумайте это.
Скачать NotePad++
НотПад — это тот же блокнот, но с более высокими возможностями в плане разработок. Подсветка, изменение кодировок, макросы, нумеровка строк — всё рядом и удобно, советую. Найдете его на просторах интернета бесплатно.
Скачать Artisteer 4
Очень удобная штука. В интернете можно найти крякнутую версию. Об этой программе я писал подробнее в этой статье. Если вы ещё не разбираетесь в языках программирования или уже разбираетесь, но ещё плохо в них понимаете, то эта программа то что надо!
Запастись временем
Сделайте так, чтобы вас ничего не отвлекало, ну или хотя бы свести это к минимуму. Разработка может занять не один рабочий день. Ведь писать с нуля самому лендинг не так уж и просто.
Приготовить чай
- Качаем картинки к будущему сайту, чем качественнее она будет, тем лучше. Плохие картинки лучше не берите.
- Пишем контент к сайту. Весь текст, что будет у вас на сайте в виде доступной информации для посетителей.
- Открываем Artisteer 4 и начинаем редактировать пустую страницу, или уже имеющийся шаблон. Вставляете свой текст и нужные картинки.
- Отредактировав все необходимые страницы, вы экспортируете свою работу в виде HTML файла (назовите главную страницу «index.html» Без скобочек, это обязательно!).
- Далее открываете страницы с помощью NotePad++, нажимаете Ctrl + F и вводите фразу «Artisteer». Удаляете все упоминания о программе (разработано с помощью, ссылки на сайт программы и прочее).
- Сохраняете всё это добро, нажав на кнопку сверху «Сохранить».
- Вуаля! Вы сделали лендинг самостоятельно! Теперь осталось поставить ваш новоиспеченный сайт на хостинг.
Источник: http://sensei-seo.ru/kak-sdelat-landing-page-samomu-poshagovaya-instrukciya/
Как сделать лендинг самостоятельно с нуля: подробная инструкция
Alexander Wayne
02 июня 2019 в 13:23
Привет!
Сегодня я расскажу, как сделать лендинг самостоятельно с нуля. Это вопрос, который волнует многих начинающих фрилансеров и вебмастеров. При наличии такого большого количества разных платформ создание лендинга перестало быть чем-то сложным.
Практически любой новичок может зайти на сайт-конструктор, выбрать подходящий шаблон – и все, лендинг будет готов. Останется только заменить картинки, добавить текст и можно пускать сайт в оборот.
Правда, он будет низкокачественным и в сфере бизнеса его вряд ли оценят. Но кому-то хватит и такого. В этой статье я разберу наиболее популярные платформы для создания одностраничных сайтов. Также мы поговорим о сложностях, которые могут возникнуть, и о дальнейших действиях по их устранению.
Что такое лендинг
Лендинг (landing page) – это продающий сайт, который состоит из одной или нескольких страниц, разделенных на блоки. В каждом блоке содержится определенная информация и призыв к действию. Также на лендинг пейдж обычно присутствуют формы заявок и контактные данные.
Лендинги бывают разные: одни предназначены для рекламы компании, другие – для продажи конкретных товаров. Всех их объединяет одно – лендинг должен продавать. Причем не так важно, что это будет – услуги, товары или бренд.
Такие сайты должны обладать красивым интерфейсом, информативностью и прочими особенностями, которые помогут клиентам принять положительное решение. Для этого при создании лендингов задействуется большое количество разных специалистов, начиная от простых программистов и заканчивая интернет-маркетологами.
Вместе они могут создать действительно хороший продукт, который будет продавать и выполнять все необходимые функции.
Лендинги – это не только сайты. Сейчас очень популярны инста-лендинги – странички в Инстаграм, на которых присутствует информация, обзор товара, поданный в удобном виде, и остальные маркетинговые приемы.
В этой статье мы будем говорить о сайтах-лендингах. Создать их нетрудно, нужно лишь правильно подойти к этому вопросу.
Выбор платформы
Начать стоит с выбора платформы. Их действительно очень много. Какие-то можно использовать бесплатно, какие-то доступны только по подписке или при единоразовой покупке. В любом случае от выбора CMS зависит очень многое.
Может вы вообще захотите написать одностраничник самостоятельно, используя для этого HTML и CSS. В таком случае придется затратить чуть больше времени, сверстать свой шаблон и прикрутить к лендингу системы аналитики. Некоторым людям разобраться с этим сложно, поэтому целесообразнее обратиться на биржи фриланса с таким заказом.
Теперь мы поговорим о самих платформах. Я не буду рассказывать обо всех существующих, а затрону лишь наиболее подходящие для новичков.
WordPress
Самая популярная в мире CMS – WordPress также может быть использована для создания одностраничника. Конечно, придется разбавлять его плагинами и темами. Стандартного функционала вам явно не хватит. Но не пугайтесь, большая часть плагинов и шаблонов на ВордПресс бесплатные. Вы вполне сможете создать простой ленд без больших вложений. Придется заплатить лишь за хостинг и домен.
Для того чтобы создать лендинг, вам нужно установить WordPress на хостинг. Делается это предельно просто. По приведенной ссылке доступна пошаговая инструкция.
После этого вам нужно будет дополнительно установить шаблон и плагины. Сделать лендинг можно как с помощью специальной темы (их много в каталоге), так и с помощью плагина-конструктора. Последних сейчас достаточно много, но я выделю наиболее популярные платные и бесплатные варианты:
Бесплатный плагин-конструктор, который может помочь в создании лендинга. С помощью системы Drag&Drop вы можете воссоздать практически любую страницу. Большое количество элементов и функций, хорошая оптимизация, контроль размеров и адаптивность – все это есть в Элементоре. Кстати говоря, у плагина более миллиона активных установок, что говорит о его качестве.
Создать лендинг с помощью Элементора крайне просто. Вам достаточно зайти в каталог плагинов, найти его с помощью ключевого слова, установить и активировать. Плагин поддерживает русский язык и имеет интуитивно понятный интерфейс. Видео по работе в нем вам в помощь.
Еще один популярный конструктор для ВордПресс, который позволит вам легко и просто создать одностраничный сайт. По функционалу и интерфейсу он чуть сложнее, чем Элементор, однако это никак не помешает вам создать крутой лендинг, особенно если вы с ним разберетесь.
Композера нет в бесплатном каталоге WordPress. Его придется скачивать с официального сайта и устанавливать в ручном режиме. Там есть бесплатная версия, но если нужен дополнительный функционал, придется покупать премиум. Его стоимость составляет 59 $ для одного домена.
По своей сути это брат-близнец предыдущего плагина. Когда-то давно команды обоих этих продуктов работали вместе. Потом произошел разрыв, и появилось два разных, но так похожих друг на друга, продукта.
В отличие от Композера WPB Page Builder не обладает бесплатной версией. Распространяется он сугубо через магазин Envato и стоит 46 $.
Лучше ли он, чем Visual Composer? Не знаю, я пользовался обоими продуктами и особой разницы не увидел. Правда, стоит отметить, что в WPB больше различных виджетов, они могут хорошо помочь при разработке лендинга. Однако в бесплатной версии Композера также много инструментов. Так что тут дело вкуса.
Но, выбирая между WPB Page Builder и Visual Composer, я бы выбрал первый, потому что, на мой взгляд, он более надежный и функциональный. Да, тут нет бесплатной версии, но зато есть премиум-поддержка, постоянные и регулярные обновления и уверенность в том, что плагин будет актуален еще долгое время.
С помощью этих плагинов можно легко сделать по-настоящему красивый одностраничный сайт. Он будет оснащен всеми актуальными средствами аналитики и сбора информации.
Также вам будет легко обновлять информацию, ведь WordPress – это CMS (система управления контентом). Контакты, текст или картинки – все это можно поменять в считанные минуты.
Wix
Очень популярный онлайн-конструктор, который также может помочь в создании лендинга. В нем есть бесплатный функционал, однако его не хватит для серьезных проектов. В любом случае можно пользоваться самим конструктором. Для этого нужно просто зарегистрироваться на сайте и начать создание одностраничника.
Wix – это платформа с готовыми шаблонами. Это значит, что если вам нужен простой лендинг, то вы можете выбрать из предложенных вариантов, быстро поправить текст и картинки, и сайт будет готов к эксплуатации. Внешний вид благодаря шаблонам будет потрясающим, хоть и неуникальным.
Однако здесь есть один момент: бесплатный Викс – бесполезный Викс. Да, вы действительно сможете создать сайт, он будет красивым. Но здесь присутствуют существенные ограничения, например, вы не сможете привязать свой домен. Только поддомены от самого Wix, что не очень красиво.
Здесь же есть ограничения по месту на жестком диске и производительности. На бесплатном варианте ее почти нет. Вишенкой на торте является реклама от самой компании, которая будет надоедать вашим пользователям. Рекламу не убирает даже самый дешевый премиум-тариф.
Для более-менее комфортного использования придется брать премиум-план.
Минимальный – стоит 123 рубля в месяц, но он не убирает рекламу, а это очень прискорбное упущение, которое может создавать большие проблемы. Минимальный нормальный – стоит 249 рублей в месяц.
Он убирает рекламу, дает хоть сколько-нибудь приемлемое количество места на жестком диске и позволяет подключить собственный домен и фавикон.
Tilda
Тильда – еще один онлайн-конструктор, который позволяет сделать лендинг. Он почти точно такой же, как и Викс. Есть бесплатный бесполезный тариф, который пригоден разве что для ознакомления. В платных – дела обстоят чуть лучше, но надо понимать, что и цены там не такие и низкие.
На том же ВордПресс можно недорого создать лендинг. Причем безо всяких ограничений по подключению доменов, без рекламы от владельцев платформы (если, конечно, это не бесплатный хостинг).
Другие платформы
В интернете можно найти и другие платформы. О лучших онлайн-конструкторах мы говорили в прошлый раз более подробно.
Создание лендинга
Последовательность действий разнится в зависимости от выбранной платформы. Так, например, на ВордПресс вам придется купить домен, найти подходящий хостинг, установить саму CMS и продолжить разработку лендинга уже на нем.
В Виксе вам не придется заботиться о выборе хостинга. Компания предоставляет вам место на своих машинах. Вам нужно лишь зайти и начать создание лендинга.
У всех одностраничников примерно одна структура. Длинный сайт, разделенный на блоки с информацией. Давайте посмотрим на универсальную структуру лендинга. Но учтите, она может иметь совершенно другой вид. Я рассматриваю именно стандартный пример.
Блок 1: заголовок и информация
Самый первый блок должен содержать заголовок и информацию о компании, предоставляемой услуге или товаре. Там же обычно размещается форма сбора заявок. К ней можно вернуться при помощи ссылки на блок и якоря, которые должны размещаться во всех секциях лендинга.
В качестве фона первого блока обычно используется красивая картинка или даже видео. Это может быть какой-то конкретный файл, отражающий суть деятельности компании, или продаваемый продукт. Последнее предпочтительнее.
Также в этом блоке может располагаться меню. Если это многостраничный сайт, то ссылки могут вести на другие страницы. Если обычный лендинг, то на другие блоки.
Блок 2: преимущества и раскрытие темы
Во втором блоке информация раскрывается более подробно. Это может быть простой текст, рассказывающий о преимуществах компании или товаров, или же список, состоящий из достоинств все той же компании, товара или услуги.
Цель этого блока – рассказать клиенту о том, что он должен купить, сколько это стоит и почему он должен работать именно с вами.
Блок 3: отзывы, партнеры
В этом блоке могут располагаться отзывы или информация о партнерах. Как правило, все преподносится в вольном стиле. Блок может разниться от лендинга к лендингу или вообще отсутствовать, но в большинстве случаев он есть.
Блок 4: форма заявки, призыв к действию
В последнем блоке можно видеть форму заявки и призывы к действию. Они могут выражаться как через текст, так и с помощью более изящных методов, вроде инфографики, картинок или видео.
Также в последнем блоке – футере, обычно располагается информация о конфиденциальности, ссылки на какие-то прочие разделы (более подробную политику, например) или информация о годах, а также о том, что “Все права защищены”.
Так выглядит примерный прототип стандартного лендинга. Естественно, люди не будут следовать одному шаблону, постоянно изобретая что-то новое: более удобное, практичное и совершенное.
В принципе, на любой платформе вы можете добавлять и убирать блоки сколько захотите. Но обычно прототип лендинга продумывается заранее. В Фотошопе создается макет, и уже по нему верстальщики делают сам сайт. Это можно сделать самому при должном уровне владения графическим редактором или языками разметки и стилей.
Заключение
По-хорошему прототип лендинга начинается с информации. Грамотные интернет-маркетологи должны сначала набросать текст и блоки в каком-нибудь Ворде. После этого за дело берется веб-дизайнер. С помощью графического редактора он делает макет, показывает его заказчику, сверяет, и если все хорошо, то макет передается верстальщику. Тот натягивает дизайн на сайт.
В зависимости от платформы действия конечного звена (в данном случае верстальщика) могут быть разные. Например, в онлайн-конструкторе за дело берется не верстальщик, а человек, который хорошо работает в онлайн-конструкторах. Это более простая работа, поэтому он справится в кратчайшие сроки.
Кто-то вообще просто делает копию существующего у конкурентов лендинга, после чего меняет несколько элементов и выдает работу за свою. Да, такой вариант тоже может быть актуален. Все лендинги очень похожи, поэтому уличить кого-то в плагиате будет очень сложно.
Если вы хотите создавать не только лендинги, но и информационные проекты для заработка, то я рекомендую вам посетить курс Василия Блинова «Как создать сайт». На нем вы узнаете, как можно сделать крутой сайт и зарабатывать на нем от 20 000 рублей в месяц пассивно.
С уважением, Alexander Wayne
Источник: https://iklife.ru/sozdanie-sajta/kak-sdelat-lending-samostoyatelno-s-nulya.html
Создать лендинг самостоятельно — 9 эффективных советов
Что такое «Лендинг»?
Landing Page дословно переводится как «посадочная страница». Если говорить простым языком, то лендинг – это хорошо продуманная страница, которая должна подтолкнуть пользователя к определенной активности. Это может быть покупка какого-то товара или услуги, подписка на рассылку какой-либо информации, новостей или регистрация.
Как правило, посадочные страницы рассчитаны на продвижение одной услуги, но в последнее время этот принцип все чаще игнорируют. Если владелец сайта знает принципы и особенности создания лендинг пейдж, то это может увеличить его прибыль в разы.
Для Landing Page характерно наличие ограниченного функционала: есть формы захвата и заказа, на некоторых ресурсах предусмотрена возможность сразу оплатить покупку продукта или услуги.
Навигация простейшая, так как страница всего одна. Стоимость разработки лендинга с эксклюзивным дизайном — от 30 тыс. рублей, шаблонный вариант обойдется в пределах 15–20 тыс.
рублей, если обратиться к фрилансерам — от 3 тыс. рублей.
-
У фрилансера
- Срок ~ 10 дней
- Стоимость: от 3000
-
на FO.RU
- Срок ~ 45 минут
- Стоимость: БЕСПЛАТНО
-
У компании
- Срок ~ 30 дней
- Стоимость: от 20.000
Как правильно создать лендинг страницу?
Перед тем, как создавать такого рода страницу, необходимо определится с ее целью:
- Привлечение внимания пользователя для того, чтобы он зарегистрировался на ресурсе
- Заинтересовать посетителя для того, чтобы он подписался на рассылку и предоставил свои данные, что даст возможность владельцу подключить монетизацию ресурса
- Быстрая продажа товаров либо услуг
Конструкция посадочной страницы очень отличается визуально от обычных сайтов, которые, в основном, загромождены сложной структурой меню или величиной контента. Лендинг страницы преследуют лишь одну цель – стимулирование человека к определенному действию.
Что разместить на странице, для увеличения продаж?
Увеличить конверсию сайта, или проще говоря, привлечь как можно больше посетителей, которые воспользуются услугой сайта, или сделают заказ, можно следуя некоторым принципам:
- Создать страницу, которая бы привлекала внимание даже без прокрутки страницы, давала возможность познакомиться с товаром, услугой, посредством описания, картинки или видео, а также заказать товар, используя удобную форму.
- Заполнить сайт продающим контентом: заголовок сайта, который будет описывать тематику, короткий текст, который описывает продукт, его реальные достоинства, а также преимущества приобретения товара именно на данном сайте, и, естественно, призыв к действию.
- Необычный и броский дизайн лендинг пейдж. Весь контент сайта, а это картинки, видео, анимации, должны быть высокого качества и привлекать внимание пользователей.
- Оптимизация страницы должна происходить используя исключительно тематический трафик. Таким образом, посетитель уже будет осведомлен о продаже данного товара, а грамотно настроенная страница лишь подтолкнет человека к действию.
Источник: https://fo.ru/blog/create-site/create-landing-page/
Основные этапы разработки Landing page. Как создать самостоятельно?
Что такое LANDING PAGE и как создать его самостоятельно рассмотрим в данной статье. Лендинг или другими словами продающая страница – специальный одностраничный сайт, цель которого привлечь клиента и сделать его покупателем.
Некоторые пользователи путают сайт-визитку и лендинг, хотя это совсем разные понятия.
Сайт-визитка – устаревший термин, его цель это только ознакомление с деятельностью компании, предоставление контактов, а лендинг – это продажа товара и завлечения пользователя.
В чем эффективность лендинга? Прежде всего – это наличие понятного и заметного призыва к действию (Call to action). Это может быть специальная форма или яркая кнопка. Используя ее посетитель отправляет заявку на приобретения товара/услуги.
Вы наверное и сами не раз попадали на такие сайты перешел по рекламе с социальных сетей или других источников. Среди элементов лендинга выделяются сочные фотографии, качественные броские заголовки, а также элементы, которые вызывают доверия и подтверждают качество товара.
Например, сертификаты, дипломы, отзывы (текст или видео).
Если у вас уже есть собственный сайт, то лендинг поможет найти новых клиентов и привлечь целевую аудиторию. Для этого понадобится правильный подход и настройка рекламных каналов.
В качестве основного сайта лендинг тоже может существовать, но все же, если вы хотите развивать свой бизнес и продвигать сайт в поисковых системах, то стоит обзавестись многостраничным сайтом с полным описанием товаров или услуг. Такие сайты любят поисковики и их намного проще продвигать.
Но лендинг все же полезный для повышения уровня продаж и узнаваемости вашего бизнеса в целом. Поэтому, если есть отдельный многостраничный сайт и лендинг, это просто замечательно.
Сколько стоит разработка Landing page? Если вы хотите заказать разработку лендинга с нуля у специалистов, то это обойдется вам недешево. Цена будет зависеть напрямую от компании веб-разработчиков или фрилансера, которого вы найдете для создания лендинга.
Но есть еще и другой вариант – это создания лендинга самостоятельно. Не пугайтесь, ничего сложного вам не нужно будет делать. Для создания одностраничного сайта своими руками воспользуйтесь бесплатным конструктором сайтов на нашем хостинге.
Это проще простого! Вы делаете заказ хостинга, получаете доступы и в панели управления у вас есть возможность сделать свой сайт в конструкторе сайтов.
Интуитивно понятная панель, большое количество шаблонов на разную тематику, возможность подключения самых востребованных функций для лендинга всего в пару кликов – все эти возможности доступны на нашем конструкторе сайтов, который уже встроен в тарифы виртуального, безлимитного хостинга и реселлинга.
Кроме того мы предоставляем бесплатную техническую поддержку для всех клиентов и тестовый период 7 дней, чтобы вы могли опробовать услугу, полноценно ее протестировать. После того как вы создали сайт на конструкторе всего в пару кликов вы публикуете его на хостинге и он уже доступен для посетителей.
Далее следует сделать грамотную настройку рекламы, чтобы пользователь смог попасть на ваш интернет-проект.
Для рекламы проекта вы можете размещать ссылку на ваш лендинг точно так же, как размещаете ссылку на сайт — в социальных сетях, email-рассылках, контекстной рекламе, даже на визитках и билбордах.
Лендинг имеет возможность указывать Title, Keywords и Description как и у других полноценных сайтов для их дальнейшего продвижения в поисковых системах.
Кстати, не забудьте зарегистрировать домен для лендинг сайта, это имя вашего сайта в интернете и без него никак не обойтись. Как выбрать домен для сайта? Читайте здесь.
Чем лендинг отличаестя от обычного сайта? Лендинг посвящен чему-то одному, например, купить билет на выставку, купить определенную модель сумки со скидкой, многостраничный сайт же продает большое количество товаров или предлагает широкий выбор услуг.
Преимущество лендинга в том, что его можно создавать под каждое событие, пока оно является актуальным. Кроме коммерческих лендингов есть еще и другой вид – вдохновляющие.
Например, пользователь попал на вашу страницу и заразился идеей, возможно он ничего не купит, но вас сайт заставит его задуматься и через некоторое время вернуться к вам.
Лендинг – это помощь пользователю сделать правильный выбор. Лендинг напрямую помогает убедить, что он сделал верное решение.
В чем особенности Landing page? Вся необходимая информация для клиента на одной странице в одном месте. Не страшно, если лендинг получается длинным, главное, чтобы он был интересным. Если есть идея, которая понравилась пользователю, он обязательно прочтет всю страницу и сделает целевое действие.
Для каких целей нужен Landing page:
- Продавать товары и услуги. Но чем меньше представленных категорий, тем лучше. Если категорий больше 10, то лучше делать полноценный сайт – интернет-магазин.
- Для сбора лидов. Им можно отправлять письма, рекламу или предлагать дополнительные услуги/товары данной категории.
- Для проведения отдельных рекламных кампаний, если у вас есть основной сайт. Например, для проведения рекламы одного мероприятия, которое напрямую связано с вашим бизнесом.
- Когда основный сайт отсутствует. Например, вы шьете классные платья на заказ. Сделайте лендинг для привлечения новх клиентов.
- Если открываете бизнес. Лендинг поможет проверить интересует ли покупателей ваша услуга или товар. Запустите рекламную кампанию и анализируйте результаты.
Подытожим, что такое Лендинг и его основные принципы:
- Для каждого лендинга – конкретная аудитория.
- Каждый лендинг – это отдельная конкретная цель ( купить билет на концерт, записаться на прием, оставить номер телефона).
- Лендинг – это последовательность и убедительность. С помощью этих двух факторов можно привлечь потенциального покупателя.
- С помощью лендинга можно продвигать любой отдельный товар или услугу.
- Понятность и простота целевой страницы. Дизайн landing page – это когда просматриваешь страницу на иностранном языке, но при этом понятно, о чем идет речь.
- И, конечно же, лендинг можно сделать самостоятельно на бесплатном конструкторе сайтов на хостинге от ГиперХост.
Этапы создания лендинга:
- Анализ конкурентов в данной нише. Посмотрите, что предлагают аналогичные лендинги, но сделайте свое уникальное предложение на основе того, что предлагают конкуренты.
- Анализ целевой аудитории. Кто ваши потенциальные пользователи и чего они хотят? Предложите им это на вашем сайте.
- Написание текста. Он должен быть интересным, показывать все ваши достоинства и выгоду для клиента. Не нужно делать большой текст, пользователи ленятся его читать, делайте текст по сути, чтобы из нескольких предложений было понятно, что вы предлагаете и для чего.
- Визуальное оформление. Вставьте отзывы ваших клиентов, видео, фото – все, что касается конкретно вашей услуги или товара. Это можно сделать непосредственно на нашем конструкторе сайтов. Выбирайте подходящий шаблон и наполняйте его интересным контентом.
- Реклама лендинга. Этот этап нужен для привлечения клиентов на ваш сайт.
Технология лендинг пейдж лучше всего применима в сферах с крупным чеком:
- Строительство
- Архитектура
- Проектирование
- Дизайн и ремонты
- Поставки и аренда крупного оборудования
- Юридические услуг
- Рекламные услуги
- Оптовая торговля
- Компании импортеры
- Продаж ПО
- Продажа образовательных услуг
- Но вы можете создать продающую страницу практически для любой задачи и любого вида бизнеса.
- Что влияет на конверсию landing page:
- Конверсия – это один из показателей эффективности лендинга, % от общего числа посетителей сайта, которые совершили на нем целевое действие: оставили заявку, оплатили покупку.
- На конверсию влияют следующие важные факторы:
- Копирайтинг (качество и убедительность текста);
- Структура страницы;
- Сам продукт;
- Качество трафика (насколько целевые посетители заходят на ваш лендинг);
- Цены на сайте;
- Скорость загрузки страницы и корректность отображения в браузерах.
Тем не менее, дизайн лендинг пейдж играет далеко не последнюю роль. Поэтому необходимо уделить внимание следующим факторам: читабельный шрифт и фон, привлекательные формы и кнопки, подчеркивание важных элементов, призывы к действию.
Важную роль играют на лендинге реальные отзывы клиентов. Реальный отзыв – мощный триггер. Давайте возможность клиентам проверить размещенный отзыв на вашем сайте. Например, ссылка на профиль в социальных сетях, если юридические лица – то отзывы в виде писем на фирменных бланках с подписью ответственного лица.
Что еще нужно разместить на landing page? Например, это могут быть блоки:
Вопросы и ответы. Данный блок позволяет в произвольной форме дать дополнительную информацию о Вашем предложении и «закрыть» возможные возражения. Но вопросы должны быть по сути, ответы максимально точными и понятными.
Карта. Обязательно указывайте на landing page контактную информацию, адрес, номер офиса, даже если офиса пока нет, указывайте Ваш домашний адрес. Это значительно увеличивает уровень доверия.
Обратная связь. Это может быть чат, форма “оставить заявку” или “перезвоните мне”, “подписаться”. В посетителя должна быть возможность связаться с вами немедленно, иначе он передумает.
Желаем успешного создания лендинга на нашем хостинге!
3520 раз(а) 9 Сегодня просмотрено раз(а)
Источник: https://hyperhost.ua/info/osnovnyie-etapyi-razrabotki-landing-page-kak-sozdat-samostoyatelno/
Как создать Landing Page. 3 варианта
- Главная
- >
- Блог
- >
- SEO и маркетинг
- >
- Как создать Landing Page. 3 варианта
В прошлой заметке мы рассмотрели типы лендингов и что они дают.
В этой заметке рассмотрим варианты их создания.Сложно ли сделать хороший лендинг с нуля, и самому. И что для этого нужно?
Сделать лендинг бесплатно и платить за него каждый месяц?
Я думаю этот вариант не так интересен Вам. Верно?Есть специальные сервисы для создания лендинг пейдж, но за них нужно платить регулярно.
Лучше про то, как создать лендинг бесплатно и не платить за него никому. Да?
Вариант 1. Скачать шаблон лендинга
В сети полно разных шаблонов для лендингов, начиная от совсем простых, заканчивая целыми скриптами.Правда вся документация или на английском, или её вообще не найти.
В готовом шаблоне лендинга остаётся только изменить текст и разместить html страницы шаблона на вашем хостинге.Дизайн такого лендинга, как правило красивый и профессиональный. Выглядит он хорошо.
Для этого нужно хотя немного знать html и css.У меня есть бесплатный ускоренный курс, можете посмотреть >>
Плюсы этого варианта:
- Быстро
- Бесплатно
- Довольно просто
Минусы:
- Дизайн изменить нельзя
- Расположение блоков тоже
- Внести изменения сложно
Вариант 2. Сверстать лендинг на HTML И CSS
Вариант сложен для новичков, …но когда то и новички становятся опытными)
Как по мне так сверстать лендинг проще, чем сверстать сайт. У меня также есть видеокурс, где мы создаём адаптивный лендинг для веб-студии.
Можете посмотреть >>
Дизайн для лендинга можно найти в интернете, их тоже полно там.Есть даже бесплатные PSD исходники для фотошопа, т.е. сам дизайн (картинка лендинга)
Этот вариант хорош тем, что вы создаёте всё сами, а значит и сможете изменить так как вам нужно.Или как того требует заказчик.
При желании можно вставить любые скрипты и JS-функции.
Плюсы:
- бесплатно
- любой макет, любое расположение блоков
- вставка любых скриптов
- всё ясно и понятно, т.к. делали сами
- легко переносить куски кода в другие лендинги (можно сохранять такие сниппеты для дальнейшей разработки)
Минусы:
- занимает много времени
- нужно хорошо разбираться в HTML и CSS (но если вы хотите стать опытным веб-мастером, то этот пункт тогда не считается минусом)
Кроме этого, если ваш сайт работает на CMS, то первые два варианта — это отдельные страницы, которые работают отдельно от вашего сайта.Это накладывает отпределённые неудобства.
К примеру:
- правка и изменение текста производится отдельно от сайта, через FTP или панель хостинга.
- куча папок, html и css файлов, картинок, лежащих в корне сайта.
- можно забыть что откуда и куда)
Но есть ещё 3-ий вариант.
Вариант 3. Использовать конструктор страниц для Joomla
Конструкторы страниц, т.н. пейдж билдеры — это специальные расширения, которые позволяют создавать лендинги прямо в Joomla.
Например:
- RS Joomla
- ShortCode Ultimate
- SP Page Builder
- и другие
Такие пейдж билдеры есть и для других CMS.
Вся фишка в том, что страницы создаются в самой Joomla и туда можно вставлять любые блоки и модули.Т.е. всё делается из админки.
Плюсы:
- Удобно, всё в одном месте
- Любой дизайн и макет
- Можно вставлять любые блоки и модули и выводить ссылки на лендинги в меню
- Легко изменять и добавлять новые элементы
- Не нужно изучать HTML и CSS, всё делается в визуальном редакторе
- Условно бесплатно (стандартные версии пейдж билдеров бесплатны, Pro версии — платные)
Минусы:
- Бывают сложности с шаблонизацией отдельных блоков и элементов
Но единственный минус этого варианта можно легко решить.На примете есть одно классное решение, которое позволяет создавать лендинги в Joomla быстро, аккуратно и профессионально.
Подробности по этой ссылке: супер лендинги на Joomla >>
Подведём итог
1 вариант подходит, если вам нужен всего один лендинг, и вы немного разбираетесь в HTML и CSS.
2 вариант подходит, если вы хорошо разбираетесь в HTML и CSS и хотите создавать лендинги под заказ.
3 вариант подходит почти всем. И тем кто будет делать лендинги на заказ, и тем кто будет создавать их для себя.Даже если вы не знаете HTML и CSS.
- Причём легко и быстро, и лендинг будет выглядеть профессионально.
- О расширенном и улучшенном 3-м варианте вы можете посмотреть по этой ссылке >>
- Желаю хорошего дня)
Источник: https://JoomlaTown.net/blog/seo-i-marketing/how-made-landing-page