От автора: с одной стороны лендинг пейдж довольно сильно повышают посещаемость и конверсию сайта, но с другой стороны их не так легко создать, особенно если вы не умеете программировать. Именно для этого, я представил вам решение — WordPress плагин Long Form Storybuilder (LFS). В этой статье я расскажу вам, как в два клика создать интуитивно-понятную лендинг страницу.
Базовые настройки
Давайте все установим и запустим. На данном этапе подразумевается, что у вас есть следующие вещи:
Сайт WordPress на локальном или веб-сервере
Установленный и запущенный плагин Long Form Storybuilder
Если условия выше выполнены, перейдите в панель WordPress и добавьте новую страницу Страницы > добавить. Задайте подходящий заголовок и сохраните ее. Затем позвольте плагину подключиться к проекту, кликнув на Enable Long Form Content галочку в правом верхнем углу.
На странице выше видно, что я добавил новую страницу и активировал галочку. Теперь пересохраните страницу. Вы получите уведомление о том, что Long Format Content активен и, что вы можете редактировать данную страницу в плагине. Кликните на кнопку Edit my Long Format Content Page.
На данном этапе откроется кастомайзер тем, в котором появятся две новые панели от плагина. Новые панели:
Long Format Page Sections
Page Options
С помощью Page Options можно установить основные и вторичные цвета лендинг пейдж, а Long Format Page Sections поможет добавить секции на страницу.
В предыдущей статье я упомянул целый список возможных секций, которые можно добавить через плагин Long Form Storybuilder. Перейдите в Long Format Page Sections > Add a Section и добавьте нужные секции.
В каждой секции есть ряд настроек, которые необходимо изменить, чтобы секция стала частью лендинг пейдж.
Создание лендинг пейдж
После того, как я объяснил базовую архитектуру плагина Long Form Storybuilder, давайте наконец создадим наш лендинг пейдж. Я сразу перепрыгнул в панель Page Options и задал черный основным цветом, а белый вторичным.
Далее идет самая крутая часть – добавление секций на лендинг страницу.
Шаг 1: Добавление меню
Первая секция, которую я добавил, это панель навигации. Я назвал ее My_Nav_Menu, задал свой логотип и выбрал тип меню.
Шаг 2: Хедер
Сразу после панели навигации идет крайне важный компонент лендинг страницы – вступительный блок. Обычно это изображение с текстом по центру.
На скриншоте выше видно, что я добавил секцию под названием My_Header_Menu. Первым делом я добавил изображение. Затем идет поле основного заголовка, где вы можете задать название вашего продукта или сервиса.
Шаг 3: Заголовок секции
Далее я добавил секцию под названием Section Heading. Это обычный заголовок, указывающий на начало новой секции. На скриншоте ниже показаны детали.
Шаг 4: Колонка с контентом
Затем я добавил немного текста об особенностях моего продукта. Вы должны были заметить, что обычно описание отображается в две-три колонки. Через плагин Long Form Storybuilder можно с легкостью их добавить. Я использовал две колонки.
Секция очень простая, всего-то и необходимо, что добавить текст. Я обе колонки забил текстом-примером.
Шаг 5: Секция призыва к действию
В конце я добавил секцию призыва к действию, побуждающую людей купить продукт, о котором идет речь на странице. В нашем случае я прошу людей зарегистрироваться. Вы же можете направить их на страницу корзины или куда-нибудь еще.
Всего я добавил пять секций на лендинг пейдж. На скриншоте ниже показана кнопка Reorder, с помощью которой можно поменять порядок секций.
Шаг 6: Публикация
Как только вы закончили, кликните на кнопку Save & Publish в самом верху. Заметьте, что какую бы вы секцию не создали, вы сразу же увидите ее в живом превью – заманчивая особенность.
Шаг 7: Предварительный просмотр результата
Перейдите на вкладку Страницы и посмотрите на страницу, которую вы отредактировали в плагине LFS, кликнув на View Page. Ниже представлен результат моей лендинг пейдж.
Заключение
Данные секции можно добавить повторно, добавить еще больше секций и отсортировать их по своему усмотрению. Более чем уверен, что вы с помощью этого плагина создадите крутую лендинг страницу не более чем за 5 -10 минут. Для поиска изображений высокого разрешения с лицензией CC0 можно воспользоваться сервисом PicJumbo. Процесс создания лендинг пейдж через плагин Long Form Storybuilder стал очень простым и удобным. Можно выкатывать по одной новой странице каждый день. А что вы думаете об этом плагине? Буду рад услышать ваши комментарии.
Автор: Ahmad Awais
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (1)