Страница захвата на WordPress

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

В итоге мы получим вот такую страницу с приглашением на вебинар:

1 Шаг. Создаем макет

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

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

Шаг 2. Выбор темы и плагинов WP для страницы захвата

Для создания лэндинга нам понадобится установленный Word Press на хостинге, рекомендую хостинг Host Then Profit, где вы можете разместить 5 сайтов всего за $9,97 + авторассыльщик писем, который нам понадобится для автоматизации Email маркетинга после заполнения формы захвата на лэндинге.

Первое, что нам необходимо выбрать — это тему оформления для сайта, переходи в панель управления в левом меню нажимаем: Внешний вид —> Темы —> Добавить новую.

Я для своей станицы установила тему Refur. Вы можете использовать любую тему WordPress  — выбирайте наиболее понравившуюся вам шапку и шрифты (меню и остальные элементы мы использовать не будем ).

Вот еще несколько шаблонов, которые подойдут для страницы захвата на WordPress:

1. Тема Poseidon в синих цветах
2. Тема Spacious в зеленых цветах
3. Нейтральная тема Refur

После того, как вы выбрали понравившейся вам шаблон, необходимо установить несколько обязательных плагинов для создания страницы захвата. В левом меню выбираем: Плагины —> Добавить новый и в поле поиска вводим название плагина. Затем нажимаем Установить и на забываем после установки — Активировать плагин.

Набор плагинов для создания страницы захвата на WordPress:

1. Page Builder от SiteOrigin — конструктор страниц с драг-энд-дроп, что упрощает создание вашего сайта.
2. SiteOrigin Бандл Виджетов — коллекция  виджетов для конструктора.
3. TinyMCE Advanced — визуальный редактор WordPress.
4. Waiting — плагин обратного отсчета с настройкой внешнего вида.

На этом все подготовительные работы завершены и можно переходить непосредственно к созданию страницы.

Шаг 3. Создаем страницу захвата на WordPress

В левом меню выбираем Страницы —> Добавить новую (не задаем название).

После установки всех вышеперечисленных плагинов, помином стандартных вкладок Визуально и Текст, появилась новая опция для редактирования страниц Page Builder — переходим во вкладку:

С помощью конструктора вы может добавлять ряды и виджеты на страницу. Начинаем строить страницу с добавления нового ряда Row:

Каждый ряд можно разбить на нужное вам количество столбцов (контейнеров), чтобы структурировать страницу. Например, создаем столбец разделенный на две равные части (в левой части будет текст а в правой мы расположим форму), нажимам кнопку Вставить:

Чтобы добавить виджет в контейнер — нажмите мышкой на нужный блок (он подсветиться темным цветом) и нажмите кнопку Добавить виджет:

Выбираем необходимый вам виджет. Например, чтобы добавить текст — выбираем текстов редактор SiteOrigin редактор:

В нашей ячейке появился выбранный виджет. Чтобы добавить текст — нажмите кнопку Редактировать (можете также Удалить ненужный виджет или Копировать виджет, если вам надо несколько одинаковых блоков):

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

Вносим необходимые изменения и нажимаем кнопку Выполнено:

Добавляем форму захвата на лэндинг:

Скопируйте html-код формы захвата в натсройках авторепондера (если вы используете хостинг Host Then Profit, подробная инструкция об использовании автореспондера здесь , создание формы Пункт 9).  В конструкторе выберите столбец и нажмите кнопку Добавить виджет, выберите вариант HTML -код:

Нажимаем Редактировать:

Вставляем код формы и нажимаем кнопку Выполнено:

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

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

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

В моем макете получилось 7 строки с различными блоками:

Шаг 4 Настройки WP для страницы захвата

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

Осталось только добавить заголовок и яркую картинку в шапку страницы. Для этого переходим в меню Внешний вид —> Настроить. Во вкладе Изображения заголовка можно загрузить заранее подготовленное изображение прописать заголовок. Здесь вы также можете задать логотип и поменять другие настройки темы.  Нажимаем кнопку Сохранить и ваша страница захвата готова!

Изображения и иконки для страницы захвата

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

1. unsplash.com, picjumbo.com — бесплтные стоковые сайты с большим количеством качественных изображений.
2. www.fotor.com — бесплатный онлайн редактор фото.
3. iconsdb.com — ресурс, где можно бесплатно скачать плоские иконки любого цвета.

Вот все настройки для лэндинга на WordPress. Для тех, ко первый раз сталкиваться с Page Builder — прийдется немного сложно, но это только при первом знакомстве. Второй и все последующие макеты вы сможет делать очень быстро!

Красивых вам страничек захвата!