От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538
admin@sozdaj-sam.com

Лендинг на wordpress с плагином Page Builder

Создание Лендинга

Лендинг на wordpress с плагином Page Builder

Многие задаются вопросом, как можно создать landing страницу при этом не имея никаких навыков программирования и используя известную систему cms WordPress. Сегодня я расскажу и покажу на примере простую и доступную всем технологию по созданию лендингов использую плагин Page Builder by SiteOrigin.

Инструментарий для лендинга на wordpress

Для получения полноценного лендинг на wordpress нам понадобится:

  1. Установленная последняя версия WordPress
  2. Установленный плагин Page Builder от SiteOrigin
  3. Установленные виджеты SiteOrigin Widgets Bundle (установка в плагинах)

Этих простых действий достаточно, чтобы перейти к практическим моментам. Но есть еще интересный пункт в настройках, о которых я хочу здесь упомянуть.

Настройка SiteOrigin Widgets

Настройка SiteOrigin

Переходим в левом меню админки в раздел «Плагины» и нажимаем на появившееся после установки (SiteOrigin Widgets Bundle) подменю и получаем список доступных для использования виджетов. Они разделены на три части:

  • All — все виджеты
  • Enabled — включенные виджеты
  • Disabled — отключенные виджеты

Вы можете их как отключать, так и включать те, что по умолчанию отключены. Просмотрите их описание и решите с каким набором вы будете создавать вашу Lending Page. Ну а я перехожу к самому интересному, а именно созданию лендоса.

Создание лендинг пейдж используя страницу wordpress

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

Записи в WordPress

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

Страницы в WordPress

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

Создаем новую страницу, пока пустую для того, чтобы сделать ее главной страницей нашего сайта. Я для теста создам с именем Page Builder, теперь сделаем ее главной. Идем в меню «Настройки» -> «Чтение» и ставим по умолчанию нашу страницу:

Настройки чтения WordPress

После этих манипуляций возвращаемся к нашей странице и задаем ей 100% ширину контента, это делается в правой части админки и выглядит примерно таким образом:

Full Width Page

На разных шаблонах этот пункт может выглядеть по разному, ваша цель убрать всякие виджеты со страницы и дать ей 100% ширину в окне браузера. На этом наши приготовления пришли к завершающему этапу и самое время приступить к Lending page.

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

Переходим на вкладку Page Builder в редакторе нашей страницы:

Page Builder конструктор

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

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

Page Builder конструктор

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

Работа с готовым шаблоном Lending Page

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

Строки в Page Builder

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

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

SiteOrigin Hero

На скрине выше я привел пример редактирования первой строки моего макета, в каждой области редактируется своя часть контента и функционала.

  1. Область под основной текст (слоган, заголовок)
  2. Добавление кнопки, если нужно
  3. Фоновые элементы (изображение, видео)

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

Редактирование строк и блоков

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

Функционал вашего лендинга зависит только от вашей фантазии и желания экспериментировать со строками и виджетами. Мы разобрали с вами только работу с готовыми макетами, но ведь лендинг можно создать и с самого нуля самому. Как это сделать можно, смотрите в моем видео, которое я для этого специально и заснял. Ибо описывать нет ни времени ни сил.

Приятного вам просмотра

  1. AllexxAllexx11-03-2016

    Хоть бы показал в конце что вышло

  2. esloeslo12-21-2016

    elementor по удобнее работать

Написать ответ

© 2016 Андриевский Андрей
Украина, город Киев
Тел: (063) 856-2538
E-Mail: admin@sozdaj-sam.com
Web: https://sozdaj-sam.com/