» Bezpłatne lądowanie szablon strony WordPress - TOP 30
Darmowe szablony WordPress na landing page - TOP 30
W szczególności w tym artykule omówimy najlepsze lądowanie Motywy WordPress, które mogą być dla Ciebie odpowiednie. Wszystkie będą zawierać zrzut ekranu i demo projektu, dzięki czemu możesz ocenić motyw i natychmiast go pobrać, jeśli Ci się spodoba.
Bardzo często szablony do lądowania dla WordPressa są rozprowadzane za opłatą, ale dla Ciebie zebrałem najlepszy i darmowy w tym artykule, aby ułatwić wyszukiwanie.
Możesz być również zainteresowany
Dla tych, którzy szukają hostingu
1.
to jednostronicowy motyw, który pomoże Ci bez wysiłku stworzyć stronę internetową. Z drugiej strony ma profesjonalnie narysowany projekt, przewijanie paralaksy, co pozwala nazwać ten motyw „pięknym”. Ten szablon jest odpowiedni dla startupów i małych firm.
2.
to wielofunkcyjny motyw WordPress. Zawiera kolorowy interfejs, klasyczny efekt paralaksy i inne animacje, dzięki którym przeglądanie motywu jest jeszcze przyjemniejsze. Zerif Lite to motyw dla wielu przeglądarek, który jest równie dobrze napisany pod względem kodu.
3. Alhena Lite
Alhena Lite to darmowy motyw WordPress, który jest w pełni zintegrowany z wtyczką WooCommerce, dzięki czemu możesz łatwo skonfigurować swój sklep internetowy.
4.
to czysty, prosty motyw biznesowy, który jest w pełni responsywny i zawiera wiele popularnych funkcji ułatwiających tworzenie witryny internetowej.
5 palm
Palmas to nowoczesny motyw w jasnych kolorach, odpowiedni do blogowania osobistego lub modowego. Ten szablon obsługuje również wtyczki, takie jak SEO, GravityForms, Pirate Forms, W3 Total Cache i wiele innych.
6. Brasserie
Brasserie to prosty motyw WordPress, który doskonale nadaje się do restauracji, kawiarni lub witryny z jedzeniem. Zawiera efekty animacji, jak również duża liczba funkcjonalność.
7.XT Wersja korporacyjna
XT Corporate lite to prosty i minimalistyczny motyw odpowiedni dla małego produktu lub usługi.
8.
- To ładny motyw, wykonany w jasnych kolorach. Zawiera różne animacje i wizualnie fajne przejścia i efekt paralaksy. Ponadto Freesia Empire obsługuje wtyczki takie jak Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress i WooCommerce.
9.
- To motyw odpowiedni do prezentacji małych i średnich firm. Zawiera ogromną liczbę funkcji i dodatków do pełna kontrola struktura lądowania.
10.
- To wszechstronny motyw, z dużą funkcjonalnością. Jest responsywny, wszystkie elementy są animowane z efektem paralaksy. Jedna strona jest łatwa do dostosowania i pozwala zobaczyć zmiany w czasie rzeczywistym. Obecny motyw lądowania obsługuje również dużą liczbę podstawowych wtyczek WordPress.
11.Fotografia
FotoGraphy to landing page odpowiedni dla fotografów lub projektantów. Prostota i obecność dużej liczby funkcji sprawiają, że jest jeszcze bardziej skalowalny i konfigurowalny.
12. Motyw integralny
Integral Theme to jednostronicowy motyw paralaksy odpowiedni dla twórców, właścicieli firm lub agentów. Konfiguracja zajmie Ci tylko kilka minut.
13. Kwadrat
Kwadrat to minimalistyczny motyw, który można wykorzystać na dowolnej stronie internetowej. Najlepiej nadaje się dla małych i średnich firm. Square jest skonfigurowany dla wielu popularnych wtyczek WordPress i jest zoptymalizowany pod kątem SEO.
14. Ożywić
Enliven to motyw wykonania wysokiej jakości. Nazwałbym go premium, ponieważ łączy w sobie jakość i piękno w jednej butelce. Obsługuje również wiele popularnych wtyczek i jest wysoce konfigurowalny.
15. Latte
Latte to szablon dla fotografów. Ma wszystko po to, abyś mógł odpowiednio pokazać swoje portfolio, a także opowiedzieć o sobie. Konfiguracja zajmuje kilka kliknięć.
16. Poniedziałek
Poniedziałek to elegancki motyw odpowiedni dla biznesu lub freelancera. Zawiera dużą liczbę funkcji i dodatków i dodatków.
17 Świat biznesu
Business World to szablon związany z tematami biznesowymi. Łączy w sobie styl i jakość. Świat biznesu można również dostosować do własnej, firmowej lub fotograficznej strony internetowej. Jego możliwości pozwalają zrobić z niego prawie wszystko, co chcesz.
18.
- To fajny motyw, który jest wykonany w jasnych kolorach. Jest idealny dla małych i średnich firm, a także na stronę osobistą. Można go dostosować do wszystkiego, co chcesz. Wiele funkcji i dodatków, które czynią ten szablon jeszcze lepszym i bardziej atrakcyjnym.
19.Jednotonowy
Onetone to jednostronicowy szablon dla WordPress, który nadaje się do prezentowania „ja” w Internecie (pokaż swoje portfolio i/lub opowiedz o sobie).
20. Powstań
Arise to minimalistyczny jednostronicowy motyw WordPress, który jest odpowiedni dla małego produktu lub małej firmy. Nie ma w tym nic zbędnego, tylko najważniejsze.
21. Woot
Woot to minimalistyczny motyw zaprojektowany w ciemnych kolorach, który prowadzi sklep internetowy. Współpracuje z WooCommerce i wieloma innymi popularnymi wtyczkami.
22. Zachód
West to prosty motyw odpowiedni dla agencji, małej firmy lub witryny z portfolio. Zawiera dużą liczbę funkcji, ustawień i układów elementów.
23. Anaglif Lite
Anaglyph Lite to prosty i elegancki szablon odpowiedni do blogowania i sklepu internetowego. Ma już skonfigurowane WooCommerce i inne popularne wtyczki.
24.
Jednostronicowa strona internetowa jest wygodna dla biznesmenów, ponieważ można to zrobić dosłownie w jeden dzień. Jeśli pobierz jednostronicowy szablon witryny gotowe, możesz zrobić stronę internetową dla swojej firmy za minimalną kwotę, ponieważ musisz tylko zapłacić za hosting. Dla klienta jedna strona jest wygodna, ponieważ wszystkie informacje na niej zawarte są przedstawione w sposób możliwie zwięzły i ustrukturyzowany, nie ma nic zbędnego. Ze względu na wygodę klientów, one-pagery często wykazują wyższe konwersje niż inne typy witryn.
Jak wybrać szablon jednostronicowy?
- Wygląd zewnętrzny. Pożądane jest wykonanie projektu w ogólnym stylu firmy. Interfejs nie powinien mieć zbyt niekompatybilnych kolorów. Jednak same pastelowe kolory od dawna przeszkadzają użytkownikom, więc jasność i kreatywność są mile widziane.
- "Waga". Animowany projekt, migoczące banery, „ciężkie” elementy, suwaki mogą sprawić, że strona będzie tak przeciążona, że jej otwarcie zajmie więcej czasu niż u konkurencji.
- Ilość bloków i możliwość ich konfiguracji. Przed wyborem szablonu zdecyduj dokładnie, które bloki są potrzebne minimum, aby nie przeciążać strony. Wypróbuj szablon, dowiedz się, czy bloki można usunąć i zamienić.
- Kompatybilność z różnymi przeglądarkami i obecność projektowania adaptacyjnego znacznie rozszerzy grono potencjalnych klientów. Więc pamiętaj, aby wybrać responsywne szablony jednej strony.
Oferujemy darmowe szablony jednej strony
Jeśli zdecydujesz się zrobić dla swojej firmy Wstęp, pobierz szablon może być na naszej stronie internetowej. Uważnie sprawdzamy wszystkie szablony pod kątem wirusów, więc nie możesz bać się pobrania zainfekowanego pliku. Wszystko szablony stron docelowych w naszym katalogu mają nowoczesny design, wykonane w większości różne style. Możliwość dostosowania liczby bloków, zmiana schematu kolorów i inne funkcje pomogą Ci stworzyć niepowtarzalną oryginalną witrynę opartą na prostym szablonie.
Zapraszamy do pobrania jednostronicowych szablonów stron internetowych
Główny problem tych, którzy zdecydowali się pobrać darmowy szablon strony docelowej, to ogromna liczba wirusów i błędów w darmowe szablony. Dlatego bardzo ważne jest, aby znaleźć bezpieczną i niezawodną stronę internetową. Zapraszamy do odwiedzenia nas, ponieważ uważnie monitorujemy bezpieczeństwo. Dodatkowo zachwycimy Cię najszerszą ofertą Jednostronicowe szablony HTML, pobierz które możesz teraz!
Przeczytaj więcej tekstu...Do tego potrzebne są gotowe szablony landing page szybki start nowy produkt, promując go za pomocą strony LP lub aplikacji mobilnej lub motywując użytkowników do rejestracji/zapisania się do newslettera. W przypadku „strony docelowej” niezwykle ważna jest użyteczność i łatwość obsługi z inteligentnym układem. Nowoczesne szablony landing page'a są opracowywane z myślą o możliwości stworzenia adaptacyjnej strony internetowej o wysokiej konwersji.
Demo |
Crossway – szablon startowej strony docelowej
Ultranowoczesny motyw HTML5 zasilany przez Bootstrap 3.1.1. Zawiera 4 układy: jednostronicowy/wielostronnicowy, opcje paska nawigacyjnego. efekt świetlny Przewijanie paralaksy jest zintegrowane z motywem lądowania, dostosowane do urządzeń mobilnych i pozyskiwania ruchu organicznego (SEO).
Demo |
DotKwadrat
Szablon strony docelowej HTML dla sieci i aplikacje mobilne, ma na celu łatwe generowanie leadów. Ma szybkie ładowanie i poprawny kod html, css. W górnej części one-stronicowego formularza kontaktowego z .
Demo |
Primo Responsywny szablon Landing Page
Jednostronicowy szablon strony docelowej HTML5 z efektami CSS3. Ma trzykolumnową ramkę, zbudowaną na Bootstrap 3. Nadaje się do sprzedaży aplikacji na iOS/Android. Szablon zawiera 2 układy (z Parallax i bez), formularze kontaktowe Ajax, lightbox PrettyPhoto i 5 schematów kolorystycznych. Łatwa konfiguracja: zmień kody szesnastkowe i powiązane przedmioty przemalowany na nowy kolor. PSD w zestawie.
Demo |
Strona docelowa aplikacji Hype
Nowoczesny szablon aplikacji mobilnej z obsługą Retina, oferujący 8 opcji kolorystycznych, opcje dla obrazów / .
Demo |
Gotte uniwersalna strona docelowa
Uniwersalny szablon strony docelowej w płaskim stylu zawiera 3 opcje indeksowania, 6 schematy kolorów. Szablon stworzony na Twitterze bootstrap3, w zestawie Skrypt PHP formularze kontaktowe i pliki do pobrania.
Demo |
Oszczerstwo – responsywna strona docelowa HTML5 Bootstrap
Slander jest idealny dla startupów i firm, odpowiedni dla profesjonalistów lub indywidualnych projektów. Responsywny projekt z Bootstrapem i HTML5/CSS3 zawiera adaptacyjny suwak, suwak zakładek, formularz subskrypcji wiadomości itp.
Appster – szablon strony docelowej aplikacji Ultimate Clean
Demo |
Chmura — łatwa w użyciu strona docelowa aplikacji
Elegancki, przejrzysty i minimalistyczny szablon strony docelowej HTML5 / CSS3 z dużą funkcjonalnością. Szablon jest przeznaczony dla strony Wkrótce (wkrótce), idealny do tworzenia strony aplikacji i witryny z prezentacją.
Demo |
OnEvent – Specjalna strona docelowa wydarzenia
Responsywny szablon lądowania dla specjalnego wydarzenia. Posiada sekcje pod, film reklamowy, harmonogram wydarzeń, listę gości.
Demo |
Appreative Responsywny szablon Landing Page
Appreative to adaptacyjny szablon przeznaczony do krótkich informacji. Nadaje się do różne rodzaje zadania.
Witajcie drodzy czytelnicy bloga stronie internetowej! W tym artykule skompilowałem 10 -oraz HTML szablony Lądowanie Strona(jedna strona u zwykłych ludzi), które moim zdaniem są bardziej udane i mają wysoką konwersję. Dawno, dawno temu, kiedy zacząłem lądować ( 4 lata temu) artysta jest taki jak ja i dlatego szukałem szablonów. Oczywiście pojawiły się tylko towary konsumpcyjne, projektanci, płatne szablony. Teraz oczywiście ten biznes jest łatwiejszy, istnieje wiele sensownych szablonów na różne tematy, ale nadal trzeba szukać.
Zwracam twoją uwagę 10 HTML jednostronicowe szablony. Nie wiem, z jakiego powodu przeglądarka G Chrom uważa, że pliki z wirusami lub zawierają niechciane oprogramowanie (nie miałem takich plików i ich nie mam), w bazie Google nie ma oznaczenia, że strona jest objęta sankcjami, pliki są sprawdzane przez rzetelną i powszechną usługa wirustotal.com/pl/. Muszę się z tym jeszcze uporać. Jeśli cię nie przekonałem, sam sprawdź pliki. Dołączę zrzut ekranu pierwszego pliku, resztę sprawdź sam.
Edytuję ten artykuł w dniu 29.07.2016. Nie usunąłem powyższego, chociaż teraz G Chrom nie uważa mojej witryny i plików za zagrożenie bezpieczeństwa. O tym, jak to zrobiłem i z jakiej usługi korzystałem, napiszę w jednym z poniższych artykułów.
2. Kolejna strona docelowa „Nadzór wideo”. Piękny design, animacja wyskakujących formularzy, doskonała galeria z wyskakującym opisem, recenzje; 
3. Szablon „Montaż drzwi”. Prosty i tematyczny projekt, kształt informacja zwrotna, Opinie; 
4. Szablon „Fracht międzynarodowy”. Ładny design, formularze zwrotne, odliczanie suwaka, opis czynności w wyskakujących okienkach; 
5. Szablon „Przewóz ładunków”. Doskonały projekt tematyczny, formularze opinii i zamówień, animacje; 
6. Szablon „Kuchnie na zamówienie”. Projekt motywu, formularze zwrotne, odliczanie suwaka, opisy w wyskakujących okienkach; 
7. Kolejny szablon Custom Kitchen. W designie minimalizm, formy zwrotne, galeria; 
8. Szablon „Naprawa i dekoracja mieszkań i biur”. Ładny i łatwy projekt, formularze zwrotne, recenzje; 
9. Szablon „Rzęsy”. dobry projekt, formularze zwrotne, cena, galeria; 
10. Szablon „Przywrócenie salonu samochodowego”. Ładny design, nawigacja w formie slidera, galerie, formularze zwrotne; 
Mam nadzieję, że znalazłeś coś dla siebie i wykorzystałeś szablony.
Jeśli masz jakieś pytania lub potrzebujesz pomocy to napisz w komentarzach do artykułu, odpowiem wszystkim, pomogę każdemu.
Pozdrowienia, moi drodzy czytelnicy. Dzisiaj porozmawiamy punkty techniczne, dzięki którym możemy zwiększyć konwersja sprzedaży swoje towary lub usługi. Jeden z ważne punkty to dobrze zaprojektowana strona docelowa z produktami. Tzw. landing page, o stworzeniu którego porozmawiamy dalej i zdobędziemy gotowe kody stron.
Co to jest strona docelowa? Jest to strona, na którą zwykle trafiają użytkownicy po kliknięciu reklamy. Tworzony jest dla jednej oferty: produktu, usługi lub abonamentu. Skuteczna strona docelowa to podstawa udanego marketingu internetowego. Produkt może i najlepszy na rynku, reklamy są doprowadzone do perfekcji, ale bez dobrego landing page'a wysiłki nie dają 100% rezultatu. Mówi odwiedzającym, co jest w ofercie i dlaczego powinni tego chcieć. Poczucie pilności przyczynia się do szybkiego podejmowania decyzji i przejścia użytkownika do kategorii klienta.
Jak stworzyć Lądowanie? Błędem jest sądzić, że odpowiedź leży w umiejętności składania. Dobry landing page to wynik dobrze skoordynowanej pracy nad celami, tekstem, projektem i kodem. Strona docelowa, której przykłady poniżej, pomoże początkującym nauczyć się podstaw pracy z layoutem, ale nie zastąpi tekstów konwersji i zrozumienia grupy docelowej. Możesz je również tworzyć za pomocą różnych projektanci stron docelowych.
Zanim więc stworzysz landing page, zadaj sobie pytanie:
- Co zrobi dana osoba po wejściu na stronę docelową? Kupi coś? Wypełnić formularz? Zapisz się do Newslettera? Przed śledzeniem współczynnika konwersji wyznacz jasne cele.
- Kim są moi konkurenci? W rzeczywistości są to trzy pytania: kto, jak odnoszą sukcesy i jak można zastosować ich osiągnięcia? Naśladownictwo jest najszczerszą formą pochlebstwa. Jeśli konkurenci robią to, co działa, powtórz to w swojej witrynie.
- Kim są moi odbiorcy? Im lepiej zrozumiesz swoją niszę i grupę docelową, tym większe prawdopodobieństwo, że Twoje wysiłki się opłaci.
Musisz podać wszystkie niezbędne informacje, ale nie na tyle, by przytłoczyć i odstraszyć potencjalnego klienta.
Przykłady tworzenia landing page + kodowanie dla głupków
Zanim przejdziemy do rzeczy, rzućmy okiem na HTML i CSS. Zrozumienie, jak działają, pomoże stworzyć lądowanie.
HTML- język znaczników przeglądarki do wizualizacji witryn. Jest pisany za pomocą znaczników umieszczonych w nawiasach ostrych, które definiują treść.
Tag otwiera się (<>) i zamyka () wokół farszu:
<тег>zawartość
W przypadku dostosowywania punktów po nazwie dodawane są atrybuty:
<тег атрибут="значение">zawartość
CSS - określa sposób pozycjonowania elementy HTML. Składa się z selektorów, właściwości i wartości:
#selector (właściwość: wartość;)
Selektor pasuje do nazwy konkretnego tagu w html. Zmieniając wartości i dodając właściwości, jest to regulowane wygląd zewnętrzny. Możesz tworzyć różne strony, stosując różne style CSS do tego samego kodu HTML.
5 początkowych kroków
Do szybkiego układu użyjemy szablonu z minimalnym projektem opartym na bootstrapie. Jest to system z własnymi selektorami, używany na całym świecie w celu przyspieszenia układu.
Wygląda skromnie.
Z tej ryby w kilku etapach powstaje strona na każdy gust.
Struktura katalogów w folderze:
- index.html: To plik główny który będzie edytowany.
- /assets: oto pliki pomocnicze:
- /css: katalog zawiera style bootstrap i ikony. Plik do edycji to main.css.
- /img: folder na obrazy stron internetowych.
- /fonts: czcionki ikon.
- /js: uruchamianie plików JavaScript.
Krok 1: Korzystanie z nagłówka
Nagłówek i podtytuły to kluczowe miejsca, które w jasny sposób pomagają przekazać wartość oferty.
Zmień tytuł i nazwę witryny. Tutaj umiejętność składu nie jest wymagana - Twój tekst jest pisany w miejscach podświetlonych na żółto na ekranie.
Krok 2. Zwięzłość jest siostrą nawrócenia. Dodawanie korzyści i stawek
Potrzebne będą 4 sekcje:
- Korzyści;
- taryfy;
- Opinie;
- wezwanie do działania.
Zaprojektujmy „główną” sekcję głównej treści, do której wstawimy niezbędne sekcje:
…..
…..
…..
…..
Wypełnij farszem zamiast kropek.
Sekcja korzyści będzie wymagać tego kodu:
Zalety
Szybko
Niezawodnie
Sed diam nonummy
Opłacalny
Elit, sed diam nonummy
technicznie
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Niezawodnie
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Opłacalny
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
technicznie
Lorem ipsum dolor sit amet, consectetuer adipiscing
Niezawodnie
Lorem ipsum dolor sit amet, consectetuer adipiscing
Opłacalny
Lorem ipsum dolor sit amet, consectetuer adipiscing
Treść wizualna:
Na razie wygląda to niechlujnie, ale nie ma powodu do paniki, kontynuujemy.
Zapisz stawki. Treść zmienia się podobnie jak w pierwszym kroku. Ogólny opis z klasą „taryfy” i trzema taryfami.
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 exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Plany taryfowe
Taryfa nr 1
$10
miesięcznie/na osobę
- Lorem ipsum dolor sit amet, konsektetu adipisującej elity
- Lorem ipsum dolor
- 10 Lorem suma ip
Taryfa №2
$20
miesięcznie/na osobę
- Lorem ipsum dolor sit amet, konsektetu adipisującej elity
- Lorem ipsum dolor
- 10 Lorem suma ip
Taryfa nr 3
$30
miesięcznie/na osobę
- Lorem ipsum dolor sit amet, konsektetu adipisującej elity
- Lorem ipsum dolor
- 10 Lorem suma ip
Na to wygląda.
Choć nie interesuje nas wygląd przyszłego landing page'a – poniżej rozważymy przykłady zmiany stylów.
Krok 3: Zaufaj sygnałom i wezwaniu do działania
Wykorzystanie sygnałów targetowych wskazuje odwiedzającym, że marka jest godna zaufania. Sygnały mogą być odbierane Różne rodzaje, ale klasyka to 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:
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.”
Ustaw wezwanie do działania.
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 exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Korzyść przy zamówieniu już dziś
Recenzje pomagają potencjalnym klientom zdecydować się na zakup produktu. Dla jasności potrzebujemy awatarów, więc natychmiast napiszemy je na miejscu - pod każdym cytatem.
Nazwa klienta.
Krok 4: Integracja z siecią i przyjazność dla urządzeń mobilnych
Aby zaimplementować grid, potrzebujemy kontenerów Bootstrap. Należy pamiętać, że całkowita liczba dozwolonych segmentów kolumn wynosi 12. Klasa definiuje szerokość wyświetlania treści. Zaletą tej gotowej siatki jest to, że pojemniki są zaprojektowane z myślą o adaptacji i są natychmiast stosowane do urządzenia mobilne. Szczegółowy opis na oficjalnej stronie . Sieć wygląda tak.
Zawartość „main” zostanie zapakowana w pojemnik. Aby to zrobić, w jego górnej części jest napisane:
Jeśli chcesz, aby blok zmieścił się na całej szerokości ekranu, do środka wstawiany jest pojemnik. Tutaj będzie to jumbotron i wezwanie do działania.
Wszystkie elementy, które muszą być ułożone jeden na drugim, zostaną owinięte separatorami linii.
Możemy teraz dostosować szerokość kolumn, skupiając się na siatce bootstrap. Po oklejeniu nadzienie przestało przyklejać się do krawędzi ekranu, pojawiły się zgrabne wcięcia.
Ustaw ceny w wierszu za pomocą klasy kolumn col-lg-4. Wewnątrz wierszy wierszy nie trzeba już pisać osobnych elementów div do zawijania, można je połączyć z istniejącymi oddzielonymi spacją.
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, o ile kolumn podstawy zostanie przesuniętych.
Krok 5. Czcionki i ikony
Wdrażamy czcionki do nagłówków Google Font. Po wybraniu otwórz kartę 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 wymowną nazwą text-center 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 blatu: 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 jest określony 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 (
padding-top: 30px;
margines-dolny: 25px;
}
Uporządkowaliśmy wygląd taryf. Dla wygody tworzymy własne klasy dla elementów, które chcemy punktowo dobierać.
Taryfa nr 1
$ 10
miesięcznie/na osobę
- Lorem ipsum dolor sit amet, konsektetu adipisującej elity
- Lorem ipsum dolor
- 10 Lorem suma ip
I dużo CSS. Za jakie miejsca odpowiadają sekcje jest napisane w komentarzach - /* między ukośnikami z gwiazdką */
/* =========Style taryfy======== */
/* ogólny widok 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 .cena (
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 */
.wyrok(
grubość czcionki: pogrubiona;
marża: 0 0 1em 0;
wypełnienie: 0 0 0.5em;
kolor: #2a6496;
}
/* lista */
.pricing_item ul (
rozmiar czcionki: 0.95em
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;
margines górny: 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;
}
.recenzja .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órny: 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, zastąpimy część klas sekcji 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). Gotowe otwarte źródło, można go używać na dowolnej stronie internetowej. Umieszczamy plik z github w folderze css i zapisujemy ścieżkę.
Wybierz efekty tutaj: https://daneden.github.io/animate.css/. Wybraliśmy fadeInDown. Napisany 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 do 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:
Strona docelowa zamienia odwiedzających w klientów
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.
-
-
Lorem ipsum dolor sit amet, konsektujący elita, sed diam nonummy.
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ę tu również tekst jumbotronu, który wymagał zmian.
Zmieniamy stawki.
/* ogólny widok 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
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 exercitation 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 dolorenis de azrilgue
-
Lorem ipsum dolor sit amet, konsektujący elita, sed diam nonummy.
-
Lorem ipsum dolor sit amet, konsektujący elita, sed diam nonummy.
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 przyciągnąć 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.
