Как сделать landing page на wordpress

Нужен ли мне лендинг?

Если перед вами стоит такой вопрос, то, вероятнее всего, лендинг вам все-таки нужен. Хотя для начала нужно определиться – что такое лендинг? Лендинг (а также: лендинг пейдж, лэндинг, целевая страница, посадочная страница, одностраничник) – это сайт, который содержит в себе информацию о какой-то услуге, товаре или компании (человеке). Говоря о лендинге, чаще всего имеют в виду автономный сайт, состоящий из одной страницы, на которой перечислена вся основная информация.

Лендинг удобно использовать для продажи определенного товара – монопода, смартфона, вебинаров… Однако сейчас в форме лендинга может быть выполнен и сайт веб-студии или ведущего свадеб или парикмахерской.

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

Плюсы и минусы лендинга

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

Начну с минусов.

Ограниченность информации. Много данных, отзывов и познавательных статей на лендинге вы не разместите, это не блог. Чаще всего компании рассказывают подробную информацию уже по запросу – по электронной почте или телефону. Кто-то считает, что из-за этого доверие пользователей ниже – тут сложно сказать, многие вывешивают на своих лендингах сертификаты и несколько отзывов пользователей – и продажи идут.

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

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

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

Теперь перейдем к плюсам.

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

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

Простая навигация. Успех сайта зависит не только от красочной обертки и наполнения, но и от того, насколько потенциальным клиентам удобно им пользоваться. Посетителей раздражает, когда они не могут понять, куда нужно нажать, где находится нужная им информация, как с одной страницы перейти на другую и так далее. Будут ли такие проблемы на одностраничнике? При грамотной разработке – нет.

Концентрация информации. Информации на лендинге поместится не так много – но стоит ли это рассматривать только как минус? На одностраничнике намного проще концентрировать внимание посетителей на чем-то определенном.

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

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

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

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

Делаем лендинг — с чего начать

WordPress – известная CMS, которую горячо любят многие пользователи. Она знакома, распространена, легка в освоении, гибка… поэтому и лендинг я решил сделать именно на этой платформе.

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

Я не говорю о том, что нужно делать один в один! У вас просто должна быть общая картинка того, чтобы вы хотите получить в итоге.

Выбрали, придумали?

Значит, идем дальше. Не буду останавливаться на технической части (выбор и оплата домена, установка WordPress…) – итак, у вас наконец все готово к разработке!

Переходим к разработке

WordPress – инструмент многогранный и в основном благодаря наличию моря плагинов. Поэтому и лендинг мы будет делать тоже при помощи плагина – а именно Free Landing Pages Builder by Wishpond. Пользоваться этим плагином совсем несложно, вы разберетесь буквально за пару минут!

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

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

Как и обычно, вам нужно зайти в админпанель своего WP-сайта, скачать и активировать этот плагин. В вашем списке появится еще одна строчка – Landing pages – и, перейдя в этот пункт, вы можете начать создавать свой лендинг.

Наведите на картинку любого шаблона курсор: “Choose Template” – выбрать шаблон; “Preview” – превью (предварительный просмотр в окне справа). Советую сначала посмотреть превью шаблона и лишь потом брать его в работу. Кстати, в превью его возможность посмотреть шаблон и на мобильном устройстве – удобно!

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

Определились шаблоном? Нажимайте “Choose Template” — переходим к следующей части. Вам высветится окошко “Give Your Landing Page A Name” – дайте название своему лендингу.

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

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

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

После настройки лендинга не забудьте прошерстить настройки (Settings) – там можно, в частности, настроить SEO (задать название страницы и описание), “Share settings” – название, описание и картинка, которые будут показываться, если кто-то напишет ссылку на вашу страницу в соц. сетях. Тут же вы сможете еще, к примеру, добавить шрифты (Add/Edit Fonts), если представленных изначально вам покажется мало.

Публикация

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

Нажимайте яркую оранжевую кнопку “Publish” в горизонтальной панели!

В появившемся окошке выбирайте “Custom Domain” и вводите адрес сайта, на котором вы хотите разметить получившуюся страницу. Но я советую разместить сайт на поддомене (например, 1.example.ru) и далее поясню почему.

Внесение изменений на хостинге

Теперь вам нужно внести одно, но крайне важное изменение на хостинге – поменять запись CNAME используемого домена на wishpond.com. Так как на хостинге Timeweb можно поменять CNAME только поддомена, поэтому я и рекомендовал выше использовать поддомен.

Для того, чтобы внести изменения, войдите в свою панель управления хостингом, выберите пункт «Домены и поддомены», затем рядом с поддоменом нажмите на зеленую шестеренку («Настройки поддомена»). Выберите вкладку CNAME, пропишите там “wishpond.com” и сохраните:

И все! Проверяйте работоспособность сайта и вносите изменения, если что-то не нравится!

Удачи.

timeweb.com

Что нужно знать о Landing Page?

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

Landing Page (буквально – «страница посадки») – это одна веб-страница, сделанная с целью повышения конверсии вашего проекта, на которую пользователь попадает по ссылке из другого источника (речь идет о контекстной рекламе). Такая страница максимально подталкивает посетителя к совершению целевого действия.

Это достигается за счет того, что лендинг пейдж разрабатывается только под одно предложение и подразумевает совершение единственного возможного действия. Здесь работает принцип «buy or die!» («купи или умри»), то есть размещенный на посадочной странице контент не допускает никаких альтернативных действий потенциального клиента, кроме совершения того одного, под которое он написан.

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

В зависимости от желаемых действий, целями создания лендингов являются:

1. получение контактных данных посетителя, в основном речь идет об email. Таким образом происходит формирование базы данных пользователей. Далее, с помощью email-маркетинга, из участников такого списка можно сделать полноценных клиентов. Чтобы вы захотели оставить свои контакты, в обмен на них целевая страница предлагает некий бонус, зачастую это: скачать какой-то курс без оплаты, получить бесплатную консультацию и т.п. Вот классический пример такого варианта:
   

2. продажа товара или услуги. Если предлагается приобрести товар, то среднестатистическая посадочная страница в таком случае приобретает формат автономной карточки данного товара. Мы видим качественные фото, характеристики объекта, его преимущества и кнопки для совершения покупки. Вот так выглядит универсальный шаблон лендинг пейдж для WordPress, подходящий для презентации какого-либо предмета торговли:
   

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

   

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

Как сделать качественную посадочную страницу?

Прежде чем мы перейдем к разбору инструментов, дадим ответ на вопрос: как сделать лендинг пейдж таким образом, чтобы он действительно имел высокую конверсию и приносил прибыль?

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

Первый «кирпичик» идеального лендинг пейдж на WordPress и не только – первый экран. Это тот самый блок, условно можно назвать его шапкой, который виден посетителю сразу после загрузки страницы до момента скроллинга. Суть первого экрана – в привлечении внимания пользователя с целью удержать его на странице как можно дольше. Он должен быть спроектирован таким образом, чтобы «цеплять» гостя и вызывать у него желание изучить остальной контент. Какие же компоненты располагаются в этой части посадочной страницы?

1. Логотип. Не обязательный, но желательный элемент. Его присутствие позволяет идентифицировать вас и тем самым увеличивает степень доверия к вашей компании.
2. Дескрипт. Короткий текст, описывающий, чем вы занимаетесь, на чем специализируетесь.
3. Контакты. Еще один инструмент повышения доверия. Преимущественно это номер телефона и кнопка заказа обратного звонка, но допускаются и другие удобные способы связи.
   Схематически верхняя полоса целевой страницы может иметь такой вид:
4. Заголовок. Уникальное торговое предложение (УТП) — это то, под что создан лендинг. И вполне закономерно, что именно в заголовке оно и должно находиться. Именно заголовок с первых секунд пребывания на сайте говорит посетителю, что он перешел по правильному адресу и о чем здесь будет идти речь.
   Чтобы максимально исчерпывающе передать УТП, прибегают к такому стандарту:
    — основной заголовок. Эта часть лаконичная, ярко выраженная (с точки зрения дизайна). Продающий заголовок значительно влияет на конверсию. Для формирования основной части следует использовать релевантные слова, т.е. те, которые приводят посетителей из поисковиков на целевую страницу;
    — подзаголовок. Может использоваться для уточнения основного заголовка или обозначения еще одной выгоды.
5. Изображение/видео как демонстрация продукта или услуги. Должны быть исключительно высокого качества. Картинка или ролик могут служить нескольким целям: способствовать усилению эмоции, ассоциирующейся с УТП, иллюстрировать пользу или взаимодействие с продуктом.
6. Кнопка СТА. СТА – Call To Action, призыв к действию, размещается на кнопке. Именно этот элемент и становится первым из рычагов, конвертирующих потенциального клиента в реального.
   Данная кнопка призывает посетителя совершить желаемое действие. И поскольку она имеет очень важную миссию, ее оформлению стоит уделить внимание. Если вам предстоит создать Landing Page самому, проследите, чтобы кнопка  содержала предельно понятный и четкий призыв к действию («Записаться на тест-драйв», «Заказать бесплатную консультацию»), имела контрастное по отношению к фону цветовое оформление, была большой и кликабельной.

   

7. Иногда на первом экране размещается форма обратной связи. Таким образом структура лендинга позволяет легко найти этот элемент среди прочего контента. Число полей формы должно быть минимальным и требовать от посетителя только самую необходимую для вас информацию. Оптимально: email и имя.

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

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

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

Как видим, в данном блоке будет уместна конкретика, описывающая реальную ценность предложения.

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

Следующая структурная часть – доказательства авторитетности бренда. Цели окончательно подтолкнуть пользователя к покупке служат расположенные в этом блоке: отзывы клиентов и СМИ, сертификаты, награды, имена заслуживающих доверия партнеров или клиентов, примеры работ, показатели в цифрах.

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

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

Завершающую структурную часть целевой страницы можно условно обозначить как футер. Здесь в обязательном порядке должен находиться Call To Action. В остальном допускается, на ваше усмотрение, расположение следующих элементов: форма обратной связи, дополнительные контакты, ссылки на форумы и прочие источники дополнительной информации, кнопки социальных сетей.

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

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

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

Чтобы сделать Landing Page на WordPress действительно продающим, особое внимание стоит уделить закрытию возражений. Возражения клиента – это доводы пользователя, почему он не хочет приобрести товар или услугу. Например: «у вас дорого», «я встречал дешевле», «какие гарантии качества?», «а если вы возьмете предоплату и исчезнете?», «не знаю, какой вариант выбрать», «а точно успеете за 3 дня?», «и какой результат я получу, если схожу на ваш семинар?». То есть допускается ситуация, что ваше УТП интересно потенциальному клиенту, но у него возникают сомнения. Эти сомнения вам и необходимо предвидеть.

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

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

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

Особенности шаблона для посадочной страницы

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

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

Но если для блога выбор оформления – это скорее вопрос вкуса и трендов, то для Landing Page дизайн – это инструмент конвертации посетителя в клиента. С помощью дизайна расставляются акценты на нужных местах посадочной страницы. Это способствует определенному, выгодному для вас, восприятию информации пользователем. Рассмотрим основные требования к дизайну Вордпресс-темы лендинг пейдж:

• желательно, чтобы высота первого экрана не превышала 700 пикселей;
• основной заголовок (h1) рекомендуется размещать слева или по центру. Он должен иметь хорошую читаемость, поэтому, если фон первого экрана не однотонный, сложный, обратите внимание на то, чтобы под текстом располагалась полупрозрачная подложка;
• форма и кнопка СТА должны быть контрастными по отношению к фону (если фон темный – форма светлая, и наоборот, а кнопка призыва к действию — яркая). Количество полей — минимальное;
  
• отдайте предпочтение теме, в которой используются шрифты без засечек и в количестве не более двух;
• выбирая шаблоны лендинг пейдж для Вордпресс, остановитесь на тех вариантах, где много свободного пространства. Что это значит? Следует избегать нагромождений текста и изображений. Стиль минимализма дает возможность сконцентрировать внимание потенциального клиента на основном и выделить кнопки СТА.

При желании, овладев основами, вы можете самостоятельно отредактировать файлы шаблона, файл стилей style.css, изменить  или добавить шрифт по своему вкусу и в соответствии с вашим УТП. Это предоставит вам большую свободу в выборе темы для создания Landing Page на WordPress.

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

pro-wordpress.ru

WordPress landing page templates

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

 Предоставляю вам краткий список неплохих шаблонов для WordPress:

 

LandX

 

AERIS

Платный шаблон Aeris для создания обычных сайтов и  лендинг пейдж вордпресс.

Цена: $48

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

Получить ссылку на (DEMO)

 

Event

Платный wordpress landing page template — Event

Цена: $58

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

Получить ссылку на (DEMO)

Новые wordpress landing page templates

к менюКоличество страниц лендинг на wordpress растет с каждым днем, при этом шаблоны становятся все лучше и лучше. Представляю вашему вниманию подборку шаблонов wordpress landing page.

(нажимайте на название шаблона ниже и смотрите его описание, скин, ссылку на демо и так далее)

 

Бесплатная тема WordPress для landing page – Moesia

к менюСоздавал заказчику сайт и набрел на чудесную тему для создания одностраничника — лендинг пейдж. Унифицированная тема Moesia позволяет создавать как обычные сайт визитки, так и красивые одностраничники. Среди ее возможностей:

• анимация части контента
• блоки для оформления услуг
• для продажи електронных товаров
• слайдер изображений
• отзывы / комментарии
• наши проекты
• адаптив

Это поверхосное описание темы, более подробно предлагаю посмотреть на скинах, сначала фронтенд:

 

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

 

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

Ссылка на демо: Demo Moesia

Бесплатно скачать тему можно с WP репозитория: скачать Moesia

Также, перейдя по этой ссылке вы можете посмотреть еще один бесплатный лендинг шаблон для wordpress.

 

 

WordPress лендинг своими руками

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

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

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

1. Нарисовать PSD макет или заказать у дизайнера. Желательно сразу говорить что нужен адаптивный макет, иначе иОсы и Андроиды будут воротить нос от вашего landing page.
2. Качественно сверстать PSD макет, желательно с использованием HTML5 и CSS3 — это придаст даже самому простому дизайну статуса и вида, а от сюда доверие к вашему сайту.
3. Натянуть HTML макет на Вордпресс или проще говоря создать шаблон landing page.

Дальше, я расскажу вам о последнем и самом важном пункте (3).

Как создать шаблон WordPress лендинг пейдж из готового HTML

Для просмотра краткого урока по созданию лендинг пейдж на ВП нажимайте на переключатели ниже, шаг за шагом:

Я привык делать шаблон landing page так, чтоб каждая страница с нашего меню, была отдельной страницей в нашем WP:

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

 

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

Делается приблизительно вот так если это просто текстовая информация:

ид 8 — это конкретно та страница что нам нужна

или вот так если это слайдер или каталог:

Это примитивные ветки, свободные циклы вордпрес, которые я уже не раз описывал как делать циклы WordPress

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

в do_shortcode вставлен код вызова Contact Form 7.

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

Большим плюсом такого landing page будет скорость его загрузки и возможность править с админки. Ведь простенькие лендинги, созданные на чистом ХТМЛ, не позволяют легко править контент без знаний тегов и стилей. Вордпресс позволяет делать лендинги удобными для наполнения и правки во время сопровождения сайта.

P.S.: Конечно сделать и показать уникальный пример создания wordpress landing page — это одно, а заточить уникальный хтмл мактет лендинга под Вордпресс более сложная задача, тем более, что в одном уроке сложно показать все возможности WP для создания одностаничников.

Буду рад помочь вам советом, если у вас возникли трудности по созданию сайта одностраничника ? 

Как создать крутой лендинг на wordpress

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

Основными преимуществами такого плагина для создания wordpress лендинга есть:

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

Подробно прочесть о том как создать крутой лендинг на wordpress можно вот здесь: https://help-wp.ru/acf-for-wordpress-landing/

 

Создать лендинг пейдж на вордпресс с помощью плагина

к менюСуществуют плагины, которые позволяют сделать лендинг на вордпресс проще чем писать шаблон с ноля. Предлагаю вам краткий обзор плагинов для wordpress landing page:

WordPress Landing Pages

Функциональный плагин который позволяет делать лендинг на вордпресс. Конечно назвать его легким и простым в управлении и создании не поворачивается язык. Без хороших знаний ВП у вас особо ничего не получится. Да и странички простенькие будут, но как легкий вариант лендинга пройдет.

help-wp.ru

WPPAGE — САМЫЙ ПРОСТОЙ ГЕНЕРАТОР LANDING PAGE ДЛЯ WORDPRESS

Просто посмотрите видео о данном плагине:

 

ПЕРЕЙТИ НА САЙТ WPPAGE!

20 преимуществ «wppage» над конкурентами!

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

1. А/Б сплит-тестирование. Сплит-тест позволит узнать, какой вариант страницы работает лучше всего.
2. «Статист» — Сколько человек посетило каждую из ваших страниц? Как долго они проводят там время?
3. Сервисы отслеживания от 3-их сторон! Хотите использовать Google.Analytic или Яндекс.Метрику на своих страницах? Нет проблем!
4. Дизайн-редактор страниц. С лёгкостью меняйте задний фон страницы на абсолютно любой цвет, существующий в природе… либо поставьте изображение, например, гавайского пляжа – такая возможность тоже есть!
5. Все виды целевых страниц. В вашем распоряжении все виды целевых страниц для полноценного интернет-маркетинга: Подписная (или Страница Захвата), Продающая, Посадочная, Страница подтверждения подписки, «Спасибо» страница, Страница регистрации, Страница-анкета. и т.д
6. Медиа-Страница. Эксклюзивный формат подписной страницы. Хотите сделать страницу захвата с видео?
7. Разделитель Страницы. Разделяет страницу на 2 блока, открывая для интернет-маркетёров серьёзные возможности для увеличения конверсии!
8. Встроенные Сервисы Почтовых Рассылок.Хотите организовать сбор подписчиков? В несколько кликов подключите любой из 5 популярных сервисов рассылок (smartresponder, justclick, getresponse, unisender, mailchimp), избавив себя от лишней технической рутины.
9. Встроенная Платёжная Система. Планируете продавать свой / чужой продукт? Нет проблем. Интегрированная платёжная система «Интеркасса» позволит Вам принимать платежи всеми популярными способами: смс, webmoney, яндекс.деньги, терминалы и т.д.

10. Боксы Для Отзывов. Нужно выделить отзывы, цитаты, кейсы и другие данные в тексте? Тогда используйте специальные боксы, доступные в 11 различных цветах!

11. Маркетинговая Графика. Придайте своей странице блеск, с помощью продающей маркетинговой графики и вы моментально завоюете своих посетителей!
12. Стильные Списки. Все профессионалы используют стилизованные списки вместо стандартных. Это увеличивает привлекательность текста и показывает профессионализм.
13. Анкеты, Опросы и Формы Регистрации. Намечается тренинг или запуск закрытой программы? А может вам нужно просто узнать проблемы и потребности ваших подписчиков, чтобы создать продукт-бестселлер?
14. Кнопки Социальных Сетей. Дайте возможность посетителям рекомендовать вашу страницу друзьям и автоматически получайте бесплатных потенциальных клиентов!
15. 3-в-1 комментирование. Если вам нужно комментирование на конкретной странице, это легко устроить! Причём, вы можете выбрать из трёх вариантов – Facebook, Вконтакте или родное WordPress комментирование.
16. Таймер обратного отсчёта. Идеальный вариант, чтобы подчеркнуть дедлайн (крайний срок).
17. Редактор «вируса» в соц. сетях. Как вы уже знаете, при нажатии кнопки «Мне нравится» одной из социальной сети, информация об этом отправляет на стену кликнувшего.
18. Видео-вставка. Записали красивое видеообращение на фоне Ниагарского водопада и теперь хотите вставить его на свою целевую страницу? К ваши услугам установка видео в пару кликов, как напрямую с других сайтов (в т.ч. c youtube), так и со своего.
19. Аудио-Вставка. Хотите лично поприветствовать своих посетителей или дать им отрывок из вашего выступления? Нет проблем!
20. Быстрая интеграция любого кода (скрипта). Нужно установить на страницу какой-либо скрипт или вставить код Яндекс.Метрики для отслеживания? Тогда у нас хорошая новость…

ПЕРЕЙТИ НА САЙТ WPPAGE!

sadovnikov.biz

1. WordPress Landing Pages

[wp-pic type=»plugin» slug=»landing-pages» layout=»large» ]

Плагин WordPress Landing Pages – бесплатный простой плагин, предоставляющий некоторые базовые функции в создании лендинг страниц.

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

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

• Визуальный редактор, имеющий возможность предварительного просмотра изменений в реальном времени.
• Наличие разработанных шаблонов (с одним и несколькими столбцами, таймеры обратного отсчёта и т. д.)
• Использование текущей темы в качестве базовой для новых целевых страниц, а также возможность создавать новые полностью настраиваемые шаблоны.
• Отслеживание преобразований.
• Встроенная функция A/B-тестирования.
• Встроенный мастер создания форм.
• Премиум функции: Наличие аддонов и интеграция с программным обеспечением email-рассылок, другими инструментами работы с внешними ресурсами.

Достоинтва:

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

Недостатки:

• Шаблоны по умолчанию не очень привлекательны.
• Для того, чтобы создать действительно продвинутую во всех отношениях целевую страницу, используя аддоны, вам потребуется потратить немалые средства.
• Для работы на всех устройствах требуется версия PHP 5.3+.

2. Parallax Gravity – Landing Page Builder

[wp-pic type=»plugin» slug=»parallax-gravity-landing-page-builder» layout=»large» ]

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

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

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

• Возможность включать в себя любое количество блоков контента на целевой странице.
• Каждый раздел может иметь свой собственный фон (одноцветный или фон с изображением)
• Для каждого раздела может быть использован тот же интерфейс, который используется в WordPress для постов и страниц.
• Премиум функции: Наличие блоков с параллаксом, поддержка Google-аналитики, шорткоды для заголовков, кнопки и навигация между отдельными разделами.

Достоинства:

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

Недостатки:

• Имеется только один тип для блоков с контентом, который вам придётся настроить под себя, чтобы получить нечто уникальное.
• Некоторую работу придётся сделать вручную. Например, интегрировать лендинг страницу с вашим сервисом email-рассылок.

3. Qards

Стоимость: от $99

Плагин Qards – новое творение от команды Designmodo. Он предлагает неплохой функционал и работает с большинством тем WordPress.

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

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

• Поддержка функции перетаскивания drag-and-drop (в том числе медиа-файлов прямо с рабочего стола)
• Возможность редактирования из пользовательской части сайта.
• Полностью отзывчивые целевые страницы.
• Не требуется навыков кодирования для того, чтобы работать с плагином.
• Имеется большой набор красивых карт контента.
• Имеются в наличии пользовательские CSS и HTML-редакторы для продвинутых пользователей.
• Плагин работает с WooCommerce.
• Доступны видео-уроки.

Достоинства:

• Чрезвычайно простой в использовании – вы можете сразу приступить к работе без чтения какой-либо документации.
• Все индивидуальные карты отлично смотрятся и требуют очень мало настроек.
• Возможность работать с вашей темой и использовать при этом плагин для отдельных целевых страниц.
• Возможность превратить любую лендинг страницу в домашнюю страницу.

Недостатки:

• Нет функций поддержки собственных маркетинговых лендинг страниц, таких, как отслеживание изменений или сплит тестирование.
• Плагин несколько дороговат – особенно лицензия Agency, хотя цена $199 позволяет использовать плагин всего на пяти сайтах.

4. Thrive Content Builder

Стоимость: от $59

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

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

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

• Поддержка функции перетаскивания drag-and-drop.
• Возможность редактирования из пользовательской части сайта.
• Возможность интеграции с пользовательской темой.
• Имеются предварительно оформленные блоки контента и элементы страниц, такие, как кнопки, отзывы, формы для гарантий и многое другое.
• Полностью отзывчивый для мобильных устройств.
• Имеется визуальный редактор таблиц HTML.
• Имеется возможность вручную редактировать HTML и CSS.

Достоинства:

• Интуитивно понятный интерфейс, интегрированный со стандартными страницами WordPress (функциональность плагина может быть включена на любой странице).
• Возможность редактирования из пользовательской части выгодно отличает этот плагин от других.
• Имеется модуль, называемый Thrive Landing Pages, который позволяет пользователю осуществлять полный контроль над страницей, которую вы редактируете, например, удалять из неё заголовки, изменять макеты и др.

Недостатки:

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

5. VelocityPage

Стоимость: от $97

VelocityPage – отличный плагин WordPress, разработанный программистом Mark Jaquith. Jaquith, кажется, понимает не только недостатки и ограничения тем WordPress и лендинг страниц, но также знает и наиболее важные задачи для высокоэффективных целевых страниц.

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

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

• Возможность редактирования из пользовательской части с поддержкой drag-and-drop.
• Совместимость с интернет-магазином WooCommerce.
• Оптимизирован для работы с мобильными устройствами.
• Возможность использовать HTML-код.
• Имеется набор готовых блоков, которые можно использовать на любой странице.
• Обещает работать с 94% тем WordPress.

Достоинства:

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

Недостатки:

• Несмотря на то, что функция редактирования из пользовательской части очень полезна, в процессе редактирования вы не видите страницу в том виде, в каком она будет отображена на сайте. Вам придётся время от времени переключаться в режим просмотра.
• Плагин несколько дороговат. Профессиональная лицензия для использования на неограниченном количестве сайтов составляет $247.

6. LeadPages

Стоимость: от $37 в месяц

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

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

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

• Поддержка редактирования функцией drag-and-drop и редактирования из пользовательской части с помощью интерфейса LeadPages.
• Имеется три вида лицензий с тремя различными тарифными планами.
• Имеется огромная библиотека шаблонов лендинг страниц.
• Оптимизирован для работы на мобильных устройствах.
• Возможность импортировать ваш собственный дизайн лендинг страниц.
• A/B-тестирование.
• Работает со всеми известными провайдерами.
• Имеются персональные аккаунты для членов сообщества.
• Возможность интеграции с Facebook.

Достоинства:

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

Недостатки:

• Не позволяйте низкой цене обмануть вас. На самом деле это самый дорогой плагин в данном списке. Первый год использования будет стоить вам от $300. И это для самой дешёвой лицензии. Профессиональная лицензия составляет $480 за первый год, и это только начало.

Что же выбрать?

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

Для того, чтобы подвести итоги, давайте посмотрим на этот вопрос с разных точек зрения и немного поговорим о каждом конкретном плагине из этого списка:

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

Parallax Gravity – Landing Page Builder — это плагин с базовым функционалом, но он может быть очень полезен, если ваша пользовательская тема совсем не поддерживает целевые страницы. С помощью этого плагина WordPress вы сможете использовать свою тему на большей части сайта, а потом просто установить пользовательский макет плагина на небольшом количестве отдельных лендинг страниц.

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

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

VelocityPage — этот плагин предлагает расширенные возможности настройки и некоторые замечательные шаблоны лендинг страниц. Это хорошее решение для владельцев сайтов, которые хотят использовать несколько различных типов целевых страниц (например, для электронные книг, вебинаров) и при этом сохранить их главную тему для всего сайта.

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

Высокоэффективные целевые страницы являются одним из топ-инструментов маркетинга, который может принести вам дополнительный успех в бизнесе, не тратя дополнительные средства на привлечение партнёров. Чем больше количество лендинг страниц на сайте, тем выше ваши успехи. (По данным HubSpot, сайты с 10-15 лендинг страницами позволяет получить доход на 55% больше, чем сайты с 10 и менее лендинг страницами.)

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

Вы уже используете или использовали ранее какой-нибудь из вышеперечисленных плагинов? Какой из них, на ваш взгляд, является лучшим? Напишите об этом в комментариях!

clubwp.ru

Выбор и настройка шаблона для Landing Page

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

Из бесплатных шаблонов WordPress для создния Landing Page я могу вам посоветовать тему Vantage.

Преимущества данного шаблона WordPress:

• Позволяет выводить виджеты в правом верхнем углу шапки.
• Имеет много различных настроек.
• Есть два типа шапки.
• Позволяет переключаться между двумя типами макета страницы (широкоформатная страница или с фиксированной шириной).
• Адаптивный.
• Можно изменять количество колонок в футере.
• Бесплатный.

Основной недостаток шаблона:

• Не даёт возможность настраивать цвета сайта из админки.

Установить данный бесплатный шаблон можно из репозитория WordPress.

Для этого в административной части сайта переходим в раздел «Внешний вид» => «Темы».
Далее нажимаем кнопку «Добавить новую», вводим название шаблона в поисковую строку, а затем устанавливаем и активируем данную тему.

Для настройки данного шаблона нужно сделать следующее:

1. 1.Переходим в раздел «Внешний вид» => «Настроить».
2. 2.Далее, переходим в раздел «Theme Settings», и здесь нажимаем на ссылку Logo, после чего, на ссылку «Выбрать файл» и загружаем изображение.
3. 3.Так же, вы можете вместо надписи «Phone number» ввести свои контактные данные. Но я не советую вам это делать именно таким способом. Мы это лучше сделаем при помощи виджета.
4. 4.Возвращаемся в предыдущее меню, нажимая на стрелочку в верхнем левом углу и переходим в раздел «Layout». Здесь мы можем выбрать один из видов макета страницы:

   «Boxed» – макет страницы с фиксированной шириной.

   «Full Width» – макет на всю ширину страницы.

5. 5.В разделе Masthead Layout можно выбрать макет шапки для Landing Page
   «Default Masthead» — меню выводится под шапкой и справа можно вывести виджеты
   «Logo in menu» — меню располагается в один ряд с логотипом (виджеты в шапке в этом случае не выводтся)
6. 6.Далее, возвращаемся в предыдущее меню. Переходим в раздел «Navigation», и здесь мы, прежде всего, ставим галочку «Mobile menu», что бы у нас на мобильных устройствах появлялось мобильное меню.
7. 7.Далее, при желании, можно убрать эффект прилипающего меню. Для этого достаточно снять галочку «Sticky Menu».
8. 8.Так же убираем галочку «Search in Menu», что бы убрать иконку поиска. Потому как нам на Landing Page поиск, в принципе, не нужен.
9. 9.И в самом конце ставим галочку «Mobile Navigation».
10. 10.Теперь нажимаем на кнопку «Сохранить и опубликовать». Нажимаем на крестик в левом верхнем углу и переходим в раздел «Внешний вид» => «Виджеты».
11. 11.Здесь у нас есть область виджетов, которая называется «Header», в неё мы можем добавить свои контактные данные, либо кнопку для всплывающей формы. Для этого воспользуемся виджетом «Текст».
12. 12.Если вам нужно указать просто один номер телефона, то вы можете ввести его в заголовке. Если же вам нужно будет вставлять какой-то фрагмент кода, или фрагмент текста, то вы вставляете его в поле «Содержимое».

    Здесь можно вывести всплывающую форму «Заказать звонок». Если вы не знаете, как на WordPress можно создать такую форму, то вот ссылка на статью с пошаговой инструкцией и видео.

13. 13.Фрагмент кода из статьи про всплывающие формы нужно вставить в поле «Содержимое» в виджете «Текст». В данном коде нужно будет удалить или заменить надпись «Текст», заменить шорткод формы обратной связи на свой, а также изменить текст надписи на кнопке. Из этой же статьи можно взять CSS код для стилизации ссылки.
14. 14.После этого нажимаем на кнопку «Сохранить».

Редактирование меню

Далее, переходим к редактированию меню Landing Page. Для этого:

1. 1.Заходим в раздел «Внешний вид» => «Меню» и добавляем сюда нужные пункты как произвольные ссылки. Сейчас я здесь буду в качестве ссылки ставить решетку, а затем, когда у меня будет сформирована структура страницы, я буду здесь проставлять якоря, при помощи которых можно будет переходить в различные части страницы.
2. 2.После того, как все пункты добавлены, смотрим, что бы у нас была выбрана область темы и нажимаем на кнопку «Сохранить меню».

Создание структуры Landing Page

Для облегчения работы по созданию структуры страницы воспользуюсь бесплатным плагином Page Builder By Site Origin.

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

• Данный плагин не даёт большой нагрузки на сайт.
• Имеет визуальный редактор и набор дополнительных виджетов.
• Помимо своих виджетов он позволяет так же задействовать стандартные виджеты WordPress, а так же виджеты других плагинов.
• Позволяет создавать адаптивные страницы.
• Работает практически со всеми шаблонами и плагинами WordPress.
• Бесплатный.

Устанавливается он так же как и все остальные плагины.

После установки и активации переходим к формированию непосредственно самой структуры страницы.

1. 1.Для этого создадим новую страницу. Заходим в раздел «Страницы» => «Добавить новую», назовем ее «Главная».
2. 2.Здесь, сразу же в правой части окна, в поле шаблон, нам нужно выбрать «Full Width Page No Title». Это позволяет нам сделать данную Landing Page на всю ширину без использования сайдбаров и без вывода заголовка страницы.
3. 3.Теперь мы видим, что у нас, помимо обычных вкладок «Визуально» и «Текст», появилась вкладка «Page Builder». Переходим на нее и здесь мы видим панель инструментов данного плагина. Для формирования структуры Landing Page мы будем использовать две основные кнопки, это «Добавить строку» и «Добавить виджет».
4. 4.При добавлении строки мы можем задавать, сколько колонок будет расположено в этой строке. При этом можно регулировать ширину каждой из колонок путем перетаскивания границы. В моем случае сейчас понадобится одна колонка. После выбора параметров нажимаем на кнопку «Вставить».
5. 5.Далее, мне нужно добавить в эту строку какой-то виджет. Для этого я кликаю по ней и затем нажимаю на кнопку «Добавить виджет».
6. 6.Для того, что бы вывести в строке текст, форму или изображение можно использовать виджет «Site Origin Редактор». Единственное, для того, что бы этот редактор работал, нужно будет доустановить еще один плагин. Он называется «Набо виджетов Site Origin».
7. 7.После вставки данного виджета наводим на него курсор и нажимаем на ссылку «Редактировать», после чего переходим по предложенной ссылке «набор виджетов Site Origin» для установки плагина, а затем активируем его.
8. 8.Теперь вернемся к редактируемой странице, закроем данный виджет и нажмем на кнопку «Опубликовать» для того, что бы страница обновилась и WordPress увидел установленный плагин.
9. 9.Теперь, если мы нажмем на ссылку «Редактировать» на добавленном виджете, то у нас откроется визуальный редактор, в котором мы можно добавить свой текст, изображение или шорткод. После внесения изменений нажимаем на ссылку «Выполнено».
10. 10.Для задания фона для строки Landing Page наводим курсор на ключик в верхней правой части строки и выбираем здесь пункт редактировать строку.
11. 11.У меня открывается панель с правой стороны, которой есть три вкладки: «Атрибуты», «Макет» и «Дизайн».

    На вкладке «Атрибуты» можно дописать для этой строки дополнительный идентификатор, дополнительный класс строки, дополнительный класс для ячеек, которые будут размещаться внутри данной строки, а так же можно здесь прописать css-свойства.

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

12. 12.Для того, что бы строка была на всю ширину страницы, нужно изменить здесь макет строки. По умолчанию он будет как бы обрезанный, то есть, с фиксированной шириной. Чтобы сделать его на всю ширину, выбираем пункт «Во всю ширину».
13. 13.Теперь переходим к вкладке «Дизайн». Здесь мы можем задать цвет фона, нажив на кнопку выбрать цвет. Открывается палитра, в которой можно задавать тот цвет, который вам больше нравится.
14. 14.Так же, вы можете здесь выбрать какое-то фоновое изображение для данной строки . Для этого нажимаем на кнопку выбрать изображение и загружаем его с компьютера.
15. 15.На этой же вкладке можно задать позицию фонового изображения и применить к нему паралакс-эффект. После внесеия изменений нажимаем на кнопку «Выполнено» в нижнем правом углу.
16. 16.Для того чтобы увеличить высоту определённой строки можно задать для неё верхний и нижний отступ. Для этого на панели редактирования строки переходим на вкладку «Макет».

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

Нажимаем на ссылку «Добавить строку», задаем здесь четыре колонки и нажимаем «Вставить». Теперь добавляем в одну из колонок тот же виджет «Site Origin Редактор».

Для данного виджета можно, точно так же как и для строки, задать различные параметры. Нажимаем на ссылку «Редактировать» точно так же справа, видим три вкладки: «Атрибуты», «Макет» и «Дизайн». Содержимое этих вкладок немного отличается от тех, которые были для строки.

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

Аналогичным образом мы можем копировать строки и менять их местами. Для этого наводим указатель мышки на ключик и выбираем пункт «Скопировать строку», а затем наводим курсор на стрелочку и зажимаем левую кнопку мышки и перетягиваем эту строку в то место, куда нам нужно.

Для удаления строки, точно так же, наводим указатель на ключик и нажимаем на ссылку удалить строку, а затем нажимаем на ссылку «Вы уверены».

Вот таким образом вы можете добавлять другие строки и блоки на вашу Landing Page и заполнять их текстом и изображениями.

Добавление карты на Landing Page

В Landing Page часто используются карты Яндекс или Google. Для того, что бы добавить такую карту, вам нужно:

1. 1.Cгенерировать скрипт на специальном сервисе Яндекса или Google. Более подробно о том, как это сделать вы можете узнать из следующих статей:

   Как вставить карту яндекс на сайт WordPress
   Как добавить гугл карту на сайт

2. 2.Добавляем новую строку. Делаем для нее ширину 100%, после чего, в разделе макет нам нужно задать «Во всю ширину (растянуто)», и сделать нижнее поле 0 px. Нажимаем на кнопку «Выполнено» и добавляем в эту строку виджет текст.
3. 3.Теперь в данный виджет нам нужно вставить скрипт, который мы получили в сервисе Яндекс.Карты.
4. 4.Далее, нажимаем на кнопку «Выполнено» и нажимаем на кнопку «Обновить» чтобы изменения применились.

Доработка шаблона WordPress

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

Более подробно о внесении изменений в тему WordPress, вычислении классов, идентификаторов и дописании им дополнительных свойств вы можете узнать из этой статьи:

Изменение темы WordPress. Определение Class и ID

Если вы будете использовать данный шаблон для создания своей Landing Page, то вам нужно будет в конце файла style.css для блока с идентификатором main задать следующие свойства:

После чего нажать на кнопку «Обновить файл».

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

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

Если статья была для вас полезной – не забудьте нажать на одну из кнопок соцсетей ниже.
А также подписывайтесь на рассылку чтобы не пропустить ничего нового.
Хорошего вам дня! Жду вас в следующей статье 🙂

С уважением Юлия Гусарь

impuls-web.ru