- Чым карысныя 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 = "<?