WordPress — это универсальная платформа, которую можно использовать не только для блога, но и развернуть на CMS полноценный сайт или создать страницу захвата (одностраничный сайт — landing). Сегодня я расскажу, как быстро и просто создать структурированную web страницу со всеми элементами захвата, где взять качественные изображения и иконки, как добавить форму захвата и видео на сайт.
В итоге мы получим вот такую страницу с приглашением на вебинар:
1 Шаг. Создаем макет
Прежде чем перейти к созданию сайта на WP, я рисую макет сайта на листочке или создаю таблицу в текстовом редакторе. Располагаю ключевые элементы, придумываю заголовком и призыв к действию, пишу тексты и подбираю медиа контент. В итоге у меня выходит готовый макет:
Визулизация вашей страницы захвата и подготовка текстов значительно облегчат дальнейший путь создания сайта на WP. Имея пед глазами макет, вы будете знать куда двигаться, какие элементы использовать в конструкторе и четко представлять, что должно получится в итоге.
Шаг 2. Выбор темы и плагинов WP для страницы захвата
Для создания лэндинга нам понадобится установленный Word Press на хостинге, рекомендую хостинг Host Then Profit, где вы можете разместить 5 сайтов всего за $9,97 + авторассыльщик писем, который нам понадобится для автоматизации Email маркетинга после заполнения формы захвата на лэндинге.
Первое, что нам необходимо выбрать — это тему оформления для сайта, переходи в панель управления в левом меню нажимаем: Внешний вид —> Темы —> Добавить новую.
Я для своей станицы установила тему Refur. Вы можете использовать любую тему WordPress — выбирайте наиболее понравившуюся вам шапку и шрифты (меню и остальные элементы мы использовать не будем ).
Вот еще несколько шаблонов, которые подойдут для страницы захвата на WordPress:
После того, как вы выбрали понравившейся вам шаблон, необходимо установить несколько обязательных плагинов для создания страницы захвата. В левом меню выбираем: Плагины —> Добавить новый и в поле поиска вводим название плагина. Затем нажимаем Установить и на забываем после установки — Активировать плагин.
Набор плагинов для создания страницы захвата на WordPress:
- Page Builder от SiteOrigin — конструктор страниц с драг-энд-дроп, что упрощает создание вашего сайта.
- SiteOrigin Бандл Виджетов — коллекция виджетов для конструктора.
- TinyMCE Advanced — визуальный редактор WordPress.
- Waiting — плагин обратного отсчета с настройкой внешнего вида.
На этом все подготовительные работы завершены и можно переходить непосредственно к созданию страницы.
Шаг 3. Создаем страницу захвата на WordPress
В левом меню выбираем Страницы —> Добавить новую (не задаем название).
После установки всех вышеперечисленных плагинов, помином стандартных вкладок Визуально и Текст, появилась новая опция для редактирования страниц Page Builder — переходим во вкладку:
С помощью конструктора вы может добавлять ряды и виджеты на страницу. Начинаем строить страницу с добавления нового ряда Row:
Каждый ряд можно разбить на нужное вам количество столбцов (контейнеров), чтобы структурировать страницу. Например, создаем столбец разделенный на две равные части (в левой части будет текст а в правой мы расположим форму), нажимам кнопку Вставить:
Чтобы добавить виджет в контейнер — нажмите мышкой на нужный блок (он подсветиться темным цветом) и нажмите кнопку Добавить виджет:
Выбираем необходимый вам виджет. Например, чтобы добавить текст — выбираем текстов редактор SiteOrigin редактор:
В нашей ячейке появился выбранный виджет. Чтобы добавить текст — нажмите кнопку Редактировать (можете также Удалить ненужный виджет или Копировать виджет, если вам надо несколько одинаковых блоков):
Во вкладке редактировать вам откроется простой визуальный редактор WordPress для работы с текстом. В правом меню можно задать настройки дизайна — изменить фон блока или добавить фоновое изображение.
Вносим необходимые изменения и нажимаем кнопку Выполнено:
Добавляем форму захвата на лэндинг:
Скопируйте html-код формы захвата в натсройках авторепондера (если вы используете хостинг Host Then Profit, подробная инструкция об использовании автореспондера здесь , создание формы Пункт 9). В конструкторе выберите столбец и нажмите кнопку Добавить виджет, выберите вариант HTML -код:
Нажимаем Редактировать:
Вставляем код формы и нажимаем кнопку Выполнено:
Чтобы добавить видео используйте одноименный виджет, для изображений — свой и т.д.
Чтобы сохранить изменения, в правом меню нажимаем кнопку Сохранить и можем Посмотреть, что получилось:
Чтобы добавить следующую строку с блоками нажимаем кнопку Добавить строку — так можно добавлять сколько угодно строк и разбивать их на блоки, добавлять всевозможные виджеты. Чтобы задать фон для строки или фоновое изображение, нажмите значок с отверткой, как на скриншоте:
В моем макете получилось 7 строки с различными блоками:
Шаг 4 Настройки WP для страницы захвата
Чтобы сделать нашу страницу главной, переходим в меню Настройки —> Чтение. Выбираем на главной странице отображать Статическую страницу (из выпадающего списка выбираем вашу безымянную страницу):
Осталось только добавить заголовок и яркую картинку в шапку страницы. Для этого переходим в меню Внешний вид —> Настроить. Во вкладе Изображения заголовка можно загрузить заранее подготовленное изображение прописать заголовок. Здесь вы также можете задать логотип и поменять другие настройки темы. Нажимаем кнопку Сохранить и ваша страница захвата готова!
Изображения и иконки для страницы захвата
Чтобы ваша страничка выглядела красиво вам понадобятся изображения с хороши расширением и иконки в формате png. Если вы не владеет фотошопом, тогда вот вам несколько полезных ссылок, где можно бесплатно скачать хорошие стоковые изображения, отредактировать фото и подобрать необходимые иконки по цвету и размеру:
- unsplash.com, picjumbo.com — бесплтные стоковые сайты с большим количеством качественных изображений.
- www.fotor.com — бесплатный онлайн редактор фото.
- iconsdb.com — ресурс, где можно бесплатно скачать плоские иконки любого цвета.
Вот все настройки для лэндинга на WordPress. Для тех, ко первый раз сталкиваться с Page Builder — прийдется немного сложно, но это только при первом знакомстве. Второй и все последующие макеты вы сможет делать очень быстро!
Красивых вам страничек захвата!
Автор статьи Ольга Кузьмина
SEO-специалист или просто seo-шник) За спиной более 5 лет опыта в сфере интернет-маркетинга. Начинала с контент-менеджмента и наполнения сайтов, затем узнала что такое SEO-оптимизация и понеслось... Сейчас работаю со всеми направлениями интернет маркетинга: seo, контекст, smm. Люблю писать, как по-работе, так и для души))) Постараюсь быть полезной для читателей этого блога.