Обсудим ваш проект?

Как создать лендинг на WordPress - пошаговая инструкция


Просмотров:
1048
Время на прочтение:
Статья обновлена:
22 Мая 2020
Информация о статье
Просмотров: 1048
Время на прочтение:
Статья обновлена: 22.05.2020
Дарья, редактор
Дарья, редактор
Благодаря современным конструкторам и CMS системам, самостоятельное создание качественных одностраничников стало доступным и для людей далеких от сайтостроения. Ниже пошагово расскажем о том, как создать лендинг на WordPress, какие для этого понадобятся плагины и как в целом работать с этой CMS

Первые шаги и установка WordPress

Перед началом создания лендинга, необходимо определиться с хостингом. Хостинг — услуга предоставления дискового пространства на сервере. Из популярных стоит обратить внимание на Beget, Timeweb, Reg.ru, Jino, у них понятные интерфейсы, отличная техподдержка и адекватные тарифные планы.

Помимо хостинга потребуется домен. В двух словах, рекомендуется регистрировать доменное имя у сертифицированных и наиболее крупных российских регистраторов: Reg.ru и Nic.ru. Далее необходимо связать домен и хостинг, прописав хостинговые DNS у регистратора домена, подробнее об этом можно почитать в справке в процессе регистрации домена.

Установку WordPress можно выполнить двумя путями: автоматически, с помощью услуги развертывания CMS у хостера (она бесплатна) или вручную. Первый вариант наиболее предпочтительный, особенно для новичков, в нем достаточно указать основные параметры и запустить установку. Рассмотрим как это делается на Beget:

Выбираем CMS
Выбираем CMS


Нажимаем на нужную CMS
Нажимаем на нужную CMS

Заполняем все поля
Заполняем все поля

Шаблоны для landing page на WordPress

Шаблоны лендингов представлены в огромном количестве на специализированных сайтах, они бывают платными и бесплатными. Как правило, бесплатные — урезанные версии платных, но в половине случаев их бывает достаточно, чтобы создать качественную посадочную страницу.

Поиск шаблона можно начать прямо изнутри администраторской части Вордпресса в левом меню: Внешний вид — Темы — Добавить новую.

Добавляем тему
Добавляем тему

Можно использовать фильтры
Можно использовать фильтры

Далее настраиваем фильтр и выбираем среди популярных или свежих. Также можно отталкиваться от своей тематики и вбить в поле поиска ее название или синонимы на английском языке, например, medicine или medical (медицина). После выбора шаблона, рекомендуется зайти в него, ознакомиться с описанием и найти ссылку на демоверсию сайта.

Демоверсия сайта
Демоверсия сайта

Если тема подходит, устанавливаем ее и активируем. Далее есть два пути: либо создание лендинга на чистом шаблоне, либо с помощью конструктора. Первый вариант подходит для профессионалов, т.к. требует определенных знаний, таких как глубокое понимание работы самой cms, верстки и т.д. Да, можно залить демоданные, которые предусматривает практически любой разработчик шаблона для упрощения его установки, но, чтобы их править все-таки нужно разбираться в Вордпрессе.

Плагины Вордпресс для создания лендинга

Работа через плагины конструкторов — идеальный вариант для новичка. Они позволяют в режиме простого перетаскивания элементов в визуальном редакторе собрать практически любого вида страницу без знаний верстки и программирования, при этом применяя различные сложные эффекты и т.д.

Рассмотрим наиболее популярные конструкторы веб-страниц для Вордпресса.

Elementor

Самый популярный конструктор, активно развивающийся, разработчики с каждой новой версией добавляют в него все больше интересных возможностей. При этом у него есть бесплатная версия, которой в большинстве случаев будет достаточно. Кроме самого конструктора, к нему прилагаются дополнительные плагины, расширяющие функционал. Цена на начало 2020 года за базовую лицензию составляет 49$/год, в нее входит возможность создания одного сайта, более 50 доступных виджитов и 300 готовых шаблонов. Версия Expert стоит 199$/год и позволяет создавать уже 1000 сайтов на одной лицензии — отличный вариант для тех, кто регулярно занимается веб разработкой.

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

Beaver Builder

Конструктор поставляется также в двух версиях: бесплатной и платной (Standart за 99$/год, Pro 199$/год и для агентств 399$/год). Имеет интересную функцию сетевой настройки для нескольких проектов, это облегчит жизнь разработчикам, у которых создание сайтов поставлено на поток. В целом стандартный билдер страниц.

Thrive Architect

Вместе с плагином поставляется набор из 334 шаблонов целевой страницы, которые с легкостью можно кастомизировать «под себя». Довольно-таки прост в использовании, но особо ничем не выделяется на фоне конкурентов. Версия только платная.

OptimizePress

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

Выбираем плагин для создания лендинга

Из всего многообразия конструкторов, сегодня, явно выделяется Elementor, о его функционале, простоте и надёжности говорит количество скачиваний и средняя оценка (более 4 млн. активных скачиваний и 4,8 балла из 5). В пользу этого плагина также говорит его доступность и в бесплатной версии присутствует огромное количество разнообразных инструментов. Кроме этого, у Elementor есть канал на YouTube (правда на английском), в котором можно подчерпнуть множество полезной информации.

Лендинг на Вордпрессс помощью конструктора Elementor

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

Установка Elementor

Для установки плагина идем через левое меню админки WordPress: Плагины - Добавить новый, в поиске вбиваем Elementor, жмем кнопку установить, после активируем.

Установка Elementor
Установка Elementor

Выбор темы

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

  • Monstroid2
  • Luxor
  • BuildWall (для компаний, специализирующихся на строительстве)
  • FitPeople (спорт)
  • DentalCare (стоматология)
  • Tourizto (туризм)
  • Soothery (спа-салоны)
  •  4News (новостные порталы)
  • ProMotionic (рекламное агентство)

Универсальные темы:

  • Phlox
  • Astra Theme
  • GeneratePress
  • OceanWP
  • Sydney
  • Tesseract

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

После установки и активации шаблона и Elementor, в настройках темы следует задать статичную страницу в роли главной, ее то и предстоит редактировать.

Нажимаем настройка главной страницы
Нажимаем настройка главной страницы


Задаем статичную страницу в роли главной
Задаем статичную страницу в роли главной

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

Зайдя в «Страницы», находим «Главная» и открываем, справа в настройках страницы в разделе «Атрибуты» указываем, что это шаблон главной. В глаза бросается большая кнопка «Редактировать в Elementor», жмем на нее. Откроется холст главной страницы и слева расположенная панель управления Elementor.

Заходим в список страниц
Заходим в список страниц


Выбираем шаблон
Выбираем шаблон

Нажимаем редактирование в Elementor
Нажимаем редактирование в Elementor

Открывается список инструментов Elementor
Открывается список инструментов Elementor

По задумке верхняя часть лендинга будет представлять собой фоновое изображение, в левой части разместиться логотип, название и краткий слоган, справа форма обратной связи.

Так будет выглядеть лендинг
Так будет выглядеть лендинг

Пробежимся по основным возможностям и инструментам Elementor. Принцип построения страницы достаточно прост: создаем рабочую область блока необходимой структуры (от 1 до 6 колонок), далее перетаскиваем в нее необходимые элементы из левой панели инструментов и редактируем.

Нажимаем на значок добавить
Нажимаем на значок добавить


Выбираем структуру
Выбираем структуру


Задаем нужные параметры
Задаем нужные параметры

Следуя нашей задумке, необходимо установить фон для хедера, делается это на вкладке «Стиль» - режим «Классический»

Установка фона для хедера
Установка фона для хедера

Теперь простым перетаскиванием помещаем «Внутреннюю секцию» на нашу рабочую область блока, автоматически создается 2 колонки.

Перемещение «Внутренней секции» на рабочую область блока
Перемещение «Внутренней секции» на рабочую область блока


Добавляем секции
Добавляем секции


Вот что у нас получилось
Вот что у нас получилось

Помещаем в них 2 заголовка: первый - название компании (H1), второй – слоган (H2).

Прописываем заголовки
Прописываем заголовки

Правая колонка отведена под форму заказа обратного звонка, поэтому понадобиться сторонний бесплатный плагин Contact Form 7. Оформлением формы следует заняться внутри плагина, а при создании страницы Elementor, просто вставить шорт-код в HTML блок.

Размещение шорт-кода в HTML блок
Размещение шорт-кода в HTML блок

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

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

Вот что получилось, буквально на лету (если не брать в расчет настройку формы):

Пример создания лендинга
Пример создания лендинга

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

Разберем сектор «Потребность клиента», он состоит из 6 блоков, каждый из которых при наведении создает 3D эффект за счет появления тени.

Оформляем блок «Потребность клиента»
Оформляем блок «Потребность клиента»

Выбираем необходимые стили
Выбираем необходимые стили

Внутри каждого блока по центру вставлена иконка из стандартного набора Elementor (их там тысячи на любую тематику), она кастомизирована под общую стилистику и цветовую гамму шаблона.

Выбираем иконки
Выбираем иконки

Настраиваем стили для иконки
Настраиваем стили для иконки

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

Настройка счетчика в Elementor
Настройка счетчика в Elementor

После окончания редактирования следует сохранить созданную страницу, нажав на кнопку «Опубликовать».

Резюмируем возможности Elementor

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

Вот часть элементов, о которых не было рассказано:

  • Вставка изображения в рабочую область. Изображения как прочие элементы можно всячески редактировать, задавать эффекты, накладывать фильтры и т.д.
  • Кнопки, которым можно задать гиперссылку или установить срабатывание сторонних скриптов.
  • Слайдер с кучей настроек, теперь не нужен отдельный плагин.
  • Создание вкладок, например, перечисление вариантов отделки и при нажатии на каждый открывается своя страница в рамках одного блока.
  • Аккордеон или спойлер, отлично подойдет для раздела горячих вопросов, экономит место на странице и добавляет интерактива.
  • Иконки социальных сетей.
  • Создание собственного меню. Для этого в настройках атрибутов страницу следует выбрать «Холст Elementor». К тому же каждый пункт меню можно будет «заякорить», т.е. при нажатии на определенное значение, страница будет автоматически пролистываться до заданного блока.
  • Блоки прогресса, рейтингов, интервалы, разделители, интерактивные карты Google, сайдбары и многое другое.

Создание landing page на WordPress через Элементор удобнее всего начинать с построения прототипа страницы. В таком случае остается лишь разместить элементы и настроить их.

Готовые шаблоны для Elementor

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

Шаблоны для Elementor
Шаблоны для Elementor


Пример готового шаблона для лендинга
Пример готового шаблона для лендинга

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

Меняем текст и лендинг готов
Меняем текст и лендинг готов

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

Кратко о минусах

Основной минус любого конструктора сайтов заключается в том, что на странице генерируются излишки кода. Это может негативно сказаться на весе самой странице и ее скорости загрузки. Поэтому работая с эффектами и изображениями, стоит отталкиваться от целесообразности.


Увеличим ваши продажи через интернет!
Разрабатываем и поддерживаем сайты. Приводим на сайт целевой трафик с помощью SEO и рекламы. Увеличиваем конверсию сайтов. Имеем успешные кейсы увеличения продаж интернет-магазинов, медицинских центров, производителей, застройщиков, автоцентров, интернет-сервисов и пр. В команде 33 специалиста.

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»

19 место
В топ-100 perfomance-агентств России

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

1 место
Рейтинг агентств контекстной рекламы Новосибирска

Золотая сотня
Российского Digital

Сертифицированное агентство Яндекс 2020

Нам доверяют

Жерихова А.В., директор ООО «Позитив»
Айзикович Б.И., генеральный директор ЗАО Медицинский центр «Авиценна»
Левчук Ю.С., управляющий ООО «ТФ Теплодар»