- Чим корисні WordPress Лендінгем Пейдж
- Продають сторінки WordPress landing page
- WordPress landing page templates
- LandX
- AERIS
- Event
- Нові wordpress landing page templates
- Безкоштовна тема WordPress для landing page - Moesia
- WordPress Лендінгем своїми руками
- Як створити шаблон WordPress Лендінгем Пейдж з готового HTML
- Як створити крутий Лендінгем на wordpress
- Створити Лендінгем Пейдж на вордпресс за допомогою плагіна
- WordPress Landing Pages
- Ultimate Landing Page and Coming Soon Page
Стаття розрахована на широкий спектр користувачів, які хочуть:
- створити Лендінгем безкоштовно;
- готові придбати платний шаблон;
- мають мінімальні і середні навички програмування.
Для досвідчених програмістів стаття може бути неінтерестная.
Вибрати Вас варіант можна в навігації по сторінці:
Для початку що таке landing page / Лендінгем Пейдж, вона ж цільова сторінка - це спеціальна Web-сторінка, побудована таким чином, щоб максимально конвертувати відвідувача в покупця. Найчастіше це дуже яскраві сторінки покликані зацікавити користувача який прийшов з реклами. Зазвичай ці сторінки не просуваються, хоча є й винятки, наприклад, коли вам потрібно вирвати топ 10 по одному палаючого пошуковому запиті 🙂 Дізнатися детальніше що таке Лендінгем Пейдж .
Чим корисні WordPress Лендінгем Пейдж
Переваги WordPress Лендінгем Пейдж при рекламі ресурсу:
- можна легко відстежити конверсії з гугл або яндекс реклами;
- користувач не бачить сміття і не втрачається на різних сторінках товарів / послуг;
- велика велика кількість контактних форм і акцій змушують користувача заповнити їх і відправити свої контактні дані;
- весь бюджет витрачається тільки на одну сторінку, - можна мінімізувати расстрати на рекламу.
Лендінгем Пейдж при просуванні
Якщо ваша мета просунуться в пошукових системах в топ позиції по топових високочастотних запитах - то використання Лендінзі це перший крок до цього.
Припустимо вам потрібно просунутися по запросу "гарячі тури", наприклад по Москві (на сьогоднішній день понад 300 000 звернень в місяць). Для цього вам потрібен дуже крутий СЕО фахівець і грамотно спроектований Лендінгем Пейдж, - заточений саме під цей запит.
Так як у вас тільки одна сторінка, адаптивний дизайн і купа дрібничок, поведінкові фактори повинні зіграти свою роль і вивести вас в топ. Звичайно ваші конкуренти не дрімають, і якщо вони вже зробили Лендінгем Пейдж кілька років тому, а ви тільки сьогодні надумали, то треба брати запити по простіше 🙁.
Продають сторінки WordPress landing page
Тим хто не в темі, Лендінзі - ідеальний варіант для продажу невеликого обсягу послуг або товарів.
Landing page - дозволяє вивести всі послуги / товари на одній сторінці так, щоб користувач замовив їх, або як мінімум написав вам на пошту або замовив зворотний дзвінок, а там вже досвідчений менеджер винесе мозок вашому замовнику і всіма правдами й неправдами накаже придбати навіть слона 🙂 .
Якщо у вас невеликий бізнес і ви хочете привлеч в нього якомога більше клієнтів то цільова сторінка WordPress landing page це саме те що вам потрібно + хороший СЕО шник в комплекті 🙂.
WordPress landing page templates
до меню Найпростіший спосіб створити wordpress Лендінгем Пейдж - використовувати готовий шаблон, звичайно якщо вам не потрібен супер унікальний впізнаваний дизайн, в іншому випадку, вас чекає купа гемороя з правкою готових вордпресс шаблонів 🙂.
Надаю вам короткий список непоганих шаблонів для WordPress:
LandX
Платний шаблон LandX для WordPress landing pageЦіна: $ 43
Має багатий функціонал і дозволяє змінювати колірні настройки шаблону. Дозволяє створити складний і барвистий wordpress Лендінгем досить за символічну суму. А якщо знайти цей шаблон безкоштовний, то це мрія всіх розробників бюджетних landing page. Та й фон можна увіткнути який завгодно, механізмів у шаблону вагон.
Отримати посилання на (DEMO)
AERIS
Платний шаблон Aeris для створення звичайних сайтів і Лендінгем Пейдж вордпресс.
Ціна: $ 48
Функціонал шаблону досить скупий, зробити барвистий одностранічнік на ньому у вас не вийде.
Отримати посилання на (DEMO)Event
Платний wordpress landing page template - Event
Ціна: $ 58
Досить функціональний шаблон, який дозволяє зробити wordpress Лендінгем.
Отримати посилання на (DEMO)Нові wordpress landing page templates
до меню Кількість сторінок Лендінгем на wordpress зростає з кожним днем, при цьому шаблони стають все краще і краще. Пропоную Вашій увазі підбірку шаблонів wordpress landing page.
(Натискайте на назву шаблону нижче і дивіться його опис, скін, посилання на демо і так далі)
Вордпресс шаблон: Stratus
З нових шаблонів - це мабуть один з найприкольніших. Ціна шаблону 59 $, але на ньому можна побудувати, крім landing page, також:
- сайт візитку (Product Intro, SaaS / Cloud Software, App Showcase, Startup)
- магазин
- ну і Лендінгем Пейдж.
Цей шаблон 100% заслуговує вашої уваги.
Демо цього сайту знаходиться за адресою: http://demo.themovation.com/stratus/home-one-pager/
WordPress landing page templates: Landlr
Чарівна тема для створення wordpress landing page.
Ідеально підійде для реклами своїх послуг або продажу невеликого числа продукції (НЕ полее 4 штук).
Ціна: 44 $
Подивитися демо можна за посиланням: demo або ось тут Landlr
WordPress landing page: Fusion
Платний шаблон Лендінгем Пейдж вордпресс. Має оригінальний дизайн і безліч налаштувань. У його склад входить пристойне число слайдеров (навіть важко порахувати :-)), різної складності і різного принципу роботи. Ідеально підійде для реклами послуг або інформаційного сайту на одну сторінку.
Ціна: 44 $
Посилання на демо: demo
Безкоштовна тема WordPress для landing page - Moesia
до меню Створював замовнику сайт і набрів на чудову тему для створення одностранічнік - Лендінгем Пейдж. Уніфікована тема Moesia дозволяє створювати як звичайні сайт візитки, так і красиві одностранічнікі. Серед її можливостей:
- анімація частини контенту
- блоки для оформлення послуг
- для продажу електронних товарів
- слайдер зображень
- відгуки / коментарі
- Наші проекти
- адаптуюся
Це поверхосное опис теми, більш детально пропоную подивитися на скінів, спочатку фронтенд:
Всередині у цій теми є такий прикольний билдер, у якого є можливість виставити колонки, рядки, розбити їх довільно, додати свої класи, фон, колір тексту і так далі, а також кілька десятків різних віджетів. Загалом дуже зручна штука.
Тема дуже гарна, але ложка дьогтю все таки є. Розробники криво створили швидкий старт, він імпортує потрібні таксономії для роботи і створює довільні типи, але не імпортує демо для головної сторінки і це очено погано.
Посилання на демо: Demo Moesia
Безкоштовно завантажити тему можна з WP сховища: скачати Moesia
Також, перейшовши за цим посиланням ви можете подивитися ще один безкоштовний Лендінгем шаблон для wordpress .
WordPress Лендінгем своїми руками
до меню Багатьох людей відвідує думка створити Лендінгем самому без шаблонів, але часом вони до кінця не розуміють всю складність цього завдання.
Це найскладніший спосіб створення Лендінгем Пейдж на Вордпресс з одного боку, але з іншого - ви отримуєте повністю функціональний, унікальний шаблон для реклами своїх послуг, продукції або основного сайту компанії.
Якщо ви вирішили самостійно створити WordPress Лендінгем Пейдж, вам потрібно:
- Намалювати PSD макет або замовити у дизайнера. Бажано відразу говорити що потрібен адаптивний макет, інакше ІОСи і Андроїд будуть вернути ніс від вашого landing page.
- Якісно зверстати PSD макет, бажано з використанням HTML5 та CSS3 - це додасть навіть самому простому дизайну статусу і виду, а від сюди довіру до вашого сайту.
- Натягнути HTML макет на Вордпресс або простіше кажучи створити шаблон landing page.
Далі, я розповім вам про останній і найважливіший пункті (3).
Як створити шаблон WordPress Лендінгем Пейдж з готового HTML
Щоб переглянути короткий уроку по створенню Лендінгем Пейдж на ВП натискайте на перемикачі нижче, крок за кроком:
Розкрити крок 3
3. У стилі "style.css" в самий верх закидаємо ось такий код: / *
Theme Name: mylanding
Description: Help-WP.ru
Author: Help-WP.ru
Version: 1.0
* /
+ Ваші стилі, або ж підключаємо їх окремо в шапці
Розкрити крок 6
6. в header.php копіюємо хтмл макет до тега або трохи більше, можна наприклад захопити верхнє меню в цей файл, як це робив я: <! Doctype html> <html> <head> <title> <? Php wp_title (); ?> </ title> <meta charset = "utf-8"> <link rel = "shortcut icon" href = "<? php bloginfo ( 'stylesheet_directory');?> / images / favicon.ico"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <link href = 'http: //fonts.googleapis.com/css? family = Open + Sans: 300,300italic, 400,400italic, 600,600 italic, 700,700italic, 800,800italic 'rel =' stylesheet 'type =' text / css '> <link rel = "stylesheet" href = "<? php bloginfo (' stylesheet_directory ');?> / css / reset.css" type = "text / css" /> <link rel = "stylesheet" href = "<? php bloginfo ( 'stylesheet_directory');?> / css / style.css" type = "text / css" /> <link rel = "stylesheet" media = "screen" href = "<? php bloginfo ( 'stylesheet_directory');?> / css / responsive-leyouts.css" type = "text / css" /> <Link href = "<? Php bloginfo ( 'stylesheet_directory');?> / Js / mainmenu / sticky.css" rel = "stylesheet"> <link rel = "stylesheet" href = "<? Php bloginfo ( 'stylesheet_directory' ); ?> / Js / mainmenu / menu.css "> <link rel =" stylesheet "href =" <? Php bloginfo ( 'stylesheet_directory'); ?> / Js / form / sky-forms.css "type =" text / css "media =" all "> <link href =" <? Php bloginfo ( 'stylesheet_directory'); ?> / Style.css "rel =" stylesheet "type =" text / css "> <? Php wp_head ();?> </ Head> <body> <div class =" site_wrapper "> <div id =" header "> <div id =" trueHeader "> <div class =" wrapper "> <div class =" container_full "> <header class =" clearfix "> <! - Logo -> <div class =" logo "> <a href="#home" data-scroll> <img src = "<? php bloginfo ( 'stylesheet_directory'); ?> / Images / logo.jpg "alt =" "/> </a> </ div> <! - Menu -> <div class =" menu_main "> <nav class =" nav-collapse "> < ul> <li> <a href = "<? php bloginfo ( 'url'); ?> # Home "data-scroll> <i class =" fa fa-circle "> </ i> Головна </a> </ li> <li> <a href =" <? Php bloginfo ( 'url') ; ?> # About "data-scroll> <i class =" fa fa-circle "> </ i> Про компанію </a> </ li> <li> <a href =" <? Php bloginfo ( 'url' ); ?> # Advantages "data-scroll> <i class =" fa fa-circle "> </ i> Переваги </a> </ li> <li> <a href =" <? Php bloginfo ( 'url') ; ?> # Catalog "data-scroll> <i class =" fa fa-circle "> </ i> Каталог </a> </ li> <li> <a href =" <? Php bloginfo ( 'url') ; ?> # Contact "data-scroll> <i class =" fa fa-circle "> </ i> Контакти </a> </ li> </ ul> </ nav> </ div> <! - end menu -> </ header> </ div> </ div> </ div> </ div> <div class = "clearfix"> </ div>меню можна зробити більш людяним, але на даному прикладі це показати не вдалося.
Розкрити крок 7
7. footer.php - у мене виглядає ось так: </ div> <? Php wp_reset_query ();?> <? Php wp_footer ();?> </ Body> </ html>у вас можуть бути інші варіанти, наприклад сюди можна забити copyright або адреса з телефоном.
Я звик робити шаблон landing page так, щоб кожна сторінка з нашого меню, була окремою сторінкою в нашому WP:
Якщо бачимо що інформація у вигляді каталогу або той же слайдер, то можна створювати рубрики під пости:
далі потрібно робити висновок окремих гілок сторінок в один макет.
Робиться приблизно ось так якщо це просто текстова інформація:
<? Php global $ post; $ Tmp_post = $ post; global $ more; $ Tmp_more = $ more; $ Tpost = get_posts (array ( "post_type" => "page", "page_id" => 8)); if ($ tpost):?> <? php foreach ($ tpost as $ post): setup_postdata ($ post); ?> <Div class = "sectionarea" id = "about"> <? Php if (has_post_thumbnail ()) {$ large_image_url = wp_get_attachment_image_src (get_post_thumbnail_id (), 'full');?> <Div class = "one_half"> < img src = "<? php echo $ large_image_url [0];?>" alt = "" class = "img_size1" /> </ div> <! - end section -> <? php}?> <div class = "one_half last about"> <h3> <? php the_title ();?> </ h3> <? php the_content ( '');?> <div class = "clearfix margin_top5"> </ div> </ div > <! - end section -> </ div> <div class = "clearfix"> </ div> <? php endforeach;?> <? php endif; $ Post = $ tmp_post; $ More = $ tmp_more;?>ід 8 - це саме та сторінка що нам потрібна
або ось так якщо це слайдер або каталог:
<? Php global $ post; $ Tmp_post = $ post; global $ more; $ Tmp_more = $ more; $ Tpost = get_posts (array ( "cat" => 2, "posts_per_page" => - 1, "order" => "ASC")); if ($ tpost):?> <div class = "parallax_sec3"> <div class = "container"> <section class = "slider nosidearrows"> <p class = "p_title_slider" id = "advantages"> Галерея </ p > <div class = "flexslider two carousel"> <ul class = "slides"> <li> <? php $ i = 0; foreach ($ tpost as $ post): setup_postdata ($ post); ?> <Div class = "icon_slider_location"> <? Php if (has_post_thumbnail ()) {$ large_image_url = wp_get_attachment_image_src (get_post_thumbnail_id (), 'full');?> <Img src = "<? Php echo $ large_image_url [0] ;?> "/> <? php}?> <div class =" lessw1 "> <? php $ more = 0; the_content ( '');?> </ div> </ div> <? php $ i ++; if ($ i == 2) {$ i = 0; echo "</ li> <! - end section -> <li>";}?> <? php endforeach;?> </ li> <! - end section -> </ ul> </ div > </ section> </ div> </ div> <! - end tweets section -> <div class = "clearfix"> </ div> <? php endif; $ Post = $ tmp_post; $ More = $ tmp_more;?>Це примітивні гілки, вільні цикли вордпрес, які я вже не раз описував як робити цикли WordPress
Йдемо далі, якщо потрібно вставити форму зворотного зв'язку в wordpress Лендінгем Пейдж записуємо ось таку вставку шорткода:
<? Php echo do_shortcode ( '[contact-form-7 id = "48" title = "Форма реєстрація"]');?> В do_shortcode вставлений код виклику Contact Form 7.Ну в принципі, основні моменти того, як створити wordpress Лендінгем Пейдж я вам розповів. Для більшості типових випадків цих гілок і шорткодов буде досить.
Великим плюсом такого landing page буде швидкість його завантаження і можливість правити з адмінки. Адже простенькі Лендінзі, створені на чистому ХТМЛ, не дозволяють легко правити контент без знань тегів і стилів. Вордпресс дозволяє робити Лендінзі зручними для наповнення та редагування під час супроводу сайту.
PS: Звичайно зробити і показати унікальний приклад створення wordpress landing page - це одне, а заточити унікальний хтмл мактет Лендінзі під Вордпресс складніше завдання, тим більше, що в одному уроці складно показати всі можливості WP для створення одностанічніков.
Буду радий допомогти вам радою, якщо у вас виникли труднощі щодо створення сайту одностранічнік 🙂
Як створити крутий Лендінгем на wordpress
Так як використання категорій і посад для Лендінзі не завжди зручно, можна скористатися плагіном довільних полів ACF, який дозволить робити текстові поля в редакторі, а також додавати довільну кількість зображень на ваш сайт.
Основними перевагами такого плагіна для створення wordpress Лендінзі є:
- мобільність полів (всі в одному місці);
- простота додавання динамічного тексту і зображення;
- зменшення навантаження на сервер;
- вищий рівень сайту в адмін частини (в адмінці Лендінгем виглядає більш круто).
Детально прочитати про те як створити крутий Лендінгем на wordpress можна ось тут: https://help-wp.ru/acf-for-wordpress-landing/
Створити Лендінгем Пейдж на вордпресс за допомогою плагіна
до меню Існують плагіни, які дозволяють зробити Лендінгем на вордпресс простіше ніж писати шаблон з нуля. Пропоную вам короткий огляд плагінів для wordpress landing page:
WordPress Landing Pages
Функціональний модуль який дозволяє робити Лендінгем на вордпресс. Звичайно назвати його легким і простим в управлінні та створенні не повертається язик. Без хороших знань ВП у вас особливо нічого не вийде. Та й сторінки простенькі будуть, але як легкий варіант Лендінзі пройде.
Ultimate Landing Page and Coming Soon Page
Досить простий плагін з ще простіше інтерфейсом. В принципі навіщо він може знадобиться мені складно зрозуміти, хіба що зробити гарний фон з лого, і просити людей вводити контактний Email. Особливо велике довіри такий сайт врядли буде вселяти.
Коментарі до запису «Як створити WordPress Лендінгем Пейдж / landing page»:
Doctype html> <html> <head> <title> <?Php wp_title (); ?
Gt; </ title> <meta charset = "utf-8"> <link rel = "shortcut icon" href = "<?
Php bloginfo ( 'stylesheet_directory');?
Com/css?
Php bloginfo (' stylesheet_directory ');?
Css" type = "text / css" /> <link rel = "stylesheet" href = "<?
Php bloginfo ( 'stylesheet_directory');?
Css" type = "text / css" /> <link rel = "stylesheet" media = "screen" href = "<?