Как сделать лендинг пейдж на wordpress
3 пути как сделать [лендинг пейдж] на WordPress без знания кода
Дайте угадаю: вы либо предприниматель без инвестиций, либо маркетолог, который стремится к развитию, но не знает как подступиться к сайтам из-за страшного слова КОД. Попробую уравновесить ваше ЧСМ информацией о том, как сделать лендинг пейдж на WordPress без всяких ужасов. Поехали!
1. Почему лендинг на WordPress?
Ну, хотя бы потому, что 70% мировых сайтов сделаны на нём из-за открытости и бесплатности WordPress.
Ещё потому, что это одна из CMS, которую любят поисковики — а значит, при правильном обращении, есть шанс на органическое продвижение ваших страниц в топ. Ещё для Вордпресса существует 100500 плагинов – платных и бесплатных – которые позволяют работать без кода (хотя, увы, не без ж*па-часов).
Секундочку, но это все доводы в пользу Вордпресс на этапе создания сайта с нуля, а мы-то хотим лендинг пейдж!
Да, но возможно вы исполнитель, а у вашего заказчика есть всего один сайт на Вордпресс и он хочет на нем лендинг. И нет желания заводить новый домен, поддомен или просто заказчик нечего про это не понимает и отвечает вам: «Зачем мне новый сайт? Сделай мне на моем Вордпрессе».
Опустим полуклинические случаи. Итог: вам остается сделать лендинг пейдж на WordPress. Разберем, для начала, в чем отличие лендинга от других страниц?
2. Основное отличие лендинга от обычной страницы
Нам нужно сверстать Лендинг Пейдж — такой красивый, продающий сайт, который состоял бы из разных блоков, вау-картинок и больших секси-кнопок. На картинке ниже приведен пример типичного расположение блоков и элементов на лендинге:
Давайте посмотрим на блоки лендинга глазами WordPress верстальщика:
Первый пункт — это боль для ворпресника, потому что стандарная архитектура этой платформы предполагает наличие только Хедера, Футера, Главного контента и Сайдбара. Вот, пожалуй, все, что мы можем позволить себе в плане разных блоков — для большинства стандартных тем WordPress:
Проблема с множеством блоков притягивает и другую проблему — редактирования текстов на них. Ведь, редактор WYSIWYG для каждой страницы один. Ну, и никуда не девался вопрос украшательства и редактирования — без знания кода в стандартном Вордпрессе это просто невозможно.
3. Что можно и что нельзя сделать без кода?
Переходим от проблем к решениям. Что же можно поделать-то?
Все зависит от вашей ситуации: у кого-то ноль на старте, кто-то имеет уже лендинг — только на шаблонезаторе типа Тильды, а кто-то может и покодить (ну ладно — попросить верстальщика покодить).
3.1 Лендинг в подпапке на хостинге
Когда у вас есть лендинг на HTML, включающий все управляющие файлы (HTML, CSS, JS, картинки) — вы можете разместить его в корневой папке вашего Вордпрессного сайта, вот тут:
Просто создаете новую папку, например, Action на одном уровне с WP-admin, WP-content и прочими файлами — и закидываете в нее все файлы/папки вашего лендинга, включая index.html (файл главной страницы).
Теперь вы можете открыть данный index.html по адресу: yoursite.ru/action.
Это гениально! При этом технически мы никак не связываем новый лендинг с основным сайтом на Вордпресс. Стили не перемешиваются.
Посмотрите, как выглядит мой старый лендинг, залитый по такой схеме: potoklab.ru/works/2017.
Минус в том, что если у вас нет лендинга — то вам нечего и заливать в подпапку. Однако, если вы пояндексите или пообщаетесь — например, с сообществом предпринимателей — вам удастся найти готовый HTML шаблон лендинга примерно вашей тематики.
Тогда порядок действий такой:
Так вы сможете лишь менять текст и картинки на свои, но свободы двигать элементы верстки подход не даст.
3.2 Кастомный шаблон страницы Вордпресс
Этот способ, опять же, предполагает, что у вас есть HTML шаблон лендинг пейдж.
Для любой темы Вордпресс можно создать новый шаблон страницы (не путать с шаблоном темы!) — и использовать его для вашего лендинга.
В папке вашей темы дублируем файл page.php (или single.php) и задаем название по принципу page-
Сверху файл нужно подписать, чтобы Вордпресс начал распознавать его именно как шаблон страницы:
Далее удаляем все содержимое page.php и копипастим HTML контент вашего лендинга. Данное действие разорвет все связи с элементами Вордпресса, такими как редактор WYSIWYG, шапка и футер сайта или даты публикации.
Если вас это не устраивает — придется поработать с кодом, чтобы вернуть некоторые из элементов PHP кода. Однако, это уже кодинг — и в рамках данной статьи не рассматривается.
После сохранения файла page-landing.php в паке текущей темы переходим в редактор и создаем новую страницу (не запись!). В поле редактора ничего не пишем — это бессмысленно.
В правой колонке появится выбор шаблона страницы, где вы сможете выбрать вновь созданный шаблон:
В соответствии с вашим новым шаблоном при открытии данного URL загрузится контент использованного HTML файла. Последний штрих — подключить все стили и файлы.
В любом месте сайта (лучше в корне, чтобы не пришлось думать над путем URL) создается дополнительная папка с файлами нового лендинга — CSS, JS, Images — назовем ее Landing.
Дальше немного кода, увы. Надо открыть наш page-landing.php и заменить все начала путей ссылок с того, что там было, на вашу новую папку landing:
Методом проб и ошибок вы добьетесь, что для вашей страницы с лендингом все стили и медиа-файлы будут прилинкованы правильно.
Бинго! Вы добавили посадочную страницу на WordPress путем создания шаблона страницы.
Минус метода в том, что редактировать его можно только через код. Иначе нужно достаточно много возни с php функциями. Так зачем же так заморачиваться?
Затем, например, что так можно создать мультилендинг. Например, создавать несколько страниц с разными заголовками или офферами — которые мы подцепим из заголовков H1 каждой конкретной статьи. При этом, нужно в шаблоне страницы page-landing.php отредактировать тег H1 таким образом:
Это только одна идея одного изменения. Если вы захотите больше — нужно больше кода PHP. Не совсем для начинающих.
3.3 Плагины для веб-дизайна: Elementor, Page Builder
А теперь расслабимся и поговорим о приятном: создание страниц на Вордпресс без кодинга.
Сегодня множество шаблонов WordPress поставляется с так называемым drag-and-drop редактором, который позволяет перетягивать столбцы, элементы верстки прямо в поле редактора.
Где бы я брал тему Вордпресс сейчас:
Среди множества бесплатных редакторов я бы выделил такие два:
Elementor
Плагин Elementor роскошен и в базовой версии является бесплатным. Это самый удобный, профессиональный и быстрый плагин из предложенных на рынке.
Промо-видео про работу Elementor
Даже без видео можно легко разобраться, как работать с плагином. Вставляем виджет с элементом (от текста до видео) и настраиваем позиционирование и стили.
Обратите внимание на возможность прямо в поле редактора перетягивать ширину элементов — это очень круто. Поддерживается редактирование мобильной и таблетной версий сайта.
Для нашей цели — создания лендинг пейдж — в Elementor уже заложена функция создания пустой страницы без Хедера и Футера. По сути, мы хотим создать кастомный Хедер (короткий, лаконичный), а затем готовый лендинг можно дублировать для новой услуги.
Редактор особенно хорош для создания таких трудных по верстке блоков, как блок с ценами, сравнительные таблицы преимуществ или эффектные блоки захвата лидов (формы заявок плюс картинка). Хотя, в принципе, Elementor позволяет разрабатывать полноценные темы для Вордпресс.
Полный список бесплатных виджетов Elementor включает:
Page Builder from SiteOrigin
Вид редактора WYSIWYG сменяется на блочный вид, сверху становится доступной панель инструментов: Выбор виджетов, создать новый ряд (блок), количество/ширина колонок и некоторые других функции.
Все очень интуитивно. В поле редактора добавляется сначала ряд (Row), В него помещается нужное количество колонок (Layouts), в отдельную колонку — нужный виджет.
Нажимая гаечный ключ в углу голубого блока, становится доступной функции редактирования. Стрелочками можно перетаскивать блоки верх-вниз. Как правило использование колонок предполагает перенос контента на мобильном экране.
Проще всего один раз посмотреть промо-ролик с возможностями Page Builder:
4. Скорость загрузки сайта
Один вариант — использовать Elementor на поддомене, посвященном только лендингам для рекламного трафика. Тогда вы не замедляете ваши SEO статьи на основном домене, которым не нужна вся эта колоночность.
Кстати, если хотите заглянуть за кулису и увидеть, что же там впереди — в мире большой рекламы, — скачивайте мою закрытую статью, как управлять рекламным бюджетом до 1,5 млн. рублей.
Как создать лендинг на WordPress: пошаговая инструкция
Выбор хостинга, регистрация домена, установка WordPress
Перед тем, как начинать работу над лендингом, необходимо определиться с хостингом. Хостинг — услуга по предоставлению дискового пространства на сервере. Из популярных стоит обратить внимание на Beget, Timeweb, REG.RU и «Джино». Они предлагают отличную техподдержку, понятный интерфейс и выгодные тарифные планы.
Помимо хостинга, требуется домен. Вам необходимо зарегистрировать доменное имя у сертифицированного российского регистратора. Мы рекомендуем выбирать REG.RU или RU-CENTER.
Далее вам нужно связать домен и хостинг, прописав хостинговые DNS-серверы у регистратора домена. Подробнее об этом почитайте в справке в процессе регистрации домена.
Переходим к установке WordPress. Сделать это можно одним из двух путей: автоматически (воспользовавшись бесплатной услугой развертывания CMS у хостера) или вручную. Наиболее предпочтителен, особенно для новичков, первый вариант. В этом случае вам достаточно указать основные параметры и запустить процесс установки. Рассмотрим, как это делается на хостинге Beget:
Выбираем пункт CMS
Нажимаем на нужную CMS
Заполняем все поля
Поиск и установка шаблона лендинга на WordPress
Огромное количество шаблонов посадочных страниц можно найти на специализированных сайтах. Шаблоны бывают платными и бесплатными. Бесплатные шаблоны — это, как правило, урезанные версии платных. Несмотря на это, зачастую их функционала достаточно для создания качественного лендинга.
Поиск шаблона можно начать непосредственно в админке WordPress в меню слева: «Внешний вид» => «Темы» => «Добавить новую».
Добавляем тему
Настройка фильтра
Далее настраиваем фильтр и выбираем среди популярных или свежих. Также можете оттолкнуться от своей тематики и указать ее или синонимы на английском языке в поле поиска, например, medicine или medical (медицина). Выбрав шаблон, зайдите в него, ознакомьтесь с описанием и перейдите на демоверсию сайта.
Демоверсия сайта
Если тема вам подходит, устанавливайте и активируйте ее.
Далее вам нужно выбрать: хотите ли вы создать лендинг на чистом шаблоне или же с помощью конструктора (плагина). Первый вариант больше подходит для профессионалов, поскольку требует определенных знаний, таких как понимание работы CMS, навыки верстки и т.д. Конечно, вы можете загрузить демоданные, которые обычно предусматриваются разработчиком шаблона для упрощения его установки, однако, чтобы править их, тоже нужно довольно глубоко разбираться в WordPress.
Плагины для создания лендинга на WordPress
Использование плагинов — идеальный вариант для новичка. Они позволяют собрать страницу практически любого вида путем перемещения элементов в визуальном редакторе. Далее рассмотрим наиболее популярные конструкторы страниц для WordPress.
Elementor
Функционал данного конструктора позволяет создавать страницы, адаптированные под mobile, а также настраивать те или иные элементы в зависимости от устройства.
Beaver Builder
Thrive Architect
Вместе с плагином поставляется набор из 334 шаблонов, которые с легкостью можно кастомизировать. Данный конструктор довольно прост в использовании, но на фоне конкурентов выделяется только тем, что у него нет бесплатной версии.
OptimizePress
В платную версию входят более 60 шаблонов, кроме того, доступен магазин тем. Конструктор имеет простой функционал и подходит для решения легких задач. На фоне других выделяется возможностью интеграции с CRM, а также возможностью создания страниц с платным доступом (подходит для обучающих ресурсов) и страницей регистрации.
Выбираем плагин
Из всего многообразия конструкторов сегодня явно выделяется Elementor. О его функциональности, простоте и надежности говорят количество скачиваний (более 4 млн.) и средняя оценка (4,8 балла из 5). В числе преимуществ также доступность и большое количество разнообразных инструментов даже в бесплатной версии. Кроме того, у разработчика Elementor есть множество полезных видеороликов на собственном YouTube-канале (на английском языке).
Создаем лендинг на WordPress с помощью конструктора Elementor
Далее подробно разберем, как установить плагин и создать несколько наиболее сложных блоков. Все остальные блоки вы сможете делать по аналогии. Главное на данном этапе — понять основной принцип работы с инструментами Elementor.
Установка Elementor
Для установки плагина кликните «Плагины» => «Добавить новый» в левом меню админки. В поиске вбейте «Elementor», нажмите кнопку «Установить», а после активируйте конструктор.
Установка Elementor
Выбор темы
Не все шаблоны хорошо сочетаются с данным конструктором, поэтому мы рекомендуем выбирать из тех, которые предназначены специально для него:
В число универсальных тем входят:
Допустим, наша цель — создать лендинг для агентства наружной рекламы. В качестве примера будем использовать тему Sydney. Скачиваем ее через админку и активируем.
После установки и активации шаблона в настройках темы задаем статичную страницу в роли главной. Ее мы и будем редактировать.
Нажимаем «Настройка главной страницы»
Задаем статичную страницу в роли главной
Редактирование холста в Elementor
Заходим в «Страницы», кликаем «Главная». Справа в настройках страницы в разделе «Атрибуты» указываем, что это шаблон главной. После нажатия на кнопку «Редактировать в Elementor» откроется холст главной страницы и панель управления Elementor.
Заходим в список страниц
Выбираем шаблон
Нажимаем «Редактировать в Elementor»
Список инструментов Elementor
По умолчанию верхняя часть лендинга (первый экран) будет представлять собой фоновое изображение, в левой части разместятся логотип, название и краткий слоган, справа — форма обратной связи.
Так будет выглядеть лендинг
Теперь рассмотрим основные возможности и инструменты Elementor.
Принцип создания страницы достаточно прост: формируем на рабочей области структуру блока (от 1 до 6 колонок), перетаскиваем в нее необходимые элементы из левой панели инструментов и редактируем.
Нажимаем на значок «Добавить»
Выбираем структуру
Задаем нужные параметры
Далее устанавливаем фон страницы на вкладке «Стиль» => режим «Классический»
Установка фона
Перетаскиваем элемент «Внутренняя секция» на рабочую область блока. Автоматически создаются 2 колонки.
Перемещаем элемент на рабочую область
Добавляем секции
Результат
Размещаем здесь 2 заголовка: первый — название компании (h1), второй — слоган или призыв к действию (h2).
Прописываем заголовки
Колонка справа отведена под форму заказа обратного звонка. Здесь нам понадобится сторонний бесплатный плагин Contact Form 7. Оформлением формы следует заняться внутри плагина, а затем просто вставить шорткод в блок в Elementor.
Размещение шорткода
Название компании оформляется непосредственно в редакторе Elementor кодом CSS. Новичкам этот вариант может не подойти, поэтому заголовок можно сделать и в виде обычной надписи, нужно лишь подобрать шрифт и его цвет.
Elementor — в первую очередь визуальный редактор, хотя при наличии знаний CSS вы можете кастомизировать элементы как вам угодно. Каждый элемент имеет свои настройки, например, у заголовков можно менять типографику, отступы, применять многочисленные эффекты появления (исчезновения) и т.д. Но самое главное — любой текст, изображение, иконки можно позиционировать простым перетаскиванием.
Вот что получилось у нас буквально за несколько минут (если не брать в расчет время на настройку формы):
Пример лендинга
Точно таким же образом создаются блоки с преимуществами компании, описанием услуг, отзывами и т.д.
Теперь обратите внимание на сектор «Потребность клиента». Он состоит из 6 блоков. При наведении на каждый появляется тень и создается так называемый 3D-эффект.
Оформляем блок «Потребность клиента»
Настраиваем стиль
Внутри каждого блока по центру размещена иконка из стандартного набора Elementor (их там тысячи на любую тематику), она кастомизирована под общую стилистику и цветовую гамму шаблона.
Выбираем иконки
Настраиваем стиль иконок
Конструктор позволяет создавать счетчики, которые удерживают внимание пользователя и, как правило, положительно влияют на конверсию лендинга. Так, вы можете сделать счетчик обратного отсчета, к примеру, до конца какой-либо акции.
Настройка счетчика в Elementor
По окончании редактирования следует сохранить созданную страницу, нажав на кнопку «Опубликовать».
Резюмируем возможности Elementor
О всех возможностях Elementor никак нельзя рассказать в одной статье. Как видно из описанных выше примеров, на этом конструкторе можно собрать практически любой лендинг.
Вот некоторые элементы и возможности, о которых мы пока вам не рассказали:
Встроенные шаблоны Elementor
В базе конструктора есть бесплатные шаблоны, которые устанавливаются в пару кликов. Их обычно используют, когда не хотят создавать структуру лендинга с нуля.
Шаблоны Elementor
Пример встроенного шаблона для лендинга
Когда шаблон подгрузится, у вас будет полностью готовая основа для лендинга, на которой нужно будет лишь поменять информацию и изображения.
Меняем текст
Если бесплатные шаблоны не подходят, на специальной бирже вы можете купить любой другой, более сложный шаблон.