Кой е най-добрият начин да направите сами целева страница? Как сами да направите целева страница: инструкции стъпка по стъпка

Създаването на целева страница (целева страница) или целева страница, целева страница опростява пътя на потребителя до желаната от вас цел възможно най-много. Такава страница е предназначена да повлияе на основните инстинкти на човек, да го насърчи да извършва целенасочени действия: щракнете, обадете се, поръчайте, купете „точно сега“.

Целевите страници са най-подходящи за провеждане на рекламни кампании за конкретна услуга или оферта с уникална (ниска) цена, както и за привличане на целевата аудитория от системи за контекстна реклама Google AdWords, Yandex.Direct, социални мрежи и имейл бюлетини:

Какво е целева страница?

Целевата страница е отделна страница, която се използва за:

• продажби на конкретен продукт или услуга;
• създаване на абонаментна база.

След като решите да създадете целева страница, трябва да използвате необходимите тригери за влияние, които тласкат потребителя бързо да вземе решение (закупуване на продукт, въвеждане на информация за получаване на отстъпка, участие в курс, уебинар и т.н.).

От гледна точка на потребителя, целевата страница е страницата, на която той попада след щракване върху информатор, банер, рекламен пост и др. Целевата страница е коренно различна от онлайн магазина. За да продадете един продукт и да проведете една рекламна кампания, вие създавате своя собствена страница и използвате различни тригери за влияние.

Типове целеви страници:

• Автономен. Това е най-често срещаният тип целева страница. Основната задача е да насърчи потребителя да закупи или да предприеме конкретно действие, препоръчано от страницата;
• Микросайт. Малък, често отделен уебсайт, състоящ се от не повече от 5 страници, съдържащи информация за продукт или услуга;
• Основен сайт. За целева страница използва една или повече страници с ресурси;
• Уебсайт на Lando. Ресурс, който се състои изцяло от независими целеви страници:

Типове целеви страници

• реклама. Съдържат голямо количество текстова, графична и видео информация за услугата;
• Вирусен. Рекламата е маскирана като статия или игра. Често включва имейл, социални мрежи, чатове;
• Насочени водещи страници. Предназначени да събират информация за целевата аудитория, като правило те съдържат минимум информация.

Една добре проектирана целева страница може да увеличи превръщането на посетителите в истински купувачи.

Защо ви е необходима целева страница?

Основната цел на целевата страница е продажбата. Целевата страница съдържа продаващ текст, представяне на продукт или услуга и призив за действие. Landing page е отличен инструмент за бързо стартиране на услуга или продукт в Интернет. Целевите страници ви позволяват да събирате абонати и заявки за услуги и др.

Ако представите продукта/услугата си правилно, направите добра презентация, като посочите силните страни, а също така настроите трафик (реклама в социалните мрежи, контекстна реклама и т.н.), всичко, което трябва да направите, е да съберете заявки от клиентите си и да продавате рекламирания продукт/услуга.

Ползи от използването на Landing Page

Лендингът, в сравнение с редовните страници с ресурси, предлагащи услуги или продукти, има редица предимства:

• Насочване към определена аудитория. Целевата страница не предлага много решения, изискващи избор от потребителя, а едно уникално предложение, на което е трудно да се устои;
• Висока конверсия. Според статистиката използването на целеви страници за рекламни цели може да увеличи конверсията с 10-15%;
• Пълна информация за предлагания продукт/услуга, но без допълнителни преходи и линкове;
• Възможност за събиране на контакти на посетители и попълване на базата данни с потенциални клиенти, на които по-късно можете да изпращате информация за предстоящи промоции/лотарии;
• Ниска цена за създаване на целева страница. Дори начинаещи бизнесмени могат да си позволят да създадат целева страница, като по този начин тестват продуктови ниши, за да започнат да продават в Интернет:

Къде и как се използват целевите страници?

Можете да направите целева страница вътрешна или главна страница на корпоративен ресурс, уебсайт от една страница или страница в социална мрежа. Напоследък става все по-популярен (офлайн страници) за ключови продукти, в момент, когато компанията вече има корпоративен сайт. Това правят юридически и медицински компании, банки, мобилни оператори и много други.

Къде се използват целевите страници?

• В рекламни кампании, използващи контекстно рекламиране с плащане за кликване (PPC) в Yandex.Direct, Google AdWords, Begun. В този случай трафикът се пренасочва към целеви страници, оптимизирани за ключови заявки;
• В банерни рекламни кампании, при условие че графичният материал е поставен върху тематични ресурси, предназначени за целевата аудитория. Например банерна реклама за нови продукти в областта на електрониката се поставя на новинарски портали в сегмента за специалисти в областта на ИТ технологиите;
• В бюлетини с информационни и маркетингови писма, съдържащи връзка към целевата страница. Например бюлетини за онлайн магазин, които вземат предвид предишни покупки на потребителя;
• Провеждане на блог кампании, в които потребителят се пренасочва към целевата страница на ресурса, със собственика на който блогърът предварително сключва споразумение за партньорство за поставяне на банерна реклама, пощенски и PR статии;
• Кампании в социалните мрежи (VKontakte, Facebook, Twitter и др.) или в популярни сайтове за хостинг на медии (например YouTube, Flickr и др.). Потребителите се пренасочват към целевата страница на рекламодателя, който има споразумение за поставяне на рекламни материали с избрания медиен ресурс:

Основни начини за създаване на Landing Page

• Безплатни шаблони и генератори на целеви страници. В днешно време в интернет има много опции за безплатни шаблони и дизайнери, които ви позволяват да генерирате целева страница. Най-популярната услуга. Това е отличен вариант за компании с ограничен бюджет, но с персонал от специалисти, запознати с маркетинг и дизайн;
• Свързване със специалисти. Можете да поръчате текст за целева страница от копирайтър, разработка на дизайн от дизайнер и интеграция с двигателя от програмист. В същото време компанията трябва да има маркетолог в персонала, който да наблюдава проекта на всичките му етапи. Предимствата на този метод включват сравнително ниска цена и сравнително високи резултати, недостатъците са рискът от грешка при избора на специалисти;
• Аутсорсинг на агенция. Този метод за създаване на целева страница включва свързване с агенция, която ще поеме анализа на конкурентите, ще избере концепция, ще разработи стратегия за рекламна кампания, ще реши проблема с интеграцията с двигателя и ще стартира проекта. От вас се изисква само бриф за създаване на лендинг страница, а агенцията ще поеме изработката на лендинг страница до ключ. Предимствата на този метод включват висока ефективност и спестяване на време, недостатъците са по-високи разходи в сравнение с предишните опции;
• Поддържайте персонал от специалисти, които ще се занимават с... Това е най-скъпият и ефективен начин. Вашият собствен екип, състоящ се от дизайнер, копирайтър, маркетолог и програмист за оформление, ще ви позволи да популяризирате напълно вашия продукт/услуга на пазара.

Възможно ли е сами да създадете целева страница?

Можете сами да създадете целева страница, но ще трябва да имате определени умения в уеб разработката, анализите и дизайна. Ако нямате такъв опит, използвайте услуги, които предлагат готови шаблони, в които трябва само да попълните текста и да конфигурирате домейна и хостинга.

Създаването на целева страница сами ще спести пари и време. В интернет можете да намерите ресурси с различни по тематика шаблони, които идват с инструкции за бърза инсталация и софтуер, позволяващ редактиране. Цената на такива комплекти може да бъде много по-ниска от цената за разработване на целева страница в специализирана агенция:

Възможно ли е да създадете целева страница безплатно?

Тъй като интересът към целевите страници непрекъснато нараства, разработчиците предлагат все повече инструменти за създаване на целеви страници въз основа на шаблони. Ето списък на най-популярните методи и услуги:

• Можете да създадете безплатна целева страница, ако се регистрирате в Wix;
• Можете да направите целева страница с помощта на Adobe Photoshop;

Третият вариант е най-подходящ за начинаещи, които имат минимум познания и не искат да губят време в изучаване на сложни системи за уеб програмиране.

Оптимизация на целевата страница

Създаването на целева страница е половината от битката; важно е да я оптимизирате правилно. Уеб сайтовете с една страница имат един, но доста съществен недостатък - за търсачките е доста трудно да ги открият. Многостраничните ресурси имат уникални заглавия, правилни връзки и сложна структура, показваща теглото на страниците и т.н.

Архитектурата на едностраничния сайт не позволява да се извърши качествена вътрешна оптимизация в класическия смисъл, да се „приспособи” сайта към изискванията на търсачките. Решение от Google ни позволи да се отървем от този проблем - оформление с помощта на JavaScript и метода PushState.

За да оптимизирате вашата целева страница, трябва да направите следното:

• разбийте целевата страница на блокове;
• Всеки блок трябва да получи свой собствен уникален индикатор, заглавие, описание и заглавие, URL.

Тоест, всеки блок трябва да има същите свойства като всяка отделна страница на сайта, докато роботът за търсене ще възприеме вашия сайт като няколко уникални страници. Посетителите на целевата страница може да не забележат това решение; само най-внимателните ще забележат, че докато превъртате по страницата, URL адресът и заглавието се променят. За да реализирате такъв проект, ще ви трябват определени познания в областта на SEO и оформлението с JavaScript.

Ако се нуждаете само от информация за услуги, с които можете да направите целева страница, тогава преминете направо към стъпка 5 - избор на инструмент за оформление. Ако искате да разберете алгоритъма за създаване на целева страница от А до Я, прочетете цялата статия.

Как да направите целева страница - инструкции стъпка по стъпка в 9 етапа Етап 1. Подготовка Цел на целевата страница

На първо място, определяме целта на целевата страница, какво искаме да получим от посетителите на страницата. Обикновено това е едно от три неща:

1. Продажба на стоки/услуги (пример: продажба на мед, продажба на услуги за дизайн на лого, продажба на онлайн курс);
2. Получаване на контакт (пример: абонамент за бюлетин, заявка за измерване);
3. Информация (пример: покана за безплатно офлайн събитие, промо страница на магазин с промоции).

Ние определяме целевата аудитория и какво е важно за нея

На тази стъпка за нас е важно да разберем коя е целевата аудитория за нашето предложение, какви болки имат, какви желания, какви страхове и какво искат да получат тези хора. Важно е да разберете всичко това, така че елементите на уебсайта, като текст и дизайн, да се фокусират върху целевата аудитория (целева аудитория).

Как да определите целевата аудитория?

• Анализирайте онези клиенти, с които вече сте работили или работите в момента;
• Попитайте клиентите какво е важно за тях. Да, точно така, просто се обадете или пишете, подгответе списък с въпроси предварително;
• Запомнете, или още по-добре, запишете въпросите, които най-често ви задават за вашия продукт;
• Четете тематични сайтове/форуми, вижте какво притеснява вашите клиенти.

Разглеждане на конкурентите (бенчмаркинг)

Когато сте записали всичките си мисли и идеи относно бъдещата целева страница, е време да започнете да анализирате конкурентите (бенчмаркинг). Ако вече познавате вашите конкуренти, чудесно; ако все още не, търсете в търсачките, като използвате ключовите думи за вашата ниша.

Целта на анализа е да се намери и види какво конкурентите правят зле и не повтарят грешките си и какво правят добре, да се разгледат идеи, липсващи блокове, интересни дизайнерски решения. Това не означава, че просто трябва да ги копирате, разбира се, не е нужно да правите това, запазете ги за себе си, след което на етапа на писане на текста и разработване на дизайна ги адаптирайте към вашия проект.

Как да направя това: Създавам отделна папка, наречена „Идеи“ и правя екранни снимки на интересни блокове.

Етап 2. Писане на текст за целевата страница

За мнозина (включително и за мен) писането на текст е най-трудният етап от развитието, така че аз лично винаги се опитвам да делегирам този етап на копирайтър.

Пренесете хаоса в главата си на хартия

Просто, без да мислите за последователността, прехвърлете всички мисли и идеи за бъдещото кацане на хартия. Запишете всичко, за което искате да говорите. Когато напишете такъв списък с мисли, плюс ние разгледахме идеи от конкуренти, следващата стъпка е да комбинирате всичко това и да композирате блоковете и структурата на целевата страница.

Изработване на блокове за кацане

Целевата страница се състои от определени блокове; не можете просто да напишете плътен текст като статия и просто да го публикувате. Това ще бъде ужасно неудобно за четене.

Ето основния списък с блокове, които могат да бъдат намерени на 90% от целевите страници:

Първи екран с USP (уникално предложение за продажба)

Разкриване на продукта (описание на услуга или продукт)

Информация за автор/фирма

Отзиви

Случаи (истории на успеха)

Форма/призив за действие

ЧЗВ (Отговори на често задавани въпроси)

Контакти / долен колонтитул на сайта

Какви други блокове може да има на сайта:

• Факти в числа
• Ползи (предимства)
• Видео
• Портфолио
• За кого
• Етапи на сътрудничество (или как да направите поръчка, как да оставите заявка)
• Тарифи и цени
• Партньори
• Галерия
• График
• Екип
• Сертификати, грамоти, благодарствени писма
• Документация
• Таймер

Когато рамката на целевата страница е готова, започваме да пишем текста. Можете да го направите сами или да го възложите на копирайтър.

Поставяме основното в началото. Няма нужда да пишете за себе си в началото на сайта, първо покажете продукта си.

Заменете общите думи с факти. Няма нужда да убеждавате посетителите в каквото и да било, оставете това право на тях. (Пример: не пишете, че сте лидери на пазара, на които може да се вярва, покажете рецензии на компании, на които сте предоставили услуги и те са останали доволни, освен това прикачете оригиналната рецензия, за да не бъдете неоснователни).

Работете особено добре на първия екран и USP. След като посетител попадне на вашата целева страница, имате три секунди, за да привлечете вниманието му. Ако не сте имали време, човекът ще затвори страницата и ще продължи да сърфира. Първият екран трябва да е възможно най-подходящ за заявката, чрез която посетителят е стигнал до сайта. (Пример: ако човек търси „Счетоводство за индивидуален предприемач“, няма нужда да показва целева страница със заглавие „Счетоводство за LLC“).

USP (уникално предложение за продажба). Казано по-просто, основното заглавие и описание, което трябва да разкаже накратко за какво става дума в тази целева страница. Можете да създадете USP с помощта на 4U технология.

Колкото по-кратко, толкова по-добре. Опитайте се да пишете блокове от текст възможно най-кратки. Никой не чете дълги текстове, днес хората винаги имат липса на време и това трябва да се вземе предвид. Ако все още трябва да предоставите много информация, разделете я на параграфи и блокове.

Още заглавия. Абзаците от текста не трябва да се пишат просто така, без заглавие. Повечето посетители, когато посещават уебсайт, първо превъртат през сайта, опитвайки се да преценят дали са попаднали там или не. И тук важна роля играят заглавията, защото той ще прегледа сайта и ще оцени сайта именно по тях.

Не искате сами да композирате текста? Намерете копирайтър, който ще направи това вместо вас.

Къде да търся копирайтър

Борса за писане на текстове ContentMonster.ru

Борса за копирайтинг Etxt.biz

Частни фирми или специалисти. Можете да ги търсите чрез търсене или в социалните мрежи (VK, Facebook, Instagram).

Можете да се обърнете към копирайтър не само за разработване на текст от нулата. Например, можете да се свържете с нас с готов списък с блокове, с първоначални скици или дори с вече компилиран текст, който копирайтърът ще „съживи“, ще направи по-интересен и ще коригира грешки.

Етап 3. Създаване на прототип

Преди етапа на проектиране е важно да се създаде прототип, нека ви кажа защо. Има няколко причини:

Без прототип ще отделите повече време, колкото и да е странно :) В началото на кариерата ми, след като написах текста, веднага направих дизайна. Мислех, че по този начин ще спестя време, но в действителност се оказа, че всичко отне още повече време, защото не е удобно веднага да се измислят дизайнерски елементи без рамка.

Проблеми с клиента, ако правите целева страница по поръчка. Всеки е имал тази ситуация. Одобрихте текста и веднага започнахте да правите дизайна, отделихте много време, изпратихте го на клиента, а той казва, че всичко не е наред и трябва да се преработи, текстът да се размени и т.н. Това е много по-трудно да се направи, когато дизайнът вече е готов, отколкото когато имате само прототип от текст и кръгове.

Прототипът може да се сравни със скицата, която правите преди боядисване. Малко хора могат да вземат бои и веднага да нарисуват картина. Така че тук първо правим скица, виждаме как се получава приблизително, кои блокове могат да се местят, променят, добавя или премахва текст и т.н.

Пример от моя случай на прототип и дизайн, направен с помощта на този прототип.

Пример за прототип

Примерен дизайн на прототип

На прототипа посочваме:

• Поставяне на текст, подчертаване на заглавия;
• Къде ще бъдат разположени графиките (картини, икони)?
• Къде ще са бутоните?
• На кой блок фонът ще е светъл и на кой блок ще е тъмен.

Услуги за създаване на прототипи:

• Фотошоп. Правя го във фотошоп. След като одобрим прототипа с клиента, тук е удобно да направим дизайн въз основа на прототипа.
• Услуга за мокапи. Специална услуга с готови елементи, просто плъзнете и пуснете и добавете вашия текст.
• На хартия. Можете да скицирате прототип на ръка, ако целевата страница не е сложна и не искате да се занимавате твърде много.

Винаги започвам прототип на хартия, така ми е по-удобно. След това го прехвърлям във Photoshop.

Използвайте Bootstrap Grid

Също така ви съветвам да направите дизайна на мрежа, така че по-късно да може лесно да се адаптира към различни устройства. Ако изберете инструмент за дизайн за оформление, при който самият дизайн се адаптира към различни екрани (повече за инструментите за оформление по-късно) и не използвате отделна мобилна версия на сайта, тогава дизайнът трябва да бъде разработен върху мрежа.

Шаблонът за мрежа на Photoshop, който използвам в работата си, можете.

Етап 4. Изработване на дизайна

Всички елементи на дизайна на целевата страница могат да бъдат разделени на три части, това е селекцията:

Шрифт

Цветове

Графики (снимки, икони, картинки)

Всеки елемент създава определено настроение, за нас е важно да изберем такава комбинация от всички елементи, така че посетителят да изгради правилно, доверително отношение към нашата компания и продукт.

Като пример: В сайт, предлагащ погребални услуги, ярки цветове и момиче с лъчезарна усмивка с надпис с големи букви ПРОМОЦИЯ! едва ли ще са подходящи. Или сайт за организиране на празници в сиви, избледнели цветове, с черни бутони и серифен шрифт, след като го видите, искате да изпаднете в депресия и да не поръчате почивка за детето си. Примерите, разбира се, са преувеличени, едва ли ще ги видите в живота (въпреки че е възможно), но мисля, че схващате същината.

Нека обсъдим всеки елемент по-подробно.

Шрифт

Текстът е основата на всеки уебсайт, така че шрифтът е не по-малко важен от цвета или графиката. Шрифтът също може да създаде настроение, той може да бъде лек или брутален, да предизвиква усещане за скъпост или простота и т.н.

Въз основа на вашата тема и емоцията, която искате да предизвикате у посетителите.

Ако не искате да се занимавате с комбинации, вземете готовите неутрални опции, които съм подготвил за вас. Те ще отговарят на всяка тема. Това:

• Робото
• Open sans
• Pt sans

Изберете един или два от тях и разбъркайте.

Например:

Заглавие - Roboto (удебелено)
Текст - Roboto (светъл)

Заглавие - Open sans (удебелен)
Текст - Roboto (светъл)

Заглавие - Pt sans (обикновено)
Текст - Отворен без (светъл)

Къде мога да взема шрифтове?

Има безплатни и платени шрифтове. В първите етапи ви съветвам да използвате безплатни шрифтове от Google Fonts. Там има добри опции и тези, които описах по-горе, също ги има.

Защо препоръчвам шрифтове на Google?

Тъй като техният лиценз ви позволява да използвате шрифтовете както за себе си, така и за търговски цели. Ако решите да закупите шрифта, който харесвате, от разработчици или в специални онлайн магазини, тогава добре, няма проблеми, но ако планирате да изтегляте шрифтове безплатно от сайтове на трети страни, тогава е важно да проверите лиценза, т.к. можете да нарушите авторските права, ако използвате шрифт, който е платен, но не сте го купили.

Ако правите уебсайт за себе си, заменете себе си; ако го правите за клиент, заменете клиента.

Цвят Как да изберем правилната цветова схема за уебсайт?

Бял, сив и черен цвят вече са включени в комплекта, те винаги се използват, например шрифтът е бял, сив или черен, фонът на сайта е бял, сив или черен. Каквото и да кажете, тези цветове вече ще бъдат използвани на целевата страница. Наричат ​​се ахроматични (не съдържат цветови нюанси). Остава само да изберете хроматични цветове (цветни нюанси).

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

Гледайте интересно видео по тази тема

Вие също трябва да ги изберете въз основа на вашата тема.

Примери какво настроение предизвиква всеки цвят:

Материалът за цветовете е взет от тук.

Графика (снимки, икони, картинки)

Последната тенденция е, че е по-добре да използвате възможно най-много ваши снимки, отколкото да използвате изображения от стокови снимки или безплатни такива от интернет. Това се случи, защото стоковите снимки вече са станали скучни; еднакви усмихнати жени от колцентър или щастливи, накачени хамали в сини гащеризони предизвикват чувство на най-малкото недоверие.

Честно казано, и аз съгреших с това преди, но сега моля (умолявам) клиентите да изпращат колкото се може повече свои „живи“ снимки на продукти, персонал, помещения и т.н.

Вярно е, че е по-добре да направите снимка на телефона си, дори и да е с по-ниско качество, но клиентът ще разбере, че не се криете зад маска на снимка от интернет, а показвате лицето си, още една точка за доверие във вашата личност.

Разбира се, има теми, в които няма нищо специално за показване, тогава вече можете да прибягвате до стокови снимки. Все още съветвам да купувате снимки там, вместо да търсите безплатни в търсенето, защото те се използват по-често в други сайтове.

Някой ще каже: „Иля, стоковите снимки изглеждат като самолет!“ - има такова нещо :) Има начин да изтеглите снимки за долар, относно услугата. Е, ако правите проект за голяма търговска компания, тогава е по-добре да предвидите тази сума и да закупите снимки от официален фотосток, отново за да се защитите.

• Услуга ShopDiz.pro - изтегляне на изображения от склад за 0,5-1 долар.
• Услугата ShutterStock е най-популярната стока с голям брой снимки, вектори и видеоклипове.

Когато избирате снимки, се съсредоточете и върху вашата тема и какви емоции искате да предизвикате у клиентите. Доверие, радост, надеждност, щастие и т.н.

Как да излезем с дизайнерски идеи за блокове? Тук няма универсално правило. Основното е да премахнете всичко, което ви се струва ненужно, да съкратите текста, да използвате умерено графики и да не претоварвате. Разгледайте примери за добри целеви страници, направете бележки за себе си, направете екранни снимки на блокове, които харесвате, за да можете след това да направите нещо подобно във вашите проекти.

Етап 5. Изберете инструмент за оформление

Днес има много инструменти за оформление, ще говоря само за тези, които съм използвал сам и които са най-удобни за мен и за клиентите.

1. CMS WordPress + WPBakery или Elementor builder

Инсталирате WordPress CMS, инсталирате шаблона, създателят на WPBackery е платен, но идва безплатно с 99% от шаблоните, които аз . Има втори удобен дизайнер, това е Elementor, той е безплатен, но за да разширите функционалността му, купете Pro версията на Elementor. За мен и двата дизайнера са удобни, не мога да препоръчам нито един, всеки има своите предимства. Разгледайте описанията и опциите на сайтове с двата конструктора и изберете подходящия.

Използвам тази опция основно, ако освен целевата страница имаме нужда от допълнителни страници, тоест правим многостраничен сайт. Или, за да не е обвързан с някаква платформа, сайтът трябва да се намира на вашия личен хостинг.

Например в този блог използвам шаблона The7, който идва с плъгина WPBakery.

Можете да изберете домейн в услугата:

• Reg.ru - регистрация на домейн
• Timeweb.com - ако закупите домейн веднага с хостинг, тогава е по-изгодно да купите тук

Регистрацията на домейн е еднаква за всички услуги:

Регистрирайте акаунт в услугата;

Изберете опция за домейн, името трябва да е свободно;

Изберете зона (ru, com, рф и др.);

Въведете паспортните си данни, ако се регистрирате като юридическо лице, след това данните за фирмата;

Платете за домейн за една година (или няколко години наведнъж);

Готов!

За да асоциирате домейн с избрания дизайнер или хостинг, е необходимо да регистрирате ns сървъри в настройките на домейна. Поддръжката ще ви помогне да се справите с тази задача, ако не можете да я разберете сами.

Етап 7. Оформяне на целевата страница

Когато дизайнът е готов и сте решили метода на оформление. Следващата стъпка е да завършим цялото това нещо.

Би било невъзможно да се говори за всички инструменти за оформление в една статия; ще трябва да ги изучите сами. Опции за това как можете да направите това:

- това е моят курс, който записах с помощта на шаблона The7 и конструктора WPBakery;

Tilda.Education - уроци и уебинари за дизайнера Tilda;

Канал WPlovers- човекът записва уроци на Elementor;

LPGenerator база от знания – отговори на често задавани въпроси относно платформата LPGenerator.

Етап 8. Прикрепете допълнителни инструментиОнлайн чат

Онлайн чатът увеличава конверсията, доказано! Ако има нещо, което човек не разбира и има нужда от съвет. Не всеки ще се обади или ще изпрати имейл на поддръжка; по-удобно е да попитате и веднага да получите отговор в онлайн чат. Можете да свържете например Jivosite, аз самият го използвам, той ми „носи“ нови клиенти. Можете да ми пишете в чата „Здравей!“

CallbackMetrica

Важно е да следите индикаторите на сайта, без цифри ще сте като сляпо коте. Важно е да разберете колко хора са посетили сайта, колко са оставили заявка, какви общи показатели има сайтът, можете дори да погледнете поведението на посетителите, как гледат на сайта. Можете да инсталирате Yandex Metrics и/или Google Analytics.

Пренасочване

Ако планирате да пускате реклама в социалните мрежи, тогава инсталирайте кода за желаната социална мрежа на вашия уебсайт. Този код ще събере списък с посетители, които са посетили вашата целева страница (т.е. интересуват се от офертата) и които имат профил в социалните мрежи. След това можете да им покажете своята реклама в избраната социална мрежа.

CRM

CRM е отговорен да гарантира, че нито едно приложение от сайта не изчезва, така че за всяко приложение да разберете какви действия трябва да се предприемат (обратно обаждане, изпращане на заявка, среща, напомняне за себе си след 14 дни и т.н.). Това е вярно, ако имате поток от клиенти, но ако имате 2-3 на месец, тогава мисля, че нямате нужда от CRM.

Най-популярните CRM са:

• AmoCRM (цена 499 - 1499 рубли / месец)
• Bitrix24 (цена, от безплатен план до 11 990 рубли / месец)
• Електронна таблица на Google, Excel или химикал и хартия (ако имате нужда от него с ограничен бюджет)

Калкулатор

За някои ниши е важно да използвате калкулатор за изчисляване на услуга или продукт. Това е не само удобно, но и увеличава конвертирането на приложения. Защото винаги е интересно да натискате бутони, да местите лостчета и да видите каква ще бъде крайната цена. И също така увеличава поведенческите показатели за търсачките.

Калкулаторът може да бъде поръчан от разработчиците, което е скъпо, или можете да използвате готова услуга. Има услуга uCalc, която може да бъде адаптирана за популярни CMS, дизайнери или персонализиран уебсайт. Създайте своя калкулатор с удобен конструктор и го добавете към сайта.

Събиране на абонатна база

Ако решите да събирате контакти с клиенти в база данни с абонати, за да изпращате имейли или SMS съобщения по-късно, трябва да използвате специална услуга. Може да помислите за SendPulse, наскоро прегледах тази услуга, която можете. SendPulse има безплатен план, с който можете да тествате услугата. Ако не е неговият, то на пазара има други оферти, например MailerLite, UniSender, JustClick, GetResponse и др.

Етап 9. Проверка

Така! Всичко е настроено, свързано, сайтът вече е в интернет, ура, браво. Сега е моментът да го проверите. Какво точно трябва да проверя?

Проверка на текста

Не забравяйте да коригирате текста или се свържете с коректор/копирайтър, за да го направите. Проверяваме текста за грешки, случайно копирани блокове по време на оформлението и др. Нищо не разваля впечатлението за сериозна компания повече от грешки в текста.

Проверка на адаптивността

Не забравяйте да проверите оформлението на целевата страница на вашия таблет и телефон. Всичко добре ли се адаптира? Да, понякога се случва да не е възможно всичко да се подреди идеално, но поне трябва да бъде четимо и повече или по-малко спретнато. Ако даден блок не може да се адаптира правилно, тогава трябва да направите два еднакви блока, да скриете единия в компютърната версия и да скриете втория на мобилни устройства. И всеки блок е удобен за конфигуриране за избраната резолюция.

Тестване на бутоните

Проверете дали всички бутони имат прикрепена необходимата стойност: закотвяне към желаното място, отваряне на модален прозорец, отиване на друга страница и т.н.

Проверка на формулярите за кандидатстване

Изпратете тестова заявка и проверете възможността за доставка на имейла. Ако сте интегрирали CRM, проверете дали приложението е включено в CRM.

Примери за целеви страници

Можете да видите примери за целеви страници, които съм разработил

Ако трябва да направите целева страница по поръчка, пишете в коментарите или оставете заявка

РЕЗУЛТАТ

Ако сте изпълнили всички стъпки, тогава поздравления, вашата целева страница е готова за работа! Сега имате нужда от вашата целева страница, за да ви донесе клиенти, за това трябва да настроите реклама, но това е история за друга статия. Надявам се, че тази статия е била полезна за вас и сте успели да разберете целия процес на разработване на висококачествена целева страница до ключ. За всякакви въпроси можете да пишете в коментарите под тази публикация. Можете също така да запишете вашите методи и трикове при създаване на уебсайт, ще бъде интересно да прочетете и научите вашите постижения :)

Google Fonts

Напишете вашите мисли в коментарите. Ще се видим в други статии!

Landing, landing, landing, landing page, едностраничен сайт, langing page, one-page, продаващ сайт, landing page.

Толкова много имена, дори напълно извратени, на едно и също нещо. Въпросът е, че почти независимо какво правите, вие имате нужда от такъв сайт.

Е, тъй като е необходимо, нека решим проблема със създаването му. Направете сами целева страница? След тази статия – няма въпрос!

Освен това е правилен, смислен и уцелва целта. Както се казва, можете сами да направите вашата лелеяна продаваща целева страница.

За всеки случай или етап 0

Обикновено се казва, че сайтовете с една страница са създадени, за да продават или да получават контактите на човек онлайн, но всъщност тук има много по-широк набор от задачи:

Получаване на нови заявки за стоки/услуги;

Повишаване на познаваемостта на марката;

Информира за предоставяне на стоки/услуги;

Предоставяне на съвети относно услугите;

Получаване на автобиографии от кандидати;

Привличане на партньори, дилъри, представители;

Предоставяне на достъп до услугата;

И така нататък.

Преди да започнете да създавате, трябва да запомните, че не можете да се опитвате да продадете продукт и да привлечете дилъри на един сайт. И всичко това, защото това са различни задачи, а това означава различни целеви страници.

важно. Преди да създадете, трябва ясно да определите целта на вашата целева страница. И помнете – трябва да има една цел.

Нека това намали обхвата на потенциалните хора, но увеличи ефективността на страницата, което ще оправдае всичко финансово.

СТЪПКА 1 – Дарете или го направете сами

На тази стъпка трябва да определите кой от двата варианта за решение ще изберете.

Какво да правя... Какво да правя

И те ще бъдат избрани въз основа на вашите финансови и времеви ресурси. Нека разгледаме всеки от тях с неговите плюсове и минуси.

Конструктор

Веднъж един клиент ни написа оплакване, след като получи сайта. Същността му беше, че не сме взели много пари основателно.

Всичко изглеждаше много странно, защото той вече се беше запознал с всичко и подписа споразумението. Но ние не сме бедна компания, така че за нас е по-лесно да пуснем клиента на спокойствие (не винаги), отколкото да се опитваме да докажем нещо. Това и направихме.

И всичко това се случи, защото той намери дизайнер на целева страница в Интернет и научи, че може да направи всичко сам, като отделя буквално 5-6 часа за това и плаща не повече от 1000 рубли на месец.

Но вие и аз разбираме, че можете сами да сглобите „кола“, но докъде ще стигне, колко индивидуална ще бъде, доколко ще има правилното техническо оборудване...

Описахме подробно всички етапи на създаване на целева страница със срокове в статията.

Професионалисти :

• Евтини. много така. 500-1000 рубли на месец и вие сте щастлив собственик на уебсайт с една страница;
• Просто. Не е нужно да мислите за оформление, адаптиране за мобилни устройства или свързване на SMS известия за нови приложения към вашия телефон. Всичко това вече е там и е направено за ваше удобство;
• Бърз. Можете да направите и конфигурирате всичко много бързо. Освен това извършването на промени също няма да е трудно;
• Техническа поддръжка. Имаш ли въпрос? Те ще ви отговорят възможно най-бързо и изчерпателно. Огромен плюс;
• Безплатен пробен период. Сега почти всички дизайнери на целеви страници имат 14-дневен безплатен пробен период. Регистрирайте се и...

Малко житейска истина. „14 дни безплатни! През това време ще печеля пари, като използвам целева страница в създателя на уебсайтове и ще поръчам красив уебсайт от агенция“, мислеха те.

След 14 дни, след като едва успяха да победят дизайнера, направиха всичко погрешно и не получиха нито една поръчка през сайта, те разбраха, че едностраниците не работят.

минуси:

• знание. Трябва да знаете кои блокове да използвате, тяхната последователност и т.н.

  Решихте да разгледате вашите конкуренти? Страхотен! Но как да разберете, че вашите конкуренти имат ефективна целева страница и показват добро представяне?

• Дизайн. Ако работите с дизайнер за първи път, тогава няма да можете да погледнете дизайна на целевата страница в края на работата без сълзи.

  Дори това да не е първият вариант. Не очаквайте страхотен дизайн, който ще каже „Уау!“

• Ограничение. Броят на готовите блокове е ограничен, както и тяхната функционалност. Дизайнерските решения също не са представени в най-широката гама.

  Ето защо, ако искате птица да излети тук, когато човек напусне приложение (сякаш неговото приложение е отлетяло при вас с пощенски гълъби), можете да забравите за такава идея.

Лично ние можем да препоръчаме този конструктор на целеви страници. Обикновено насочваме към тях клиенти, които тепърва започват или тестват ниша.

На свободна практика

Да минем направо по същество и от опит. Намирането на фрийлансър, който сам ще създаде продаваща целева страница от нулата и до ключ, е НЕВЪЗМОЖНО. Е, вярно е.

Възможно е да се намерят отделни специалисти: дизайнер, който да създаде дизайна на бъдещ уеб сайт, или програмист, който да го сглоби, но няма чудовище, което да направи КАЧЕСТВЕНО един уеб сайт отвътре и отвън.

Под цялата работа имам предвид и хора като: интернет маркетолог, копирайтър, ръководител на проекти. Просто е невъзможно да си добър във всичко, поне физически.

Затова идеалният начин да работите с фрийлансър е да анализирате, събирате и подготвяте всичко сами.

А дизайнерът и дизайнерът на оформление, намерени на борсата на свободна практика, просто го изпълняват и без никаква инициатива.

Професионалисти :

• време. И плюс, и минус. Ползата е, че се освобождавате от по-голямата част от неприятностите по внедряването на външния вид и техническия компонент.
• качество. Основният плюс. Те ще се справят сто процента по-добре, отколкото вие да го правите сами от нулата.

  Като минимум, тъй като те имат опит и знания, които имате в тяхната област, нека бъдем честни, почти никакви.

минуси:

• Отговорност. Ако сайтът не работи, тогава никой не е виновен освен вас. Тъй като вие сте този, който ги контролира и говори според нуждите.

  Търсене. Необходими са специални познания къде да ги търсите, как да им възлагате задачи и... също трябва да попълните бриф, да покажете технически характеристики и т.н.

• Време и нерви. Време за намиране на фрийлансър, време за създаване на задачи, време за създаване на прототип на целева страница, време за контрол. Ще загубите много време и нерви.

  Повечето фрийлансъри са мърлячи (извинявам се, но това е така), така че ще има забавяне на срокове и периодични загуби от комуникационни радари.

  И това е минимумът, който можете да очаквате, когато искате да направите целева страница евтино.

• Пари. Ще трябва да отделите пари, тъй като добър специалист без „връзки“ струва доста.

  Един среднокачествен дизайн ще струва около 8-10 хиляди, оформлението също ще струва около тази сума. Отново всичко зависи от сложността на проекта и самите изпълнители.

• Измамници. Работата е структурирана по следния начин: 50/50 Авансово плащане и след това оставащото плащане след завършване на проекта.

  Не искам да обидя никого, но сред фрийлансърите има много хора, които... не се заемат с проекта след като са получили авансово плащане. Просто казано, те се губят.

Сега малко за плащането: ако решите да работите с фрийлансър, препоръчвам следната схема на плащане: направете 50 процента авансово плащане като безопасна транзакция (почти всички борси го имат).

И прехвърлете останалата част от сумата директно на фрийлансъра. В този случай ще надплатите 15%, но ще се защитите.

Да си улесниш живота. Ако фрийлансър ще ви измами, тогава той ще ви разубеди от безопасна сделка. Това ще бъде вашият сигнал.

Етап 2 – на кого и какво?

Най-скучният (но най-необходимият) блок в тази статия. Няма значение по кой път ще тръгнеш. Ефективна целева страница ще направите сами или ще я изпратите на специализирана агенция. Във всеки случай трябва да знаете 3 неща:

Вашата целева аудитория;

Стълба на Хънт;

Вътрешността на вашата компания.

Единствената разлика е, че ако създадете целева страница сами, ще трябва да напишете и обмислите всичко сами.

Агенцията ще ви даде да попълните подробен бриф, благодарение на който те сами правят планирането на целевата аудитория и т.н. Ние обаче поемаме по различен път и сами попълваме брифа, общувайки с вас чрез Skype.

Искрено вярваме, че това е единственият начин да получите цялата информация, тъй като е възможно да зададете следните въпроси по време на разговора. И винаги се появяват такива въпроси.

Целевата аудитория

Вече писахме за определяне на целевата аудитория или дори по-задълбочено определяне на клиента.

Това проучване ще ви даде представа кой е вашият потенциален клиент, какви страхове, възражения и желания има във връзка с вашия продукт/услуга.

Върху какво трябва да окажете натиск в бъдеща целева страница, какви думи да използвате, какви изображения е най-добре да вмъкнете. Опростена обобщена диаграма изглежда така:

Стълбата на лов на целева аудитория

Но какво ще даде познаването на стълбата на Хънт? Точно като аватара на клиента, той ще осигури самата структура на бъдещата целева страница.

Ще ви кажа накратко, но в приложение към уебсайт от една страница, защото много често собствениците на фирми не разбират на какъв етап на информираност е потенциалният им клиент (ако ви мързи да четете, гледайте видеоклипа).

Накратко, преди да вземе решение за покупка, човек преминава през 5 стъпки/нива на информираност:

Етап „Безразличие“. Няма проблем.

Етап „Осъзнаване“. Има проблем, но няма решение.

Етап „Сравнение“. Вариантите за решаване на проблема се сравняват един с друг.

Етап „Избор“. Опцията за решение е избрана. Търся продукти.

Етап "Покупка". Избор между доставчици на продукти.

Как тази сложност може да ви помогне при създаването на целева страница? Нека разгледаме всеки етап и как да продължим:

Етап „Безразличие“. Първо трябва да създадете проблема в главата на човека. Покажете, че ако той не го купи / не го купи, тогава всичко ще бъде лошо.

Етап „Осъзнаване“. Трябва да покажете в първите екрани, че има различни опции за решаване на неговия проблем.

Етап „Сравнение“. Трябва да предадете, че вашето решение е по-добро от другите, като за целта можете да направите сравнителна таблица, да предложите преглед на продукта, резултати от проучване, лична консултация за избор и т.н.

Етап „Избор“. Трябва да покажете коя оферта е подходяща за него, или по-скоро в каква форма/опаковка. За целта разкриваме повече предимства на нашите продукти.

Етап "Покупка". Трябва да покажете на първо място предимствата на работата с вашата компания и едва след това да говорите за продукта и че той е най-добрият.

Изглежда, че нямате нужда от това, но... Например, ако човек избира между покупката на апартамент и изграждането на собствена къща, тогава целевата страница на къщата трябва да има блок, обясняващ защо една къща е по-добра от апартамент.

Пакет

Можете приблизително да си представите как ще изглежда уебсайтът ви в главата ви. И е добре, ако имате корпоративна идентичност или марка книга (идеално, дори бих казал).

Какво ще кажете за ползите от вашия продукт или компания като цяло? И още няколко десетки въпроса, на които трябва да отговорите, преди да преминете към създаването на прототип и уебсайт.

Защото правилните въпроси формират правилните отговори, които вие приемате и пакетирате във вашия уебсайт. Този етап ще ви помогне да вземете всичко най-ценно във вашата компания и да го покажете.

За да разберете същността, ето пример от 10 въпроса, които ще ви помогнат да разберете по-добре/задълбочено вашата компания и вашия продукт и да ги сервирате „с прекрасен сос“:

Формулирайте 3-5 „причини, поради които обективно е по-изгодно да купувате от вас, отколкото от конкуренти“.

Какви производствени характеристики има вашата компания?

Предлагате ли вътрешно обучение на персонала?

Сравнете продукта с подобни продукти. Посочете предимствата и недостатъците.

Кой е лицето или лицата на фирмата?

Какви бонуси сте готови да дадете на клиентите при закупуване на големи суми?;

Опишете подробно етапите на работа с клиента от първия контакт до завършване на работата.

Разкажете ни за финансовите условия на работа (предплащане, вноски, отсрочване на първите плащания, продуктови заеми, отстъпки, продукт за продажба, обратно изкупуване на неликвидни активи и др.).

Какви публикации има за компанията или от компанията? (експертни коментари, интервюта, жури на телевизионни предавания, колонки, статии).

Вашите клиенти са звезди.

ЕТАП 3 – Прототип

Най-накрая стигнахме до най-интересната част. Сега ще създадем вашия бъдещ уебсайт.

Или по-скоро засега как сами да направите прототип, но поне това е по-интересно от просто описание на целевата аудитория.

Стъпка 1. Структура на прототипа

Прототипът е структурата и последователността от блокове на бъдеща целева страница, която можете лесно да изградите от критериите за подбор и възраженията на вашата целева аудитория.

Най-добрият начин да направите това е следният: вземете лист хартия и запишете последователност от блокове/значения. Изглежда нещо подобно:

Шапка;

Ползи на компанията;

Каталог;

Собствено производство;

Наличност;

екип;

и т.н.

Вие и аз сме тези, които предписваме блоковете, но не трябва да забравяме и двете класически структури, върху които се изгражда всеки рекламен материал, като целевата страница не прави изключение:

(продукти/услуги);

PmPHSA(). Означава Pain, more Pain, Hope, Solution, Action (болка, повишена болка, надежда, решение, призив за действие).

За да не си мъчите мозъка как да предадете едно от избраните значения и да направите живота си много по-лесен, когато сами създавате прототип, тази статия ще ви помогне.

Съжалявам за моята откровеност, но за мен е адски приятно да виждам хора, които работят и през нощта (просто го правете, без да застрашавате здравето си). Започнах да си мисля, че работохолиците са изчезнали. Що се отнася до резултатите от сътрудничеството, ще спомена само този факт: в пиковите дни получавахме 140 заявления на ден и трябваше да наемем цял отдел продажби за канала за интернет маркетинг. Благодаря ти!

отворен преглед Дмитрий Новожилов, D-color

Знаете ли какво е имейл маркетинг? Например, не знаех, преди да срещна момчетата от Convert Monster. Наивно вярвах, че това е просто красива дума. Вярвах и в същото време чух, че помага за по-ефективна работа с клиентската база. Преди шест месеца придобихме клиентска база. Той е съставен от ежедневни заявления за франчайзи за детски градини. Имаше много приложения, но преобразуването остана на много ниско ниво. Борих се с това явление - опитах се сам да изпращам писма до базата данни. Времето винаги не достигаше - за да съставя добре следващия бюлетин, отне половин работен ден. С всяка прекарана минута все повече възникваше необходимостта от създаване на компетентна верига. Но досега писмата се изпращат веднъж седмично или веднъж на 2 месеца. Нямаше последователност в работата. Нещо липсваше. Дълго време не можехме да разберем какво точно. Момчетата от Convert Monster бързо се заловиха за работа. Първите резултати не закъсняха. След като активирахме първоначалната имейл верига, направихме няколко транзакции, използвайки старата база данни. Те покриха разходите за стартиране на имейл маркетинга. След няколко месеца забелязваме трикратно увеличение на конверсията. И това е само началото. В момента работим за допълнително увеличаване на текущия процент на реализация. Например още три пъти. Изчислете сами: - колко пари ще донесе повишаването на обменния курс 2 пъти? Минимум е! - колко ще получите, ако затворите минималния процент клиенти от съществуващата си база? Все още ли не сте сигурни дали да се свържете с Convert Monster?

отворен преглед Сергей Дегтярев

От дълго време използваме интернет трафик за привличане на клиенти. Около година и половина. През това време сменихме 2 доставчика, докато ни препоръчаха Convert Monster. Условията за сътрудничество за повечето компании, които предоставят подобни услуги, са подобни: бюджет за месеца, изготвяне на рекламна кампания и тръгваме. След това кампанията остарява, започва спад и, като следствие, липса на клиенти. След това молите мениджърите да променят тактиката, стратегията, заглавията, семантичното ядро ​​- обръщате се към всички светии. И те (управителите, а не светците) нищо не правят. А може и да го правят, но резултат няма. Един ден ти избива зъбите, напускаш този офис за друг, след което започваш да търсиш следващия. важно! Преди да започнете да търсите първия, опитайте го сами. Разбира се, вашите резултати в този момент са най-добрите възможни, просто са НУЛЕВИ! Дойдохме да Convert Monster в отчаяние. Това беше моментът, в който Yandex направи настройка - махнаха гаранцията, на която седяхме толкова добре и я издоихме възможно и НЕВЪЗМОЖНО. Разбрахме, че щастието няма да дойде веднага, но го чакахме. И наистина! Започна бавно да чука на вратите ни – започнаха да валят молби и продажби. След това провал - лято, извън сезона, работа в минус. Но момчетата не се отказаха и ние не намалихме бюджетите, защото знаем КАКВО заплашва. Никога не намалявайте бюджета си и не напускайте сайта, който ви носи приходи! Краен резултат: повече от 6 милиона приходи чрез Yandex.Direct. Ние сме повече от доволни от нашето сътрудничество! Ако имате някакви съмнения дали да работите с Convert Monster или не, свържете се с нас! Ние ще ви кажем откъде да започнете. Тогава пътят ви към тях ще бъде по-дълъг, а последният изход към Convert Monster ще бъде вашето „издишване“ и светлината в края на тунела. Всички пътища пак ще водят към тях. Ако ги търсите, разбира се. Това е въпрос на време. Просто се позиционирайте като компания, която е готова да се развива и мащабира. В противен случай те просто няма да се интересуват от вас.

отворен преглед Изабела Риц, Ritz Group LLC

Преди да се свържа с вас, поръчах целева страница от една компания и настройка на Yandex Direct от друга. И двете компании са добре познати на пазара, но всяка наша комбинация сайт + рекламна кампания не се стреми да помогне, а само критикува другия изпълнител: програмисти - директолози, директолози - програмисти. В резултат на това, въз основа на вашата препоръка, ние се свързахме с вас и само за 4 месеца увеличихме броя на приложенията 4 пъти (до 120 на месец) и оборота на онлайн продажбите до няколко милиона рубли.

отворен преглед Владислав Шупеня, фирма Кимбърлит

Поздрави, скъпи мои читатели. Днес ще говорим за технически аспекти, с които можем да увеличим конверсията на продажбите на нашите стоки или услуги. Един от важните моменти е добре оформената целева страница с продукти. Така наречената целева страница, за чието създаване ще говорим по-късно и ще получим готови кодове на страници.

Какво е целева страница? Това е страницата, на която хората обикновено попадат, след като кликнат върху реклама. Създаден за една оферта: продукт, услуга или абонамент. Ефективната целева страница е крайъгълният камък на успешния онлайн маркетинг. Продуктът може да е най-добрият на пазара, рекламите са усъвършенствани, но без добра целева страница усилията не дават 100% резултат. Той казва на посетителите какво се предлага и защо трябва да го искат. Чувството за спешност допринася за бързото вземане на решения и прехода на потребителя към категорията на клиента.

Как да създадете целева страница? Погрешно е да се вярва, че отговорът се крие в способността за набор. Добрата целева страница е резултат от координирана работа по цели, текст, дизайн и код. Целевите страници, примери за които ще бъдат дадени по-долу, ще помогнат на начинаещите да научат основите на работа с оформление, но няма да заменят текстовете за преобразуване и разбирането на целевата аудитория. Можете също да ги създадете с помощта на различни дизайнери на целеви страници.

Така че, преди да създадете целева страница, запитайте се:

• Какво ще направи човек, след като попадне на целевата страница? Ще купи ли нещо? Ще попълните ли формуляра? Абонирайте се за бюлетина? Преди да проследите процента на реализация, поставете си ясни цели.
• Кои са моите конкуренти? На практика това са три въпроса: кои, колко са успешни и как могат да се приложат постиженията им? Имитацията е най-искрената форма на ласкателство. Ако вашите конкуренти правят нещо, което работи, копирайте го на вашия сайт.
• Коя е моята публика? Колкото по-добре разбирате вашата ниша и целева аудитория, толкова по-голям е шансът вашите усилия да се отплатят.

Трябва да предложите цялата необходима информация, но не толкова много, че да претоварите и прогоните потенциалния си клиент.

Примери за създаване на целева страница + кодиране за манекени

Преди да започнем, нека да разгледаме набързо HTML и CSS. Разбирането как работят ще ви помогне да създадете кацане.

HTML е език за маркиране на браузъра за визуализация на уебсайтове. Написано с помощта на етикети, затворени в ъглови скоби, които определят съдържанието.

Етикетът отваря () и затваря () около пълнежа:

съдържание

За фина настройка след името се добавят атрибути:

съдържание

CSS - определя как да подредите HTML елементи. Състои се от селектори, свойства и стойности:

#селектор (свойство: стойност;)

Селекторът съответства на името на конкретен таг в html. Промяната на стойности и добавянето на свойства коригира външния му вид. Можете да създавате страници, които изглеждат различно една от друга, като прилагате различни CSS стилове към един и същ HTML.

5 начални стъпки

За бързо оформление ще използваме шаблон с минимален дизайн, базиран на bootstrap. Това е система със собствени селектори, която се използва по целия свят за ускоряване на оформлението.

Изглежда скромно.

От тази риба на няколко етапа се създава сайт за всеки вкус.

Структура на директорията в папката:

• index.html: Това е основният файл, който ще редактираме.
• /активи: спомагателните файлове се намират тук:
• /css: Директорията съдържа стилове за зареждане и икони. Файлът, който ще редактираме е main.css.
• /img: папка за изображения на сайта.
• /fonts: шрифтове на икони.
• /js: стартиращи javascript файлове.

Стъпка 1: Използване на заглавка

Заглавието и подзаглавията са ключови места, които помагат да се предаде стойността на офертата по ясен начин.

Нека сменим заглавието и името на сайта. Тук не е необходимо да имате умения за набор - пишете свой собствен текст на местата, осветени в жълто на екрана.

Стъпка 2. Краткостта е сестрата на обръщането. Добавяне на предимства и тарифи

Ще ви трябват 4 секции:

• предимства;
• ставки;
• прегледи;
• призив за действие.

Нека създадем раздел от основното съдържание „main“, в който ще вмъкнем необходимите раздели:

…..
…..
…..
…..

Напълнете с пълнеж вместо точки.

За раздела с предимствата ще ви трябва този код:

Предимства
Бърз

Надежден

Sed diam nonummy

Печеливш

Elit, sed diam nonummy

Технически

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Надежден

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Печеливш

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Технически

Lorem ipsum dolor sit amet, consectetuer adipiscing

Надежден

Lorem ipsum dolor sit amet, consectetuer adipiscing

Печеливш

Lorem ipsum dolor sit amet, consectetuer adipiscing

Съдържание за яснота:

Все още изглежда небрежно, но няма причина за паника, нека продължим.

Записваме цените. Съдържанието се променя по същия начин, както в първата стъпка. Общо описание с клас „тарифи” и три тарифи.

Тарифни планове

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Тарифа №1
$10

на месец/на човек

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Поръчка
Тарифа № 2
$20

на месец/на човек

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Поръчка
Тарифа №3
$30

на месец/на човек

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Поръчка

Изглежда така.

Засега не се интересуваме от външния вид на бъдещата целева страница - ще разгледаме примери за промяна на стилове по-долу.

Стъпка 3: Сигнали за доверие и призив за действие

Използването на насочени сигнали показва на посетителите, че марката заслужава доверие. Сигналите могат да приемат много форми, но класическата е обратната връзка с клиентите.

Отзиви на клиенти

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. „Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.“
„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. „Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.“

Нека зададем призив за действие.

Възползвайте се, когато поръчате днес

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Поръчай сега!

Отзивите ще помогнат на потенциалните клиенти да решат да закупят продукта. За по-голяма яснота имаме нужда от аватари, така че веднага ще ги поставим на място - под всеки цитат.

Име на клиента.

Стъпка 4: Грид и мобилна интеграция

За да реализираме мрежата, имаме нужда от Bootstrap контейнери. Важно е да запомните общия брой валидни сегменти на колони - 12. Класът определя ширината на показване на съдържанието. Хубавото на тази предварително направена решетка е, че контейнерите са проектирани с мисъл за отзивчивост и могат веднага да се използват на мобилни устройства. Подробно описание на официалния сайт. Решетката изглежда така.

Съдържанието на „main“ ще бъде увито в контейнер. За да направите това, в горната част е написано следното:

… .

Ако имате нужда блокът да пасне на цялата ширина на екрана, тогава контейнерът се поставя вътре. Тук ще бъде jumbotron и призив за действие.

Ще обвием всички елементи, които изискват поставяне един върху друг, с разделители на редове.

Сега можем да регулираме ширината на колоните, като се фокусираме върху решетката за зареждане. След опаковането пълнежът спря да залепва по краищата на екрана и се появиха чисти вдлъбнатини.

Задаваме цените в ред, като използваме класа на колоната col-lg-4. В редовете на редовете вече не е необходимо да пишете отделни div за обвиване; те могат да се комбинират със съществуващи, разделени с интервал.

По аналогия създадохме колони за раздела за отзиви и предимства. Ако трябва да преместите елемент встрани, използвайте класа на отместената колона col-lg-offset-2. Числото в края определя с колко базови колони ще се извърши преместването.

Стъпка 5. Шрифтове и икони

Ние внедряваме заглавни шрифтове на Google Font. Когато е избрано, отворете раздела за импортиране и копирайте данните от него във файла main.css. Също така добавяме селектори за заглавия към файла, за който се използва новият шрифт.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* импортиране на шрифт за заглавия */
.navbar-марка,
h1,
h2,
h3,
h4,
h5,
h6 (
семейство шрифтове: "Roboto Condensed", sans-serif; /* Извеждане на Googlefont */
}

За по-голяма яснота предимствата са описани от клас с разбиращото се име text-center и FontAwesome икони от набора за стартиране.

На този етап подготовката е напълно завършена.

Целева страница: примери за кодове с оферта, паралакс и брояч

Използваме трите най-популярни вида: с изречение, форма и с брояч за обратно броене. С напредването на оформлението шаблонът ще бъде допълнен с ефекти.

Пример 1: с изречение

Нека зададем фона на основната част и подложката, така че първият екран да бъде покрит.

Джъмботрон (
фон: #f5f5f5 url(../img/fon.jpg) горе център без повторение;
максимална ширина: 100%;
padding-top: 250px;
padding-bottom: 200px;
подравняване на текст: център;
}

Нека променим размера на заглавката на jumbotron от h2 на h1. След това пишем стилове за елементите, които трябва да бъдат променени.

Да започнем с иконите.

Предимства i(
цвят: #cac4c4;
}

След знака хеш се посочва цвят. Можете да изберете своя собствена опция, като използвате html цветни таблици или редактор на изображения.

Отстъп за заглавията на раздели

раздел h2 (
подложка-отгоре: 30px;
margin-bottom: 25px;
}

Подреждаме външния вид на тарифите. За удобство създаваме собствени класове за елементите, които искаме да подчертаем конкретно.

Тарифа №1
$10

на месец/на човек

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Поръчка

И много CSS. За кои места отговарят секциите са посочени в коментарите - /* между наклонени черти със звездичка */

/* =========Тарифни стилове======== */
/* общ изглед на тарифата */
.pricing_item(
фон: #f2f2f2;
позиция: роднина;
дисплей: -webkit-flex;
дисплей: гъвкав;

flex-direction: колона;

подравняване на елементи: разтягане;
подравняване на текст: център;
-webkit-flex: 0 1 330px;
гъвкавост: 0 1 330px;
подложка: 2em 3em;
поле: 1em;
цвят: #262b38;
курсор: по подразбиране;
преливане: скрито;

}
/* промяна на фона при щракване */
.pricing_item:hover (
цвят: #444;
фон: #daebef;
}
/* индивидуален фон на ценови етикет във всяка тарифа */
.pricing_item:първо дете .price (
фон: #9ba9b5;
}
.pricing_item:nth-child(2).price (
фон: #1f6098;
}
/* на широки екрани средната тарифна колона е отстъпена и маркирана */
@медиен екран и (мин. ширина: 66,250 em) (
.pricing_item(
поле: 1.5em 0;
}
.представен(
z-индекс: 10;
марж: 0;
размер на шрифта: 1.15em;
}
}
/* заглавие */
.pricing_item h3 (
размер на шрифта: 2em;
поле: 0.5em 0 0;
цвят: #1d211f;
}
/* фон на етикета с цената */
.цена(
размер на шрифта: 2em;
тегло на шрифта: удебелен;
цвят: #fff;
позиция: роднина;
z-индекс: 100;
височина на реда: 95px;
ширина: 100px;
височина: 100px;
марж: 1.15em auto 1em;
граница-радиус: 50%;
фон: #77a5cc;
-webkit-преход: цвят 0.3s, фон 0.3s;
преход: цвят 0.3s, фон 0.3s;
}
/* валута */
.валута(
размер на шрифта: 0.5em;
вертикално подравняване: супер;
}
/* изясняване на предложението */
.изречение (
тегло на шрифта: удебелен;
поле: 0 0 1em 0;
подложка: 0 0 0.5em;
цвят: #2a6496;
}
/* списък */
.pricing_item ul (
размер на шрифта: 0.95em;
марж: 0;
подложка: 1.5em 0.5em 2.5em;
подравняване на текста: ляво;
}
/* елементи от списък */
.pricing_item li (
подложка: 0.15em 0;
}
/* бутон за оценка на поръчката */
.pricing_item бутон(
тегло на шрифта: удебелен;
margin-top: авто;
подложка: 1em 2em;
цвят: #fff;
радиус на границата: 5px;
фон: #428bca;
-webkit-преход: фонов цвят 0.3s;
преход: цвят на фона 0.3s;
}
/* промяна на цвета при натискане на бутона */
.pricing_item бутон:задръжте,
.pricing_item бутон: фокус (
цвят на фона: #285e8e;
}
/* фон на тарифата*/
.bg-2 (
фон: #dddddd;
}

Резултат

Отзиви от клиенти. Нека да им дадем спретнат вид и да посочим местоположението им.

/* =========Стилове на препоръките======== */
Отзиви (
подложка: 4em 0;
подравняване на текст: център;
}
.препоръки .avatar img (
граница-радиус: 50%;
поплавък: наляво;
дисплей: вграден;
поле-дясно: 1em;
ширина: 65px;
височина: 65px;
margin-bottom: 30px;
}
.препоръки .avatar p (
подравняване на текста: ляво;
подплата-отгоре: 1em;
цвят: #5d5d5d;
тегло на шрифта: 900;
}

Остава само да украсите последния призив за действие и долния колонтитул.

/* Действие */
.действие(
фон: #476177;
мин. височина: 180px;
ширина: 100%;
подложка: 4em 0;
подравняване на текст: център;
}
.действие h2 (
цвят: #fff;
тегло на шрифта: 300;

}
.действие p(
цвят: #fff;
текстова сянка: 0 1px 2px rgba(0, 0, 0, .2);
размер на шрифта: 1.2em;
}
.action .container (
поле отгоре: 3em;
}
/* Долен колонтитул */
долен колонтитул(
фон: #333333;
подложка: 1em 0;
подравняване на текст: надясно;
}
долен колонтитул p(
цвят: #fff;
височина на реда: 1;
преобразуване на текст: главни букви;
размер на шрифта: 0.7em;
поле отгоре: 0,5 em;
}

На бутона в долния колонтитул е присвоен вграденият клас за стартиране btn-default.

Оживяване на шаблона. Ще въведем плавно превъртане и бутони за секции, както и текстова анимация на първия екран.

За преходите към работа ще заменим някои от класовете на секциите с id - за придобивки и тарифи. И ние ще добавим връзки към id към бутоните. Екранна снимка - какво към какво е прикачено, подчертано с жълт маркер.

Задаваме отстъпи за бутони - jbutton. Превъртането при натискане работи, но много рязко.

Плавните преходи се създават с помощта на javascript или jquery. Последният е свързан с шаблоните на Bootstrap по подразбиране.

Превъртането вече е гладко.

Добавяне на анимация към текст с помощта на Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Това е готов код с отворен код, може да се използва на всеки уебсайт. Поставете файла от Github в папката css и посочете пътя.

Избираме ефектите тук: https://daneden.github.io/animate.css/. Избрали сме fadeInDown. В кода е написано така:

Сега, когато страницата се зареди или обнови, текстът ще бъде анимиран. Готов.

Пример 2: с форма и паралакс ефект

Колкото повече полета на формуляра се представят на посетителя, толкова по-малка е вероятността той да ги попълни. Поискайте само минимално необходимата информация.

Сглобява се по аналогия. Ще променим фона и цветовете. И, разбира се, ще добавим форма.

Да започнем с паралакса.

Нека променим фона на jumbotron на прозрачен:

фон: прозрачен;

В главата ще вмъкнем скрипта:

$(прозорец).scroll(function(e)(
паралакс();
});
функция паралакс())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Първият ред в тялото е контейнер за паралакс:

И в CSS поведението му е:

Bgparallax (
фон: url(/../img/fon.jpg) повторение;
позиция: фиксирана;
ширина: 100%;
височина: 300%;
отгоре:0;
ляво:0;
z-индекс: -1;
}

Паралаксът е готов. Но извършването на промени в кода и нов фон изисква преназначаване на цветовата схема.

Затъмняване на менюто:

Навигационна лента по подразбиране (
цвят на фона: #333;
цвят на рамката: #444;
цвят: тъмно сив;
радиус на границата: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
цвят: тъмно сив;
цвят на фона: rgba(0, 0, 0, 0.5);
}

Заменяме изречението в jumbotron с ново - с кода на формата:

Landing Page превръща посетителите в клиенти
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

И предписваме външния вид

/* форма */
.headform-списък (
list-style-type: няма;
височина на реда: 26px;
тегло на шрифта: 400;
подложка: 0px;
margin-bottom: 40px;
}
.headform(
преливане: скрито;
позиция: роднина;
цвят на фона: rgba(0,0,0,.4);
подложка: 35px 40px;
радиус на границата: 8px;
}
въвеждане, бутон, избор, текстово поле (
ширина: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
позиция: абсолютна;
отгоре: 0px;
ляво: 0px;
ширина: 42px;
размер на шрифта: 24px;
подравняване на текст: център;
}
.headform-list li(
позиция: роднина;
мин. височина: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
цвят: #fff;
размер на шрифта: 16px;
стил на шрифта: курсив;
}

Текстът на джъмботрона също попадна тук, тъй като изискваше промени.

Променяме тарифите.

/* общ изглед на тарифата */
.pricing_item(
цвят на фона: rgba(0,0,0,.4); /* линията е променена */
радиус на границата: 4px; /* линията е променена */
позиция: роднина;
дисплей: -webkit-flex;
дисплей: гъвкав;
-webkit-flex-direction: колона;
flex-direction: колона;
-webkit-align-items: разтягане;
подравняване на елементи: разтягане;
подравняване на текст: център;
-webkit-flex: 0 1 330px;
гъвкавост: 0 1 330px;
подложка: 2em 3em;
поле: 1em;
цвят: #f2f2f2; /* линията е променена */
курсор: по подразбиране;
преливане: скрито;
кутия-сянка: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* промяна на фона при щракване */
.pricing_item:hover (
цвят: #444;
фон: #ddd; /* линията е променена */
}

Сега изглеждат така - прозрачен фон и заоблени ъгли.

Шаблонът е готов.

Пример 3: с брояч за обратно броене

Променяме отново пълнежа на jumbotron и преоцветяваме шаблона, за да съответства на новия фон, подобно на предишния шаблон. Свържете скрипта на брояча:

HTML





Времето не чака
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = ново обратно броене((
време: 86400 * 3, // 86400 секунди = 1 ден
ширина: 300
, височина: 60
, диапазонHi: "ден"
, стил: "обръщане" //