Analogicznie ustawiamy kolumny dla sekcji recenzji i korzyści. Jeśli chcesz przenieść element na bok, użyj klasy kolumny przesunięcia col-lg-offset-2. Liczba na końcu określa, ile kolumn podstawy zostanie przesuniętych.

Krok 5. Czcionki i ikony

Wdrażamy czcionki do nagłówków Google Font. Po wybraniu otwórz zakładkę importu i skopiuj z niej dane do pliku main.css. Do pliku, dla którego zastosowana jest nowa czcionka, dodajemy również selektory nagłówków.

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

Dla jasności, zalety to klasa z wymownym centrum tekstu i ikonami FontAwesome z zestawu bootstrap.

To kończy przygotowania.

Landing page: przykłady kodu z ofertą, paralaksą i licznikiem

Stosujemy trzy najpopularniejsze typy: z ofertą, z formularzem oraz z licznikiem odliczania. Po ukończeniu makiety szablon zostanie uzupełniony o efekty.

Przykład 1: z ofertą

Ustaw główne tło i dopełnienie tak, aby pierwszy ekran był zakryty.

Jumbotron (
tło: #f5f5f5 url(../img/fon.jpg) góra środek bez powtórzeń;
maksymalna szerokość: 100%
dopełnienie górnej: 250px;
dopełnienie-dół: 200px
wyrównanie tekstu: środek;
}

Zmień rozmiar tytułu jumbotronu z h2 na h1. Następnie przepisujemy style dla elementów, które należy zmienić.

Zacznijmy od ikon.

Korzyści ja(
kolor: #cac4c4;
}

Kolor określany jest po znaku krzyżyka. Możesz wybrać własną opcję za pomocą tabel kolorów html lub edytora obrazów.

Wcięcie dla nagłówków sekcji

sekcja h2 (
dopełnienie górnej części: 30px;
margines-dolny: 25px;
}

Uporządkowaliśmy wygląd taryf. Dla wygody tworzymy własne klasy dla elementów, które chcemy punktowo dobierać.

I dużo CSS. Za jakie miejsca odpowiadają sekcje jest napisane w komentarzach - /* między ukośnikami z gwiazdką */

/* =========Style taryfy======== */
/* widok ogólny taryfy */
.pricing_item(
tło: #f2f2f2;
pozycja: względna;
wyświetlanie: -webkit-flex;
wyświetlanie:flex;

kierunek ugięcia: kolumna;

wyrównaj przedmioty: rozciągnij;
wyrównanie tekstu: środek;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
wypełnienie: 2em 3em;
marża: 1em
kolor: #262b38;
kursor: domyślny;
przelew: ukryty;

}
/* zmiana tła po kliknięciu */
.pricing_item:najedź (
kolor: #444;
tło: #daebef;
}
/* indywidualna cena w każdej taryfie */
.pricing_item:pierwsze dziecko .price (
tło: #9ba9b5;
}
.pricing_item:nth-child(2) .price (
tło: #1f6098;
}
/* na szerokich ekranach dopełnianie i podświetlanie środkowa kolumna taryfa */
@media screen i (min-szerokość: 66.250em) (
.pricing_item(
marża: 1.5em0;
}
.wyróżniony(
indeks z: 10;
margines: 0;
rozmiar czcionki: 1.15em
}
}
/* tytuł */
.pricing_item h3(
rozmiar czcionki: 2em
margines: 0.5em 0 0;
kolor: #1d211f;
}
/* podkład cenowy */
.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ń graniczny: 50%
tło: #77a5cc;
-przejście na webkit: kolor 0.3s, tło 0.3s;
przejście: kolor 0.3s, tło 0.3s;
}
/* waluta */
.waluta(
rozmiar czcionki: 0.5em
wyrównanie w pionie: super;
}
/* doprecyzowanie zdania */
.zdanie(
grubość czcionki: pogrubiona;
marża: 0 0 1em 0;
wypełnienie: 0 0 0.5em;
kolor: #2a6496;
}
/* lista */
.pricing_item ul (
rozmiar czcionki: 0,95 em
margines: 0;
wyściółka: 1,5em 0,5em 2,5em
wyrównanie tekstu: do lewej;
}
/* Lista przedmiotów */
.pricing_item li(
wypełnienie: 0.15em0;
}
/* przycisk zamówienia taryfy */
przycisk .pricing_item(
grubość czcionki: pogrubiona;
górny margines: auto;
wypełnienie: 1em 2em;
kolor: #fff;
promień obramowania: 5px
tło: #428bca;
-przejście na webkit: kolor tła 0.3s;
przejście: kolor tła 0,3s;
}
/* zmiana koloru po kliknięciu przycisku */
przycisk .pricing_item:najedź kursorem,
przycisk .pricing_item:focus(
kolor tła: #285e8e;
}
/* tło taryfowe*/
.bg-2 (
tło: #dddddd;
}

Wynik

Opinie klientów. Dajmy im schludny wygląd, wyznaczmy lokalizację.

/* =========Style referencji======== */
referencje (
wypełnienie: 4em0;
wyrównanie tekstu: środek;
}
.recenzje .avatar img (
promień graniczny: 50%
pływak: lewy;
wyświetlacz: wbudowany;
margines-prawy: 1em;
szerokość: 65px
wysokość: 65px;
margines-dolny: 30px;
}
.recenzje .awatar p(
wyrównanie tekstu: do lewej;
wyściółka wierzchu: 1em;
kolor: #5d5d5d;
grubość czcionki: 900
}

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

/* Akcja */
.akcja(
tło: #476177;
min-wysokość: 180px;
szerokość: 100%
wypełnienie: 4em0;
wyrównanie tekstu: środek;
}
.akcja h2(
kolor: #fff;
grubość czcionki: 300

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

Przycisk stopki ma przypisaną wbudowaną klasę bootstrap btn-default.

Ożywiamy szablon. Zaimplementujemy płynne przewijanie i przyciski dla sekcji, a także animację tekstu na pierwszym ekranie.

Aby przejścia działały, część klas sekcji zastąpimy identyfikatorem - dla świadczeń i taryf. I napiszemy linki do id do przycisków. Ekran - co jest dołączone do tego, co jest podświetlone żółtym znacznikiem.

Ustaw wcięcia dla przycisków - jbutton. Przewijanie po kliknięciu działa, ale bardzo gwałtownie.

Płynne przejścia są tworzone za pomocą javascript lub jquery. Ten ostatni jest domyślnie połączony z szablonami Bootstrap.

Przewijanie jest teraz płynne.

Dodawanie animacji do tekstu za pomocą Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Jest to gotowy open source, można go używać w dowolnej witrynie. Umieszczamy plik z github w folderze css i zapisujemy ścieżkę.

Wybierz efekty tutaj: https://daneden.github.io/animate.css/. Wybraliśmy fadeInDown. Napisane w kodzie tak:

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 oferuje odwiedzający, tym mniejsze prawdopodobieństwo ich wypełnienia. Zapytaj tylko o minimalne wymagane informacje.

zmontowane przez analogię. Zmienimy tła i kolory. I oczywiście dodamy formularz.

Zacznijmy paralaksa .

Zmień tło jumbotronu na przezroczyste:

tło: przezroczyste;

Wstaw skrypt wewnątrz głowy:

Pierwsza linia w ciele to pojemnik paralaksy:

A w CSS jego zachowanie to:

bgparalaksa(
tło: url(/../img/fon.jpg) powtórz;
pozycja: ustalona;
szerokość: 100%
wzrost: 300%;
góra:0;
lewy:0;
indeks z: -1;
}

Paralaksa jest gotowa. Jednak wprowadzenie 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ń graniczny: 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);
}

Zamieniamy zdanie w jumbotron na nowe - kodem formularza:

I przepisać wygląd

/* Formularz */
.headform-list(
typ-listy: brak;
wysokość linii: 26px;
grubość czcionki: 400
wypełnienie: 0px
margines-dolny: 40px
}
.głowa(
przelew: ukryty;
pozycja: względna;
kolor tła: rgba (0,0,0,.4);
dopełnienie: 35px 40px;
promień obramowania: 8px
}
wejście, przycisk, wybierz, obszar tekstowy (
szerokość: 100%
margines-dolny: 10px;
}
.headform-list li .fa (
pozycja: bezwzględna;
góra: 0px;
lewy: 0px;
szerokość: 42px
rozmiar czcionki: 24px;
wyrównanie tekstu: środek;
}
.headform-lista li (
pozycja: względna;
min-wysokość: 38px;
dopełnienie lewe: 62px;
margines-dolny: 20px
}
.jumbotronp(
kolor: #fff;
rozmiar czcionki: 16px;
styl czcionki: kursywa;
}

Pojawił się również tekst jumbotronu, który wymagał zmian.

Zmieniamy stawki.

/* widok ogólny taryfy */
.pricing_item(
kolor tła: rgba (0,0,0,.4); /* linia zmieniona */
promień obramowania: 4px /* linia zmieniona */
pozycja: względna;
wyświetlanie: -webkit-flex;
wyświetlanie:flex;
-webkit-flex-direction: kolumna;
kierunek ugięcia: kolumna;
-webkit-align-items: stretch;
wyrównaj przedmioty: rozciągnij;
wyrównanie tekstu: środek;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
wypełnienie: 2em 3em;
marża: 1em
kolor: #f2f2f2; /* linia zmieniona */
kursor: domyślny;
przelew: ukryty;
box-shadow: 0 0 15px rgba (0, 0, 0, 0,05);
}
/* zmiana tła 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 odliczania

Ponownie zmieniamy wypełnienie jumbotronu i przemalowujemy szablon na nowe tło, analogicznie do poprzedniego szablonu. Łączymy skrypt licznika:

HTML

W pliku stylu usuń dolny promień formy, przywołaj na myśl przycisk.

Dodatkowo zmieniono kolorystykę menu pod nowym tłem oraz zmieniono styl tekstów w jumbotronie - analogicznie do poprzedniego przykładu. Wynik.

Dolna część

To kończy przykłady strony docelowej, ale kod wymaga więcej pracy.

Strona docelowa powinna być szybka i dobra jak Ferrari — czas ładowania strony ma ogromny wpływ na współczynnik odrzuceń. Zoptymalizuj obrazy, zminimalizuj rozmiar gotowych skryptów i stylów, aby uzyskać maksymalną wydajność.

Lekcja zawiera przykłady tworzenia dobrych stron docelowych, które pomogą Ci pozyskać prawdziwych klientów i nauczysz się czegoś nowego. Polubmy i odświeżmy. Do zobaczenia wkrótce.

Aby pobrać wszystkie źródła przedstawione na lekcji jako gotowe strony, kliknij jeden z przycisków zamek towarzyski aby go otworzyć i uzyskać link.

Z poważaniem Galiulin Rusłan.

Pozdrowienia! Z tobą Denis Gerasimov, witryna i porozmawiamy o tym, jak samodzielnie stworzyć stronę docelową, a jednocześnie nadal adaptacyjną i nowoczesną. Oglądasz tekstową wersję filmu.

Ustalmy kilka wymagań dla naszego przyszłego lądowania:

1. Szybko, czyli szybko się ładował. Dlatego zrobimy to sami, w HTML i CSS.
2. Adaptacyjny, czyli dostosowany do ekranów różnych urządzeń. Aby nasza strona docelowa była dostępna z komputera, tabletu, smartfona itp. i na wszystkich urządzeniach wyglądał ładnie i wygodnie.
3. Nowoczesny, to znaczy możemy osadzić na nim suwak, dodać różne okna modalne lub jakieś wyskakujące porady.
4. Piękna. Oznacza to, że moglibyśmy dodać ikony i przyciski, które wyglądałyby naturalnie na naszej stronie docelowej.

Jak samemu stworzyć nowoczesny i piękny landing page?

1. Wymagana jest przynajmniej podstawowa wiedza na temat html i css, to znaczy musisz być w stanie wyobrazić sobie, jak dodać przynajmniej klasę css do struktury html, aby zmienić jej wygląd. jeśli masz z tym jakieś trudności, to mogę polecić Ci bezpłatne kursy Jewgienija Popowa (pobierz linki w prezentacji, którą znajdziesz na końcu tekstu ⇓), które zawierają kilka lekcji, po obejrzeniu których już zaczniesz zrozumieć, co to jest (link).
2. Przeczytaj dokumentację frameworka bootstrap. Sam możesz wybrać ramy. Jest to specjalny framework, który zawiera zestawy stylów i skrypty java, które można łatwo osadzić na naszej stronie i które będą wyglądać bardzo organicznie. Zawiera również strukturę plastra miodu, która pozwoli nam stworzyć responsywny projekt.
3. Wybierz strukturę witryny. To znaczy wyobraź sobie, jak będzie wyglądał szkielet naszej przyszłej witryny. Np. chcemy, żeby na górze był nagłówek, tzw. nagłówek, potem jakiś obrazek i formularz subskrypcji. Musimy stworzyć tę strukturę, ramy.
4. Użyj konstruktora, aby utworzyć strukturę witryny. Konstruktor znajduje się w www. layoutit. com, dzięki niemu możesz stworzyć strukturę strony, nawet bez specjalnych umiejętności i wiedzy.
5. Pobierz powstałą strukturę na komputer i zmień jej projekt. Następnie gotowy landing page można bezpiecznie wgrać na serwer.

Przejdźmy do praktyki

Na przykładzie stworzonego przeze mnie podestu lp..Direct. Bootstrap zawiera różne elementy projektu, takie jak ikony, których możesz użyć. Zawiera również różne skrypty Java, za pomocą których można tworzyć modalne wyskakujące okna, które można zamknąć od góry lub od dołu. To przykład najprostszego lądowania, które w zasadzie nie działa źle, ma dobrą konwersję.

Zajrzyjmy do dokumentacjiBootstrap

Framework ładowania początkowego można pobrać ze strony www. getbootstrap. com. Ten produkt pochodzi od twórców Twittera. Ten framework stale się rozwija i obecnie jego najnowsza wersja to 3.3.4. Aby podłączyć do niej witrynę, musisz pobrać to archiwum i napisać określone wiersze w kodzie html. Dzięki temu uzyskasz dostęp do css, komponentów, javascriptu. Możesz również podłączyć bootstrap bez pobierania go, korzystając z technologii CDN, po prostu pisząc określone wiersze w kodzie. Ta technologia wybiera najbliższy fizycznie znajdujący się serwer dla odwiedzającego i ładuje z niego pliki stylów lub skrypty java. Przyspiesza to ładowanie strony docelowej. W takim przypadku ten kod jest zminimalizowany.

Po dołączeniu programu bootstrap będziesz mieć dostęp do zestawu stylów CSS. Ma strukturę plastra miodu Grid System składającą się z 12 kolumn. Musisz zrozumieć, jak tworzone są te kolumny. Załóżmy, że chcesz, aby Twoja witryna miała 2 kolumny. Jeden z nich zajmuje 2/3 strony, a drugi 1/3. W dużej kolumnie chcesz na przykład wstawić obraz, a w mniejszej do wypełnienia. Aby to zrobić, musisz napisać linię, napisać kolumnę ze stylem 8 w niej i kolumnę z 4, wskazaną na stronie bootstrap. Po zapisaniu potrzebnych stylów, gdy odwiedzasz witrynę z urządzenia mobilnego, druga kolumna spada. Ostatecznie twój projekt staje się responsywny. Jeśli chcesz mieć strukturę z trzema równymi kolumnami, musisz podzielić 12 przez 3 i już wpisać kod z cyfrą 4 w kodzie strony. Itp.

Aby nie pomylić się w pracy z konstrukcją plastra miodu, udostępniłem dla Ciebie pracę w konstruktorze www.layoutit.com. Bardziej szczegółowe prace z projektantem opublikuję w następnym artykule.

Bootstrap zawiera również pliki dla typografii, z zestawem różnych stylów nagłówków, które możesz wybrać dla swojego landing page i wpisać w kodzie. Wewnątrz tej sekcji znajdują się również klasy Alignment, na przykład, jeśli chcesz, aby tekst był wyśrodkowany, po prostu skopiuj konkretny kod i wklej go do kodu lądowania. Dostępne są również pliki list i wiele innych. Możesz tworzyć tabele o różnych stylach w sekcji Tabele, Formularze formularzy (możesz tworzyć formularze w kolumnie, w jednym wierszu, formularz z dodatkowymi znakami, formularz w pełnej linii itp.). W sekcji Przyciski możesz wybrać style przycisków na swoim landingu. Możesz ustawić kolor przycisków, rozmiary, przyciski aktywne lub nieaktywne. W sekcji Obrazy możesz ustawić style obrazu. Na przykład, aby obraz był okrągły, musisz wstawić określony kod. W sekcji Klasy pomocnicze możesz zmienić kolor tekstu, tło tekstu i tak dalej.

Uzyskujemy również dostęp do różnych komponentów, takich jak ikony glifów. Aby dodać dowolną ikonę do witryny, musisz określić konkretną klasę span (klasę span). Pod obrazem każdej ikony jest napisane, jaką klasę należy wpisać w kodzie, aby uzyskać pożądany obraz na Twoim landingu. Możesz także uzyskać dostęp do list rozwijanych, grup przycisków, nawigacji Navs i nie tylko. Możesz wyświetlić wszystkie te funkcje według sekcji na liście po prawej stronie strony ładowania początkowego.

Dostęp do JavaScript pozwala nam na tworzenie modów, do których można wstawiać formularze. Okna te posiadają również strukturę plastra miodu, co pozwala na dopasowanie ich do dowolnego urządzenia mobilnego. Możesz także dodać różne przyciski, listy rozwijane i inne funkcje, które działają na skryptach Java.

To było małe wprowadzenie do bootstrapu i jego struktury. W następnym artykule będziemy już tworzyć konstrukcję lądowania w specjalnym konstruktorze, konstrukcję adaptacyjną naszego przyszłego lądowania.