Ocena: „Najlepszy kreator stron docelowych. Wybór szablonu strony docelowej

• 2. Rodzaje stron docelowych
• 4. Funkcje lądowania strona
  • Testy A/B strony docelowej
  • Jak powinna wyglądać sprzedająca się strona docelowa i co powinna zawierać
• 5. Podatki od strony docelowej
• 6. Wniosek

Lądowanie, co to jest? Wielu początkujących przedsiębiorców i osób, które zamierzają coś sprzedać, interesuje się tym terminem. Krótko mówiąc, jest to strona docelowa zwykły internet stronę w Twojej domenie, subdomenie w formacie takim jak html/css lub w innym formacie. Słyszeliśmy o takich stronach, ale najprawdopodobniej nigdy nie zagłębiliśmy się w ich istotę i przeznaczenie.

Głównym zadaniem takiej strony jest pozostawienie przez odwiedzającego stronę odpowiedniego zapytania, kontakt telefoniczny, subskrypcja lub zakup produktu.

Taka strona różni się od masy innych stron internetowych tym, że nie zawiera niepotrzebnych, rozpraszających reklam, niepotrzebnego tekstu, różnych migających banerów i wyskakujących menu.

Z tego artykułu dowiesz się:

• Lądowanie, co to jest;
• Jakie są rodzaje stron docelowych;
• Jak samodzielnie i za darmo stworzyć stronę docelową;
• Wszystko o prowadzeniu biznesu i podatkach ze strony docelowej;
• itp.

1. Czym jest strona docelowa w Internecie

W sferze internetowej takie strony mają różne nazwy, w szczególności nazywane są: stronami docelowymi, stronami docelowymi, stronami przechwytującymi, witrynami jednostronicowymi, stronami docelowymi itp.

Za pomocą takich stron docelowych poziom sprzedaży wzrasta o 20-30% w porównaniu do zwykłych sklepów internetowych lub po prostu witryn ogłoszeniowych.

Jeśli chodzi o firmy rosyjskojęzyczne, należy zauważyć, że takie narzędzie jak strona docelowa dopiero zaczyna się rozwijać na przestrzeni poradzieckiej, ale z roku na rok szybko nabiera tempa.

Z Firmy rosyjskie, możesz zaznaczyć winlanding.ru. Wypróbowaliśmy wiele firm, ale w końcu zdecydowaliśmy się na nich. Wszystkie strony, które tworzy winlanding są tworzone od podstaw, szablony, funkcjonalność, stała komunikacja z klientem, co w naszych czasach jest ważne. I będziesz mieć pewność, że nie zgubią się, jak wielu freelancerów z Twoją przedpłatą.

Oto kilka ich prac:

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

Całe portfolio winlandingu można obejrzeć tutaj.

Szczególnie opłacalne za pomocą lądowania stronę do następujących organizacji:

• Wszelkie firmy zajmujące się sprzedażą;
• Firmy zajmujące się sprzedażą hurtową;
• Liderzy MLM;
• Producenci różnego rodzaju produktów;
• Info-przedsiębiorcy;
• Firmy sprzedające szczególnie cenne, unikalne towary;
• Firmy specjalizujące się w sprzedaży programów szkoleniowych;
• Firmy turystyczne;
• Salony SPA, kluby fitness.

Idealny przykład LĄDOWANIA

Zatem strona docelowa jest korzystna dla wielu osób zainteresowanych wzrostem baza klientów oraz znaczny wzrost grupy docelowej.

Jak już wspomniano, głównym celem takich stron jest zachęcanie do ukierunkowanych działań:

• Umów się na bezpłatną konsultację;
• Kup produkt;
• Złóż wniosek o różne obliczenia (obliczenia);
• Zapisz się na dowolny newsletter;
• Zarejestruj się, aby wziąć udział w promocji;
• Złóż wniosek o cennik;
• I wiele innych różnych opcji...

Ze strony docelowej mogą korzystać także osoby zajmujące się nieruchomościami. Ta strona zwiększy sprzedaż każdej nieruchomości. W końcu teraz gra Internet ważna rola przy wyborze dowolnego produktu lub usługi. A przy okazji tworzenia witryny ludzie cię oceniają, od razu możesz zrozumieć, że twoja nieruchomość nie jest zrujnowanym domem, ale piękną posiadłością. A jeśli jeszcze nie związałeś swojego życia z nieruchomościami, a raczej nie wiesz jak to zrobić, to pobierz kurs wideo od specjalisty, który dużo wie o swoim biznesie.

2. Rodzaje stron docelowych

Istnieją cztery typy „stron sprzedaży”:

Długa strona: strona docelowa to długa strona docelowa. To właśnie tego typu strony docelowe dominują w Internecie.

Krótki: strona docelowa to krótka strona docelowa. Jego funkcją najczęściej jest przekierowanie do odbioru adresy e-mail i powiększanie bazy abonentów.

Jeden krok: strona docelowa – to strona jednoetapowa;

Dwuetapowy: strona docelowa - taka strona jest zatem dwuetapowa. Istota strony jest taka jeden krok stronie, zainteresowanie klienta zostaje rozgrzane, a na stronie dwuetapowej wymagana akcja jest bezpośrednio realizowana.

Landing page ze swej natury pełni funkcję specyficznej mini-strony, która może nawet nie być powiązana z głównym rodzajem Twojej działalności, ale działa jako niezależna strona.

Przykłady konwersji: w obszarze usług turystycznych (popularny i poszukiwany obszar biznesu) dobrym wskaźnikiem jest współczynnik konwersji 9-14%, ale w obszarze sprzedaży samochodów luksusowych współczynnik konwersji 4-14% to nie tylko dobry, ale i doskonały współczynnik konwersji na stronie docelowej.

Minimalna konwersja strony docelowej z reguły waha się w granicach 1-4%, ale nie przekracza 30-45%. W praktyce dobrym wskaźnikiem jest osiągnięcie konwersji na poziomie 25-30%.

Za dobry współczynnik konwersji uważa się 5-10%. W przypadku biznesu informacyjnego konwersja może sięgać 25% - 30%.

Należą do nich:

• Skala odrzucenia;
• Średni czas, jaki użytkownik spędza na danej stronie;
• Mapa kliknięć na stronie itp.

Nie ma średniej konwersji. Wynika to z faktu, że konwersja zależy bezpośrednio od trzech rzeczy:

Natychmiastowa jakość Twojej strony docelowej;

Jakość ruchu trafiającego na odpowiednią stronę;

Cechy firmy, poziom konkurencji.

Teraz, słysząc słowo „lądowanie”, już dobrze wiesz, co to jest.

3. Jak za darmo stworzyć stronę docelową

Przedstawiamy popularne usługi, gdzie za darmo możesz stworzyć jednostronicową stronę docelową:

www.setup.ru;

lądowanie.ru;

ru.wix.com;

lpgenerator.ru ;

strony niezależne - gdzie za 1500-2000 rubli freelancerzy wykonają dla Ciebie stronę docelową na zamówienie.

Po wjechaniu pasek wyszukiwaniażądanie - „utwórz stronę jednostronicową (landing)”, poda wyszukiwarka duża liczba usług i witryn, w których już istnieje gotowe strony lub możesz stworzyć go sam dzięki projektantowi. To samo można zrobić, jeśli zostało Ci dodatkowe. pytania - czym jest strona docelowa.

Idealny” wstęp- strona docelowa" - wideo

Algorytm Tworzenie lądowania Strona - wideo

Ale to, co jest bezpłatne, nie zawsze będzie wysokiej jakości. Bezpłatne usługi potrzebne więcej tematów, którzy mają bardzo ograniczony budżet lub po prostu chcą zrozumieć zasadę tworzenia tych stron. Jeśli chcesz, aby Twoja firma zdobyła dużą liczbę klientów, osiągnęła szczyt popularności, radzimy zamówić strony internetowe u profesjonalistów, którzy dokładnie powiedzą Ci, co i jak zrobić, oraz uwzględnią Twoje życzenia. Tutaj przykładowo znajdują się ceny firmy, z którą współpracujemy.

4. Funkcje strony docelowej

• Zazwyczaj jest to witryna z wizytówkami, która nie jest przeciążona plikami ( sztuki graficzne, wideo itp.). Ze względu na minimalizm strony, znajdujący się na niej tekst jest łatwy do odczytania.
• Landing page nie powinien zawierać reklam, jest już reklamą Twoich usług i produktów.
• Strona docelowa nie powinna zawierać zbędnych informacji niezwiązanych ze sprzedawanym produktem lub usługą.
• Strona docelowa musi mieć określoną strukturę: tekst reklamowy , Kino, minimalna nawigacja strony,

Witam Was moi drodzy czytelnicy. Dzisiaj porozmawiamy o punkty techniczne, za pomocą których możemy zwiększyć konwersję sprzedaży naszych towarów lub usług. Jeden z ważne punkty to dobrze zaprojektowany landing page z produktami. Tak zwana strona docelowa, o stworzeniu której porozmawiamy później i otrzymamy gotowe kody stron.

Co to jest strona docelowa? Jest to strona, na którą zwykle trafiają użytkownicy po kliknięciu reklamy. Stworzony dla jednej oferty: produktu, usługi lub abonamentu. Skuteczna strona docelowa jest podstawą udanego marketingu online. Produkt może i jest najlepszy na rynku, reklamy są dopracowane, ale bez dobrego landing page’a wysiłki nie przynoszą 100% rezultatów. Informuje odwiedzających, co jest w ofercie i dlaczego powinni tego chcieć. Poczucie pilności sprzyja szybkiemu podejmowaniu decyzji i przejściu użytkownika do kategorii klienta.

Jak stworzyć Landing Page? Błędem jest wierzyć, że odpowiedź leży w umiejętności pisania. Dobra strona docelowa to efekt skoordynowanej pracy nad celami, tekstem, projektem i kodem. Landingi, których przykłady znajdziesz poniżej, pomogą początkującym nauczyć się podstaw pracy z układem, ale nie zastąpią tekstów konwersji i zrozumienia grupy docelowej. Możesz je także stworzyć korzystając z pomocy różnych projektantów Landing Page’ów.

Zanim więc utworzysz stronę docelową, zadaj sobie pytanie:

• Co zrobi człowiek po wylądowaniu na stronie docelowej? Czy coś kupi? Wypełnisz formularz? Zapisz się do Newslettera? Zanim zaczniesz śledzić współczynnik konwersji, wyznacz jasne cele.
• Kim są moi konkurenci? W rzeczywistości są to trzy pytania: kto, jaki sukces odniósł i jak można zastosować ich osiągnięcia? Naśladownictwo jest najszczerszą formą pochlebstwa. Jeśli Twoi konkurenci robią coś, co działa, powtórz to w swojej witrynie.
• Kto jest moją publicznością? Im lepiej rozumiesz swoją niszę i grupę docelową, tym większa szansa, że ​​Twoje wysiłki się opłacią.

Musimy zaoferować wszystko niezbędne informacje, ale nie na tyle, aby stłumić i wypędzić potencjalnego klienta.

Przykłady stworzenia strony docelowej + kodowanie dla manekinów

Zanim zaczniemy, rzućmy okiem na HTML i CSS. Zrozumienie ich działania pomoże Ci stworzyć lądowanie.

HTML to język znaczników przeglądarki służący do wizualizacji stron internetowych. Zapisane przy użyciu znaczników ujętych w nawiasy ostre, które definiują treść.

Etykieta otwiera się () i zamyka () wokół nadzienia:

treść

W celu dostrojenia po nazwie dodawane są atrybuty:

treść

CSS - określa sposób pozycjonowania Elementy HTML. Składa się z selektorów, właściwości i wartości:

#selektor (właściwość: wartość;)

Selektor dopasowuje nazwę określonego tagu w formacie HTML. Zmiana wartości i dodanie właściwości reguluje jego wygląd. Możesz tworzyć strony, które różnią się od siebie wyglądem, stosując różne style CSS do tego samego kodu HTML.

5 pierwszych kroków

Dla szybki układ Wykorzystamy szablon o minimalistycznym wyglądzie opartym na bootstrapie. Jest to system z własnymi selektorami, który jest używany na całym świecie w celu przyspieszenia układu.

Wygląda skromnie.

Z tej ryby w kilku etapach tworzona jest strona internetowa na każdy gust.

Struktura katalogów w folderze:

• indeks.html: To plik główny, które będziemy redagować.
• /assets: pliki pomocnicze znajdują się tutaj:
• /css: Katalog zawiera style bootstrap i ikony. Plik, który będziemy edytować to main.css.
• /img: folder obrazów witryn.
• /fonts: czcionki ikon.
• /js: ładuje pliki JavaScript.

Krok 1: Korzystanie z nagłówka

Nagłówek i podtytuły to kluczowe miejsca, które pomagają w jasny sposób przekazać wartość oferty.

Zmieńmy tytuł i nazwę witryny. Tutaj nie musisz posiadać umiejętności pisania na klawiaturze – piszesz własny tekst w miejscach zaznaczonych na żółto na ekranie.

Krok 2. Zwięzłość jest siostrą nawrócenia. Dodawanie korzyści i stawek

Będziesz potrzebować 4 sekcji:

• zalety;
• stawki;
• Opinie;
• wezwanie do działania.

Stwórzmy sekcję treści głównej „main”, do której wstawimy niezbędne sekcje:

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

Wypełnij wypełnieniem zamiast kropek.

W sekcji korzyści będziesz potrzebować tego kodu:

Zalety
Szybko

Niezawodny

Sed diam nonummy

Opłacalny

Elit, sed diam nonummy

Technicznie

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

Niezawodny

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

Opłacalny

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

Technicznie

Lorem ipsum dolor sit amet, consectetuer adipiscing

Niezawodny

Lorem ipsum dolor sit amet, consectetuer adipiscing

Opłacalny

Lorem ipsum dolor sit amet, consectetuer adipiscing

Treść dla przejrzystości:

Nadal wygląda niechlujnie, ale nie ma powodu do paniki, kontynuujmy.

Zapisujemy ceny. Treść zmienia się w taki sam sposób, jak w pierwszym kroku. ogólny opis z klasą „taryfy” i trzema taryfami.

Plany taryfowe

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.

Taryfa nr 1
$10

miesięcznie/na osobę

• Lorem ipsum dolor sit amet, consectetuer adipiscing elita


• Lorem ipsum dolor


• 10 Lorem ipsum

Zamówienie
Taryfa nr 2
$20

miesięcznie/na osobę

• Lorem ipsum dolor sit amet, consectetuer adipiscing elita


• Lorem ipsum dolor


• 10 Lorem ipsum

Zamówienie
Taryfa nr 3
$30

miesięcznie/na osobę

• Lorem ipsum dolor sit amet, consectetuer adipiscing elita


• Lorem ipsum dolor


• 10 Lorem ipsum

Zamówienie

Na to wygląda.

Na razie nie interesuje nas wygląd przyszłego landing page’a – poniżej przyjrzymy się przykładom zmiany stylów.

Krok 3: Zaufaj sygnałom i wezwaniu do działania

Stosowanie ukierunkowanych sygnałów wskazuje odwiedzającym, że marka jest godna zaufania. Można odbierać sygnały Różne rodzaje, ale klasyką są opinie klientów.

Opinie klientów

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.”

Ustawmy wezwanie do działania.

Skorzystaj z zamówienia już dziś

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:

Zamów teraz!

Recenzje pomogą potencjalni klienci podjąć decyzję o zakupie produktu. Dla jasności potrzebujemy awatarów, więc od razu je umieścimy - pod każdym cytatem.

Nazwa klienta.

Krok 4: Integracja przyjazna dla sieci i urządzeń mobilnych

Aby zaimplementować grid, potrzebujemy kontenerów Bootstrap. Ważne jest, aby pamiętać o całkowitej liczbie prawidłowych segmentów kolumn - 12. Klasa określa szerokość wyświetlanej treści. Zaletą tej gotowej siatki jest to, że pojemniki są projektowane z myślą o możliwości adaptacji i nadają się do natychmiastowego użycia urządzenia mobilne. Szczegółowy opis na oficjalnej stronie. Siatka wygląda tak.

Zawartość „main” zostanie zapakowana w pojemnik. Aby to zrobić, na górze zapisano:

… .

Jeśli chcesz, aby bloczek zmieścił się na całej szerokości ekranu, wówczas do środka wkładany jest pojemnik. Tutaj będzie to jumbotron i wezwanie do działania.

Wszystkie elementy wymagające ułożenia jeden na drugim owiniemy separatorami liniowymi.

Możemy teraz dostosować szerokość kolumn, koncentrując się na siatce ładowania początkowego. Po owinięciu wypełnienie przestało przyklejać się do krawędzi sitka i pojawiły się schludne wgłębienia.

Ceny ustalamy szeregowo za pomocą kolumny klasa col-lg-4. Wewnątrz linii wierszy nie ma już potrzeby pisania oddzielnych elementów div do zawijania; można je połączyć z istniejącymi, oddzielonymi spacją.

Analogicznie konfigurujemy kolumny dla sekcji recenzji i korzyści. Jeśli chcesz przesunąć element na bok, użyj klasy kolumny przesuniętej col-lg-offset-2. Liczba na końcu określa, o ile kolumn bazowych nastąpi przesunięcie.

Krok 5. Czcionki i ikony

Implementujemy czcionki dla Nagłówki Google Czcionka. Po wybraniu otwórz zakładkę importu i skopiuj z niej dane do pliku main.css. Do pliku, w którym używana jest nowa czcionka, dodajemy także selektory tytułów.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importuj czcionkę do nagłówków */
marka .navbar,
h1,
h2,
h3,
h4,
h5,
h6 (
rodzina czcionek: „Roboto Condensed”, bezszeryfowa; /* Dane wyjściowe czcionki Google */
}

Dla przejrzystości zalety zostały opisane przez klasę o intuicyjnej nazwie Text-Centrum i ikony FontAwesome z zestawu bootstrap.

W tym momencie przygotowania są całkowicie zakończone.

Landing page: przykłady kodów z ofertą, paralaksą i licznikiem

Stosujemy trzy najpopularniejsze typy: ze zdaniem, formą i licznikiem. W miarę postępu układu szablon będzie uzupełniany o efekty.

Przykład 1: ze zdaniem

Ustawmy tło części głównej i dopełnienie tak, aby zasłonił pierwszy ekran.

Jumbotron (
tło: #f5f5f5 url(../img/fon.jpg) u góry na środku bez powtórzeń;
maksymalna szerokość: 100%;
górna część dopełnienia: 250px;
dopełnienie-dół: 200px;
wyrównanie tekstu: do środka;
}

Zmieńmy rozmiar nagłówka jumbotronu z h2 na h1. Następnie piszemy style dla elementów, które wymagają zmiany.

Zacznijmy od ikon.

Korzyści ja(
kolor: #cac4c4;
}

Po znaku skrótu określany jest kolor. Możesz wybrać własną opcję, korzystając z tabel kolorów HTML lub edytora obrazów.

Wcięcie dla nagłówków sekcji

sekcja h2 (
górna część dopełnienia: 30px;
margines na dole: 25px;
}

Porządkujemy wygląd taryf. Dla wygody tworzymy własne klasy dla elementów, które chcemy konkretnie wyróżnić.

Taryfa nr 1
$10

miesięcznie/na osobę

• Lorem ipsum dolor sit amet, consectetuer adipiscing elita


• Lorem ipsum dolor


• 10 Lorem ipsum

Zamówienie

I dużo CSS. Za jakie miejsca odpowiadają sekcje podano w komentarzach - /* pomiędzy ukośnikami i gwiazdką */

/* =========Style taryf======== */
/* forma ogólna taryfa */
.element_ceny(
tło: #f2f2f2;
pozycja: względna;
wyświetl: -webkit-flex;
wyświetlacz: elastyczny;

kierunek flex: kolumna;

wyrównanie elementów: rozciągnięcie;
wyrównanie tekstu: do środka;
-webkit-flex: 0 1 330px;
elastyczny: 0 1 330 pikseli;
dopełnienie: 2em 3em;
margines: 1em;
kolor: #262b38;
kursor: domyślny;
przepełnienie: ukryte;

}
/* zmień tło po kliknięciu */
.pricing_item: najedź (
kolor: #444;
tło: #daebef;
}
/* indywidualne tło cennika w każdej taryfie */
.pricing_item:pierwsze dziecko .cena (
tło: #9ba9b5;
}
.pricing_item:n-te-dziecko(2).cena (
tło: #1f6098;
}
/* na szerokich ekranach środkowa kolumna taryfowa jest wcięta i podświetlona */
@media screen i (min. szerokość: 66,250em) (
.element_ceny(
marża: 1,5em 0;
}
.wyróżniony(
indeks Z: 10;
margines: 0;
rozmiar czcionki: 1,15 em;
}
}
/* tytuł */
.cennik_elementu h3 (
rozmiar czcionki: 2em;
marża: 0,5em 0 0;
kolor: #1d211f;
}
/* tło metki z ceną */
.cena(
rozmiar czcionki: 2em;
grubość czcionki: pogrubiona;
kolor: #fff;
pozycja: względna;
indeks Z: 100;
wysokość linii: 95px;
szerokość: 100px;
wysokość: 100px;
marża: 1,15em auto 1em;
promień granicy: 50%;
tło: #77a5cc;
-webkit-przejście: kolor 0,3 s, tło 0,3 s;
przejście: kolor 0,3 s, tło 0,3 s;
}
/* waluta */
.waluta(
rozmiar czcionki: 0,5 em;
wyrównanie w pionie: super;
}
/* wyjaśnienie propozycji */
.zdanie(
grubość czcionki: pogrubiona;
margines: 0 0 1em 0;
dopełnienie: 0 0 0,5em;
kolor: #2a6496;
}
/* lista */
.cennik ul (
rozmiar czcionki: 0,95 em;
margines: 0;
dopełnienie: 1,5 em 0,5 em 2,5 em;
wyrównanie tekstu: do lewej;
}
/* Lista przedmiotów */
.cennik li (
dopełnienie: 0,15em 0;
}
/* przycisk kolejności stawek */
Przycisk .cennik(
grubość czcionki: pogrubiona;
margines u góry: auto;
dopełnienie: 1em 2em;
kolor: #fff;
promień obramowania: 5px;
tło: #428bca;
-przejście do webkita: kolor tła 0,3 s;
przejście: kolor tła 0,3 s;
}
/* zmiana koloru po naciśnięciu przycisku */
przycisk .pricing_item: najedź,
przycisk .pricing_item:fokus (
kolor tła: #285e8e;
}
/* tło taryfy*/
.bg-2 (
tło: #dddddd;
}

Wynik

Opinie klientów. Przyjrzyjmy się im schludnie i wskażmy ich lokalizację.

/* =========Style opinii======== */
referencje (
dopełnienie: 4em 0;
wyrównanie tekstu: do środka;
}
.referencje .avatar img (
promień granicy: 50%;
pływak: w lewo;
wyświetlacz: wbudowany;
margines prawy: 1em;
szerokość: 65px;
wysokość: 65px;
margines na dole: 30px;
}
.referencje .avatar p (
wyrównanie tekstu: do lewej;
wyściółka górna: 1em;
kolor: #5d5d5d;
grubość czcionki: 900;
}

Pozostaje tylko ozdobić ostatnie wezwanie do działania i stopkę.

/* Działanie */
.działanie(
tło: #476177;
minimalna wysokość: 180px;
szerokość: 100%;
dopełnienie: 4em 0;
wyrównanie tekstu: do środka;
}
.akcja h2 (
kolor: #fff;
grubość czcionki: 300;

}
.akcja p(
kolor: #fff;
cień tekstu: 0 1px 2px rgba(0, 0, 0, .2);
rozmiar czcionki: 1,2 em;
}
.akcja .kontener (
margines górny: 3em;
}
/* Stopka */
stopka(
tło: #333333;
dopełnienie: 1em 0;
wyrównanie tekstu: do prawej;
}
stopka p(
kolor: #fff;
wysokość linii: 1;
transformacja tekstu: wielkie litery;
rozmiar czcionki: 0,7 em;
margines górny: 0,5 em;
}

Do przycisku stopki przypisana jest wbudowana klasa bootstrap btn-default.

Ożywienie szablonu. Wdrażajmy płynne przewijanie i przyciski sekcji oraz animacja tekstu na pierwszym ekranie.

Aby przejścia zadziałały, zastąpimy niektóre sekcje klas identyfikatorem - dla świadczeń i taryf. Do przycisków dodamy linki do identyfikatora. Zrzut ekranu - co jest do czego dołączone, zaznaczone żółtym znacznikiem.

Ustawiamy wcięcia dla przycisków - jbutton. Przewijanie po naciśnięciu działa, ale bardzo gwałtownie.

Płynne przejścia powstają, gdy pomoc w JavaScript lub jquery. Ten ostatni jest domyślnie podłączony do szablonów Bootstrap.

Przewijanie jest teraz płynne.

Dodawanie animacji do tekstu przy użyciu programu Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). To jest gotowe otwarte źródło, można go używać na dowolnej stronie internetowej. Umieść plik z Githuba w folderze css i podaj ścieżkę.

Tutaj wybieramy efekty: https://daneden.github.io/animate.css/. Wybraliśmy opcję fadeInDown. Jest to zapisane w kodzie w następujący sposób:

Teraz, gdy strona zostanie załadowana lub odświeżona, tekst będzie animowany. Gotowy.

Przykład 2: z efektem kształtu i paralaksy

Im więcej pól formularza wyświetli się odwiedzającemu, tym mniejsze jest prawdopodobieństwo, że je wypełni. Zapytaj tylko o minimum niezbędnych informacji.

Montuje się go analogicznie. Zmienimy tła i kolory. I oczywiście dodamy kształt.

Zacznijmy od paralaksy.

Zmieńmy tło jumbotronu na przezroczyste:

tło: przezroczyste;

Wewnątrz head wstawimy skrypt:

$(okno).scroll(funkcja(e)(
paralaksa();
});
funkcja paralaksy())(
var przewijany = $(okno).scrollTop();
$(.bgparallax").css("góra",-(przewinięte*0.2)+"px");
}

Pierwsza linia w korpusie to pojemnik na paralaksę:

A w CSS jego zachowanie jest następujące:

Bgparalaksa (
tło: url(/../img/fon.jpg) powtórz;
pozycja: stała;
szerokość: 100%;
wysokość: 300%;
góra:0;
po lewej:0;
indeks Z: -1;
}

Paralaksa jest gotowa. Ale wprowadzanie zmian w kodzie i nowe tło wymaga ponownego przypisania schematu kolorów.

Przyciemnianie menu:

Domyślny pasek nawigacyjny (
kolor tła: #333;
kolor obramowania: #444;
kolor: ciemnoszary;
promień granicy: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
kolor: ciemnoszary;
kolor tła: rgba(0, 0, 0, 0.5);
}

Zastępujemy zdanie w jumbotronie nowym - z kodem formularza:

Wstęp zamienia gości w klientów
Quisque tincidunt dui augue suspensisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate Massa.

• 
  
  
  


• 
  

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

  
  

I przepisujemy wygląd

/* formularz */
.headform-list (
typ-stylu listy: brak;
wysokość linii: 26px;
grubość czcionki: 400;
dopełnienie: 0px;
margines na dole: 40px;
}
.głowa(
przepełnienie: ukryte;
pozycja: względna;
kolor tła: rgba(0,0,0,.4);
dopełnienie: 35px 40px;
promień obramowania: 8px;
}
wejście, przycisk, wybór, pole tekstowe (
szerokość: 100%;
margines na dole: 10px;
}
.headform-list li .fa (
pozycja: absolutna;
góra: 0 pikseli;
po lewej: 0px;
szerokość: 42px;
rozmiar czcionki: 24px;
wyrównanie tekstu: do środka;
}
.headform-list li (
pozycja: względna;
minimalna wysokość: 38px;
dopełnienie po lewej stronie: 62px;
margines na dole: 20px;
}
.jumbotron p (
kolor: #fff;
rozmiar czcionki: 16 pikseli;
styl czcionki: kursywa;
}

Tekst jumbotronu również tu trafił, bo domagał się zmian.

Zmieniamy taryfy.

/* ogólny widok taryfy */
.element_ceny(
kolor tła: rgba(0,0,0,.4); /* linia zmieniona */
promień obramowania: 4px; /* linia zmieniona */
pozycja: względna;
wyświetl: -webkit-flex;
wyświetlacz: elastyczny;
-webkit-flex-kierunek: kolumna;
kierunek flex: kolumna;
-webkit-align-items: rozciągnij;
wyrównanie elementów: rozciągnięcie;
wyrównanie tekstu: do środka;
-webkit-flex: 0 1 330px;
elastyczny: 0 1 330 pikseli;
dopełnienie: 2em 3em;
margines: 1em;
kolor: #f2f2f2; /* linia zmieniona */
kursor: domyślny;
przepełnienie: ukryte;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* zmień tło po kliknięciu */
.pricing_item: najedź (
kolor: #444;
tło: #ddd; /* linia zmieniona */
}

Teraz wyglądają tak - przezroczyste tło i zaokrąglone rogi.

Szablon jest gotowy.

Przykład 3: z licznikiem odliczającym

Zmieniamy ponownie wypełnienie jumbotronu i ponownie kolorujemy szablon tak, aby pasował do nowego tła, podobnie jak w poprzednim szablonie. Połącz skrypt licznika:

HTML





Czas nie czeka
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 = nowe odliczanie((
czas: 86400 * 3, // 86400 sekund = 1 dzień
szerokość: 300
, wzrost: 60
, zakresHi: "dzień"
, styl: „odwróć” //