WordPress: Создание Responsive Landing Page на WordPress от А до Я. Wordpress landing
Шаблоны Landing Page для WordPress
4 апреля 2016 10 890
Наверное, с моей стороны будет глупо в очередной раз рассказывать в чем заключается столь высокая популярность лендингов, об их преимуществах и т.д. И без этого уже мало кто сомневается в их эффективности. Лендинги действительно работают, а при грамотном подходе показывают просто нереальную конверсию.
25 лучших лендингов 2016 года
Сегодня мне бы хотелось представить 25 самых новых, самых лучших, самых ярких и самых эффектных лендинг-тем для WordPress начала 2016 года.
Чтобы снова не разводить дискуссий на риторический вопрос покупать тему или найти и скачать бесплатно, сразу расставлю все точки над i. Все представленные в данной публикации темы коммерческие, и распространяются, разумеется, не бесплатно. Стоимость варьируется в районе 40-60 USD. Я считаю, цена для тем такого уровня вполне приемлемая. Если кто-то считает иначе — его право!
Не исключаю, что какие-то из тем уже можно найти бесплатно на варезниках. В очередной предупреждаю: скачивая темы с неофициальных и сомнительных ресурсов, вы подвергаете свой и рядом размещенные сайты опасности. Будьте предельно внимательны и осторожны!
1. Dream Land — Single Property Real Estate WordPress Theme
Лендинг ориентированный под продажу объекта недвижимости.
Скачать Демо
2. RPM — Automotive Car Dealership Business WordPress Landing Page
Эффектный автомобильный лендинг.
Скачать Демо
3. Nobel — Minimal & Versatile Multi-Concept Portfolio / Agency WordPress Theme
Изящный дизайнерский лендинг с портфолио.
Скачать Демо
4. DreamHome — Single Property WordPress Theme
Лендинг для продажи недвижимости.
Скачать Демо
5. Engage — Creative One Page WordPress Theme
Многоцелевой лендинг с 17-ю вариантами представления, который подойдет практически под любую задачу.
Скачать Демо
6. KeySoft — WordPress Software Landing Page
Яркий лендинг для презентации приложений.
Скачать Демо
7. Hydro — Multipurpose one page WP Theme
Шикарный многоцелевой дизайнерский одностраничник с 6-ю вариантами форматирования.
Скачать Демо
8. Canna — Creative Elegant WordPress Theme
Очень элегантный многоцелевой лендинг с чистым дизайном.
Скачать Демо
9. ImStartup — Startup Landing Page WordPress Theme
Лендинг-продажник с 5-ю вариантами оформления главной страницы.
Скачать Демо
10. Coworking Co. — Creative Space WordPress Theme
Лендинг коворкинга со встроенным букингом и поддержкой интернет-магазина.
Скачать Демо
11. Neue — App Landing Page WordPress Theme
Лендинг для презентации приложений с поддержкой интернет-магазина.
Скачать Демо
12. Piecia — One Page WordPress Landing Page
Классический лендинг-продажник с 6-ю видами форматирования главной страницы.
Скачать Демо
13. Electron — Event Concert & Conference Theme
Отличный лендинг-букинг для презентации различных конференций, семинаров, концертов и других мероприятий.
Скачать Демо
14. Benchmark — Responsive Multipurpose One Page Landing Page WordPress Theme
Лендинг с 9-ю вариантами оформления для презентации и продажи различных курсов обучения.
Скачать Демо
15. Boden — Creative WordPress Portfolio Theme
Очень стильный лендинг-портфолио.
Скачать Демо
16. Ventum — Creative Portfolio Theme
Лендинг с модным дизайном и полным набором всех современных функций. Поддерживает 2 режима работы: одностраничный и мультистраничный.
Скачать Демо
17. AppBox — App Landing & App Store WordPress Theme
Эффектная тема для сайта приложения.
Скачать Демо
18. Beard Multipurpose Onepage — Multipage Responsive WordPress Theme
Многоцелевой лендинг для презентации приложения и различных электронных услуг.
Скачать Демо
19. Land — Multi Topic Personal WP theme
Тема, вышедшая далеко за пределы представления обычного лендинга с поддержкой множества функций и 11-ю вариантами форматирования главной страницы.
Скачать Демо
20. Renovation Company — Construction and Building WordPress Theme
Строительный лендинг с легким современным дизайном.
Скачать Демо
21. Single Property WordPress Theme — Gapura
Лендинг для презентации и продажи объектов недвижимости. Отлично подойдет агентствам недвижимости, риэлторам, девелоперам, застройщикам.
Скачать Демо
22. Leadinjection — Landing Page Theme
Многоцелевой лендинг-пейдж для WordPress с широчайшим набором функций.
Скачать Демо
23. Shipper Logistic — Transportation WordPress Theme
Лендинг для логистических и грузовых компаний.
Скачать Демо
24. Vrukshagra — Environmental WordPress Theme
Экологический лендинг-пейдж со встроенным интернет-магазином и системой приема пожертвований.
Скачать Демо
25. Apartt Villa — Single Property Real Estate WordPress Theme
Еще один лендинг по теме недвижимости, но более эффектный и динамичный.
Скачать Демо
Не понравились темы?
Попробуйте поискать самостоятельно на ThemeForest. Уверен, ассортимент приятно удивит.
Успехов.
Всё самое новое и интересное я публикую в своём Телеграм-канале. Подписывайтесь!
danilin.biz
Создание Responsive Landing Page на WordPress от А до Я
Новый видеокурс по созданию адаптивного одностраничного сайта и посадке на CMS WordPress. В процессе обучение рассмотрены такие моменты, как проектирование интерфейса, создание скетча, адаптивная верстка и подключение Front-End плагинов, посадка на WordPress и создание опций шаблона. При разработке темплейта учитывалась возможность дистрибуции и распространения темы.
Поделиться
Твитнуть
Поделиться
Класснуть
Плюсануть
Запинить
Материалы на GitHub: https://github.com/agragregra/wordpress-landing-page-lesson
Демо фронтенда: http://agragregra.github.io/demos/wp-landing-frontend/
Плейлист на YouTube: http://www.youtube.com/playlist?list=PLyf8LgkO_8q8UkipPnB-23hXBf4Ma_BcV
Что использовалось:
- ru.wordpress.org — Собственной персоной
- elementary.io — Спасибо за логотип :)
- getbootstrap.com — Адаптивная сетка
- jquery.com — Популярнейший javaScript Framework
- wireframe.cc — Отличный сервис для скетчинга
- gist.github.com — Сервис для хранения полезного кода
- inkscape.org — Векторный редактор SVG
- linea.io — Тонкие векторные иконки
- fortawesome.github.io — Векторные иконки. Использовали для соц. сетей
- codepen.io — Много интересного кода. Спасибо за Sandwich :)
- pixelcog.github.io/parallax.js — Параллакс эффект
- dimsemenov.com/plugins/magnific-popup — Респонсив попап менеджер
- github.com/malihu/page-scroll-to-id — Плагин навигации по Landing Page
- imakewebthings.com/waypoints — Триггер для скролла
- daneden.github.io/animate.css — Анимация элементов на странице
- mixitup.kunkalabs.com — Сортабельные анимированные плитки в портфолио
- bourbon.io — Коллекция миксинов для SASS
- sass-lang.com — Препроцессор SASS
- koala-app.com — Компилятор для препроцессоров
- fontsquirrel.com/fonts/raleway — Бесплатный шрифт для нашей темы
- sublimetext.com — Редактор для фронт-енда
- jetbrains.com/phpstorm — Редактор для бэк-енда
- formspree.io — Отправка заявок с сайта
Спасибо за внимание к материалу.
Премиум уроки от WebDesign Master:
webdesign-master.ru
Создаем привлекательные и эффективные посадочные страницы (landing page) в WordPress
Сторонние провайдеры, такие как Lead Pages или UnBounce, предлагают простые опции для бесчисленных конфигураций продающих и посадочных страниц. Однако если вы являетесь опытным WordPress разработчиком, то вам нужно самостоятельно предложить клиентам удобное решение для создания посадочных страниц.
Сегодня мы посмотрим на ресурсы, темы и плагины, которые позволяют вам создавать функциональные, профессионально выглядящие, автономные продающие и целевые страницы.
Основы
Можно с высокой вероятностью предположить, что подавляющее большинство клиентов разработчиков и дизайнеров имеют свой бизнес. И основная цель создания онлайн-представительства для любого бизнеса – это конверсия, т.е. превращение посетителей в покупателей. Ваши клиенты хотят видеть конверсию. Целевая страница – это квинтэссенция конверсионного веб-сайта. Целевые страницы – это маркетинговый инструмент, и необходимы они для выполнения одной простой задачи: заставить вашего посетителя совершить какое-либо действие – подписаться на рассылку, заказать членство/продукт/сервис.
Лендинг пейджи используются для продажи приложений, электронных книг, привлечения новых посетителей на разные семинары и т.д. Они могут быть очень эффективными, просто спросите об этом, к примеру, Обаму. Однако если создавать их машинально, то они будут практически бесполезны.
В маркетинге продающие страницы (landing page) – несколько иной тип страниц, нежели страницы coming soon (несмотря на то, что хорошая coming soon страница должна тоже привлекать клиентов).
Посадочные страницы обычно разрабатываются отдельно от остального сайта и могут вполне обходиться без меню, сайдбаров, футеров и/или сторонних ссылок. Трафик направляется к целевой странице с помощью определенных источников – Facebook объявлений, LinkedIn, Google Adwords, ссылок в сайдбаре и т.д, что связано с кампанией.
Термин «посадочная страница» — это универсальное понятие, которое включает в себя не только целевые, но и продающие страницы, однако все эти страницы в целом создаются одинаково, и их формат, как показала практика, отлично работает. В то время как только приблизительно половина маркетологов создают новые целевые страницы под каждую отдельную кампанию, что показывает статистика Hubspot, сайты, использующие более 30 landing page, генерируют в 7 раз больше посетителей, чем те, которые имеют менее 10 посадочных страниц.
Если вы до сих пор не убеждены в их полезности, просто посмотрите на следующую инфографику, которая может послужить полезным мотиватором для вас.
Элементы хорошей продающей страницы
Создание страницы – это только половина дела. Теперь вам нужно будет все на ней разместить.
Вот некоторые советы от экспертов для создания качественной посадочной страницы:
- Делайте ее как можно более простой для увеличения конверсии. Никаких хэдеров, меню и огромного количества внешних ссылок. Вам не нужно, чтобы ваши посетители долго думали над совершением ожидаемого действия.
- Высококачественные изображения и видео приводят к хорошей конверсии, поэтому обязательно встраивайте ролики.
- Чистая, просторная, без лишнего мусора страница работает гораздо лучше, чем страница, забитая информацией
- A/B-тестирование поможет вам понять, какая страница работает лучше всего, и, соответственно, повысить свои продажи
В том случае, если вам требуются примеры целевых страниц, вы можете посмотреть варианты типичных landing page от UnBounce.
С технической точки зрения, вам нужно будет встраивать разные формы, кнопки «Купить сейчас», расписание встреч, семинаров, мероприятий, ссылки на корзину товаров. Как только страница будет создана и заполнена всем необходимым, вам нужно будет протестировать ее работу на клиентах.
Варианты разработки страницы
У вас есть широкий спектр разных решений, позволяющих создать посадочные страницы в WordPress. Многие темы и фреймворки в данный момент имеют шаблоны посадочных страниц. К примеру, Genesis от StudioPress включает в себя шаблон для целевой страницы; также можно рассмотреть и Divi.
Если ваша тема не включает в себя свой собственный шаблон посадочных страниц, вы можете:
- Создать самостоятельно пустой шаблон для landing page в вашей текущей теме
- Использовать плагин для создания лендинг пейдж
- Использовать тему, предназначенную для создания лендинг пейдж
- Воспользоваться всеми преимуществами сторонней интеграции с WordPress через сайты, такие как Lead Pages или Unbounce
Если вы используете чистый шаблон для лендинга в вашей теме, или тема идет вместе с шаблоном посадочной страницы, вы можете использовать специальный билдер для страниц, либо убедиться в том, что ваши плагины поддерживают шорткоды, необходимые для вложения разных форм, видео и т.д.
Самостоятельно созданные решения
Если вы хотите писать код с нуля самостоятельно, то в таком случае вы можете создать шаблон страницы, лишенный меню, сайдбара и футера. Вы можете воспользоваться следующим простым руководством, однако если вам понадобится хэдер и футер, то в таком случае вам нужно будет создать соответствующие файлы header-landing.php и footer-landing.php, после чего передать их имена в функции хэдера и футера.
Вот быстрый, достаточно грязный пример того, как я создал страницу с помощью TwentyThirteen.
Стандартный шаблон расположен слева, а обрезанная целевая страница справа. Я оставил сайдбар, чтобы использовать в нем виджет подписки, однако вы можете удалить и его, что зависит от вашей темы.
Естественно, вы можете все продумать гораздо тщательнее: к примеру, добавить произвольную стилевую таблицу для ваших посадочных страниц и т.д.
Если вы хотите пойти по пути самостоятельного кодирования, и вы передадите эту страницу клиенту, вы можете установить билдер страниц, который ваш клиент сможет использовать для размещения всех необходимых элементов.
Я бы углубился в эту тему и далее, но у нас уже есть подробный обзор разных билдеров страниц.
Плагины и темы для создания лендинг пейдж
В рамках этой статьи я сфокусируюсь в большей степени именно на плагинах и темах для посадочных страниц (не буду брать плагины для страниц coming soon).
Бесплатные решения
The Landing Page
The Landing Page – это очень легкая, минималистическая тема, не включающая в себя сайдбар, футер и хэдер.
Со своей задачей эта тема отлично справляется. Есть несколько базовых опций темы, которые позволяют добавлять медиа-кнопки в самый низ страницы, однако в основном все важные действия совершаются (или должны совершаться) в билдере страниц.
Ultimate Landing Page
Ultimate Landing Page идет вместе с очень базовым шаблоном и отсутствием какой-либо кастомизации.
Платное обновление открывает еще 9 шаблонов и некоторые дополнительные особенности. Это очень простой в использовании плагин. Однако если бы передо мной встал выбор между этим плагином и чистой темой с билдером страниц, я бы скорее склонился к последнему варианту.
WP Landing Pages
WP Landing Pages – еще один супер простой генератор посадочных страниц. Он предлагает на выбор несколько базовых шаблонов, а также позволяет вам изменять фоновые изображения и текст. Помимо этого, у вас есть достаточно ограниченные средства для контроля над создаваемыми вами посадочными страницами.
Landing Pages Builder
Landing Pages Builder – еще один «бесплатный» плагин, который вы можете найти в репозитории WP. Однако учтите – бесплатная версия практически бесполезна. Тестирование было многообещающим, однако в реальности вы не можете воспользоваться никакой функциональностью для создания живых лендинг пейдж, пока не заплатите $45/месяц.
WordPress Landing Pages
WordPress Landing Pages от Inbound Now обещает, что вы получите все, что вам требуется для запуска эффективной landing page кампании, включая визуальный билдер страниц, A/B сплит-тестирование, а также отслеживание показателей конверсии.
Плагин предлагает выбор бесплатных шаблонов, а также дополнительную интеграцию с сервисами и платные шаблоны.
Небольшое предупреждение: это было бы круто, если бы этот плагин действительно работал, но после игры с ним в течение нескольких часов я сдался.
Премиальные решения
OptimizePress
OptimizePress – это решение для WordPress, которое поставляется с 30+ прекрасно выглядящих и полностью адаптивных тем для создания продающих, целевых и регистрационных страниц.
Используя визуальный редактор, вы можете размещать на целевых страницах самые популярные элементы, такие как формы подписки, комментарии Facebook, разные стрелки, значки и т.д. Он интегрирован с большинством провайдеров почтовых рассылок, и также дает вам возможность создания безопасного портала.
Недостатки? Цены начинаются с $97, и вы можете использовать плагин только на тех сайтах, которыми вы владеете. Чтобы получить доступ к девелоперской лицензии, вам нужно будет приобрести базовый пакет, который начинается с $249.
Thrive Content Builder
Thrive Content Builder поставляется вместе с комплектом прекрасных шаблонов для посадочных страниц.
По сути это билдер страниц и визуальный редактор, однако предложение набора шаблонов, которые могут использоваться посетителями для заполнения и подтверждения подписки – очень умная идея.
Девелоперская лицензия стоит от $199/год.
Authority Pro
Authority Pro, контрастирующий с двумя вышеперечисленными плагинами, выглядит несколько устаревшим, однако если вы желаете получить стандартную страницу продаж, то в таком случае вы можете им воспользоваться.
Опять же, это билдер страниц, который был создан для маркетинговых целей. Цены начинаются с $97, однако я так и не смог отыскать информацию касательно лицензирования.
Just Landed
Just Landed – билдер адаптивных страниц/тем, который включает в себя все элементы, требуемые для создания продающих страниц.
Вы можете создавать столько посадочных страниц, сколько вам нужно, под разные продукты и услуги, используя предварительно созданные блоки, такие как ценовые таблицы, рекомендации и т.д.
Это – самое экономичное решение, поскольку его цена составляет $58.
Заключение
Любите ли вы их или ненавидите, но посадочные страницы в онлайн-маркетинге крепко заняли свою нишу. Подумайте об этом, ведь 68% B2B-компаний используют посадочные страницы. Есть отдельный рынок по разработке целевых страниц. Есть даже веб-разработчики, которые занимаются исключительно созданием целевых страниц для своих клиентов. Учитывая доступные варианты, если вы не хотите создавать страницы самостоятельно, вы можете легко инвестировать свои средства в одну из доступных платформ для реализации лендинг пейдж.
P.S. Также вы можете рассмотреть следующие хорошие плагины для создания целевых страниц: WP Lead Plus Free, Parallax Gravity и Impact Template Editor.
Источник: wpmu.org
oddstyle.ru
