Сышышь ты, выходи сюда,
поговорим !

Как на WordPress сделать Landing Page?

Опубликовано: 02.09.2018

видео Как на WordPress сделать Landing Page?

КАК СОЗДАТЬ САЙТ (landing page) на WordPress? Создание сайта легко. По-шагам. Сделать сайт без html

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



Landing Page и WordPress

Одностраничный сайт или просто “одностраничник” можно создать на любой технологии, предназначенной для веб-строительства. Так, Вы можете создать его на “чистом” PHP или JavaScript с применением каскадных стилей CSS . Безусловно, такой вариант будет выгодным по скорости работы конечного продукта, но затратным в плане денег и времени на его разработку. Если Вы сами захотите заниматься проектом, то должны владеть на достойном уровне соответствующими знаниями в программировании и дизайне.


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

Сегодня для создания “одностраничника” не обязательно быть программистом. Существуют специальное программное обеспечение и онлайн-конструкторы, призванные облегчить этот процесс. Это позволит даже неопытному пользователю достичь результата.

Если говорить о WordPress, то и для этой системы существует несколько разработок, позволяющих несложными методами и довольно быстро создать Landing Page с вполне профессиональным дизайном. Для примера воспользуемся  Page Builder от SiteOrigin — одним из самых популярных (более 1 миллиона установок) бесплатных плагинов.


Как сделать Landing Page на Visual Composer в Wordpress

Подготовительный этап

Для начала необходимо создать ту самую страницу, которая и будет отображаться на сайте. Для этого следует в админ-панели перейти в раздел Страницы -> Добавить новую , ввести заголовок и нажать кнопку Опубликовать .

Теперь следует установить эту страницу в качестве главной на сайте. Для этого нужно перейти Внешний вид -> Настроить , где в блоке Настройки главной страницы выбрать созданную страницу.

В итоге главная страница сайта будет выглядеть примерно так:

Плагин Page Builder от SiteOrigin

Во-первых, следует установить и активировать плагин Page Builder by SiteOrigin . Помимо основного плагина, еще нужно будет установить набор виджетов, из которых собственно и состоят все блоки будущих макетов. Для этого существует плагин SiteOrigin Widgets Bundle . После установки необходимых плагинов необходимо открыть на редактирование созданную страницу. Видно, что на панели инструментов визуального редактора появилась вкладка Page Builder .

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

В помощью доступных тут элементов страницы Вы сможете создать основную разметку, т.е. те самые горизонтальные блоки с контентом. Кроме того, возможно задать цвет и изображение фона, размеры блоков, отступы и другие атрибуты. Отметим, что плагин уже имеет несколько предустановленных, профессионально сверстанных, макетов. Для их выбора на панели инструментов есть кнопка Layouts .

Для выбора того или иного макета необходимо выделить его и нажать кнопку Вставить . Теперь в редакторе появятся все элементы выбранного Вами макета.

Редактор поддерживает функцию Drag’n’Drop , что позволит Вам перемещать нужные элементы в желаемые места страницы. Кроме того, каждый элемент макета Вы можете редактировать, наведя на него курсор и нажав на ссылку Редактировать .

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

Для создания макета “с нуля” Вам необходимо будет создать необходимое количество горизонтальных блоков (например, хэдер, услуги компании, сотрудники, контакты), которые и будут формировать сам макет. Для этого на панели инструментов существует кнопка Добавить строку , после нажатия на которую Вам будет предложено настроить разметку горизонтального блока (количество элементов в строке, отступы, цвета).

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

Если Вам понравилась статья — поделитесь с друзьями

rss