Продающий лендинг на WordPress

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

И тут появилась идея создать посадочную страницу на WordPress.

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

Собрав всю найденную информацию, я нашел свой подход и и вот что из этого получилось: демо сайта — www.web-specialist.info/sh

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

I. Подготовка к созданию лендинга

1. Регистрация хостинг аккаунта. Для хостинга был выбран хостинг провайдер Parkovka.ua, предоставляющий качественные услуги по хорошей цене  🙂
2. Настройка доменного имени.
3. Установка CMS Wordprss.

II. Установка необходимых компонентов

1. Установка темы Refur. Эта тема WordPress была выбрана не случайно. В ней отлично реализован первый экран с фоновым изображением, кнопкой для призыва к действию и есть возможность заменить текст «Copyright» в футере на свой вариант.
2. Создание дочерней темы. Так как в дальнейшем нам нужно будет прописывать свои стили и функции для лендинга, то нужно обеспечить их сохранность, чтоб после обновления темы они не исчезли 💡
3. Установка плагинов: WP Translitera, — плагин для транслитерации ссылок сайта; Contact Form 7, — плагин для создания форм обратной связи; TinyMCE Advanced, — расширяет возможности текстового редактора WordPress. Easy FancyBox, — плагин для создания всплывающих окон на сайте. Page Builder от SiteOrigin, — имеет огромные возможности кастомизации страниц с достаточным количеством интуитивно понятных настроек; и самый основной плагин, при помощи которого мы будем строить информационные блоки лендинга..

III. Подготовка плагинов WordPress к работе

После установки некоторые плагины нуждаются в дополнительных настройках.

1. TinyMCE Advanced, — нужно добавить недостающие компоненты в панель текстового редактора. Для его настройки переходим по пути: настройки → TinyMCE Advanced.
   
   В окне настроек плагина нам нужно перетянуть нужные компоненты из окна «Неиспользуемые кнопки» в панель текстового редактора. Я для настройки лендинга использовал такие кнопки: «семейство шрифтов», «размер шрифта», «цвет фона», «выравнивание по ширине», «верхний индекс», «подчеркнутый». После выбора, сохраняем кликнув на кнопку «сохранить изменения».
   
2. Easy FancyBox, — нужно включить функцию «Inline content» для того чтоб форма обратной связи открывалась во всплывающем окне. Для этого переходим по пути Настройки → Медиафайлы, и проскролив немного вниз видим «FancyBox». Ставим отметку в чекбоксе напротив «Inline content» и сохраняем. Так же можно снять отметку с чекбокса напротив «Images», если необходимо присвоить настройки для ссылок изображений, чтоб открывались в отдельном окне.
3. Contact Form 7. Мы будем использовать этот плагин для получения заказов через кнопку обратной связи. Подготовим его для дальнейшей работы. Переходим по пути: Contact Form 7 → Формы.
    Там видим уже автоматически созданную контактную форму «Контактная форма 1». Эту форму можем пока не трогать. Создаем новую, нажав в левом верхнем углу кнопу «Добавить новую». В открывшемся окне вводим любое понятное название формы. В поле «Шаблон формы» удаляем существующий код, кроме строки [submit «Отправить»]. Затем, нажимаем кнопку «текст», для добавления необходимого тега в форму.
   
   В открывшемся окне отмечаем чекбокс «обязательное поле», в графе «значение по умолчанию» пишем текст «Ваше имя», и отмечаем чекбокс «используйте этот текст в качестве заполнителя поля». И нажимаем кнопку «вставить тег».
   Повторяем эту процедуру еще раз, для поля «номер телефона». Должно получиться вот так:
   
   Сохраняем и переходим на вкладку «Письмо». Здесь нужно отредактировать шаблон письма, которое будет уведомлять нас, что на сайте была заполнена контактная форма. Сразу же в верхней части шаблона появилась надпись «В следующих полях Вы можете использовать эти почтовые метки:[text-720][text-721]». У вас номера меток могут отличаться. Копируем и подставляем их в поле «Тело письма» с подписями «Ваше имя» и «Телефон», соответственно. Затем очищаем поле «Дополнительные заголовки» от кода. Поскольку в нашей форме нет поля для ввода e-mail адреса, то если не очистить его не очистить, форма будет содержать ошибку. Далее можем изменить поля «От кого» и «Тема», вписав туда текст, который нем необходим. Проверяем, чтоб в поле «Кому» был вписан e-mail, на который нужно получать уведомления с сайта. И сохраняем форму.
   Вот как было:
   
   И вот что получилось:
   
   Эта настройка будет нам необходима для красивого оформления всплывающего окна обратной связи.

Далее переходим к настройкам конструированию самого лендинга.

IV. Настройка стартовой страницы лендинга

1. Удаляем все записи и страницы, которые были автоматически установлены при инсталляции CMS WordPress.
2. Добавляем новую страницу. Заголовок вводить не нужно, чтоб он не отображался потом на сайте.
3. Переходим в настройки темы по пути: Внешний вид → Настроить. Далее выбираем настройку «Статическая глвная страница», в открывшемся окне в разделе «На главной странице отображать» выбираем пункт «статическую страницу». Ниже, в выпадающем меню выбираем созданную  нами ранее страницу и сохраняем изменения.
4. Приступаем к редактированию созданной ранее страницы.
   В панели текстового редактора выбираем кнопку «Page Bilder». Собственно в нем мы и будем строить и настраивать нашу посадочную страничку.
   
   
5. Далее, при помощи кнопки «добавить строку», добавляем столько строк, сколько предусмотрено разметкой нашей лендинг пейдж. Кроме того, каждую из строк мы делим на то количество блоков, которое нам необходимо, начиная от одно и более.
   
   После разметки страницы в каждый из блоков добавляем виджет «SiteOrigin редактор (текстовый редактор)» при помощи кнопки «добавить виджет».
   
   Далее всю работу по установке фоновых изображений, кнопок, иконок и написании текста мы будем выполнять средствами этого виджета.
   
   В этой теме я не буду углубляться в подробности работы с плагином  Page Builder от SiteOrigin, поскольку эта информация достойна отдельного рассмотрения. Скажу лишь, что цвет фона, фоновые изображения, надписи над картинками, кнопки призыва, размеры блоков и многое другое можно реализовать используя настройки «Макет» и «Дизайн» в этом плагине.
   Отдельного внимания заслуживает настройка кнопки обратной связи на нашем лендинге. К ней и перейдем.

V. Установка и настройка контактных форм.

Ниже описанный способ уже давно существует на просторах интернета, так что на оригинальность я не претендую  🙂

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

/***Стили для формы обратной связи****/

.contact-us a{
border:1px solid #ccc; /*цвет границы*/
background:#2674C8;  /*цвет фона*/
padding:10px 20px; /*внитринние отступы*/
display:block;
text-align:center; /*выравнивание текста по центру*/
color:#fff;  /*цвет текста*/
text-decoration:none;  /*убрать подчёркивание у ссылки*/
width:190px;  /*ширина кнопки*/
margin:auto;  /*выравнивание кнопки по центру*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

/**Плавное появление тени у кнопки при наведении**/

.contact-us a:hover{
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
box-shadow:0 0 6px #000;   
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

/***Стили для CF7***/
.wpcf7 {
background:#f1f1f1;  /*цвет границы*/
padding:20px 20px 20px 20px!important;
text-align:center;
border:1px solid #ccc;
font-size:17px;
}

.wpcf7 h2{
text-transform:uppercase;
font-size:20px;
color:#750000;
margin-bottom:15px;
}

.wpcf7-text{
 margin-bottom:10px;
 padding:5px;
 border:1px solid #6e6e6e;
}

.wpcf7-text:focus{
-moz-box-shadow: 0 0 6px #004080!important;
-webkit-box-shadow: 0 0 6px #004080!important;
box-shadow:0 0 6px #004080!important; 
}

.wpcf7-submit{
background: linear-gradient(#f20000, #750000)!important;
color:#fff!important;
text-shadow:none!important;
text-transform:uppercase;
border-radius:10px!important;
-moz-box-shadow: 0 0 6px #000!important;
-webkit-box-shadow: 0 0 6px #000!important;
box-shadow:0 0 6px #000!important;   
margin-top:20px;

}

 /*стили сообщений об ошибках*/
.wpcf7-not-valid{
border:1px solid red!important;
}

.wpcf7-response-output{
background:#fff;
border-radius:10px!important;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
box-shadow:0 0 6px #000;   
}

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

<div class="contact-us"><a href="#contact_form_pop_up" class="fancybox-inline">Отправить сообщение</a></div>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop_up">
Текст
[contact-form-7 id="159" title="Контактная форма 1"]
</div>
</div>

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

[contact-form-7 id="159" title="Контактная форма 1"]

ставим шорткод нашей контактной формы. Смотрим его по пути Contact Form 7 → Формы.

Смотрим что получилось.

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

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

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

Спасибо за внимание! 🙂