Как сделать лендинг на WordPress? Подробная инструкция. — 🚀 Land-site.ru

Многие веб-мастера рассматривают одностраничник не как сайт, а как рекламную кампанию. Целевая страница является эффективным способом разрекламировать определенный продукт и резко повысить число его продаж. Самостоятельно верстать лендинг – не самая простая задача, особенно для новичков, которые привыкли работать разве что с простейшими CMS и конструкторами. Поэтому сегодня я решил рассказать, как Landing Page WordPress позволяет создать буквально за несколько шагов. Есть куча платных дополнений для WP – и они действительно стоят своих денег, но отойдем от самых лучших и дорогих дополнений, рассмотрев исключительно бесплатные способы создания лендинга на данном движке.

Кратко о терминологии. Одностраничная (целевая) страница – это промо-сайт, цель которого разрекламировать один или два товара и убедить посетителей приобрести его прямо через лендинг. Также LP позволяет продавать информационные материалы и различного рода услуги.

Создание лендинга на CMS WordPress

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

Самое главное, это в административной панели перейти в раздел «Плагины». Кликнуть по кнопке «Добавить новый». Вбить в поисковую строку «Free Landing Pages Builder by Wishpond», установить и активировать плагин. По названию понятно, что дополнение распространяется бесплатно.

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

Преимущество плагина by Wishpond

1. Так как дополнение выступает в роли конструктора, лендинг на WordPress мы будем буквально собирать с помощью мышки. Установить блоки, удалить их, переместить можно за считанные секунды. Есть полноценная панель инструментов.
2. Функциональность целевой страницы – это замечательно. Но нужно сделать еще ее и красивой, с чем плагин отлично справляется. Панель инструментов позволяет «от и до» менять даже не общий дизайн, а внешнее оформление любого блока и любой области лендинга.
3. Есть возможность анализа статистики LP – сколько человек посетило страницу, сколько лидов за час/день/неделю, количество просмотров страницы и так далее.
4. Больше сотни бесплатных шаблонов (тем конкретно для лендингов, а не многостраничных страниц). Менять в этих шаблонах вы можете все, что угодно – но нужно будет работать с кодами. Совет: если с кодами возиться не хотите при редактировании тем, есть специальные плагины для визуального редактирования кода.
5. Удобное управление целевыми страницами. Это огромный плюс для веб-мастеров, которые собираются создать не один одностраничник, а несколько.
6. С помощью плагина LP можно дополнить готовыми всплывающими окнами. Есть возможность создания своих форм.

Недостатки плагина by Wishpond

1. Отсутствует русификация. Но это не особо большая беда, поскольку интерфейс интуитивно понятен. Если какие-то термины вам непонятны, добро пожаловать в мир онлайн переводчиков!
2. Есть платная версия дополнения. И чем чаще вы будете пользоваться плагином, тем больше будет желания его приобрести. При постоянной работе осознаешь, что некоторых функций все-таки не хватает, а для их активации нужно купить плагин. Если конкретизировать, то бесплатное дополнение позволяет собирать не более двухсот лидов. Но от этого ограничения можно избавиться путем установки сторонних форм подписок, а не встроенных.
3. Есть копирайт, который будет мелькать внизу сайта – проблема небольшая, но масштабный серьезный проект с чужим копирайтом? Это как минимум нелепо.
4. Дополнение сильно нагружает сервера. Поэтому если ваш LP будет открываться 10 секунд, не удивляйтесь. Отметим, что если напичкать целевую страницу всевозможными формами, веб-ресурс будет еще медленнее открываться – а это прямой путь к потере большого количества лидов.

Инструкция по созданию целевой страницы на WordPress

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

1. Как я уже сказал, русского языка нет, поэтому жмем для регистрации по надписи «SIGN UP».
2. Выбираем пункт «STAR TRIAL FREE».
3. Остается только ввести E-mail, указать пароль (запишите его, ибо восстанавливать пароль в плагине одно мучение).
4. Теперь нажимаем по единственной кнопке в окне — «Записаться»
5. Перед нами откроется куча полей. Но пока они нас не интересуют. Поэтому сразу приступаем к созданию страницы, нажимая на кнопку «NEW LANDING PAGE».

Разбирать подробно все функции от «а до я» не буду. Пробежимся по самым важным аспектам дополнения, которые жизненно необходимы при создании Landing Page на WordPress.

1. Жмем по кнопке «Landing Page».

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

1. Выбрали понравившуюся тему и оценили ее? В таком случае кликаем по надписи «Choose Template» и едем дальше.
2. Выбранная тема должна открыться. В этом окне мы можем отредактировать нужную область. В левой области экрана вся панель инструментов. Что-то поменяли? В таком случае справа отобразятся наши изменения. Блоки перемещать будем также в этом окне. Все настройки не забудьте сохранить. Основная область, на которой нужно зациклить внимание, находится в верхней части окна. Здесь самые главные функции.
3. Настраиваем мета-теги через функцию «Setting». Этот пункт нужен не для настройки внешнего вида целевой страницы, а для его SEO-оптимизации. Пропишите теги (ключевые слова), по которым ищут пользователи продаваемый вами товар. Также здесь мы можем изменить шрифты, установить новые шаблоны, скачать их и так далее.
4. Проверяем адаптивность сайта через пункт «Preview». Изменили дизайн, настроили блоки, теперь активируем предпросмотр и видим, как сайт выглядит с ПК, планшета, смартфона. Важно, чтобы со всех устройств лендинг был красив, удобен и понятен.
5. Чтобы сохранить все изменения, жмите по кнопке «Save as draft». Сделать это нужно обязательно! Если закроете случайно или намеренно страницу, все ваши нововведения улетучатся.
6. Если вы наполнили сайт контентом, установили все блоки, убедились, что формы подписки работают успешно, можно приступать к публикации лендинга. Для выполнения этой задачи кликаем по «Publish».
7. Перед тем, как лендинг для WordPress опубликуется, нам нужно будет указать его название – как сделать правильное название целевой страницы, читайте
   здесь. Также нужно вбить адрес нашего сайта, на котором будет опубликован лендинг – именно поэтому я говорил, что нужно заранее подготовить пустой ресурс на данной CMS.

LP по указанному URL-адресу сразу должен заработать. Если вы все сделали правильно, можно приступить к продвижению лендинга с помощью контекстной рекламы, SEO оптимизации и так далее. Я перечислил далеко не все тонкости и нюансы плагина. Но чтобы создать вполне адекватный Landing для WordPress, пусть и не эксклюзивный, достаточно совершить выше перечисленные действия.

Ответы на частые вопросы 

1. Это самый простой способ создания Landing Page?

Нет. Способ подходит для тех, кто уже работал с самостоятельными CMS и разбирается в WP. Если нужно сделать лендинг за 5 минут без работы с кодами и плагинами, пользуйтесь лучшим, по моему мнению, онлайн-конструктором Bloxy.ru. Подробнее о нем можете прочитать в этой статье.

2. Есть ли видео-уроки по созданию лендинга на ВордПресс бесплатно с помощью этого плагина?

Конкретно под это дополнение видео нет. Поэтому можете работать с двумя другими названными в статье плагинами. Для них несколько видео-уроков есть.

3. Как активировать стороннюю форму подписки?

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

4. Невозможно работать с плагином, выдает ошибку «occured error».

Если не удается запустить плагин, ищите причины в следующем:

• У вас установлены другие дополнения, которые не могут работать с «Free Landing Pages Builder by Wishpond». Удалите ненужные плагины.
• У вас установлена не стандартная тема из коллекции WP. Нужно сменить шаблон и убедиться, что он никак не корректировался вами.
• У вас проблемы с хостинг-провайдером. Если веб-ресурс работает на локальном сервере, плагин запустить не удастся. Нужно, чтобы провайдер поддерживал язык программирования PHP. Также лучше делать сайты на последних версиях PHP, чтобы дополнение гарантированно работало.

5. Можно ли сделать подвижными кнопки, эффект увеличения элемента при наведении на него курсора, как на современных целевых страницах?

Есть специальная опция «Анимация» для реализации подробных задач. Также присутствует масса настроек анимации.

6. «Я смогу работать с встроенными элементами и формами только до того момента, пока не будет 200 лидов»?

Нет! Ограничение касается только формы подписки. Под этой формой подразумеваются несколько граф, в которые пользователь вводит данные. Дальше эти данные получает веб-мастер в административной панели.

7. Как видят лендинг поисковые системы?

Проблем с индексацией не возникает. Поскольку Яндекс и Google распознают сайт не как LP, а как очередной проект на WordPress. Для более быстрой индексации веб-ресурса заполните его уникальным контентом. Сделать это можно также через плагин, либо через саму административную панель WP.

8. Landing Page «расплывается» при его открытии со смартфона, изменение настроек в плагине не помогает, что делать?

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

9. Как установить таймер (обратный счетчик) на LP?

К сожалению, разработчики не добавили плагин таймера. Однако, в административной панели в разделе «Плагины» можно найти специальные дополнения для добавления обратного счетчика. Если их установить, работоспособность плагина для создания Landing Page не ухудшится.

10. Хочу изменить шрифты и цветовую гамму на лендинге, через плагин сделать это не удается.

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

Итог

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

Создание landing page на WordPress

Приветствую вас на сайте Impuls-Web!

Продолжаем рассматривать способы создания Landing Page и в данной статья я покажу вам как можно самостоятельно создать Landing Page на базе CMS WordPress.

В качестве примера я буду использовать CMS WordPress, но для создания Landing Page можно также использовать и другие движки.

Навигация по статье:

Выбор и настройка шаблона для 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 задать следующие свойства:

#main{ padding:0px!important; }

#main{ padding:0px!important; }

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

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

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

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

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

Как​ ​сделать​ ​лендинг​ ​(landing​ ​page)​ ​на​ ​WordPress – База знаний Timeweb Community

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

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

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

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

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

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

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

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

Сложность 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” и сохраните:

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

Удачи.

Редактирование Landing Page на WordPress

Приветствую вас на сайте Impuls-Web!

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

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

Навигация по статье:

Настройка навигации

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

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

1. 1.Наводим курсор на ключик в верхнем правом углу строки, выбираем «Редактировать строку».
2. 2.В разделе «Атрибуты» в поле «row id» ставим решетку, и вводим какой-нибудь идентификатор для данной секции Landing Page.

   Идентификатор обязательно должен состоять только из латинских букв. Теперь мы этот идентификатор копируем и нажимаем на кнопку «Выполнено».

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

Создание дубликатов Landing Page

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

Это позволит вам с легкостью создавать на одном сайте неограниченное количество страниц Landing Page.

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

1. 1.Копируем его название и переходим в раздел «Плагины» = > «Добавить новый». Вставляем название в строку поиска, и теперь нажимаем на кнопку «Установить», а после установки нажимаем «Активировать».
2. 2.Теперь вернемся в раздел «Страницы» => «Все страницы». После установки данного плагина у нас, при наведении на название страницы, появляется еще дополнительна ссылка «Клонировать».

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

3. 3.Далее, вы нажимаете на ссылку «Изменить». Задаете ей какое-то другое название, что бы потом не путаться. Затем, при необходимости, меняете тексты и изображения, переставляете секции местами и т.д.
4. 4.Нажимаем на кнопку «Опубликовать» и перехожу по ссылке для того, что бы посмотреть, как будет выглядеть моя новая страница.

У мня в результате получилось 2 таких варианта:

Первый вариант:

Второй вариант:

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

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

Использование визуального редактора Page Builder

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

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

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

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

После того, как вы внесли все правки, нажимаете на кнопку «Выполнено», в верхнем правом углу панели с блоками, и обновляете страницу.

Меняем главную страницу сайта

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

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

Отключаем стандартный слайдер для темы Vantage

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

Далее, переходим в раздел «Theme settings», в пункт «Home», и в разделе «Home Page Slider» выбираем «None».

После чего нажимаем на кнопку «Сохранить и опубликовать».

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

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

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

На самом деле создание Landing Pageна на WordPress – это очень обширная тема. На сегодняшний день, для данной CMS существует огромное количество плагинов, которые позволяют создавать более сложные страницы Landing Page.

Если данная тема для вас интересна, и вы бы хотели увидеть обзор других плагинов – напишите об этом в комментариях. Хорошего вам дня!

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

Как на WordPress сделать Landing Page?

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

Landing Page и WordPress

Одностраничный сайт или просто “одностраничник” можно создать на любой технологии, предназначенной для веб-строительства. Так, Вы можете создать его на “чистом” PHP или JavaScript с применением каскадных стилей CSS. Безусловно, такой вариант будет выгодным по скорости работы конечного продукта, но затратным в плане денег и времени на его разработку. Если Вы сами захотите заниматься проектом, то должны владеть на достойном уровне соответствующими знаниями в программировании и дизайне.

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

Если говорить о WordPress, то и для этой системы существует несколько разработок, позволяющих несложными методами и довольно быстро создать Landing Page с вполне профессиональным дизайном. Для примера воспользуемся Page Builder от SiteOrigin – одним из самых популярных (более 1 миллиона установок) бесплатных плагинов.

Подготовительный этап

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

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

В итоге главная страница сайта будет выглядеть примерно так:

Плагин Page Builder от SiteOrigin

Во-первых, следует установить и активировать плагин Page Builder by SiteOrigin. Помимо основного плагина, еще нужно будет установить набор виджетов, из которых собственно и состоят все блоки будущих макетов. Для этого существует плагин SiteOrigin Widgets Bundle. После установки необходимых плагинов необходимо открыть на редактирование созданную страницу. Видно, что на панели инструментов визуального редактора появилась вкладка Page Builder.

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

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

Для выбора того или иного макета необходимо выделить его и нажать кнопку Вставить. Теперь в редакторе появятся все элементы выбранного Вами макета.

Редактор поддерживает функцию Drag’n’Drop, что позволит Вам перемещать нужные элементы в желаемые места страницы. Кроме того, каждый элемент макета Вы можете редактировать, наведя на него курсор и нажав на ссылку Редактировать.

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

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

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

Если Вам понравилась статья — поделитесь с друзьями

Создание landing page на WordPress

Привет, друзья. Сегодня статья для тех, кто хочет научиться создавать 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 довольно интересным, так как удалось почерпнуть новые моменты и подходы. В целом курс очень понравился и есть смысл рекомендовать его и вам. Особенно интересно то, что тут подробно показан полный цикл. От прототипа до готовой темы. Кроме того, используются различные виды анимации и лендинг смотрится действительно здорово.

простые страницы с помощью плагина Long Form Storybuilder

От автора: в этой статье мы поговорим о лендинг пейдж на WordPress и как их создать с помощью плагина Long Form Storybuilder. За последние годы сегмент интернет-маркетинга настолько вырос, что сегодня он считается одним из самых эффективных способов повышения конверсии. Не важно, какой у вас бизнес, если вы используете интернет для рекламирования своих товаров, то вы сразу же заметите быстрый рост продаж. В сети не существует географических барьеров, вы можете достучаться до миллионов людей онлайн.

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

Что такое лендинг страница?

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

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

Техническая сторона лендинг страниц

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

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Основная проблема

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

Тут нам пригодится плагин Long Form Storybuilder для WordPress. Long Form Storybuilder вмиг поможет создать свою лендинг страницу, и совсем без навыков в разработке и дизайне. Рассмотрим плагин.

Long Form Storybuilder

Студия Press75 представила публике интуитивно понятный плагин, основной целью которого является создание красивых лендинг страниц. Плагин называется Long Form Storybuilder (LFS) и совершенно бесплатно доступен в WordPress репозитории плагинов.

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

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

Секции в Long Form Storybuilder

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

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

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

Callout: раздел, занимающий 100% ширины страницы, можно задать или цвет фона или фоновое изображение.

Content: секция создает одноколоночную область, в которую можно добавить текст через WP WYSIWYG редактор.

Full Feature: в этой секции можно добавлять широкоформатные изображения с наложением текста.

Section Heading: каждый раз при создании секции можно использовать этот раздел для добавления заголовка и подзаголовка к секции.

Two Column Content: Две колонки для текста.

Three Column Content: Три колонки для текста.

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

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

Автор: Ahmad Awais

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть