web разработка по низким ценам
ул. Шевченко, 37а / офис 1
Украина, ЧО, г. Нежин
+38 068 681 00 08
ежедневно с 08:00 до 22:00
Оставьте заявку, и мы перезвоним вам в течении 15 минут
отправить
Представьтесь пожалуйста *Например, Виктор Смирнов
Ваш номер телефона *Например, +38 (068)-681-00-08
Примечание для оператораНапример, Пожалуйста, свяжитесь со мной во второй половине дня
* - поля, обязательные для заполнения
x
Оставьте заявку, и мы свяжемся с вами в ближайшее время
отправить
Тема обращенияНапример, Требуется продвижение сайта
Представьтесь пожалуйстаНапример, Виктор Смирнов
Ваш номер телефонаНапример, +38 (068)-681-00-08
Ваш e-mailНапример, youname@site.com
Сообщение для оператораНапример, Пожалуйста, помогите мне определиться с тарифом
Все поля, обязательны для заполнения
x
» Создание Landing Page на Wordpress

Создание Landing Page на Wordpress

Опубликовано: 05.10.2016 в 12:15
Многие задаются вопросом, как проходит создание Landing Page на Wordpress, при этом не имея особых навыков в программировании. Мы приведем Вам доступную и простую технологию по созданию целевых страниц с помощью плагина Page Builder by SiteOrigin.

Для создания качественного Landing Page на «Вордпресс» Вам потребуется:
  • последняя версия движка;
  • плагин Page Builder от SiteOrigin;
  • виджеты SiteOrigin Widgets Bundle. 
Таких действий вполне достаточно, чтобы перейти к практическим моментам. Однако существует еще один интересный момент в настройках, которые будут рассмотрены нами ниже.

Настройка SiteOrigin Widgets

Создание Landing Page на Wordpress

В левом меню панели администратора переходим в раздел «Плагины» и нажимаем на SiteOrigin Widgets Bundle, появившееся после установки, получаем список виджетов, доступных для использования. Они разделяются на 3 части: 
  • Все виджеты – All.
  • Включенные виджеты – Enabled.
  • Отключенные виджеты – Disabled. 
Вы можете их отключать/включать, отталкиваясь от своих задач. Изучите их описание и решите, какой из наборов Вам требуется для создания лендинга на Wordpress. Теперь подробно рассмотрим весь процесс.

Создание Landing Page на Wordpress: пошаговая инструкция 

Мы будем создавать лендинг с помощью статистических страниц, которые применяются движком для вывода основной информации: Контакты, О нас, Партнеры, Реклама и т.д. Основное отличие этих страниц от записей заключается в том, что записи – это контент, который работает на построение контента в виде блога. Здесь присутствуют категории (разделы) и привязка к ним новой записи, то есть все это представляет динамический контент сайта. 

Создание Landing Page на Wordpress

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

Создание Landing Page на Wordpress

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

Создаем новую страницу, чтобы сделать ее главной. В нашем примере мы создали страницу с названием Page Builder, после чего делаем ее главной. Переходим в меню «Настройки» – «Чтение» и ставим по умолчанию страницу, которую Вы создали»: 

Создание Landing Page на Wordpress

Дальше возвращаемся к созданной странице и задаем ей 100%-ю ширину, что делается в правой части админпанели и выглядит примерно так: 

Создание Landing Page на Wordpress

На различных шаблонах этот пункт может иметь разный внешний вид, Ваша задача – убрать виджеты со страницы и дать ей 100%-ю ширину в браузере. На этом подготовительный этап завершается, теперь нужно приступить к созданию Landing Page.

Template Landing Page в конструкторе Page Builder

Выбираем вкладку Page Builder в редакторе страницы: 

Создание Landing Page на Wordpress

Дальше откроется окно, где и будет происходить создание посадочной страницы. Однако перед тем как к нему приступить, рекомендуем ознакомиться с некоторой теорией.

Page Builder представляет собой визуальный конструктор, создающий контент и придающий ему свои формы, а также места размещения на страницах сайта, потом контент выводится посредством шорткодов. Этот конструктор имеет один недостаток – при большом количестве страниц система начинает тормозить. Поэтому использовать Page Builder рекомендуется только на страницах, а не в записях. Теперь приступим к делу. 

Создание Landing Page на Wordpress

Как уже было сказано выше, для создания Landing Page на Wordpress Вам не понадобятся знания программирования или верстки, так как Вы установите готовый шаблон, который впоследствии можно отредактировать под свои требования. Нажимаем на «Готовый макет» и попадаем на страницу с выбором. На каждом шаблоне присутствует кнопка Preview, кликнув на которую Вы переместитесь на демомакет. Таким образом, Вы рассмотрите все доступные варианты, открывающиеся на соседней вкладке, чтобы вернуться к выбору, закройте демовкладку. Сделав выбор, нажимаем на картинку и на «Вставить». Причем предлагается три варианта вставки: в конец, в начало и с затиранием всего контента. 

Работа с шаблоном лендинга

Достаточно сохранить страницу, после чего открыть ее и увидеть полноценный готовый лендинг. Теперь рассмотрим, как его редактировать и подстраивать под свою информацию. 

Создание Landing Page на Wordpress

Вы увидите приблизительно то же, что и на скрине. Это строки, куда заливается контент с помощью виджетов, что и формирует итоговую картину лендинга. Теперь откроем первую строку и внимательно ее рассмотрим.

В приведенном нами примере первая строка представлена виджетом SiteOrigin Hero. Он отвечает за вывод фоновых изображений и слайдеров первого загрузочного экрана. 

Создание Landing Page на Wordpress

На скриншоте, представленном выше, Вы видите пример редактирования первой строки макета. В каждой отдельной области редактируется своя часть функционала и контента. 
  • Область под основной текст (заголовок, слоган).
  • Добавление кнопки, при необходимости.
  • Фоновые элементы (видео, изображения). 
Со всем нужно экспериментировать, так как с первого раза получается далеко не все. Что-то поломается или станет не так, как Вы планируете, но практика является лучшим учителем. Для наглядности приведем еще один скрин, где показаны элементы страницы, а ниже – как это выглядит в админке: 

Создание Landing Page на Wordpress

Если Вы имеете представление об адаптивной верстке, то знаете о блоках и строках внутри строк. Строка – это элемент, где внутри ставятся блоки (виджеты, которые устанавливаются в самом начале статьи). Каждая строка содержит от 1 до 20 виджетов (блоков).

Функционал лендинга напрямую зависит от Вашего желания экспериментировать с виджетами и строками. На примерах мы работали с готовым шаблоном, но никто не мешает Вам создать лендинг на «Вордпресс» с нуля. Если Вы столкнулись со сложностями или не хотите делать все самостоятельно, то поручите это дело специалистам, работающим в нашей компании «Веб-Спутник». Они сделают ваш лендинг красивым и эффективным в плане продаж. Обращайтесь прямо сейчас!
Понравился материал? Поделитесь с друзьям:
0
Поделилось
0 комментариев к новости
Комментарии к данной новости отсутствуют. Будьте первым, и выразите свое менение!
Добавить комментарий
Ваше Имя:
Ваш E-mail:
Ваш комментарий: