Создать лэндинг самостоятельно: Как и где создать лендинг, одностраничный сайт — Tilda Publishing

Разное

Содержание

Как сделать лендинг самостоятельно — пошаговая инструкция

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

Данная инструкция идет от «А» до «Я» и подробно рассказывает о том, какие инструменты потребуются для создания лендинга, какие сервисы нужно зарегистрировать и как правильно и по шагам сделать свой Landing Page.

Я советую смотреть данный ролик на Ютубе (на моем канале), т.к. там есть все описание и все тайм-коды на разные этапы видео-урока. Удачного просмотра. Если возникнут вопросы, пишите в комментарии тут или на моем ютуб канале.

Описание:

➡ Домен, хостинг и система управления сайтом тут: https://clck.ru/JedGb

➡ Мой блог со статьями о создании и продвижении сайта тут: https://clck.ru/JLrX2
➡ Пример лендинга, который я делал в этом видео тут: https://clck.ru/JedGz

Темы и плагины, которые я использую в видео:

  1. Тема: Astra
  2. Плагин конструктор страниц: Elementor
  3. Плагин контактных форм: Contact Form 7
  4. Плагин редиректа из контактной формы: Redirection for Contact Form 7
  5. Плагин снипетов: Code Snippets Extended

Где брать бесплатные изображения для сайта:
➡ Freepic: https://clck.ru/JfNoy
➡ Kiss Png: https://clck.ru/FpKNp

Где дешево заказать логотип и фавикон для сайта:
➡ https://clck.ru/JfP2L

Как сделать лендинг самостоятельно — таймкоды от урок:

0:45 — организационные моменты
3:18 — что потребуется для создания лендинга/сайта
5:23 — выбор и регистрация хостинга
8:14 — настройка хостинга перед созданием сайта
11:58 — выбор и регистрация доменного имени
18:05 — установка системы управления сайтом на наш сайт
21:49 — что такое темы и установка темы Astra
23:54 — что такое плагины и установка плагинов (elementor, contact form 7)
26:36 — подготовка к созданию лендинга (создание страницы)
27:50 — первый вход в Elementor и его настройка
29:24 — из каких блоков может состоять лендинг (примеры)
33:51 — создаем каркас лендинга
40:00 — настраиваем первый экран лендинга
55:15 — настраиваем второй экран (видео презентация)
1:01:45 — настраиваем блок «В чем выгода от консультаций»
1:15:20 — настраиваем блок «О нашей фирме в цифрах»
1:26:25 — настраиваем блок «Какие консультации мы оказываем»
1:38:19 — настраиваем блок «Что вы получите по завершению консультации»
1:45:31 — настраиваем блок «Реальные отзывы клиентов»
1:58:02 — настраиваем блок «Акции месяца»
2:09:45 — настраиваем блок «Наши партнеры»
2:14:29 — настраиваем блок «Наша книга за 14 990 руб»
2:19:56 — подключаем прием оплаты на своем лендинге/сайте
2:25:17 — настраиваем блок «Часто задаваемые вопросы»
2:35:56 — настраиваем блок «Заказать консультацию»
2:39:00 — настраиваем Contact form 7
2:42:06 — создаем «Якорную ссылку»
2:45:06 — настраиваем блок «Контакты»
2:51:45 — настраиваем «Подвал сайта»
2:56:45 — настраиваем версию для планшета
3:06:18 — настраиваем мобильную версию лендинга
3:11:36 — выставляем лендинг в качестве главной страницы
3:13:08 — установка и настройка Яндекс Метрики
3:17:58 — создаем страницу «Спасибо»
3:20:52 — установка и настройка плагина Redirection for Contact Form 7
3:23:40 — где дешево заказать логотип и фавикон
3:24:25 — заключение

Landing Page с нуля: как сделать лендинг самому

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

Конечно, самый простой способ разработать landing page — поставить задачу профессионалам и не париться, но здесь есть два возражения.

  1. Ценовая политика веб-студий. Не каждый может легко расстаться с солидной суммой за одностраничник, особенно, если бизнес молодой;
  2. Желание вникнуть в работу и сделать свой лендинг самостоятельно. Многим предпринимателям это действительно интересно.

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

Этапы разработки landing page: как сделать посадочную страницу самому

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

Сбор данных

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

Анализ

После этого информацию о найденных предложениях анализируют. Также на этом этапе проводится сборка ядра поисковых запросов. Для этого мы используем Yandex Wordstat, Google Keywords Planner или специальные программы. Полученный перечень запросов структурируется и сегментируется, после чего наиболее релевантные запросы снова используются для поиска конкурентов в нише.

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

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

УТП и преимущества

Когда вы уже знаете, что предлагают конкуренты, составьте УТП — уникальное торговое предложение. Это то, с чем вы обращаетесь к аудитории, что выделяет вас на фоне конкурентов. УТП обязательно формулируется на заголовке первого экрана и раскрывает выгоду продукта или услуги для клиента.

Плохой пример:

«Хотите привнести в свой дом неповторимый дух загадочной Франции?.. Действует гибкая система скидок!»

Хороший пример:

«Продаем и монтируем натяжные потолки от французского производителя в Киеве и области. –10% на каждую вторую комнату».

Когда УТП готово, сядьте и напишите:

  • список своих преимуществ (хотя бы 10 пунктов;
  • пошаговый план выполнения заявки;
  • перечислите клиентов или проекты, которыми особенно гордитесь; отберите отзывы, награды, публикации в СМИ;
  • оттметьте, с какими производителями, поставщиками и партнерами ведете дела; выделите из них тех, с кем сотрудничаете только вы;
  • соберите визуальные элементы: фотографии рабочего процесса и результатов, видео, графики и схемы.

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

«Высокая надежность» — нет.

«Дополнительные 2 года гарантии» — да.

Конкурентные акции

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

У вас есть потолки специально для детских комнат? Отлично! «Потолки в детскую –30%!» И кнопка: «Получить детский каталог». Да, эта акция не рассчитана на всех, она подходит только родителям, зато для них это действительно выгода, а не туманные обещания «гибкой системы скидок».

Прототипирование

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

Кто-то пользуется для создания прототипов блокнотом, кто-то — текстовым редактором. Некоторые рисуют на доске, обсуждая задачу с командой. Выбирайте функционал, с которым вы быстро разберетесь. Мы пользуемся сервисом Moqups, и рекомендуем его, но можно выбрать другой. Чтобы создать одностраничный сайт, а не новые проблемы, найдите себе самый удобный вариант.

Разложите элементы по порядку, пропишите в каждом пункте текст. Не забудьте создать thank you page — страницу, которую видит пользователь сразу после подписки. Там может быть ваше «спасибо» за действие клиента и пояснение следующего шага. Если кнопки и призывы разные, страница благодарности понадобится не одна.

Структура для landing page

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

  1. Левый верхний угол: логотип с дескриптором. Дескриптор — короткое пояснение, чем занимается ваша компания. У нас такой: 

  2. Правый верхний угол: контактные данные, может быть кнопка «Заказать обратный звонок».
  3. Первый разворот: УТП и главные преимущества.
  4. Далее — форма захвата, куда пользователь вводит контактные данные. В форме захвата должен быть призыв, а кнопка обязательно должна выделяться. Сами поля для ввода данных могут размещаться непосредственно под кнопкой или же справа/слева от нее на странице (открытая форма), а могут открываться после нажатия: в новой вкладке или попапе (закрытая форма).
  5. Разворот с кратким описанием механики вашей работы.
  6. Фото-/видеогалерея или другая визуализация результатов.
  7. Еще преимущества: дополнительные гарантии, возможность получить индивидуальные условия, уникальные материалы и технологии и т.п.
  8. Отзывы или публикации в СМИ.

  9. Футер. В футере снова размещаются логотип и контактные данные. В контактах желательно указать физический адрес. Над футером можно также разместить карту проезда.

Если у вас не хватает информации для какого-то блока — пропустите его. Есть лендинги, которые состоят из одного-двух экранов, и они продают.

Когда закончите с прототипом, можно приступать к дизайну и верстке.

Дизайн и верстка

Собственно, только эту часть понимают под созданием лендинг пейдж самому. Здесь уже пригодится конструктор — онлайн-сервис, позволяющий выстроить собственный сайт из отдельных элементов. Можно использовать Wix или Tilda, а можно загуглить «конструкторы лендинг пейдж» и выбрать любой понравившийся вариант.

Разместите в нужном порядке блоки, которые вы прописали в прототипе, подберите оформление из готовых предложений.

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

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

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

Высоких вам конверсий!

Как создать лендинг. Пошаговая инструкция

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

Что такое лендинг и для чего он нужен

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

  • Заказал бесплатную консультацию.
  • Оставил заявку на оформление и покупку товара.
  • Забронировал дату или места.
  • Подписался на информационную рассылку.

У такого сайта есть ряд особенностей: простая и понятная навигация, есть призыв к действию, ничего не отвлекает от выполнения целевого действия.

Создать самостоятельно или заказать разработку?

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

  • На свой бюджет.
  • На знание продукта и целевой аудитории.
  • На наличие свободного времени в графике.

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

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

Структура лендинга

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

Заголовки

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

Логотип и контактная информация

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

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

Описание товара или услуги

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

Преимущества

Без этого раздела лендинг лучше не запускать. Грамотно оформленный блок с преимуществами отлично мотивирует и помогает принять решение в вашу пользу. В этом разделе опишите то, что выделяет товар или услугу среди множества других. Это может быть цена, качество, скорость доставки или уникальность. Все эти данные необходимо указать, отвечая на вопросы потенциального клиента: «Зачем мне это нужно?», «Какие проблемы я смогу решить?». Так, быстрая доставка сэкономит время пользователя и ему не придется забирать посылку из пункта самовывоза.

Обратная связь

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

Как создать лендинг в конструкторе сайтов Старонка

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

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

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

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

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

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

Следующий раздел «Цвета и шрифты» в нем меняется шрифт заголовков и шрифт основного текста. А в поле «Ключевой цвет» меняется цвет кнопок и выделения ссылок.

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

Чтобы написать свой текст в редакторе, достаточно выделить шаблонный текст курсором мыши, удалить и начать вводить свой. Стоит отметить, что текст нежелательно вставлять и выравнивать пробелами. При вставке текста, из копируемого документа вместе с ним может скопироваться стиль и другое форматирование. Если такой стиль не предусмотрен в редакторе конструктора, то текст будет некорректно отображаться. А вот при выравнивании пробелами возникнут проблемы с отображением сайта в мобильной версии. Чтобы перенести слово на другую строку, используйте сочетание клавиш Shift + Enter вместо пробелов.

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

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

Внутренние настройки сайта

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

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

Как только настройки для адреса вступят в силу, на вашу электронную почту придет уведомление. Оно послужит сигналом для выполнения следующих шагов по настройке: подтверждение прав на сайт и установка аналитики. Для подтверждения прав на сайт перейдите в раздел «Расширения», во вкладку «Подтверждение прав на сайт» и найдите там «Гугл для веб-мастеров (Префикс)» и «Яндекс.Вебмастер». Затем нажмите на кнопку «Добавить» и введите идентификатор. При возникновении вопросов, нажмите на кнопку «Инструкция по установке» и ознакомьтесь с пошаговым руководством. Установка этих расширений требуется для того, чтобы запустить процесс индексирования сайта, его появление в поисковой выдаче. Аналитика подключается аналогичным способом с помощью расширений «Google Analytics» и «Яндекс.Метрика».

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

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

Заключение

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

Обзор курса «Как создать лендинг самостоятельно» от TeachLine + отзывы

Обзор курса «Как создать лендинг самостоятельно» от TeachLine + отзывы | Checkroi — 50%

Добавить свой отзыв

Сравнить товары