Как сделать лендинг по шаблону
Как создать Landing Page на основе шаблона
Приветствую вас на сайте Impuls-Web!
В данной статье я расскажу вам, как можно бесплатно создать Landing Page на основе уже готового шаблона.
В прошлой статье я описывала основные способы создания Landing Page, и требования к структуре данной странице. Если Вам интересна эта тема – вот ссылка
Итак, если вы решили создать себе Landing Page, но не хотите тратить на это большое количество времени и денег, то можно воспользоваться шаблонами, которые можно найти в интернете. Данные шаблоны могут быть платными или бесплатными.
Я подготовила для вас набор шаблонов, который вы можете скачать, перейдя по этой ссылке:
Сейчас я вам покажу, что они из себя представляют и как их редактировать и настраивать.
Навигация по статье:
В данном архиве будет несколько различных шаблонов Landing Page по разным тематикам. Некоторые из них более сложные в плане дизайна, некоторые более простые, у некоторых более четко выражено тематическая направленность, а некоторые более нейтральные, и их можно применять для любой ниши.
Итак, после того как вы скачали и разархивировали данный архив у вас будет внутри этого архива две папки.
В первой папке будут находится набор Landing Page без визуального редактора, а во второй папке набор Landing Page с визуальным редактором.
В случае с первым набором, папки с лендингами называются в соответствии с тематикой, к которой они относятся.
Для просмотра определённой лендинг пейдж нужно открыть файл index.html.
Как внести изменения в шаблон?
Для того, что бы изменить в данном шаблоне какие-то контактные данные, либо какой-то фрагмент текста вам понадобится программа для редактирования кода.
Конечно, вы можете открыть данную страницу при помощи стандартной программы блокнот, но в этом случае у вас получится вот такой ужасный код, который очень неудобно редактировать.
Поэтому, для работы с подобными шаблонами я рекомендую вам скачать программу Notepad++ или какой-то его аналог и работать через нее.
Перетаскиваем в неё файл index.html и переходим к редактированию.
При редактировании страницы через Notepad++ здесь сразу расставляются переносы строк и есть подсветка кода. То есть, все тексты, которые вы можете править у вас выделены черным цветом.
Первое, что мы здесь видим – это тег title. Данные, которые здесь написаны будут находиться в заголовке страницы, отображаться на вкладке браузера и считываться поисковыми системами. Поэтому, очень желательно вписать здесь какое-то ключевое слово связанное с тематикой вашей лендинг пейдж.
Чтобы не пересматривать код для редактирования или замены определённых частей страницы воспользуемся поиском:
После того как вы нашли нужный фрагмент текста – меняете его на свой.
После внесения всех правок страницу нужно обязательно сохранить.
Как видите, править такую страницу можно, но это не очень удобно.
Как заменить изображения?
Что же касается замены картинок, то здесь будет по-сложнее. Первое что вы можете сделать – это подобрать подходящие картинки, затем загрузить их в папку images, которая находится внутри папки с данным лендингом, а затем, уже в коде смотреть где выводится эта картинка и менять здесь название на свое.
Но можно сделать проще. Например, вам не нравится определённая картинка.
Либо же, просто отдельно создаете картинку с таким же названием, с таким же размером, а потом копируете ее в эту папку, и когда спросят «Заменить это изображение?» вы выбираете «Да, заменить!». Таким образом, вы заменяете картинки, которые вам не подходят.
Так же, обращаю ваше внимание на то, что обязательным атрибутом лендинга является форма отправки контактных данных вашего потенциального клиента и вам необходимо внести определенные настройки, что бы все сообщения отправлялись на ваш e-mail.
Настройка отправки сообщений
Возвращаемся в папку с лендингом и находим здесь файл sendmail.php, либо в некоторых лендингах он может называться index.php или mailer.php. В общем, файл, который находится в корне вашего лендинга, и имеет расширение php. Вам необходимо будет этот файл, так же открыть либо в каком-то текстовом редакторе, либо в Notepad++ или его аналоге.
И здесь, как вы можете видеть написан комментарий «впишите сюда свою электронную почту». Вписываете вместо указанного e-mail адреса вписываете адрес своей электронной почты, и затем сохраняете этот файл.
После того, как вы внесли все изменения можно смело брать и выгружать данный лендинг к себе на хостинг.
Выгружаем лендинг на хостинг
Для этого вы можете воспользоваться либо файловым менеджером на вашем хостинге. Либо, если у вас файлового менеджера на хостинге нет, то вам нужно будет подключиться к вашему хостингу по FTP при помощи какого-нибудь FTP-клиента.
Для загрузки файлов делаем следующие шаги:
После того как все файлы выгрузятся, данный лендинг будет уже доступен в интернете.
Видеоинструкция
Как видите, всё довольно просто, но свои заморочки всё же есть. В одной из следующих статей я покажу как редактировать и настраивать шаблоны лендинг пейдж с встроенным визуальным редактором. Там всё намного проще и интереснее. Так что подписывайтесь на новости блога, а мне пора идти дуть шары и наряжать комнату. Сегодня у моего сына день рождения, ему исполняется 4 года и мы хотим сделать ему сюрприз.
Так что пока он спит пойдём украшательствами заниматься 🙂
Как сделать лендинг самому. Пошаговая инструкция (2019)
Лендинг помогает собрать посетителей на вебинар, запустить акцию, протестировать идею для бизнеса. Поэтому умение делать лендинг самому — полезный навык.
Мы подготовили для вас серию статей о создании лендинга. Первая статья, которую вы сейчас читаете, обзорная. В ней опишем, как собрать информацию для страницы, изучить конкурентов, создать лендинг в одном из конструкторов и превратить посетителей в покупателей.
В следующих статьях расскажем, как написать убойный текст для продающего лендинга, и сделаем обзор популярных конструкторов.
Как сделать лендинг самому — подготовка контента
Перед тем как писать текст, важно сформулировать цель создания лендинга. Цель может звучать так:
Зная цель создания лендинга, вы сможете лучше представлять его задачи, изучить похожие лендинги конкурентов и создать свою страницу. Вот, например, как выглядит лендинг мастер-класса по созданию портфолио:
Пример лендинга
Работа над контентом при создании лендинга проходит в несколько этапов.
Этап 1. Сформулировать гипотезу
Если вы решили сделать лендинг, значит, у вас есть идея или представление о странице. Запишите их коротко по плану:
Этап 2. Изучить конкурентов
Если клиент приходит на лендинг из контекстной рекламы или рекламы в соцсетях, велика вероятность, что он уже изучал информацию о товаре или услуге. Чтобы выделиться на фоне других предложений и объяснить посетителю, почему ваше — лучше, нужно изучить конкурентов.
Как это сделать? Посмотрите, что предлагают в ответ на запросы поисковики Google или Яндекс.
Поиск вариантов ключевых слов в Google Adwords
Затем введите в строку поиска подходящие ключевые слова и изучите страницы конкурентов:
Рекламные объявления компаний по запросу «беседка для дачи»
Конкуренты могут работать без сайта, продавая через соцсети. Поэтому есть смысл изучить предложения в Facebook, Instagram, «Вконтакте».
Сделайте таблицу со списком конкурентов. Запишите в столбцах: названия конкурентов, цены, суть предложения, условия доставки и гарантийного обслуживания. Первой строкой в таблице опишите ваше предложение. Так вы будете наглядно видеть свои преимущества и моменты, в которых вы проигрываете конкурентам.
Преимущества вы потом опишете в верхней части лендинга. А моменты, в которых проигрываете, сможете доработать или аргументировать.
Этап 3. Описать целевую аудиторию и выделить сегменты
Почему важно разделить аудиторию на сегменты? Потому что один и тот же продукт может иметь для людей разную ценность. Соответственно, для каждой группы будут актуальными свои аргументы, будут отличаться возражения.
Например, деревянные беседки покупают дачники, а также владельцы мини-отелей и загородных кафе. Дачникам могут быть важны компактные размеры беседки и дизайн, а владельцам отелей — износостойкость, оптовые цены и отсрочка платежа.
Если попытаться вместить все аргументы на один лендинг, информация выйдет слишком общей. В результате будет неинтересно никому. Поэтому лучше выделить два-три сегмента и сделать свой лендинг под каждую группу.
Как изучить свою аудиторию и найти сегменты:
Изучая отзывы, обратите внимание на то, что покупателям больше всего понравилось, чем остались недовольны, в чем сомневались, что было непонятно. Эта информация поможет написать текст будущего лендинга. Например, в отзыве про настольную игру покупатель отметил, что игра развивает воображение и пополняет словарный запас:
Пример отзыва на сайте магазина настольных игр
Если эти преимущества вы встретите в отзывах несколько раз, то они значимые. Их стоит упомянуть на лендинге.
Этап 4. Написать текст лендинга
На этом этапе у нас уже есть: описание продукта, его сильные и слабые стороны, информация о конкурентах, целевая аудитория и аргументы, которые для нее актуальны. Теперь можно приступать к созданию лендинга.
В его структуре используются несколько стандартных блоков. Сейчас расскажем об основных из них. Шапка лендинга, УТП или оффер, подзаголовок и призыв к действию — блоки первого экрана. Его видит посетитель, попадая на сайт.
Структура лендинга
| Название блока | Задача | Что писать |
| Шапка лендинга | Объяснить посетителю, куда он попал. | Логотип, название компании, чем занимается, контакты. |
| Уникальное торговое предложение или оффер | Передать одним предложением суть, главную выгоду для целевой аудитории, и почему это лучше, чем у конкурентов. | Пример: Деревянные беседки для дачи — собираются за один день. |
| Подзаголовок | Усилить или уточнить оффер. | Пример: Готовые беседки и под заказ. |
| Призыв к действию | Побудить посетителя купить или оставить контакты. | Кнопка «Заказать». Форма «Оставить заявку». |
| Описание услуги/свойства продукта | Дать подробную информацию о продукте. | Описание в формате «свойства-преимущества», фотографии продукта, скриншоты, видео, таблицы. |
| Сценарии использования | Описать ситуации, в которых будет полезен продукт или услуга. | Например, деревянная беседка нужна, чтобы отдыхать с друзьями, укрыться летом от солнца, украсить дачу, обедать всей семьей на свежем воздухе. |
| Кто мы/О компании/Почему выгодно купить у нас | Доказать экспертность, объяснить, почему вам можно доверять. | Опыт работы, сертификаты и дипломы, крупные клиенты. |
| Как это работает Как купить/заказать | Объяснить, как человек получит желаемый результат. | Например: «Вы скачиваете прайс, вам звонит наш менеджер и составляет смету. Вы одобряете смету и назначаете время доставки. Получаете складную беседку для дачи». |
| Сколько стоит | Показать цену или варианты цены. | Цена со скидкой, тарифные планы, калькулятор, форма «рассчитать стоимость». |
| Ответы на частые вопросы | Снять возражения, развеять страхи читателя. | Как оплатить товар, можно ли вернуть или обменять. |
| Призыв к действию | Еще раз предложить купить товар или оставить заявку. | Кнопка «Заказать». Форма «Оставить заявку». |
Теперь время написать текст. Но не спешите открывать конструктор. Создайте прототип страницы в Google Docs, Word или напишите от руки. Так удобнее редактировать текст и лучше видно, где нужно изменить или добавить информацию.
Этап 5. Подобрать картинки, видео, фотографии
Кроме текста для того, чтобы сделать продающий лендинг, вам понадобятся фотографии или иллюстрации — для первого экрана и демонстрации в основной части.
Фотографии товара можно попросить у поставщика или сфотографировать самому.
Подобрать фотографии в высоком разрешении можно также на платных и бесплатных фотостоках.
Нельзя просто взять фотографию из поиска — это нарушение авторских прав. В лучшем случае автор фотографии напишет вам и попросит заменить или оплатить фото. А может и подать в суд. Бесплатно можно использовать фотографии с лицензией Creative Commons. Подробно о лицензии Creative Commons и ее типах мы писали в одной из прошлых статей.
Выбирая фотографии, обращайте внимание, насколько реалистично они описывают ваш продукт, услугу или клиента. Например, американский фермер вряд ли будет ассоциироваться с вашими клиентами из дачного поселка.
Как сделать лендинг — оформляем текст в конструкторе
У вас уже написаны основные блоки лендинга, подобраны фотографии, схемы и иллюстрации. Теперь соберем из этого лендинг.
Сделать лендинг бесплатно можно с помощью конструкторов:
Конструкторы имеют свои особенности и интересные функции. Скоро на блоге будет подробный обзор инструментов для создания лендингов. Сейчас для примера покажем, как сделать лендинг в конструкторе Tilda.
Зарегистрироваться на сайте и ознакомиться с подсказками
После регистрации сервис сразу предложит вам создать сайт.
Совет: зайдите сначала в «Справочный центр» и просмотрите обучающие материалы. Так вы будете более уверенно себя чувствовать, работая с шаблоном лендинга.
Справочные материалы на сайте Tilda
Создать сайт
Придумайте название сайта. Это рабочий вариант, он виден только вам:
Создание сайта в конструкторе Tilda
Выбрать шаблон
Шаблоны в конструкторе сгруппированы по тематике и задачам. Просмотрите несколько вариантов, чтобы увидеть, есть ли там нужные блоки:
Выбор шаблона на сайте Tilda
Конечно, в конструкторе можно добавлять свои блоки. Но если у вас небольшой опыт в создании лендингов, лучше сразу выбрать подходящую структуру, чтобы вносить минимальные правки.
Например, мы хотим сделать лендинг для продажи деревянных складных беседок. Беседки — дорогой товар, скорее всего, клиент не купит их сразу, а захочет поговорить с менеджером, посмотреть фотографии. Значит, лучше выбрать шаблон с формой «рассчитать стоимость» и галереей. Названия разделов и фотографии мы изменим, главное, что структура лендинга нам подходит.
Шаблон «Ремонтная компания» для создания страницы
Вставить свой текст и фотографии
На следующем этапе меняем текст-заглушку и фотографии на свои, прописываем текст на кнопках.
Шаблон со своим текстом и фотографией
Опубликовать сайт
Когда все отредактировано, нажимаем «сохранить» и смотрим результат.
Если результат вас устраивает, ссылки работают, можно публиковать страницу в интернете и запускать рекламу.
На бесплатном тарифе адрес страницы будет иметь такой вид:
Бесплатный адрес сайта на субдомене Tilda
Чтобы подключить домен и получить короткий адрес страницы, нужно перейти на платный тариф.
Как увеличить конверсию лендинга
На лендингах используются два подхода к продажам. Первый — сразу предложить купить товар или услугу. Он подходит для недорогих товаров и услуг или если клиент уже «прогретый», например, пришел с рассылки либо профиля в Instagram.
Второй способ — получить контактные данные посетителя и постепенно подвести его к покупке. Для этого используют рассылки, автоматические серии писем, push уведомления.
Email рассылки
Рассылки помогают прогреть посетителей, которые пока не готовы к покупке. Вы можете добавить на лендинг форму подписки из SendPulse. Тогда контакты подписчиков будут сразу попадать в сервис. В справочном разделе Tilda описано, как вставить на страницу форму подписки SendPulse и собирать email адреса потенциальных клиентов.
Автоматические серии писем
Конвертировать посетителей лендинга в покупателей помогут такие виды автоматических рассылок:
Чтобы настроить авторассылки, нужно зайти в SendPulse и выбрать раздел «Авторассылки»:
Создание автоматических рассылок в SendPulse
Web push уведомления
Еще один способ повысить конверсию лендинга — настроить web push уведомления. Когда посетитель находится на странице, в браузере появляется предложение подписаться на уведомления:
Предложение подписаться на push уведомления
Если человек нажимает «разрешить уведомления», он в будущем будет получать сообщения в браузере или на рабочем столе компьютера.
Web push уведомления помогают решить несколько задач:
Подробнее о возможностях push уведомлений для увеличения конверсии мы рассказывали в одной из прошлых статей.
Теперь вы знаете о том, как правильно сделать лендинг самому и работать с посетителями, которые пришли на сайт.
В следующих статьях будет обзор популярных конструкторов для создания лендингов, чтобы вы могли выбрать удобный инструмент. Также расскажем о приемах написания текста для продающего лендинга.
Регистрируйтесь в SendPulse, чтобы повышать конверсию лендинга с помощью рассылок и push уведомлений и превращать посетителей в покупателей!