Рейтинг: „Най-добрият създател на целеви страници. Избор на шаблон за целева страница

• 2. Видове целева страница
• 4. Характеристики на кацанестраница
  • A/B тестване на целевата страница
  • Как трябва да изглежда продаващата целева страница и какво трябва да съдържа
• 5. Данъци върху целевата страница
• 6. Заключение

Кацане, какво е това? Много амбициозни предприемачи и хора, които ще продават нещо, се интересуват от този термин. Накратко, целевата страница е редовен интернетстраница от вашия домейн, поддомейн във формат като html/css или в друг формат. Чували сме за такива страници, но най-вероятно никога не сме се задълбочавали в тяхната същност и предназначение.

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

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

От тази статия ще научите:

• Кацане какво е това;
• Какви видове целеви страници има;
• Как да създадете целева страница сами и безплатно;
• Всичко за правенето на бизнес и данъците от целевата страница;
• и т.н.

1. Какво е целева страница в Интернет

В интернет сферата такива страници имат различни имена, по-специално те се наричат: целеви страници, целеви страници, страници за заснемане, сайтове с една страница, целеви страници и др.

С помощта на такива целеви страници нивото на продажбите се увеличава с 20-30% в сравнение с обикновените онлайн магазини или просто рекламни сайтове.

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

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

Ето някои от тях:

• http://olymp.winlanding.ru
• http://verserb1.bget.ru/dom
• http://autogazkz.kz
• http://zub.winlanding.ru

А цялото портфолио на winlanding можете да видите тук.

Особено печеливш използване на кацанестраница до следните организации:

• Всякакви компании, занимаващи се с продажби;
• Фирми, занимаващи се с продажби на едро;
• MLM лидери;
• Производители на различни видове продукти;
• Инфо-предприемачи;
• Фирми, продаващи особено ценни, уникални стоки;
• Фирми, специализирани в продажбата на обучителни програми;
• Туристически компании;
• СПА салони, фитнес клубове.

Идеален пример за ЛЕНДИНГ

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

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

• Кандидатствайте за безплатна консултация;
• Закупуване на продукт;
• Подайте заявление за различни изчисления (изчисления);
• Абонирайте се за всеки бюлетин;
• Регистрирайте се за участие в промоцията;
• Кандидатствайте за ценова листа;
• И още много различни опции...

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

2. Видове целева страница

Има четири типа „страница за продажби“:

Дълга страница: целевата страница е дълга целева страница. Това са видовете целеви страници, които преобладават в интернет.

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

Една стъпка: целева страница – е страница с една стъпка;

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

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

Примери за конверсии: в сферата на туристическите услуги (популярна и търсена област на бизнеса), процент на реализация от 9-14% е добър показател, но в областта на продажбите на луксозни автомобили, коефициент на реализация от 4-14% е не просто добър, а отличен процент на реализация в целевата страница.

Минималната конверсия на целевата страница, като правило, варира от 1-4%, но не надвишава 30-45%. На практика постигането на конверсия от 25-30% е добър показател.

За добър процент на реализация се счита 5-10%. При информационния бизнес конверсията може да достигне 25% - 30%.

Те включват следното:

• Процент на отхвърляне;
• Средно време, прекарано от посетителя на съответната страница;
• Карта на кликовете на страницата и др.

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

Незабавното качество на вашата целева страница;

Качество на трафика, насочен към съответната страница;

Характеристики на бизнеса, ниво на конкуренция.

Сега, след като сте чули думата „кацане“, вие вече ще знаете много добре какво е това.

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

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

www.setup.ru;

landingi.ru;

ru.wix.com;

lpgenerator.ru ;

сайтове на свободна практика - където за 1500-2000 рубли фрийлансъри ще ви направят целева страница по поръчка.

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

идеален" целева страница- целева страница" - видео

Алгоритъм Създаване на кацанеСтраница - видео

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

4. Характеристики на целевата страница

• Обикновено това е сайт за визитки, който не е претоварен с файлове ( графики, видеои т.н.). Благодарение на минимализма на страницата, текстът върху нея се чете лесно.
• Целевата страница не трябва да съдържа реклама; тя вече е реклама за вашите услуги и продукти.
• Целевата страница не трябва да съдържа ненужна информация, която не е свързана с продавания продукт или услуга.
• Целевата страница трябва да има определена структура: рекламен текст , снимки, минимална навигация на страницата,

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

Какво е целева страница? Това е страницата, на която хората обикновено попадат, след като кликнат върху реклама. Създаден за една оферта: продукт, услуга или абонамент. Ефективната целева страница е крайъгълният камък на успешния онлайн маркетинг. Продуктът може да е най-добрият на пазара, рекламите са усъвършенствани, но без добра целева страница усилията не дават 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Шрифт. Когато е избрано, отворете раздела за импортиране и копирайте данните от него във файла 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;
}
/* валута */
.currency(
размер на шрифта: 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 с ново - с кода на формата:

Целева страницапревръща посетителите в клиенти
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(
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 в vulputate velit esse molestie fequat, vel illor 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: "ден"
, стил: "обръщане" //