Привет. Сейчас очень модны сайты-одностраничники - 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-ми дней, а потом решить: нужен ли он вам, подходит ли под ваши нужды. Если да, то потом с радостью купить, как это сделал я.

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

» Создание Landing Page WordPress: 8 лучших плагинов

Создание Landing Page WordPress: 8 лучших плагинов

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

Думаю у всех, кто занимается продажами в интернете имеется свой блог на самом популярном движке – WordPress. Сейчас на всех курсах и тренингах по созданию бизнеса в сети первым делом учат создавать блог на этом движке. Поэтому плагины по созданию landing page WordPress будут отличным решением для вас.

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

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

1.

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

Плагин имеет встроенный конструктор с простым интерфейсом. Имеет множество полезных опций. Обладает очень полезной функцией просмотра посещаемости страниц.

2.

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

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

3. Contact Form 7

С помощью этого плагина можно создавать любые формы. Например, для заказа товара, обратного звонка или просто обратной связи. Является незаменимым для лендингов/посадочных страниц. Основной особенностью является бесплатность и частота обновления плагина.

4.

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

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

5.

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

6.

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

7. Landing Pages, SEO Content

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

8. Page Builder — AIO

Удобный и легкий плагин для создания лендинг страниц на WordPress. Интуитивно понятный дизайн и приятный интерфейс делают этот плагин еще привлекательнее.

Послесловие

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

2019-01-27T11:56:56+00:00

Здравствуйте,

Всегда пожалуйста.

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

2019-01-16T11:55:58+00:00

Спасибо за инфорвтинформативную статью

2018-04-03T14:05:00+00:00

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

2017-12-02T02:00:00+00:00

Здравствуйте, Руслан. Если вы не разработчик, и вам хочется самому заниматься поддержкой шаблона, то выбирайте ту тему, в которой есть Visual Composer, чтобы вы могли менять элементы посредством Drag&Drop (визуальным переносом элементом). Возможно все же потом придется немного использовать HTML, если вам нужно какие-то более сложные элементы, но это не усложнит процесс, да и не дорого выйдет для вас, если найдете разработчика для такой работенки. Вариантов шаблонов много, могу посоветовать Salient, сам лично её использовал. Она англоязычная, в ней есть все что я выше описывал, мне лишь осталось перевести некоторые часты шаблона с англ. на русский и готово. По поводу доступа к контенту: я особо много не работал с приватным контентом, но могу посоветовать https://wordpress.org/plugins/wp-private-content-plus/, вроде бы достойный вариант, много разного функционала. Единственный его минус - это если вы не говорите на английском, потому что он без поддержки русского языка.

2017-11-21T12:34:00+00:00

Здравствуйте! Какой плагин посоветуете для установки? Хочу на сайте сделать платный доступ к созданию собственных страниц. Имею сайт по предоставлению услуг. Хочу расшириться и привлечь дополнительных исполнителей, помогать им продвижении своих товаров и услуг. Чтобы исполнитель смог создать свою посадочную страницу (лендинг) и предлагать свои услуги.

Всем привет.

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

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

Для тех, кто не в теме: Вордпресс – это бесплатная платформа, на которой можно легко без знания языков программирования создать свой сайт. Еще 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 (полная ширина). После этого правая колонка исчезнет.

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

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

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

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

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

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

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

👁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 на Wordress. Мне попался очень интересный видеокурс на youtube, в котором парень показывает полный процесс верстки и адаптации созданного шаблона для его работы на WordPress. Кроме того, для меня было много интересного и в подходе к верстке в целом. Как говорится: «век живи — век учись».

Начинается все с прототипа, затем верстка с использованием препроцессора, а потом уже «посадка» на CMS. Очень все занимательно, рекомендую посмотреть. Обязательно найдете что-то новое для себя.

Создание лендинг пейдж на WordPress

Итак, первая часть курса по созданию landing page на WordPress:

2 часть:

3 часть:

4 часть:

5 часть:

6 часть:

7 часть:

8 часть:

9 часть:

10 часть:

11 часть:

12 часть:

13 часть:

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