Как сделать лендинг на WordPress? Подробная инструкция. Wordpress лендинг
Создание Landing Page WordPress: 8 лучших плагинов
Если вы занимаетесь инфобизнесом или другим видом коммерческой деятельности по продаже товаров и услуг в интернете, то рано или поздно перед вами обязательно встанет вопрос создания продающих и подписных страниц. Можно обратиться к фрилансерам, которые помогут вам за приличную сумму, однако я предлагаю вам воспользоваться более простым и дешевым способом создания landing page. Этот способ — использование WordPress landing плагинов.
Думаю у всех, кто занимается продажами в интернете имеется свой блог на самом популярном движке – WordPress. Сейчас на всех курсах и тренингах по созданию бизнеса в сети первым делом учат создавать блог на этом движке. Поэтому плагины по созданию landing page WordPress будут отличным решением для вас.
Тем более, если вы не очень технически подкованы, то создавать и верстать подобные страницы самостоятельно в сторонних программах вам будет очень сложно. А за дизайн и верстку на фрилансе иногда загибают просто астрономические цены. А вот создать одностраничник на WordPress может абсолютно каждый. Для это не требуется особых знаний и больших затрат.
Теперь давайте познакомимся с десяткой лучших плагинов для WordPress, которые помогут сделать вам качественный одностраничник.
Один из самых популярных плагинов для создания продающих и подписных страниц. Одно из лучших решений, которое поможет вам привлекать клиентов и подписчиков.
Плагин имеет встроенный конструктор с простым интерфейсом. Имеет множество полезных опций. Обладает очень полезной функцией просмотра посещаемости страниц.
Этот плагин позволит вам создавать красивые страницы без знания кода и дизайнерских навыков. Плагин имеет большую базу шаблонов различных цветовых решений.
Имеется возможность предпросмотра шаблона на странице, чтобы вам было понятно, как он будет выглядеть.
С помощью этого плагина можно создавать любые формы. Например, для заказа товара, обратного звонка или просто обратной связи. Является незаменимым для лендингов/посадочных страниц. Основной особенностью является бесплатность и частота обновления плагина.
Это решение представляет собой простой и удобный конструктор. Все интуитивно понятно, страницы создаются методом простого перемещения различных объектов на страницу.
Все графические элементы адаптируются под разные экранные разрешения. Имеется множество полезных функций.
Любимец тысячи веб-мастеров. Огромное кол-во элементов для создания нужной вам страницы. Все элементы адаптивны и, тем самым, смотреться одинаково на всех устройствах. В дополнение, все компоненты этого плагина SEO-оптимизированы.
Еще один плагин, который позволит вам создать качественный одностраничник за короткий промежуток времени.Имеется возможность создания множества страниц и управления ими из одного места. Поисковики очень любят этот плагин, поэтому он поможет повысить ваши показатели посещаемости.
Как и в предыдущем плагине, здесь имеется встроенный конструктор, который дает возможность создавать страницы без особых знаний. Имеет параметры и настройки для SEO-оптимизации. Поможет значительно увеличить трафик на ваш сайт, а так же продажи продукта.
Удобный и легкий плагин для создания лендинг страниц на WordPress. Интуитивно понятный дизайн и приятный интерфейс делают этот плагин еще привлекательнее.
Послесловие
Вот я познакомил вас с восьмеркой лучших плагинов для создания landing page на WordPress. Каким плагином пользоваться? Это уже будете решать только вы. Надеюсь, что теперь проблем с созданием подписных и продающих страниц у вас не возникнет.
bologer.ru
Плагины-конструкторы лендингов для Вордпресс | Danilin.biz
31 июля 2017 2 802
Небольшой обзор популярных плагинов для создания посадочных страниц, одностраничников, лендингов в Вордпресс.
Сейчас существует много разных сервисов, которые предлагают визуальные онлайн-конструкторы лендингов. Среди них встречаются действительно полезные и удобные, способные существенно упростить решение многих повседневных задач маркетологов. Такие сервисы позволяют сосредоточиться на контенте, обойтись без дизайнеров и программистов. Ну, или задействовав их минимально.
Как обычно, все достойные сервисы имеют один существенный недостаток — высокую стоимость. Та же Тильда, которая, собственно, и побудила меня к написанию этого поста, обойдется в среднем в 750 р. в месяц за один сайт.
В качестве альтернативы вполне может сгодиться Вордпресс с каким-нибудь хорошим визуальным конструктором страниц.
Премиум-плагины
Коммерческих решений не так много, но среди них есть очень интересные варианты.
1. Cornerstone — The WordPress Page Builder
Новый визуальный конструктор страниц, который позволяет простым перетаскиванием элементов создавать в Вордпресс потрясающие страницы с уникальным дизайном.
Cornerstone за полтора года после своего релиза успел понравиться многим пользователям. Только на Codecanyon его приобрели уже более двух тысяч раз. Cornerstone на фоне конкурентов сильно выделяется очень стильным, отзывчивым и интуитивным интерфейсом. Весь процесс конструирования страниц происходит на фронтенде, что позволяет видеть изменения в реальном времени. Плагин включает в себя огромный выбор реально полезных модулей и элементов, а также готовых макетов страниц для использования.
Кстати, разработчиком этого плагина Cornerstone является известная студия THEMECO — разработчик известной темы для Вордпресс — X | The Theme. Все покупатели темы получают плагин бесплатно.
Cornerstone вполне может составить конкуренцию многим коммерческим онлайн-сервисам.
Скачать Демо
2. Parallax Gravity — Landing Page Builder
Parallax Gravity, конечно, намного проще, чем Cornerstone, однако, тоже позволяет создавать неограниченное количество сложных целевых страниц. На каждую страницу можно добавить несколько разделов, для каждого раздела можно установить фон, добавить любой тип контента, в том числе шорткоды и многое другое.
Скачать Демо
3. Parallax One Page Builder WordPress Plugin
Потрясающий плагин Вордпресс для быстрого создания неограниченного количества одностраничных сайтов с очень широкими возможностями и множеством различных модулей, эффектов и настроек.
Скачать Демо
4. Visual Composer — Page Builder for WordPress
Хотел с него начать, но, пожалуй, им закончу, потому что не все так однозначно. Про Visual Composer я подробно рассказывал пару лет назад. Это прекрасный визуальный конструктор, который абсолютно заслуженно является лидером ниши. Я сам очень часто пользуюсь этим плагином. Visual Composer позволяет внедрить визуальный конструктор страниц практически на любой сайт. Что сильно ускоряет, упрощает и удешевляет процесс разработки и эксплуатации сайта.
Скачать Демо
Почему не однозначно?
Потому что в Visual Composer нельзя просто так взять и создать лендинг.
Как минимум, не с каждой темой это будет работать. Первые вопросы, которые могут возникнуть: как убрать сквозные шапку, подвал, добавить для страниц свою навигацию. Сделать это не сложно, я как-нибудь расскажу как можно грамотно доработать тему. А пока отмечу, что скрывать лишние элементы с помощью CSS, как предлагают некоторые — это не решение.
Тему можно и не дорабатывать, а воспользоваться дополнениями для Visual Composer. Например, Visual Composer One Page Builder — Addons for Visual Composer, который позволяет создавать лендинги, использовав всю мощь Visual Composer. Плагин включает в себя более 25 готовых макетов страниц и более 23 дополнений для самого конструктора, импорт осуществляется в один клик.
Скачать Демо
Еще есть плагин Smart One Page Navigation — Addon For Visual Composer, с помощью которого можно создавать разные красивые меню для ваших лендингов в Visual Composer.
Скачать Демо
Бесплатные плагины
Для создания лендингов в Вордпресс существует целый ряд и бесплатных решений.
- WordPress Page Builder – Beaver Builder — гибкий конструктор страниц, который позволяет забыть про шорткоды и HTML.
- Elementor Page Builder — продвинутый визуальный конструктор страниц, позволяет создавать лендинги во фронтенде простым перетаскиванием элементов.
- Page Builder: Live Composer – drag and drop website builder — визуальный конструктор отзывчивых посадочных страниц.
- WordPress Landing Pages — создавайте красивые целевые страницы на Вордпресс.
- Unbounce Landing Pages — самый мощный автономный конструктор целевых страниц.
- Landing Page Builder – Drag & Drop Page Builder — визуальный конструктор отзывчивых целевых страниц и макетов.
- Landing Page — позволяет за считанные минуты создавать красивые и высококонверсионные целевые страницы без кода
- Free Landing Pages Builder by Wishpond — конструктор целевых страниц, имеется возможность размещения страниц в собственных доменах и поддоменах.
Как привязать страницу к поддомену
Очень часто лендинги выносят из основного домена в поддомены или даже в отдельные домены. Это очень удобно, позволяет работать с лендингом как с самостоятельным сайтом со своей аналитикой, рекламными кампаниями и т.д.
Существует несколько способов привязки страниц к поддоменам.
Можно настроить зеркала с помощью mod_rewrite. Я не буду подробно останавливаться на нем, в интернете очень много примеров его использования. Не забываем, что работоспособность многих инструкций зависит от конфигурации конкретно взятого сервера.
Иногда бывает целесообразнее переключить Вордпресс в режим мультисайт и воспользоваться штатными средствами маппинга. На мой взгляд, мультисайт — это лучшее, что можно было придумать для лендингов в Вордпресс.
Можно воспользоваться каким-нибудь из специализированных плагинов.
В общем, вариантов много.
В заключение
В заключение предлагаю посчитать в какую общую сумму обойдётся покупка и продление сайта с конструктором страниц на Вордпресс.
Пусть будет два варианта: недорогой и оптимальный.
1. Недорогой
- Хостинг Спринтхост, тариф «Восток-1» (3 сайта, 3 Гб) — 1176 р.
- Домен в зоне RU — 199 р.
- Бесплатная тема — 0 р.
- Бесплатный конструктор — 0 р.
Итого
- Старт — 1375 р. / 1 год
- Продление — 1375 р. / 1 год (115 р. / 1 месяц)
2. Оптимальный
- Хостинг Рег.ру, Тариф «Host-1» (10 сайтов, 15 Гб) — 3447 р.
- Домен в зоне RU — 199 р.
- Премиум-тема «X | The Theme» — 59$ (3481 р.)
- Конструктор Cornerstone — 39$ (2301 р.)
Итого
Старт — 9428 р. / 1 годПродление — 3646 р. / 1 год (304 р. / 1 месяц)
Всё самое новое и интересное я публикую в своём Телеграм-канале. Подписывайтесь!
danilin.biz
Бесплатные шаблоны landing page на wordpress
Ведь благодаря наличию админки, можно легко менять контент, не вникая в код. А с удобным хостингом hostenko, который заточен под работу с wordpress, знания html, ccs и т.д. практически не понадобятся. О там, как перенести или создать сайт на этом хостинге, можете почитать в статье: "Лучший хостинг для лендинг пейдж на wordpress".
Simple
Скачать шаблон
Topbest
Скачать шаблон
Parasponsive
Скачать шаблон
TЕсли вам интересно самому разрабатывать шаблоны на WordPress, то рекомендую ознакомиться с этим курсом:
А на сегодня - все! Если у вас есть другие бесплатные шаблоны landing page для wordpress, присылайте на почту или в социальных сетях, и я обязательно выложу их на блоге. Спасибо, что помогаете развивать блог. Пока!
Это интересно:
Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?
Подпиcывайтесь на обновления!
smartlanding.biz
Как сделать лендинг на WordPress? Подробная инструкция. — 🚀 Land-site.ru
Многие веб-мастера рассматривают одностраничник не как сайт, а как рекламную кампанию. Целевая страница является эффективным способом разрекламировать определенный продукт и резко повысить число его продаж. Самостоятельно верстать лендинг – не самая простая задача, особенно для новичков, которые привыкли работать разве что с простейшими CMS и конструкторами. Поэтому сегодня я решил рассказать, как Landing Page WordPress позволяет создать буквально за несколько шагов. Есть куча платных дополнений для WP – и они действительно стоят своих денег, но отойдем от самых лучших и дорогих дополнений, рассмотрев исключительно бесплатные способы создания лендинга на данном движке.
Кратко о терминологии. Одностраничная (целевая) страница – это промо-сайт, цель которого разрекламировать один или два товара и убедить посетителей приобрести его прямо через лендинг. Также LP позволяет продавать информационные материалы и различного рода услуги.
Создание лендинга на CMS WordPress
Для решения поставленной задачи нам понадобится сайт на WordPress. Как его создать, читайте в данной статье. Наш интернет-ресурс может быть абсолютно пустым со стандартным шаблоном – эти факторы не играют важной роли.
Самое главное, это в административной панели перейти в раздел «Плагины». Кликнуть по кнопке «Добавить новый». Вбить в поисковую строку «Free Landing Pages Builder by Wishpond», установить и активировать плагин. По названию понятно, что дополнение распространяется бесплатно.
Естественно, это не единственный плагин с подобным функционалом. Также могу порекомендовать «Elementor», «KingComposer». Все дополнения в плане функционала схожи, но мне удобнее всего работать именно с вышеназванным плагином.
Преимущество плагина by Wishpond
- Так как дополнение выступает в роли конструктора, лендинг на WordPress мы будем буквально собирать с помощью мышки. Установить блоки, удалить их, переместить можно за считанные секунды. Есть полноценная панель инструментов.
- Функциональность целевой страницы – это замечательно. Но нужно сделать еще ее и красивой, с чем плагин отлично справляется. Панель инструментов позволяет «от и до» менять даже не общий дизайн, а внешнее оформление любого блока и любой области лендинга.
- Есть возможность анализа статистики LP – сколько человек посетило страницу, сколько лидов за час/день/неделю, количество просмотров страницы и так далее.
- Больше сотни бесплатных шаблонов (тем конкретно для лендингов, а не многостраничных страниц). Менять в этих шаблонах вы можете все, что угодно – но нужно будет работать с кодами. Совет: если с кодами возиться не хотите при редактировании тем, есть специальные плагины для визуального редактирования кода.
- Удобное управление целевыми страницами. Это огромный плюс для веб-мастеров, которые собираются создать не один одностраничник, а несколько.
- С помощью плагина LP можно дополнить готовыми всплывающими окнами. Есть возможность создания своих форм.
Недостатки плагина by Wishpond
- Отсутствует русификация. Но это не особо большая беда, поскольку интерфейс интуитивно понятен. Если какие-то термины вам непонятны, добро пожаловать в мир онлайн переводчиков!
- Есть платная версия дополнения. И чем чаще вы будете пользоваться плагином, тем больше будет желания его приобрести. При постоянной работе осознаешь, что некоторых функций все-таки не хватает, а для их активации нужно купить плагин. Если конкретизировать, то бесплатное дополнение позволяет собирать не более двухсот лидов. Но от этого ограничения можно избавиться путем установки сторонних форм подписок, а не встроенных.
- Есть копирайт, который будет мелькать внизу сайта – проблема небольшая, но масштабный серьезный проект с чужим копирайтом? Это как минимум нелепо.
- Дополнение сильно нагружает сервера. Поэтому если ваш LP будет открываться 10 секунд, не удивляйтесь. Отметим, что если напичкать целевую страницу всевозможными формами, веб-ресурс будет еще медленнее открываться – а это прямой путь к потере большого количества лидов.
Инструкция по созданию целевой страницы на WordPress
Будущий лендинг WordPress позволит создать только после того, как мы пройдем регистрацию. В случае с другими дополнениями, как правило, нужно просто активировать плагин и приступить к его настройкам.
- Как я уже сказал, русского языка нет, поэтому жмем для регистрации по надписи «SIGN UP».
- Выбираем пункт «STAR TRIAL FREE».
- Остается только ввести E-mail, указать пароль (запишите его, ибо восстанавливать пароль в плагине одно мучение).
- Теперь нажимаем по единственной кнопке в окне — «Записаться»
- Перед нами откроется куча полей. Но пока они нас не интересуют. Поэтому сразу приступаем к созданию страницы, нажимая на кнопку «NEW LANDING PAGE».
Разбирать подробно все функции от «а до я» не буду. Пробежимся по самым важным аспектам дополнения, которые жизненно необходимы при создании Landing Page на WordPress.
- Жмем по кнопке «Landing Page».
Здесь нам предложат сразу установить тему. Не активируйте первый попавшийся шаблон, даже если какая-то тема вам понравилась. Пользуйтесь сначала функцией предварительного просмотра, позволяющей полностью оценить тот или иной дизайн. Если есть желание и навыки, не выбирайте шаблон, а верстайте его самостоятельно – такая возможность тоже есть.
- Выбрали понравившуюся тему и оценили ее? В таком случае кликаем по надписи «Choose Template» и едем дальше.
- Выбранная тема должна открыться. В этом окне мы можем отредактировать нужную область. В левой области экрана вся панель инструментов. Что-то поменяли? В таком случае справа отобразятся наши изменения. Блоки перемещать будем также в этом окне. Все настройки не забудьте сохранить. Основная область, на которой нужно зациклить внимание, находится в верхней части окна. Здесь самые главные функции.
- Настраиваем мета-теги через функцию «Setting». Этот пункт нужен не для настройки внешнего вида целевой страницы, а для его SEO-оптимизации. Пропишите теги (ключевые слова), по которым ищут пользователи продаваемый вами товар. Также здесь мы можем изменить шрифты, установить новые шаблоны, скачать их и так далее.
- Проверяем адаптивность сайта через пункт «Preview». Изменили дизайн, настроили блоки, теперь активируем предпросмотр и видим, как сайт выглядит с ПК, планшета, смартфона. Важно, чтобы со всех устройств лендинг был красив, удобен и понятен.
- Чтобы сохранить все изменения, жмите по кнопке «Save as draft». Сделать это нужно обязательно! Если закроете случайно или намеренно страницу, все ваши нововведения улетучатся.
- Если вы наполнили сайт контентом, установили все блоки, убедились, что формы подписки работают успешно, можно приступать к публикации лендинга. Для выполнения этой задачи кликаем по «Publish».
- Перед тем, как лендинг для 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. Поэтому вы потратите больше времени на знакомство со всеми возможностями плагина, нежели на создание одностраничника.
land-site.ru
50 лендинг пейдж шаблонов на Wordpress
Для бизнеса использование лендингов стало одним из наиболее простых и выгодных решений. Популярным инструментом для создания таких сайтов стали лендинг пейдж шаблоны WordPress. В их основе лежит продуманная и мощная «система вовлечения» для трансформации трафика в доход. Они предлагают:
- встроенный конструктор страниц
- кроссбраузерность и адаптивную верстку, которые обеспечивают охват большей клиентской аудитории
- выверенный профессиональный дизайн
- бесплатные обновления в течение неограниченного периода
Содержание статьи:
50+ премиум лендинг пейдж шаблона на WordPress
Шаблон BeTheme
Популярный шаблон, главными свойствами которого являются «отзывчивость» дизайна, Retina совместимость и универсальность. На выбор пользователю представлены 2 визуальных конструктора — MuffinBuilder и Visual Composer, а также плагины для слайдеров Slider Revolution, Layer Slider.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
На BeTheme созданы следующие готовые шаблоны лендинг пейдж:
1. Суши
Демо для суши-бара. Основной контент сайта расположен на светлом фоне в обрамлении темно-серых меню и футера. Верхний баннер и слайдер из блюд меню позволяют продемонстрировать новинки ассортимента.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
2. СПА-салон
Белый фон с контрастным текстом основного блока обеспечивает хорошую читабельность. Вспомогательные элементы — шапка, левый сайдбар, футер выполнены в мягкой темно-синей гамме. Прокрутка страницы сопровождается parallax смещением фона.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
3. Пиво
Landing page WordPress для локальной пивоварни. Страница оформлена в коричневых тонах с вкраплением зеленого. При скроллинге можно наблюдать впечатляющий parallax эффект.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
4. Портфолио художника/иллюстратора
Стильный шаблон, цветовое оформление которого построено на оттенках серого. Верхняя часть страницы стилизована под рабочее место с софитом, который можно включить, и компьютером.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
5. Барбершоп
Сайт профессионального барбер салона в бело-коричневой гамме. В его дизайне стоит отметить: большой слайдер со всплывающим текстом, прайс-лист с переключаемыми вкладками, резюме сотрудников, форму для онлайн записи.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
6. Аквапарк
Шаблон в ярких тонах желтого, белого и голубого для сайта аквапарка, платного пляжа, бассейна. На его страницах представлены раскрывающийся FAQ, галерея в стиле Masonry, интерактивная карта, панели с призывом к покупке.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
7. HR
Сайт кадрового агентства, выдержанный в деловом стиле. Основной цвет страниц, зеленый, дополнен блоками серых и белых оттенков. В демо есть кнопки перехода на страницы с подробной информацией, секция презентации услуг с видео.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
8. Парфюм
Темплейт с «воздушным» дизайном в розовато-сиреневых тонах. Подойдет под сайт МЛМ компании или персональную страницу агента, занимающегося продвижением сетевой косметики Faberlic, Avon и похожих марок.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Шаблон TheGem
Универсальный темплейт под проекты, рассчитанные на высокую производительность. Тема поддерживает мультилингвальность и режим RTL. Демо-сайты на TheGem включают адаптивные шаблоны лендинг пейдж. В подарок к шаблону идут: конструктор Visual Composer и плагины, ответственные за адаптивные слайдеры — LayerSlider, NivoSlider, Revolution Slider.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
9. Креативное агентство
Сайт творческой студии. Темно-серая цветовая гамма страниц разбавлена блоками светлых цветов. Многоуровневое меню облегчает навигацию, расширенный футер содержит формы обратной связи и подписки.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Подборка — корпоративные сайты на wordpress. 21+ тема
10. Лэндинг продукта/товара
Предназначен для создания веб-ресурса, посвященного презентации отдельного продукта или серии продукции. Меню меняет цвет при скроллинге, на странице присутствуют анимированный показ элементов и секции с видео фоном.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
11. Сайт-визитка для приложения
Одностраничник для продвижения ПО. Пункты верхнего меню перемещают посетителя по секциям страницы. Интересный элемент сайта — слайдер из скриншотов, один за другим подстраивающихся под экран мобильного телефона.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
12. Портфолио минимализм
Сайт в светлых тонах, по большей части состоящий из фото, которые выводятся на экран с применением анимации. Ссылка «гамбургер» открывает полупрозрачное полноэкранное меню, подчеркивающее легкость дизайна.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
13. Фотография
Сайт фотостудии с портфолио и прайсом услуг. При его посещении в первую очередь замечаешь широкий слайдер из фото, к которым применен эффект движения ближе/дальше. Основной цвет темы — темно-серый.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
14. Мобильное приложение (App)
Как и многие WordPress landing page шаблоны для продвижения ПО, этот лендинг рассказывает о единичном продукте. Важные блоки сайта: тарифные планы, кнопки для скачивания, показатели успеха в цифрах.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
15. Тема юриспруденции
Демо понравится компании, оказывающей услуги юридической помощи. При выводе информационных блоков применяются анимированные эффекты, цепляющие взгляд посетителя сайта.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
16. Наушники
Лендинг, демонстрирующий характеристики продукта (наушников) и побуждающий оформить покупку онлайн. При прокрутке страницы темные и светлые секции сменяют друг друга, элементы плавно появляются на экране.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
17. Фитнес
Спортивный шаблон, в котором активно задействованы скроллинг эффекты. Для перемещения по его секциям можно вызвать выдвигающееся навигационное меню.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Подборка — 15 шаблонов сайта для фитнеса
18. Креативное портфолио
Главная страница лендинга — яркая мозаика из фото-превью проектов портфолио. При наведении мыши на любое из них всплывают название, ссылка на увеличенное фото, кнопка для репостинга, ссылка на страницу проекта.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
19. Премиум отель
Сайт элитного отеля, предлагающий вниманию посетителей видео тур, отзывы постояльцев, форму онлайн бронирования и ссылку на мобильное приложение с аналогичным функционалом.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
20. Beauty салон
Яркий и свежий дизайн шаблона, выстроенный на оттенках розового и белого, выбирают салоны красоты, студии массажа, спа центры. Стильные секции эффектно преподносят услуги салона.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
21. Роскошный СПА отель
Сайт, оформленный в бело-голубой гамме, не только знакомит клиентов с отелем посредством галереи и тарифов на проживание в номерах, но и предлагает систему онлайн букинга.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
22. Медицина
Сайт для медицинской клиники, основные цвета дизайна — белый и ярко-голубой. Посетители имеют возможность посмотреть информацию о докторах, уточнить часы работы и записаться на прием через электронную форму.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Шаблон The7
Универсальная адаптивная WordPress тема, интегрированная с конструктором страниц Visual Composer и плагином Ultimate Addons. Среди ее демо сайтов можно найти и скачать шаблон лендинг пейдж, задача которой — привлечение клиентов и повышение конверсии веб-ресурса. В шаблон встроены премиальные плагины Go Pricing Tables, Slider Revolution, ConvertPlug, Layer Slider.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
23. Небольшой интернет-магазин
Онлайн магазин органических снэков. Лендинг содержит слайдер продукции, блок с описанием ее преимуществ, карточки ингредиентов, отзывы покупателей.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
24. Продажа книг
Лендинг для продвижения авторских кулинарных книг, который предоставляет информацию об авторе, акциях на книги, отзывы ресторанов и поваров.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
25. Строительство
Данный шаблон лендинг пейдж «Ремонт и строительство» знакомит с услугами, партнерами и сотрудниками компании, подавая информацию через слайдеры и секции с карточками.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
26. Психология
Демо для клиники психологического консультирования. Спокойный дизайн сайта располагает клиента и вызывает доверие к консультирующим специалистам.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
27. Тренинг, конференция
На сайте можно почитать о тренерах, узнать расписание и зарегистрироваться в качестве участника. Доступна видео галерея предыдущих мероприятий.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
28. Интернет-магазин
Сайт одежды, использующий светлую тему и темно-синие декоративные элементы (меню, кнопки, футер). Главные составляющие страницы — слайдер с анимированными баннерами и карточки товаров.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Шаблон Ronneby
Шаблон повышенной производительности, помимо набора плагинов и модулей оснащенный Панелью Безграничных Опций. В нем используются премиальные плагины Revolution Slider, Visual Composer. Активная поддержка темы, наличие видео и текстовых мануалов делают ее хорошим вариантом для тех, кто собирается купить шаблон лендинг пейдж в первый раз.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
29. Веб-студия
В дизайне присутствуют белый, серый и коричневый цвета. Запоминающийся элемент — слайдер из образцов портфолио с несколькими вкладками.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
30. Ресторан
Наиболее эффектные составляющие демо — блок ресторанного меню с ценами и секция с видео, к заставке которого при скроллинге применяется parallax смещение.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
31. Креативное портфолио
Сайт практически полностью состоит из фото, при наведении на которые появляется ссылка с названием проекта. Иконка «гамбургер» разворачивает полноэкранное меню.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
32. Спортивный зал
Лендинг продвинет услуги фитнес клуба, представив потенциальным клиентам его команду и осветив программы тренировок. Повысить доверие к компании помогает анимированный счетчик показателей успеха.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
33. One-page с эффектом 3D пролистывания
При прокрутке страницы мышью разделы сменяют друг друга, полностью занимая экран. Последний «лист» выводит контактную форму.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
34. Мобильное приложение
Графичные блоки темно-серого и светло-серого оттенков описывают преимущества рекламируемого ПО. Слайдер показывает скриншоты на экране виртуального телефона.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
35. Модельное агентство
Страница разделена на 2 части — текст и фото. При прокрутке контент меняется: левая часть поднимается, правая — опускается, при этом текстовый и фото контент чередуются.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Шаблон Bridge
Шаблон с высококлассной типографикой, входящий в топ творческих тем. Бесплатные плагины в составе темы: Visual Composer, Layer Slider, Timetable, Visual Composer. В Bridge включена обширная коллекция шорткодов — от базовых структурных блоков до интерактивной инфографики и продвинутых демонстрационных элементов, таких как вертикальные прогресс-бары.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
36. Автосалон
На сайте размещены выгодные предложения, модели авто, тарифные планы на обслуживание. Особое внимание привлекают слайдер с parallax и вертикальный слайдер.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
37. Коуч, психолог, тренер
Лендинг для частного психолога, через который можно вести продажу авторских книг. Стильная форма подписки помогает пополнить клиентскую базу.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
38. Дантист, зубной кабинет
Посадочная страница в ярких бело-голубых тонах с информацией об услугах и встроенной системой букинга.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
39. Животные
Демо сайт приюта для животных с каталогом подопечных и функционалом сбора пожертвований.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
40. Церковь
На страницах шаблона можно увидеть блоки с графиком церковных мероприятий и историями прихожан. Сайт ведет прием онлайн взносов.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
41. Мебель минимализм
Посадочная страница в светлой цветовой гамме. Использует слайдер отзывов, счетчики с анимацией.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
42. Личный сайт фотографа
Черно-белый сайт-портфолио. Основной контент главной страницы — горизонтальный слайдер во весь экран и навигационное меню.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
16+ шаблонов для сайта фотографа → Смотреть подборку
43. Бизнес, стартап
Демо сайт для бизнес-проекта применяет скролл-эффекты, которые так любят современные шаблоны лендинг пейдж, и привычные для wordpress слайдеры и графики.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
44. Йога
Простой одностраничник для йога студии. Среди его компонентов — блок с показателями достижений и большой слайдер в хедере.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
45. Кроссфит
Черно-белый лендинг с тематическими блоками «Направления тренировок», «Расписание занятий», «Тренерский состав».
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
46. Путешествия
Демо для туристического портала. В его верхней части расположен широкий баннер с всплывающим текстом, меню меняет цвет при прокрутке.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Шаблоны для путешествий. 25+ шаблонов → Смотреть подборку
47. Часы
Лендинг для демонстрации элитных часов использует много фото и parallax фон. Цветовая схема страниц — белая с темно-серыми вставками.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
48. Digital-агентство
Простой дизайн сайта содержит минимум анимации — меняющее цвет верхнее меню, которое разворачивается до полноэкранного, блоки с фоном parallax.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
49. Бизнес
Небольшой корпоративный сайт с большим слайдером в «шапке». Как и похожие лендинг пейдж шаблоны, сделанные на Вордпресс, данная посадочная страница использует раскладку «во всю ширину экрана».
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
50. Музыка
Сайт для рок-музыканта, делающий основной акцент на гастрольной деятельности: крупные блоки используют концертные фото в качестве фона, на главную выведены последние записи в блоге.
ПОДРОБНЕЕ / СКАЧАТЬ ШАБЛОН СМОТРЕТЬ ДЕМО
Я записал для вас видеоинструкцию- «Как правильно выбрать шаблон на ThemeForest«. Видео будет полезно тем, кто еще не разу не скачивал шаблоны на ThemeForest и не знает как этим сайтом пользоваться.
Скачайте чек-листпо cозданию сайтана WordPress
ЧТОБЫ ПОЛУЧИТЬ ЧЕК-ЛИСТ ВВЕДИТЕСВОЁ ИМЯ И ЕМЕЙЛ В ФОРМУ НИЖЕИ ПОДТВЕРДИТЕ ПОДПИСКУ НА ПОЧТЕ
ichigarev.ru
сервисы генерации посадочных страниц + плагины WordPress
Landing Page — посадочная, целевая страница — специальная страница, куда направляется трафик. Обычно создана так, чтобы мотивировать пользователей к определённым действиям, зачастую является финальным этапом воронки продаж.
Зачем делать лендинг самостоятельно?
Давеча довелось мне прорабатывать лендинг на один из новых проектов. Заказывал у фрилансеров, получилось «средненько» (больше внимания на арт, нежели на генерацию лидов). В конце концов — дело не хитрое (если речь о простом сборе контактов), решил повозиться сам.
Выбор оказался меж сервисами, готовыми шаблонами и плагинами для WordPress. Ниже немного субъективизма.
Готовые шаблоны — удобно, одноразовая оплата за шаблон или бесплатно. Полный контроль — тестируй, задействую любимые средства аналитики. Минусы — всё надо делать руками в блокноте. Это не проблема.
Сервисы — удобно, большой выбор шаблонов, проработка аспектов, которые сходу не очевидны. Обычно удобно реализованы тесты. Минусы — минимум контроля и много всяческих ненужных, обременительных наворотов.
Скрин с landingi.ru
Плагины к WordPress — пожалуй лучший вариант: много работы с кодом автоматизировано, в то же время есть возможность поправить руками нужные моменты, добавить свои шаблоны и средства аналитики (знаю, знаю у многих сервисов это тоже есть), подключить дополнительные скрипты. Плюс можно выкинуть всё лишнее и оставить только необходимый функционал. Оплата — одноразовая за плагин или бесплатные решения, коих очень много. Менее удобно делать A/B тесты.
И конечно, элементарное решение: берём пример из http://getbootstrap.com, ставим свою форму и коды аналитики.
Мне сделали подборку и сервисов и плагинов. Некоторые вещи я попробовал, но подборка интересная — подумалось, что многим будет полезно.
Сервисы генерации посадочных страниц
Редактор посадочной страницы с q-page.
У всех сервисов есть шаблоны, генераторы форм, адаптивная вёрстка, тестирование и т.д. Думаю по каждому повторяться не стоит, буду отмечать некоторые особенности.
Тильда https://tilda.cc/ru/
Собираем сайт, страницу из блоков (более 350). Акцент на удобной подач контента.Помимо посадочных страниц, удобно делать просто лонгриды с красивым оформлением, магазины. Очень достойное и красивое решение.
LPage https://lpg.tf
CRM система, удобное копирование, размножение однотипных лэндингов. Шаблоны стандартны, но благодаря богатому функционалу можно добавить уникальности и неповторимости.
Q-page http://q-page.ru
Понравился редактор.
ВАША СТРАНИЦА ЗА 15 МИНУТ БЕЗ ТРАТ НА ПРОГРАММИСТА И ДИЗАЙНЕРА
Weebly http://www.weebly.com
Здесь можно сделать и лэндинг, и простой онлайн магазин.
Landingi http://landingi.ru
Внутри простая CRM-система для хранения собранных контактных данных.
Платформа LP http://platformalp.ru
Статистика, CRM. Вы можете собрать свой лендинг буквально по кирпичикам, благодаря универсальному набору инструментов, позволяющему всесторонне видоизменять шаблон.
Leadkit http://leadkit.ru
Статистика, CRM, Мультилендинг — динамические переменные для вашего лендинга с помощью которых вы можете показывать посетителю именно то что он искал. Функция «Не уходи!» — пытаемся взять у уходящего со страницы пользователя контактные данные, либо как-то заинтересовать.
LPgenerator http://lpgenerator.ru
Видимо, самый навороченный сервис. Максимум возможностей. Можно просто запутаться в огромном функционале.
Borstch http://borstch.comКрутое название. Автоматическая оптимизация конверсии с помощью сплит-тестирования(А/Б тестирования) для любых уровней источника трафика: для каждого объявления, таргетинга, площадки и тд. Возможность показывать индивидуальные релевантные заголовки для каждого объявления на одном лендинге.
WordPress плагины для Landing Pages
WordPress Landing Pages https://wordpress.org/plugins/landing-pages/
Может подключаться к плагинам статистики + есть всяческие всплывающие окна и т.п.
Responsive Maintenance Pro With Countdown https://wordpress.org/plugins/responsive-admin-maintenance-pro/
Интересное решение для создания заглушек на сайтах, вполне подходит для создания простых лендингов для сбора контактов.
Free Landing Pages Builder https://wordpress.org/plugins/landing-pages-builder/
Здесь есть встроенная статистика
Ultimate Landing Page and Coming Soon Page https://wordpress.org/plugins/ultimate-landing-page-and-coming-soon-page/
Landing Page https://wordpress.org/plugins/ultimate-landing-page/
Бедный шаблонами, но весьма удобный плагин.
WP Landing Page https://wordpress.org/plugins/wp-landing-page/
О создании Лэндингов
Советы по созданию посадочных страниц
Собиралось у разных специалистов, очищалось от лишнего текста.
- Фокусируйтесь на одной цели — в заголовках, в формах и т.д. Одна цель, один призыв к действию.
- Цель должна быть понятной. Ваш посетитель должен понять, что от него хотят не более чем за 5 секунд.
- Понятно ли, что вы за компания и чем занимаетесь? (Логотип и слоган)
- К заголовку добавьте дополнительное более пространное объяснение.
- Добавьте списки преимуществ и выгод для пользователей. Причём упор стоит делать на выгодах.
- Фото или видео с продуктом или с аудиторией.
- Уберите все лишние ссылки и лишнюю информацию. Помните — наша цель заставить совершить действие.
- Запрашивайте в формах только нужную информацию (дополнительно: идеальная форма регистрации). Выделяйте кнопку действия.
- Дайте отзывы пользователей. Используйте социальные доказательства, например, количество подписчиков.
- Лэндиг должен быть адаптивным.
- Выделяйте призыв к действию, выделяйте форму подписки, сбора контактов (если цель в этом).
- Выражайтесь четко. Конкретно говорите пользователю, что именно он должен сделать и что будет потом.
- Заголовок должен задержать пользователя и заставит читать дальше.
- Используйте аналитику, тестируйте разные варианты элементов лэндинга: кнопок, форм, шаблонов, заголовков и т.д.
- Развейте сомнения пользователя.
 Подпишитесь на нашу рассылку и получайте то, что не вошло в блог, анонсы и тематические подборки + несколько руководств (сбор подписчиков и продажа информации). |
adne.info
Создание Lending page на WordPress, Page Builder
Многие задаются вопросом, как можно создать landing страницу при этом не имея никаких навыков программирования и используя известную систему cms WordPress. Сегодня я расскажу и покажу на примере простую и доступную всем технологию по созданию лендингов использую плагин Page Builder by SiteOrigin.
Инструментарий для лендинга на wordpress
Для получения полноценного лендинг на wordpress нам понадобится:
- Установленная последняя версия WordPress
- Установленный плагин Page Builder от SiteOrigin
- Установленные виджеты SiteOrigin Widgets Bundle (установка в плагинах)
Этих простых действий достаточно, чтобы перейти к практическим моментам. Но есть еще интересный пункт в настройках, о которых я хочу здесь упомянуть.
Настройка SiteOrigin Widgets
Переходим в левом меню админки в раздел «Плагины» и нажимаем на появившееся после установки (SiteOrigin Widgets Bundle) подменю и получаем список доступных для использования виджетов. Они разделены на три части:
- All — все виджеты
- Enabled — включенные виджеты
- Disabled — отключенные виджеты
Вы можете их как отключать, так и включать те, что по умолчанию отключены. Просмотрите их описание и решите с каким набором вы будете создавать вашу Lending Page. Ну а я перехожу к самому интересному, а именно созданию лендоса.
Создание лендинг пейдж используя страницу wordpress
Создавать лендинг мы будем при помощи статических страниц, используемых WordPress для основной информации, такой как: О нас, Контакты, Реклама, Партнеры и т.д. Отличие таковых страниц от записей, состоит в том, что записи – это контент работающий на построение контента в виде блога. Где присутствуют разделы (категории) и привязка к ним каждой новой созданной записи, то есть это динамический контент сайта.
Страницы же создаются в основном для вывода в меню и служат объясняющим контентом или контентом для размещения контактных и прочих данных. Им невозможно присвоить рубрики и невозможно сгруппировать, так как это возможно в записях.
Установка страницы по умолчанию
Создаем новую страницу, пока пустую для того, чтобы сделать ее главной страницей нашего сайта. Я для теста создам с именем Page Builder, теперь сделаем ее главной. Идем в меню «Настройки» -> «Чтение» и ставим по умолчанию нашу страницу:
После этих манипуляций возвращаемся к нашей странице и задаем ей 100% ширину контента, это делается в правой части админки и выглядит примерно таким образом:
На разных шаблонах этот пункт может выглядеть по разному, ваша цель убрать всякие виджеты со страницы и дать ей 100% ширину в окне браузера. На этом наши приготовления пришли к завершающему этапу и самое время приступить к Lending page.
Template landing page в конструкторе Page Builder
Переходим на вкладку Page Builder в редакторе нашей страницы:
Нашему взгляду откроется окно в котором и будет происходить весь процесс создания нашей посадочной страницы, а точнее Лендинг пейдж. Но перед практическим занятием, хочу дать пару слов теории.
Page Builder – это визуальный конструктор, который создает контент придавая ему свои формы и места размещения на страницах сайта, сам контент потом выводится при помощи шорткодов. В этого конструктора есть один существенный недостаток, при большом количестве таких страниц система заметно начинает притормаживать. То есть использовать Page Builder стоит лишь на страницах (статике) в записях я не рекомендую его применять. Ну а теперь к делу.
Как я и обещал, для создания лендинга нам не нужны знания верстки или программирования, а все потому, что мы сейчас установим уже готовый шаблон и просто откорректируем под свои нужды. Кликаем на «Готовый макет» и попадаем на страницу с выбором (не много, но что есть). На каждом шаблоне есть кнопка Preview, при нажатии на которую вы будете перемещены на демо данного макета. Так можно просмотреть все доступные варианты, которые открываются на соседней вкладке браузера и чтобы вернуться к выбору достаточно демо вкладку закрыть. Сделав свой выбор кликаем на картинку (превью) и в нижнем правом углу страницы на «Вставить», кстати есть три варианта вставки, в начало, конец и с затираем всего контента страницы.
Работа с готовым шаблоном Lending Page
Достаточно сохранить страницу и потом посмотреть на нее вы увидите готовый, полноценный лендинг. Но давайте посмотрим, как мы можем его редактировать и править под свою информацию. Смотрим в админке, что и как:
У вас будет примерно похожее на то, что я показал выше. Это строки в которых расположен контент при помощи виджетов, что и создает итоговую картину вашего лендинга. Давайте откроем первую строку и посмотрим на нее повнимательнее.
В моем примере первая строка, это виджет SiteOrigin Hero, который отвечает за вывод слайдеров и фоновых изображений первого загрузочного экрана страницы, подробнее описано по ссылке на офф. сайте.
На скрине выше я привел пример редактирования первой строки моего макета, в каждой области редактируется своя часть контента и функционала.
- Область под основной текст (слоган, заголовок)
- Добавление кнопки, если нужно
- Фоновые элементы (изображение, видео)
Со всем стоит пробовать и экспериментировать, не все получится с первого раза, что-то поломается или станет не так, как вам хочется, но практика, это лучший учитель! Для понимания приведу еще один скрин, где я показываю элементы страницы на сайте, а потом как это выглядит внутри админке:
Если вы хоть немножко знакомы с пониманием адаптивной верстки, тогда вы знаете о строках и блоках внутри строк. Так вот, строка, это элемент страницы в котором внутри ставятся блоки (виджеты, которые мы устанавливали в начале статьи). Каждая строка может содержать от одного до десяти или двадцати блоков (виджетов).
Функционал вашего лендинга зависит только от вашей фантазии и желания экспериментировать со строками и виджетами. Мы разобрали с вами только работу с готовыми макетами, но ведь лендинг можно создать и с самого нуля самому. Как это сделать можно, смотрите в моем видео, которое я для этого специально и заснял. Ибо описывать нет ни времени ни сил.
Приятного вам просмотра
sozdaj-sam.com
