Лендинг пейдж на WordPress: конструктор статической страницы. Создание landing page на WordPress Конструктор лендинга для wordpress

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

«Окей» — скажете вы — «Я решил сделать себе лендинг, но я ничего не понимаю в программировании» . И это не проблема. Сейчас есть много инструментов создания профессионального сайта без «копания» в коде. Одним из таких является популярная CMS WordPress с конструктором WPBackery или ELementor.

В этой статье я привел классные landing page шаблоны wordpress, которые подойдут для бизнеса, продажи товаров, агенств, фрилансеров и любой другой тематики. Ведь такие шаблоны можно и нужно настраивать под себя и свое предложение.

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

Хватит обсуждений, давайте смотреть подборку!

P.s. Если хотите подробнее узнать что такое Landing page, то , где этот вопрос я подробно разобрал и привел 27 примеров лендингов.

Подборка из 40 премиум шаблонов для создания лендинга (landing page) на CMS WordPress

1. Bridge

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

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

Делайте неповторимую презентацию своего товара или предложения. Есть наглядные инструкции в тексте и также видеоинструкции.

2. The7

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

Кстати именно The7 сейчас стоит на моем блоге.

3. BeTheme

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

• скроллинг-эффекты — от parallax до анимированных преобразований элементов дизайна
• фоновые видео во весь экран
• «социальные» кнопки
• анимированные счетчики
• формы онлайн-заявок
• секции портфолио
• секции «Наши сотрудники»

Еще некоторые демо:

Обновления темы выполняются автоматически, обновления плагинов — по кнопке. На демо-сайтах используется Revolution Slider. Темплейт предлагает 5 вариантов раскладки для страниц, 20 настраиваемых хедеров, неограниченное количество стилей для Google карт, множество стильных иконок.

Инструмент Muffin Builder поможет создать любой дизайн без каких-либо знаний в веб-разработке. При желании можно добавлять css правила и js скрипты, не затрагивая основной код темплейта.

Ronneby отличается высокой производительностью и расширенной панелью опций. В темплейт добавлены лучшие премиальные плагины для создания landing pages WordPress. Разработчики шаблона уделяют особое внимание поддержке пользователей — на любой вопрос следует быстрый ответ, описывающий способы решения проблемы. Тема уже локализована для двух языков, но к ней также приложены файлы для перевода, позволяющие организовать мультиязычную поддержку сайтов.

Еще пример демо:

5. Jupiter

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

Есть удобные обучающие материалы, включающие 240 страниц и 20 видеоуроков о том, как сделать ваш сайт просто потрясающим!)

Шаблон Jupiter также адаптирован для СЕО. Проверки через Google PageSpeed показывают хорошие показатели, что говорит о том, что поисковики будут любить ваш сайт.

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

6. WoodMart

Одна из самых крупных Вордпресс подборок. Темплейты написаны профессиональными веб-программистами, а дизайны отрисованы квалифицированными мастерами по визуальным и UX-решениям. Благодаря этому можно смело ставить любой темплейт, каждый готов к использованию на компьютере, мобильном телефоне, планшете. В комплекте премиум плагины:

1. WPBackery
2. Slider Revolution
3. Отличная адаптация с WooCommerce (интернет-магазин)

7. Brooklyn

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

Плавный и легкий шаблон, который никого не оставит равнодушным. Качественная типографика и элементы интерфейса делают этот теймплейт шикарным. Номинант и победитель разных известных конкурсов и рейтингов, таких как awwwards. Имеет более 30+ скинов разных тематик на выбор

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

9. H-code

Шаблон новый, но уже успел себя зарекомендовать. Имеет 8 тематик (многостраничный, лендинг, корпоративный, портфолио, блог, e-commerce, заглушки) по 3-12 скинов в каждой. По мимо красоты и аккуратности, данный шаблон имеет просто арсенал разных виджетов и элементов. Можно сделать landing красивым и функциональным. Нужен слайдер? Пожалуйста. Показать портфолио, отзывы, выгоды? И это есть.

10. Native

Native — мощный инструмент для раскрутки стартапа. WordPress landing page шаблоны на базе темы используют различные parallax эффекты для перемещения между смысловыми блоками сайта. Расширенная документация и видео туториалы помогут начинающим пользователям CMS быстро разобраться в функционале панели администрирования. Плагины Visual Composer, Layer Slider и Slider Revolution идут бесплатным приложением к темплейту.

11. Salient

Salient — универсальная тема с «отзывчивым» дизайном, которую часто выбирают . Премиальная типографика и проявляющиеся при прокрутке страницы parallax-эффекты помогают усилить впечатление от лендинга. Оптимизация в соответствии с частотой смены кадров обеспечивает плавные анимационные переходы между блоками контента. В темплейте используются адаптивные размеры картинок, что способствует быстрой загрузке страниц и экономии трафика.

12. TheGem

TheGem — современная тема для креативных проектов, seo-оптимизированная и дополненная «отзывчивой» раскладкой. Небольшой вес страниц, быстрота их загрузки и продуманный UX гарантируют высокую производительность шаблона. При необходимости продвижения бизнеса с помощью landing page купить этот шаблон стоит хотя бы из-за его seo-friendly кода, который обеспечит высокие позиции в выдаче Google. В 11 имеющихся демо-версиях посадочных страниц учтены потребности разноплановых проектов.

Элементы дизайна для сайта на TheGem настраиваются при помощи плагина Visual Composer. Отображение большого количества контента в блоках лендинга (портфолио, отзывы, услуги) организовано через подгрузку — автоматическую или «по кнопке», а также через слайдер переключения вкладок. В шаблоне предусмотрено 6 вариантов анимации для загрузки компонентов секций, появляющихся при прокрутке содержимого посадочной страницы. Фоном блоков контента могут быть видео с vimeo и youtube или выведенные из файловой системы сайта посредством html5.

13. Marketing Pro

Marketing Pro — шаблон, разработанный с прицелом на конверсию, маркетинг и seo. Каждый из 9 демо-сайтов на нем создан с учетом особенностей конкретной маркетинговой ниши. Бонусом к адаптивному дизайну лендинга идут стилизованные шаблоны для блоков организации мероприятий.

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

15. Jevelin

Jevelin — шаблон с премиальным адаптивным дизайном, облегчающий создание landing page и одностраничных сайтов на wordpress. Тема поможет запустить проект в краткие сроки. Благодаря многообразию инструментов настройки — 9 вариантов хедеров в различной раскладке, 40 уникальных элементов, к каждому из которых можно применить отдельные стили, встроенный функционал для организации перепостов в соцсети, 6 стилевых решений для оформления секции портфолио — кастомизация скинов выполняется быстрее, чем когда-либо.

16. Kalium

Kalium — тема, к которой обращаются представители различных профессиональных сфер, чтобы получить сайт для продвижения своих услуг. Особый акцент в дизайне сайтов на Kalium сделан на типографике — за нее отвечает специализированная библиотека для управления шрифтами. В шаблоне могут применяться 4000 шрифтов — Google, Typekit, Font Squirrel, премиальные и кастомные (загруженные пользователем).

17. Inbound

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

18. Intact

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

19. Comet

Comet — полностью адаптивный pixel-perfect темплейт на Visual Composer и . Пользователям предлагается 5 скинов для лендингов, в которых реализованы следующие эффекты: слайдер для текста, parallax, фоновое видео — импортированное с youtube или встроенное на html5, анимированный zoom слайдер. Новые пользователи легко разберутся в настройках темы при создании wordpress landing pages — инструкция и видео уроки доступны онлайн.

20. LeadEngine

Универсальная WordPress theme, в которой есть все необходимое для создания лендинга:

• 200 блоков для «сборки» в темплейт в любом порядке;
• адаптивность на любом этапе;
• 35 полностью разработанных страниц - можно просто менять текст и фото;
• высокая скорость загрузки - на 94% быстрее среднего.

Дизайн разработок можно оценить перед покупкой. Цветовые схемы и настройки меняются в визуальном редакторе. Авторы обещают поддержку в любое время.

Разработчик предлагает шаблон сайта в разных тематиках - от строительства до ветеринарных услуг. Простые и эффективные landing page помогут донести до потенциальных клиентов ваши преимущества, условия работы и другие необходимые детали. Дизайн респонсивен, хорошо смотрится на всех устройствах, от мониторов Retina до мобильных гаджетов. Есть плагины для портфолио, часов работы, календаря, а также собственные иконки.

22. Incubator

«Идеальная тема для стартапа»,- говорят о своей разработке авторы. Легкий минималистичный дизайн 2019 года подойдет интернет магазинам, ивент-агентствам и многим другим видам бизнеса для визитки или дальнейшей разработки в более масштабный проект. В комплекте:

• визуальный конструктор - детали меняются в онлайн-режиме;
• мобильная адаптивность;
• WooCommerce - лучший плагин тематики online shop;
• поддержка любого языка.

23. Phlox Pro

Мультишаблонная заготовка с тридцатью демо, в которых можно только подставить нужный текст. Также предлагают более 90 темплейтов для слайдеров и эффектов, более 130 вариантов для отдельных страниц. Включено 9 основных плагинов, которые пригодятся для продвижения сайта визитки или более крупного ресурса. Все это со скидкой, сейчас можно приобрести за 30 долларов. Один из самых востребованных шаблонов для лендингов.

24. Porto

Еще один мультишаблон-конструктор для лендингов и визиток. Чистый код с бесконечным количеством вариантов подбора хедеров и футеров без необходимости обучаться программированию. Множество дизайнов, элементы которых легкозаменяемы благодаря плагину «сетки». Легко превратить из одностраничника в полноценный магазин за счет расширенного поиска. Поддержка всегда готова ответить на вопросы.

25. XTRA

Недорогой и популярный мультишаблон для landing, который отличается:

1. профессиональными дизайнерскими заготовками - всего 55 штук;
2. быстрым откликом за счет оптимизации;
3. настройкой методом drag and drop;
4. более 200 блоков для контента;
5. более 1000 опций.

Профессиональные сайты на любую тематику, которые можно просто установить кликом и использовать. Современные дизайны, которые не «приелись» и выглядят свежо и красиво.

26. Ave

«Мультишаблон нового поколения», - заявление смелое, но авторы говорят о своем продукте именно так. Всего за 35 долларов можно получить:

• 200 лендингов с красивым «европейским» дизайном;
• WooCommerce и расширенные формы заказа;
• установка за минуту;
• настройки для портфолио, слайдеров.

Плагин визуального редактора Elementor действительно обновлен до последней версии и очень прост в использовании.

27. The Ark

«Лучший среди 9500», - отмечают разработчики. В шаблоне сделана ставка на людей, которые никогда не занимались кодингом. Настройка дизайна осуществляется с помощью визуального плагина-конструктора Элементор, что позволяет работать в режиме «один к одному», не использовать сторонних установок и сразу же задействовать полностью рабочий функционал одного из 300 темплейтов. Удобно и быстро настраивается.

28. Amedeo

Красивая разработка в необычной цветовой гамме. Акцент сделан не только на изящном дизайне, потому что предлагается приобрести в комплекте:

1. плагин WooCommerce для интернет магазина;
2. плагин продвинутых контакт-форм;
3. подборку эффектов прокрутки в разной стилистике;
4. подборку анимаций.

Чистый и понятный Вордпресс шаблон для визиток и онлайн-шоппинга. В режиме магазина есть настройки характеристик товара, поиска по ним.

29. Bolge

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

30. Makoto

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

32. Landscaping

Разработчики сделали интересный «зеленый» дизайн для услуг по озеленению, помощи в садоводстве и эко-тематике. Однако заготовку можно применять для других целей. Красивые иконки, чистые Google-шрифты, превосходная респонсивность и внешний вид, в том числе, на Retina-устройствах подразумевают широкое использование Вордпресс темы.

33. Crowdmerc

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

34. Creedence

Креативная «музыкальная» тема запомнится посетителям ярким дизайном, а владельца сайта заинтересует:

• разработками для лендинга и внутренних страниц - неограниченная возможность развития ресурса;
• установкой в одно нажатие;
• настройкой WYSIWYG;
• возможностью добавлять музыку, видео, эффекты слайдеров.

36. Education

Education является усовершенствованной версией старой темы eLearning с более продвинутым UX и предназначен для образовательных интернет-ресурсов: онлайн курсов и сайтов учебных заведений. Шаблон имеет привлекательный дизайн и предоставляет исчерпывающий функционал, необходимый для учебного процесса.

37. One

One — креативная тема для создания лендингов с акцентом на продвижение продуктов. Фронтенд шаблона сделан на html5 и bootstrap 3, с ним могут быть интегрированы MailChimp и Contact Form 7. Разработчиками UX темы было изучено множество похожих проектов, в результате чего пользователи получили готовые шаблоны лендингов Вордпресс, в которых имеются все важные для бизнес-проектов инструменты.

38. Total

Total — подходящий под многие проекты шаблон. При создании страниц на нем применяются: метод перетаскивания, неограниченные цветовые схемы, кастомизация в режиме реального времени, легкие в использовании премиальные слайдеры. Среди демо-сайтов темы представлены лендинг пейдж шаблоны для 11 разноплановых проектов.

39. Stockholm

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

Еще вариант демо:

40. Massive Dynamic

Более 70+ виджетов, с которыми ваши лендинги будут неповторимыми и современными. Гугл шрифты, инфографика, адаптация к СЕО, чистый код, создание удобных портфолио — это только часть преимуществ данного темплейта. Ленды, в прямом смысле, можно собирать буквально как мозайку, обычным перетаскиванием. На странице описания вы можете увидеть наглядные примеры.

При просмотре демо сайтов хочется использовать их все.

Всем привет.

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

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

Для тех, кто не в теме: Вордпресс – это бесплатная платформа, на которой можно легко без знания языков программирования создать свой сайт. Еще WordPress называют системой управления контентом (CMS – content manager system), с помощью этой платформы процесс добавления статей или новых страниц на свой web-ресурс не вызывает абсолютно никаких сложностей.

И еще тем, у кого еще нет своего сайта — вот ссылка на бесплатный курс по созданию сайта на WordPress

Статьи по теме:

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

Видео инструкция

Установка плагина

Итак, речь пойдет о плагине под названием Elementor. Установка плагина стандартная, как и для всех плагинов. Вот короткая инструкция:

1. Зайти в админ панель вордпресс по ссылке «ваш-домен/wp-admin»
2. В меню слева нажать «Плагины» – «добавить новый»
3. В поле поиска ввести Elementor
4. Плагин найден. Нажать установить
5. Нажать активировать
6. Готово! Плагин Elementor установлен.

Это, конечно, идеальный случай 😊 Мой блог немного вредный. И по этой инструкции не получилось.

• Во-первых, при установке плагинов мне еще необходимо ввести логин и пароль от FTP доступа. Это не проблема. Все эти данные я всегда могу получить на своем хостинге .
• Во-вторых, после установки плагин не работал. Чтобы не тратить драгоценное время и не разбираться в чем проблема, я установил систему WordPress на поддомен своего сайта и далее установил Elementor на поддомене. На подомене всё заработало.

Предположение. Возможно, плагин Elementor не заработал на моем блоге из-за конфликта с темой.

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

Как создать страницу — начало

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

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

Инструкция:

Интерфейс оболочки для создания лендингов

Как и к любому другому интерфейсу, здесь нужно привыкнуть. С первого взгляда вам вряд ли всё станет понятно. Хотя на самом деле нет ничего сложного.

Принцип у этого редактора следующий: создаются специальные блоги (контейнеры), а в эти блоки вставляются различные объекты.

Объектов очень много:

• заголовок,
• текст,
• различные списки,
• картинка,
• кнопка,
• линии,
• html код,
• и другие.

У всех объектов есть свои параметры: цвет, размер и другие. Вообще параметры зависят от самого объекта. Например, у заголовка главные параметры — это размер заголовка, его цвет. У кнопки – также размер кнопки, цвет, ссылка.

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

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

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

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

Чтобы их убрать, нажмите в левом нижнем углу на настройки (шестеренка). Далее нужно выбрать режим отображения Full Width (полная ширина). После этого правая колонка исчезнет.

Теперь пора начинать создавать свою страничку:

Ваша страничка готова, теперь можете использовать ее по назначению.

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

Чтобы получать уведомления о публикациях новых статей, на свою электронную почту.

Также делитесь статьей со своими друзьями в социальных сетях.

Всем пока и до скорых встреч!

С уважением, Абдуллин Руслан

Что такое лендинг пейдж лендинг пейдж становится понятно из перевода оригинала «Landing Page», это «страница приземления» она же посадочная страница, она же страница входа или опорная страница.

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

Статическая страница WordPress

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

Активация статической страницы находится на вкладке Настройки>>>Чтение>>>На главной странице отображать.

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

По умолчанию, на системе стоит демонстрационная страница «Привет мир!». Если вы её удалили, то настройка активации статической страницы показываться не будет.

Создать страницу сайта WordPres можно на вкладке консоли Страницы>>>Создать новую. Напомню, что страницы WordPress не объединяются в рубрики и не участвуют в таксономии сайта.

Общая идея создания лендинг пейдж на WordPress

Идея создания лендинг пейдж на WordPress проста. Для создания опорной страницы, страницы входа нужно создать красивую страницу (page) сайта и активировать настройку «статическая страница WordPress», выбрав созданную страницу, как главную.

Идея проста, но … простыми инструментами создать красивую страницу, будет сложно. Что делать?

Я нашел выход в плагине «Beaver builder lite version». С припиской «lite version» этот плагин бесплатный. Плагин постоянно обновляется, имеет боле 300-х тысяч скачиваний и идеально подходит для создания уникальной лендинг пейдж на WordPress.

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

Плагин Beaver builder

Страница плагина в официальном архиве: https://ru.wordpress.org/plugins/beaver-builder-lite-version/

Если вы забыли, как установить плагин, читаем статью . Считаем, что плагин установлен и активирован.

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

После активации плагина, в редакторе страниц (вкладка Страницы>>Создать) появляется вкладка «Конструктор». Именно она нам нужна.

Конструктор Beaver builder работает по технологии drag-and-drop – перетаскивание нужных модулей в рабочее поле страницы. Для примера я создам несложную страницу с фото.

Шаг 1 Создаем страницу

Идем на вкладка Страницы>>Добавить новую. В редакторе видим новую кнопку «Конструктор». Открываем «Конструктор».

Шаг 2

👁17 917 просм.

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

И тут появилась идея создать посадочную страницу на WordPress.

Немного погуглив я нашел советы и примеры как быстро создать Lending page. Однако в одном из них шаблон оказался очень «тяжелым» и долго подгружал свои эффекты, в другом не хватало кнопки с всплывающей формой заказа, а стандартные варианты, заложенные в темах WordPress по умолчанию не устраивали.

Собрав всю найденную информацию, я нашел свой подход и и вот что из этого получилось: демо сайта —

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

I. Подготовка к созданию лендинга

1. Регистрация хостинг аккаунта. Для хостинга был выбран хостинг провайдер Parkovka.ua , предоставляющий качественные услуги по хорошей цене 🙂
2. Настройка доменного имени.
3. Установка CMS Wordprss.

II. Установка необходимых компонентов

1. Установка темы Refur . Эта тема WordPress была выбрана не случайно. В ней отлично реализован первый экран с фоновым изображением, кнопкой для призыва к действию и есть возможность заменить текст «Copyright» в футере на свой вариант.
2. Создание дочерней темы. Так как в дальнейшем нам нужно будет прописывать свои стили и функции для лендинга, то нужно обеспечить их сохранность, чтоб после обновления темы они не исчезли 💡
3. Установка плагинов: WP Translitera, — плагин для транслитерации ссылок сайта; Contact Form 7, — плагин для создания форм обратной связи; TinyMCE Advanced, — расширяет возможности текстового редактора WordPress. Easy FancyBox, — плагин для создания всплывающих окон на сайте. Page Builder от SiteOrigin, — имеет огромные возможности кастомизации страниц с достаточным количеством интуитивно понятных настроек; и самый основной плагин, при помощи которого мы будем строить информационные блоки лендинга..

III. Подготовка плагинов WordPress к работе

После установки некоторые плагины нуждаются в дополнительных настройках.

1. TinyMCE Advanced, — нужно добавить недостающие компоненты в панель текстового редактора. Для его настройки переходим по пути: настройки → TinyMCE Advanced.

   В окне настроек плагина нам нужно перетянуть нужные компоненты из окна «Неиспользуемые кнопки» в панель текстового редактора. Я для настройки лендинга использовал такие кнопки: «семейство шрифтов», «размер шрифта», «цвет фона», «выравнивание по ширине», «верхний индекс», «подчеркнутый». После выбора, сохраняем кликнув на кнопку «сохранить изменения».
   

2. Easy FancyBox, — нужно включить функцию «Inline content» для того чтоб форма обратной связи открывалась во всплывающем окне. Для этого переходим по пути Настройки → Медиафайлы, и проскролив немного вниз видим «FancyBox». Ставим отметку в чекбоксе напротив «Inline content» и сохраняем. Так же можно снять отметку с чекбокса напротив «Images», если необходимо присвоить настройки для ссылок изображений, чтоб открывались в отдельном окне.
   
3. Contact Form 7. Мы будем использовать этот плагин для получения заказов через кнопку обратной связи. Подготовим его для дальнейшей работы. Переходим по пути: Contact Form 7 → Формы.
   Там видим уже автоматически созданную контактную форму «Контактная форма 1». Эту форму можем пока не трогать. Создаем новую, нажав в левом верхнем углу кнопу «Добавить новую». В открывшемся окне вводим любое понятное название формы. В поле «Шаблон формы» удаляем существующий код, кроме строки . Затем, нажимаем кнопку «текст», для добавления необходимого тега в форму.
   
   
   В открывшемся окне отмечаем чекбокс «обязательное поле», в графе «значение по умолчанию» пишем текст «Ваше имя», и отмечаем чекбокс «используйте этот текст в качестве заполнителя поля». И нажимаем кнопку «вставить тег».
   
   Повторяем эту процедуру еще раз, для поля «номер телефона». Должно получиться вот так:
   
   
   Сохраняем и переходим на вкладку «Письмо». Здесь нужно отредактировать шаблон письма, которое будет уведомлять нас, что на сайте была заполнена контактная форма. Сразу же в верхней части шаблона появилась надпись «В следующих полях Вы можете использовать эти почтовые метки: ». У вас номера меток могут отличаться. Копируем и подставляем их в поле «Тело письма» с подписями «Ваше имя» и «Телефон», соответственно. Затем очищаем поле «Дополнительные заголовки» от кода. Поскольку в нашей форме нет поля для ввода e-mail адреса, то если не очистить его не очистить, форма будет содержать ошибку. Далее можем изменить поля «От кого» и «Тема», вписав туда текст, который нем необходим. Проверяем, чтоб в поле «Кому» был вписан e-mail, на который нужно получать уведомления с сайта. И сохраняем форму.
   Вот как было:
   
   
   И вот что получилось:
   
   
   Эта настройка будет нам необходима для красивого оформления всплывающего окна обратной связи.

IV. Настройка стартовой страницы лендинга

V. Установка и настройка контактных форм.

Ниже описанный способ уже давно существует на просторах интернета, так что на оригинальность я не претендую 🙂

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

/***Стили для формы обратной связи****/ .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8; /*цвет фона*/ padding:10px 20px; /*внитринние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff; /*цвет текста*/ text-decoration:none; /*убрать подчёркивание у ссылки*/ width:190px; /*ширина кнопки*/ margin:auto; /*выравнивание кнопки по центру*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /**Плавное появление тени у кнопки при наведении**/ .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /***Стили для CF7***/ .wpcf7 { background:#f1f1f1; /*цвет границы*/ padding:20px 20px 20px 20px!important; text-align:center; border:1px solid #ccc; font-size:17px; } .wpcf7 h2{ text-transform:uppercase; font-size:20px; color:#750000; margin-bottom:15px; } .wpcf7-text{ margin-bottom:10px; padding:5px; border:1px solid #6e6e6e; } .wpcf7-text:focus{ -moz-box-shadow: 0 0 6px #004080!important; -webkit-box-shadow: 0 0 6px #004080!important; box-shadow:0 0 6px #004080!important; } .wpcf7-submit{ background: linear-gradient(#f20000, #750000)!important; color:#fff!important; text-shadow:none!important; text-transform:uppercase; border-radius:10px!important; -moz-box-shadow: 0 0 6px #000!important; -webkit-box-shadow: 0 0 6px #000!important; box-shadow:0 0 6px #000!important; margin-top:20px; } /*стили сообщений об ошибках*/ .wpcf7-not-valid{ border:1px solid red!important; } .wpcf7-response-output{ background:#fff; border-radius:10px!important; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000; }

Затем вставляем следующий код в ту форму, где нам нужно вывести кнопку обратной связи. Конечно же вставляем его в режиме html разметки.

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

Привет. Сейчас очень модны сайты-одностраничники - landing page их еще называют. Часто замечаю, что если ассортимент товара небольшой, допустим в продаже 3 вида, то продавцы охотно используют лендинги. Да и для инфобизнеса штуку лучше не найти. Все, наверное, сталкиваются с тем, что если вы хотите скачать/купить какой-либо цифровой продукт, то он размещается на одностраничнике. Это уже стандарт.

Я тоже, когда запускал продажи своего марафона, всю информацию "посадили" на одну страницу. Но для этих целей использовался отдельный сервис unbounce.com, месяц работы с которым стоит несколько тысяч рублей. В общем, с тех пор я подумал, нужно найти что-то подходящее для WordPress, чтобы не переплачивать.

Самый известный плагин для создания Landing Page в WordPress - это плагин WP Page. Именно его я решил попробовать. Он действительно хорош, делюсь своими впечатлениями.

Установка плагина WP Page

1. Для начала вам как всегда нужно скачать плагин WP Page . Сразу оговорюсь, плагин платный. Но первые 7 дней тестировать можно бесплатно. На момент написания этой статьи стоимость плагина составляет 2162 рубля. Это лицензия пожизненная, не нужно будет больше платить. А то я раньше пользовался сервисом unbounce.com и отдавал $50 каждый месяц.
2. После того, как скачаете плагин, просто нужно установить и активировать.

Как создать landing page в WordPress

1. В админке WordPress появляется вот такой отдельный пункт меню:
   
2. Там нажимаем на кнопку "Добавить страницу" и попадаем в редактор, по умолчанию все "лендинг пейджи" будут в URL адрес wppage:
   
   
3. Сразу в параметрах я изменил этот адрес на landing:
   
   
4. Возвращаемся обратно в редактор и начинаем "творить". Очень много разных кнопочек, стрелочек и пр. для работы:
   
   
5. Кликнув по "стрелочкам", вы увидите весь огромный выбор (обратите внимание на полосу прокрутки, все стрелки не уместились на скриншоте, потому что их действительно много):
   
   
6. Чем мне еще понравился данный плагин для создания landing page, это то, что идет в комплекте куча разных видеоуроков (их больше 20), которые помогут даже самым начинающим (на картинке выше тоже есть ссылка на видеоуроки):
   
   
7. К сожалению, у меня нет опыта создания "лендингов", поэтому тут я не специалист, но существующие кнопки, баннеры и прочее сильно помогают:
   
   
8. И все это сразу же без использования дизайна вашего блога, то есть в чистом виде (без шапки, сайдбаров, футеров и пр.). Просто опубликовав или нажав на "Просмотреть запись" можно увидеть, как выглядит ваш лэндинг:
   
   

Параметры страницы в Landing Page

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

1. Дизайн. Тут можно скорретировать фон страницы, тело, шапку, подвал. Можно загрузить собственные изображения или выбрать из имеющихся:
   
   
2. Медиа блок. Можно управлять блоком медиа:
   
   
3. Подписки. Тут можно вставить код от сервисов email рассылок:
   
   
4. Интеркасса. Возможность подключения интеркассы для приема оплаты. Жалко только "Интрекасса", мне не хватает "Яндекс Касса" и "Робокасса".
5. Можно с легкостью вшить комментарии от Facebook, Vkontakte, WordPress:
   
6. Во вкладке SEO с легкостью прописываются title, description, keywords.
7. Во вкладке скрипты можно добавить какой-либо код в head, body.
8. Также можно с легкостью вшить форму обратной связи:
   

Особенности плагина WP Page

• Админка и настройки все на русском языке.
• Полно видеоуроков для помощи.
• Очень много разных готовых кнопок (см. ниже подробнее).
• Возможность проведения А/В тестирования. То есть вы можете создать похожие страницы с отличием в заголовке, допустим. Отмеряете конверсию, выбираете лучший вариант и используете его. A/B тестирование обязательно при создании landing page.
• Легкость в редактировании фона и прочих вещей.
• Очень широкая функциональность плагина. Есть все необходимое для создания полноценного лэндинга.
• Все интуитивно понятно.

Готовые кнопки:

• социальные кнопки;
• вставка аудиозаписей;
• вставки видео;
• формы Google;
• подписки;
• шаблоны "Заказать", "Купить" и прочее;
• списки с разными цветами и формами;
• разные ленты;
• стрелки;
• боксы;
• кнопки гарантий;
• блоки отзывов;
• графические заголовки;
• таймеры;
• разделители.

Как видите, очень много готовых инструментов для работы. Мне очень понравилось. А теперь представьте себе, что вы не сильно в верстке, как я, и пытаетесь сверстать одностраничник в голом php. Уф-ф-ф, мне стало страшно. 🙂

Вывод

Мне плагин WP Page понравился своей простотой, удобством и функциональностью. Не нужно обладать какими-то сверхзнаниями для работы с ним. Самое сложное - это продумать структуру лендинга. Мне, как человеку который практически не создавал landing page, пока это не очень просто. Тут, наверное, на начальных этапах нужно подглядывать у других что да как, чтобы примерную схему видеть у себя.

Друзья мои, за этот пост мне не заплатили ни копейки. Я на самом деле искал то, как сделать лендинг на WordPress. Из всех вариантов, мне больше понравился данный плагин WP Page . Вы можете бесплатно его протестировать в течении 7-ми дней, а потом решить: нужен ли он вам, подходит ли под ваши нужды. Если да, то потом с радостью купить, как это сделал я.

Спасибо за внимание. А я пойду учиться делать лендинги. 🙂