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

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

👁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; }

/***Стили для формы обратной связи****/ 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 ;

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

< div class = "contact-us" > < a href = "#contact_form_pop_up" class = "fancybox-inline" > Отправитьсообщение< / a > < / div > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop_up" > [ contact - form - 7 id = "159" title = "Контактная форма 1" ] < / div > < / div >

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

Существуют инструменты, позволяющие создать landing page самостоятельно не слишком разбираясь в коде. Один из них – CMS WordPress. Простейший способ сделать WordPress лендинг пейдж – применить готовый шаблон. WordPress шаблоны подойдут для людей, реализующих товары, для бизнесменов, фрилансеров, агентств. А также компаний, осуществляющих видеонаблюдение, юридические консультации и другие услуги. Это объясняется возможностью настройки шаблонов под разные предложения и цели. Чтобы в результате получить работающий одностраничник, нужно со знанием дела подобрать тему, которая продемонстрирует клиенту предложение с лучшего ракурса.

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

Стандартные страницы Вордпресс одной структуры. Лендинг пейдж должны позволять пользователю менять внешний вид. Чтобы добиться желаемого потребуется плагин, позволяющий настроить landing page, структуру и дизайн независимо от пользовательской тематики.

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

С целью упрощения создания страниц захвата на WordPress разработан не один плагин. Главная их задача – скрыть многостраничность Вордпресса и сохранить активной только одну страницу, что обеспечивает создание отличного продающего сайта.

Landing page, созданный на WordPress может быть полнофункциональным и уникальным, благодаря большому количеству плагинов и надстроек. Некоторые из них платные, многие условно-бесплатные.

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

Бесплатный лендинг пейдж на Вордпресс с плагином Free Landing Pages Builder by Wishpond функционирует по типу конструктора страниц способом перетаскивания.

• Имеется поле страницы, на нужное место которой мышкой перетаскиваются элементы с помощью панели инструментов.
• При этом панель инструментов функциональна: настроить в разделе дизайн можно практически всё.
• Кроме того Free Landing Pages Builder by Wishpond создаёт формы и всплывающие формы.
• Ещё один положительный момент – Free Landing Pages Builder by Wishpond оснащён функцией анализа (лиды, просмотры).
• Free Landing Pages Builder by Wishpond предоставляет две сотни шаблонов. Плагин позволяет править, не касаясь исходного кода страницы.
• Free Landing Pages Builder by Wishpond работает со всеми сервисами сбора аналитических данных и дополнениями, которые требуются чтобы сделать лендинг.

Плагин Free Landing Pages Builder by Wishpond позволяет сделать страницы, адаптированные для мобильных устройств.

Недостатки Free Landing Pages Builder by Wishpond:

• За более богатый функционал придётся заплатить, потому плагин является условно бесплатным.
• Англоязычный.
• Ощутимо нагружает сервер во время создания LP.

Другие плагины

1. Landing Pages. Здесь есть LP конструктор и возможность наблюдать количество посетителей страницы. Плагин оснащён впечатляющим числом опций, представляет собой оптимальный выбор с целью вызвать интерес у подписчиков и потенциальных клиентов.
2. Ultimate Landing Page. Позволяет самостоятельно создать лэндинг на WordPress без написания кода. Здесь имеется база шаблонов и возможность проверки, какой из них будет смотреться наиболее выигрышно. Чтобы воспользоваться плагином технических познаний не потребуется.
3. Ultimate Coming Soon Page. С этим плагином взаимодействует любая тематика Вордпресс, которую вы пожелаете установить на одностраничник. Несложный и гибкий, русскоязычный.
4. Beaver Builder. Здесь имеется конструктор, дающий возможность сделать эффективные лэндинги перетягиванием элементов. Составляющие макета отзывчивы и великолепно выглядят на экране с любым разрешением. Эта функция удаляется.
5. Coming soon and Maintenance mode. Чтобы создать LP при помощи этого плагина навыки вёрстки не потребуются. Coming soon and Maintenance mode имеет много особенностей (сео оптимизация, настройка параметров), а также про-версию с увеличенным числом функций.
6. Landing Pages Builder. Даёт возможность управлять созданными одностраничниками из одной точки. Увеличивает число посетителей. Landing Pages Builder дружественный к поисковым системам.
7. Bulk City Landing Page Creator. Позволяет сделать LP для какого-либо города индивидуально, для чего нужно лишь изменить шапку с именем (геотаргетинг). Bulk City Landing Page Creator хранит параметры первоначальной страницы, шаблона, заглавие, контент. Общее число страниц здесь записывается в форме перечня по наименованию города (области).
8. Site Offline or Coming Soon. Позволяет создать лэндинг и расположить на нём все требующиеся сведения. Версия премиум с впечатляющим набором функций.
9. Easy Pie Coming Soon. Позволяет сделать LP с формой захвата. Работает с большей частью шаблонов Вордпресс.
10. Maintenance Page. При помощи плагина Maintenance Page можно сделать лэндинг быстро. Настройки дают возможность добавить иконки, логотип, фоновое изображение, поменять цвета.

Как выбрать плагин

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

Делая выводы, стоит полагаться на три критерия:

1. Срок внедрения.
2. Цена проекта.
3. Поддержка клиентов.

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

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

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

Темы для лендингов

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

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

Jupiter

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

Brooklyn

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

Uncode

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

Чтобы смотреться комфортно для посетителей под мобильные устройства адаптируется не только сайт, но и картинки.

H-code

Здесь имеется восемь тематик, в каждой из которых содержится от трёх до двенадцати скинов. Шаблон сочетает в себе аккуратность, красоту и множество разного рода элементов, виджетов.

Cosonix

Если вы пользуетесь сервисом mailChimp, то с привязкой форм затруднений не возникнет, так как Cosonix интегрируется с этим рассыльщиком писем.

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

Massive Dynamic

Имеет больше семидесяти виджетов. Лендинги собираются как мозаика, простым перетаскиванием. Преимущества шаблона:

• Адаптация к seo.
• Позволяет сделать удобные портфолио.
• Инфографика.
• Чистый код.
• Google шрифты.

Примеры можно просмотреть на страничке описания, после чего возникнет желание использовать их все.

Kapital

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

Bridge

Позволяет эмоционально окрасить продающую страницу, является интуитивно понятным и одновременно мощным.

В теме Bridge есть:

1. Слайдер и заголовки настраиваемые.
2. Видеофоны (видеоряд на заднем плане).
3. Интерактивное изменчивое меню.
4. Фиксированный заголовок.
5. Интерактивные составляющие.
6. Логотипы для заголовков.
7. Семь макетов портфолио.

Здесь есть сто шестьдесят восемь демо-версий, а также наглядные видео руководства по работе с шаблоном и инструкции в тексте.

The moon

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

Scalia

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

Представленные плагины помогут сэкономить энергию и время, позволят увидеть результат сразу же, пользоваться при создании LP удобными инструментами. Громадным положительным моментом служит скорость размещения, в особенности, когда нужно расширить бизнес и создать клиентские проекты. Удачно подобранная тема шаблона WordPress позволит создать целевую страницу, эффективно продвигающую товар или услугу и ощутимо увеличивающую прибыль компании.

Активной одну страницу, что позволяет создать на их основе отличную . Некоторые плагины хороши тем, что имеют встроенный таймер , который можно использовать для обратного отсчета времени акций.
При надобности можно сделать из Wordpress сайта - страницу захвата для вашего товара или услуг, одностраничник для студии веб-дизайна , лендинг для мобильного приложения . Плюсом является также то, что плагины сео оптимизированы , что позволяет поисковым системам индексировать страницу и повысит шансы найти клиентов. И нужно сказать, что есть множество готовых /CSS решений для создания одностраничного сайта , которые можно использовать для настройки и редактирования внешнего вида. Представляю вашему вниманию 10 плагинов, с помощью которых можно создать Landing Page на Wordpress сайте .

Landing Pages

Плагин имеет лендинг пейдж конструктор и позволяет отслеживать посещаемость страниц. Хорошее решение для привлечения клиентов и подписчиков. Имеет множество опций и возможностей.

Ultimate Landing Page

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

Ultimate Coming Soon Page

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

Beaver Builder

Beaver Builder включает лендинг конструктор , который позволяет создавать эффективные сайты с помощью перетягивания объектов (drag and drop). Любой элемент макета в Beaver Builder полностью отзывчивый и будет отлично смотреться на любом разрешении экрана. Но это не обязательная функция, ее можно отменить в основных настройках плагина.

Coming soon and Maintenance mode

Плагин позволит легко и быстро c помощью конструктора landing page создать страницу без знаний верстки. Включает множество особенностей, например: настройка множества параметров, редактор свойств, SEO оптимизация, позволяет добавлять на страницу meta description, keywords и многое другое. У плагина есть pro версия с расширенным функционалом.

Landing Pages Builder

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

Bulk City Landing Page Creator

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