Как сделать лендинг на wordpress elementor

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Я делаю лендинги на конструкторе сайтов и страниц Elementor. По ссылке в описании профиля вы найдёте около сотни видео по нему.

У него есть 2 версии, бесплатная и платная. Вторая расширяет возможности, но можно сделать и в бесплатной.

— для создания всей структуры и дизайна; — бесплатная стартовая тема (шаблон); — для формы захвата; — для дизайна формы захвата; — для добавления кнопки наверх; (опционально) — для создания формы во всплывающем окне; (опционально) — для создания липкой шапки; — для добавления кодов Яндекс Метрики и Google Analytics, пикселей Facebook и Вконтакте; — для защиты сайта от взломов и атак; — для ускорения и оптимизации; — для кэширования и ускорения.

Этого набора уже будет достаточно для того, чтобы сделать лендинг на WordPress бесплатно. Дальше всё зависит от ваших специфических пожеланий и способностей.

Хотите иметь свой сайт?

Для продвижения вашего бизнеса и получения дохода

Содержание статьи

Этой статьей я начинаю серию уроков Бесплатный конструктор сайтов. Еlementor wordpress.

Конструктор Еlementor является плагином для движка wordpress и предназначен для создания сайта одностраничника, сайт визитки, лендинга, блога и т.д.

Если говорить проще, с помощью движка wordpress и плагина Еlementor, вы можете создать сайт любой сложности. Для этого вам не надо быть программистом, знать коды и языки программирования.

Почему конструктор Еlementor wordpress?

На сегодня это самый популярный из всех конструкторов по следующим причинам:

Сейчас я перечислила вам лишь ключевые особенности конструктора Еlementor.

Как установить конструктор Еlementor на сайт?

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

Если вы новичок, то узнать что такое wordpress, консоль (админка) сайта можно здесь
А как установить WordPress на сайт, здесь

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

Итак, при создании лендинга на вордпрессе есть 2 основных пути:

сделать лендинг на основе подходящей темы (шаблона);
сделать лендинг при помощи плагина-конструктора.

Конечно, эти 2 варианта можно объединять и использовать их в совокупности, также если вы опытный пользователь WordPress, то можете сделать хороший одностраничник практически на любой теме и без помощи плагинов. Тут каждый выбирает сам, а мы рассмотрим именно 2 этих алгоритма создания landing page на WordPress.

Создание лендинга на основе темы WordPress

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

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

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

Создание лендинга на WordPress при помощи плагина-конструктора

На мой взгляд проще делать лендинг по первому варианту — на основе темы, тем более что шаблонов сейчас много и качественную подходящую тему найти можно всегда, нужно лишь немного времени и терпения. Главное не забывайте про правильную структуру lending page и про основные правила и ошибки при создании лендинга. Немного практики и у вас всё обязательно получится!

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

Обновление 2019:

Создание лендинга на WordPress в 2019 году

В связи с тем, что ВордПресс стал использовать по умолчанию визуальный блочный редактор Gutenberg, создание лендинга при помощи плагина-конструктра становится не совсем актуальным, так как в новом блочном редакторе есть практически все функции и удобства плагинов-конструкторов.

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

Можно ли сделать сайт, на котором главная страница будет в виде лендинга? А собрать подписную страницу на Вордпрессе? Можно! Для этого нужен плагин Элементор для Вордпресса. Наталья Солодовник написала подробную статью о том, как установить Элементор, как он работает и нужна ли платная версия.

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

Элементор — это плагин для Вордпресса, который помогает самостоятельно конструировать нестандартные страницы. К нему стоит присмотреться тем, кто:

Любит нестандартное оформление и хочет реализовать макет от дизайнера на своём сайте.
Хочет собрать визитку-одностраничник.
Планирует регулярно создавать на своём сайте подписные и продающие страницы.

Как устроен конструктор Элементор для Вордпресса

В этой статье не будет сравнения конструкторов и обсуждения их особенностей. Мы продолжим разговор о выборе оформления для сайта и на примере бесплатной версии конструктора Элементор разберём, как использовать его для быстрого создания стильной визитки-лендинга или небольшого многостраничного сайта с единым дизайном страниц.

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

Почему Элементор? Это удобный и бюджетный вариант для создания даже сложного дизайна. В бесплатной версии достаточно элементов, вы легко настроите адаптивность под мобильные устройства. А кроме того, к Элементору уже создано множество наборов блоков и стильных шаблонов, которые можно импортировать на сайт в один клик. С этим конструктором совместимо большинство готовых тем Вордпресс. А значит, вы сможете поставить даже на действующий сайт без риска всё сломать.

Как установить Элементор на Вордпресс-сайт

Конструктор Элементор для Вордпресса есть в каталоге его плагинов. Он устанавливается из админ-панели, как и любой другой: Плагины —>>Добавить новый —>> Elementor.

Выбор шаблона. Способ 1: установить бесплатную тему Астра

Эта тема современная, лёгкая и функциональная, даже без конструктора. Её особенность — наличие расширения с готовыми шаблонами, которые совместимы с популярными конструкторами. Как с ней работать?

Шаг. 1. Установите и активируйте тему из каталога или админки Вордпресса: Внешний вид —>> Темы —>> Добавить —>> Astra.

Шаг. 2. Установите и активируйте к ней плагин: Плагины —>>Добавить новый —>> Astra Site.

После этого выберите один из 100+ бесплатных (free) или платных (agency) шаблонов в появившемся разделе Внешний вид —>> Starter Templates.

Импортируйте из понравившегося комплекта все страницы (Import Complete Site) или только одну из страниц (Import Home Template).

Пример бесплатного шаблона сайта на базе темы Астра

Таким образом можно быстро собрать не только красивый лендинг, но и визитку с набором основных страниц: Главная, Контакты, Услуги, Портфолио, О проекте/об авторе. А учитывая, что страницы созданы в конструкторе, вы за пару кликов и без программиста перекрасите цвета шаблона в свои фирменные, отредактируете тексты и замените картинки.

Выбор шаблона. Способ 2: установить бесплатный плагин Envato Elements

Кому подойдет этот вариант:

Всем, кто не хочет менять свою выбранную тему Вордпресс для блога, но планирует переоформить какие-то страницы (или только главную), создать лендинг на сайте.
Тем, кто после установки Вордпресса ещё ничего не искал и оставил стандартную тему типа Twenty Sixteen.
А ещё тем, кто уже установил тему Астра, но среди готовых шаблонов не нашёл ничего подходящего под свои задачи.

Плагин Envato Elements также из каталога Вордпресс — устанавливать его безопасно. И тоже можно загрузить из админки сайта.

После его установки и активации в админке у вас появится новый пункт Elements с разделами Template Kits (216 платных) и Free Kits (165 бесплатных шаблонов).

Пример бесплатного шаблона сайта конференции на базе Envato Elements

Содержимое каждого набора можно просмотреть (Preview) или установить (Install Kit). При этом страницы-шаблоны импортируются сразу со всеми картинками и текстами внутри, как в демоверсии.

Кроме готовых наборов, с плагином Envato Elements вы получаете доступ к коллекции дополнительных блоков конструктора Элементор. А это 14 наборов, и в них 486 элементов: заголовки, таблицы цен, преимущества, списки и прочее. В новой версии 2.0 вам необходимо будет их установить, прежде чем начать использовать: Elements —>>Free Kits —>>Categories —>> Blocks —>>Install Kit.

Коллекция готовых блоков для конструктора Элементор от Envato.

Чем полезны платные функции конструктора Элементор для Вордпресса

Бесплатных компонентов Элементора вполне хватит для создания лендингов и страниц сайта-визитки. А вот такие элементы, как карусель или сетка записей блога, форма поиска, навигация (меню), карта сайта или блок информации о статье, который обычно выводится в блоге (дата, автор, рубрика) будут доступны только в платной версии конструктора (49$/год).

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

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

Наталья Солодовник, интернет-маркетолог, разработчик сайтов и лендингов на WordPress, технический продюсер онлайн-проектов.

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

При помощи каких плагинов можно создать лендинг на WordPress

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

Плагин Free Landing Pages Builder by Wishpond

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

Плагин Free Landing Pages Builder by Wishpond

К основным достоинствам конструирования лендинга при помощи by Wishpond относятся:

быстрая скорость выстраивания целевой страницы. Используя инструмент, вы сможете в считанные секунды установить или удалить блоки, переместить графические и текстовые составляющие в нужное место;
обширные возможности для управления дизайном. При помощи функциональной панели управления можно менять не только общее оформление страницы, но и ее отдельные фрагменты;
огромное разнообразие бесплатных тем для лендинга, которые отличаются гибкостью настроек, привлекательным дизайном и понятным интерфейсом;
возможность дополнения LP (Landing Page) готовыми всплывающими окнами;
наглядность работы. Все изменения можно выполнять прямо на макете;
наличие функции анализирования статистики LP, помогающей отследить посещаемость сайта и другие важные показатели.

Несмотря не перечисленные достоинства, плагин by Wishpond имеет и некоторые недостатки:

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

Elementor Page Builder

Elementor Page Builder — бесплатный плагин с открытым кодом. Также можно приобрести платную трехуровневую версию плагина, которая позволит расширить перечень виджетов и шаблонов.

Плагин Elementor Page Builder

Преимущества плагина для создания лендинга на WordPress:

Недостаток — небольшой выбор виджетов.

Плагин JetBlocks

Плагин JetBlocks — один из инструментов, при помощи которого можно создавать или добавлять контент в хедере и футере сайта. Совместим с плагином Elementor и является его полезным дополнением.

Плагин JetBlocks

Особенности:

виджеты: для создания верхних и нижних колонтитулов;
эффективный виджет логотипа, который поддерживает формат Retina. Благодаря этому инструменту ваш проект станет запоминающимся;
возможность дополнять целевую страницу различными полезными составляющими: ссылками для авторизации, корзиной WooCommerce, меню навигации, всплывающими и исчезающими изображениями, формой поиска. Настройка аккуратного гамбургер-меню помогает сделать доступ к нужному шаблону более простым;
огромное количеством настроек стилизации, доступных для каждого из виджетов JetBlocks;
удобство использования. При помощи плагина вы сможете выполнять многочисленные действия из единого интерфейса;
очень быстрая подгонка дизайна посадочной страницы под нужные критерии;
для работы с плагином не требуются навыки кодирования;
невысокая стоимость;
профессиональная поддержка;
регулярные обновления.

Thrive Architect

Thrive Architect — еще один востребованный инструмент для создания лендинга. Некоторые эксперты высказывают мнение, что этот плагин — самый быстрый в работе.

Плагин Thrive Architect

Характеристики инструмента:

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

Недостаток — плагин платный, бесплатной версии инструмента не существует.

OptimizePress

OptimizePress — плагин с безупречной репутацией. Наиболее популярен среди индивидуальных предпринимателей и предприятий малого бизнеса.

Плагин OptimizePress

Сильные стороны инструмента:

поддерживает любое количество посадочных страниц: вы можете создавать неограниченное число лендингов;
огромный ассортимент привлекательных шаблонов;
адаптивность создаваемых лендингов под любые устройства;
простой алгоритм работы;
уникальная функция A/B тестирования;
широкий выбор массовой рассылки.

Недостаток — достаточно высокая стоимость базового пакета плагина.

Beaver Builder

Beaver Builder сочетает в себе плагин и шаблон. Однако вы можете использовать инструмент только в качестве плагина.

Плагин Beaver Builder

Достоинства плагина для создания посадочной страницы:

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

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

Алгоритм создания целевой страны

Построение привлекательной посадочной страницы при помощи плагинов включает в себя два основных этапа:

Разработка структуры лендинга.
Работа с плагинами.

Этап 1 — продумываем структуру

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

логотип, который повысит узнаваемость сайта;
описание — краткую информацию о деятельности компании;
контакты: адрес электронной почты, телефоны для связи. Наличие контактов повышает уровень доверия пользователей;
тайтл — уникальный текстовой элемент, который будет отражать тематику вашего сайта;
привлекательное изображение или видео;
кнопку призыва к действию. Текст на кнопке должен быть четким и понятным, без воды и лирических отступлений. Некоторые маркетинговые исследования доказывают, что лучше всего работают кнопки СТА, содержащие не более пяти слов.

Кнопка призыва к действию

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

Этап 2 — работаем с плагинами

Большинство из вышеперечисленных плагинов работает по одному и тому же принципу. Рассмотрим построение лендинга на примере использования плагина by Wishpond:

Выбор шаблона

Панель с инструментами плагина

При работе с инструментом by Wishpond у новичков могут возникнуть следующие проблемы:

плагин не загружается. Причиной такой ситуации может стать наличие других плагинов, несовместимых с by Wishpond. А также инструмент не будет функционировать, если ваш сайт работает на локальном сервере. Важное условие для нормальной работы плагина — поддержка вашей хостинг-компанией скриптового языка PHP;
лендинг нечетко виден на мобильном или другом устройстве. В этом случае следует проверить адаптивность используемого шаблона.

Заключение

WordPress — движок с огромным потенциалом для создания лендинга. Каждый из перечисленных плагинов позволяет быстро сконструировать грамотную посадочную страницу. При выборе плагинов руководствуйтесь следующими рекомендациями:

Читайте также: