Krásné šablony vstupní stránky. Šablony vstupní stránky

Ahoj. Jednostránkové weby jsou stále oblíbené, a to z dobrého důvodu. Oproti plnohodnotným vícestránkovým webům mají řadu výhod. Na jednostránkovém webu (také známém jako vstupní stránka) se člověk soustředí na jeden nápad, jeden produkt, což mu umožňuje bez rušení prostudovat vaši nabídku a je ochotnější zanechat požadavek.

"Dobře," řeknete, "rozhodl jsem se udělat si vstupní stránku, ale nerozumím ničemu o programování." A to není problém. Nyní existuje mnoho nástrojů pro vytvoření profesionálního webu bez vrtání v kódu. Jedním z nich je populární CMS WordPress s konstruktorem WPBackery nebo ELementor.

V tomto článku jsem poskytl skvělé šablony vstupních stránek WordPress, které jsou vhodné pro podnikání, prodej zboží, agentury, nezávislé pracovníky a jakékoli jiné téma. Koneckonců, takové šablony mohou a měly by být přizpůsobeny tak, aby vyhovovaly vám a vaší nabídce.

Mnoho šablon používá módní zvonky a píšťalky, jako jsou efekty paralaxy, plochý design, fotografie a videa na celé obrazovce. Adaptace pro mobilní zařízení je součástí každé šablony.

Dost bylo diskuzí, pojďme se podívat na výběr!

P.s. Pokud chcete vědět podrobněji, co je to Landing page, pak kde jsem tuto otázku podrobně probral a uvedl 27 příkladů vstupních stránek.

Všechny šablony jsou prezentovány z oblíbeného internetového obchodu ThemeForest. Můžete si prohlédnout další kolekce.

Výběr 40 prémiových šablon pro vytvoření vstupní stránky na CMS WordPress1. Most

Pro mě je to top šablona, ​​protože má 376+ ukázek na různá témata. S touto šablonou můžete zprostředkovat úplně jiné emoce. Výkonný a intuitivní.

Toto neuvěřitelné téma má přizpůsobitelný posuvník, plně přizpůsobitelné záhlaví, mega menu, video pozadí, pevné nebo lepivé záhlaví, různá loga záhlaví, interaktivní prvky, 7 různých rozložení portfolia a mnoho dalšího, což umožňuje nekonečné možnosti.

Udělejte jedinečnou prezentaci svého produktu nebo nabídky. V textu jsou vizuální pokyny a také videonávody.

2. The7

Pokročilý a unikátní systém šablon, který umožňuje nejen vytvořit vstupní stránku, ale i bez další nastavení integrovat jej do hlavní webové stránky projektu. V šabloně můžete najít mnoho hotových stylů pro bloky, které jsou žádané na vstupních stránkách – týmová prezentace, galerie, portfolio. K dispozici jsou také krásné efekty přednačtení stránky.

Mimochodem, The7 je nyní na mém blogu.

3.BeTheme

Betheme je největší šablonou z hlediska funkčnosti a počtu přednastavených možností rozložení. Dnes existuje více než 400 ukázkových vstupních stránek založených na tomto tématu, můžete si vybrat kteroukoli a přizpůsobit ji svým potřebám. Hotové vstupní stránky na Betheme aktivně využívají:

• rolovací efekty – od paralaxy až po animované transformace designových prvků
• videa na pozadí na celou obrazovku
• "sociální" tlačítka
• animované počítadla
• online přihlášky
• sekce portfolia
• sekce "Naši zaměstnanci"

Ještě pár ukázek:

Aktualizace motivu se provádějí automaticky, aktualizace pluginů se provádějí stisknutím tlačítka. Ukázkové stránky používají Revolution Slider. Šablona nabízí 5 možností rozložení stránky, 20 vlastních záhlaví, neomezený počet stylů pro Google mapy a mnoho stylových ikon.

Nástroj Muffin Builder vám pomůže vytvořit jakýkoli design bez jakýchkoli znalostí vývoje webu. V případě potřeby můžete přidat pravidla css a skripty js, aniž byste ovlivnili hlavní kód šablony.

Ronneby se vyznačuje vysokým výkonem a rozšířeným panelem možností. Do šablony byly přidány nejlepší prémiové pluginy pro vytváření vstupních stránek WordPress. Tvůrci šablon věnují zvláštní pozornost uživatelské podpoře – jakákoliv otázka je zodpovězena rychlou odpovědí popisující, jak problém vyřešit. Téma je již lokalizováno do dvou jazyků, ale jsou k němu připojeny také překladové soubory, které vám umožňují organizovat vícejazyčnou podporu pro weby.

Další ukázkový příklad:

5. Jupiter

Flexibilní a zároveň snadno přizpůsobitelná šablona. Obsahuje 72 takzvaných skinů na všechna možná témata. Pohodlný admin. panelu, i začátečník snadno pochopí tvůrce stránek a nastavení.

K dispozici jsou praktické návody s 240 stránkami a 20 videonávody, jak udělat svůj web úžasným!)

Šablona Jupiter je také přizpůsobena pro SEO. Testy Google PageSpeed ​​​​ukazují dobré výsledky, což znamená, že vyhledávače budou váš web milovat.

Šablona je čistá, úhledná a používá vysoce kvalitní typografii. Díky použití vizuálních efektů, jako je paralaxa, se téma ukazuje jako živé a je velmi příjemné se na takové stránky dívat.

6.WoodMart

Jedna z největších kolekcí WordPress. Šablony píší profesionální weboví programátoři a návrhy kreslí kvalifikovaní specialisté na vizuální a UX řešení. Díky tomu můžete bezpečně nainstalovat jakoukoli šablonu, každá je připravena k použití na vašem počítači, mobilní telefon, tablet. Zahrnuty prémiové pluginy:

WPBackery

Posuvná revoluce

Vynikající adaptace s WooCommerce (internetový obchod)

7. Brooklyn

Brooklyn má 16 demo skinů na různá témata. Moderní styl stránek, kombinace obrázků a písem dodává eleganci každému webu, kde je toto téma nainstalováno. Blok portfolia je krásně navržen. Šablona je ideální pro agentury a obchodní společnosti. Šablony jsou vyráběny v tmavých barvách, což dodává sebevědomí a vzbuzuje důvěru. Šablona je responzivní a vypadá skvěle na všech zařízeních.

Hladká a snadná šablona, ​​která nenechá nikoho lhostejným. Díky vysoce kvalitní typografii a prvkům rozhraní vypadá tato šablona nádherně. Nominovaný a vítěz různých známých soutěží a hodnocení, jako je awwwards. Má více než 30+ vzhledů různých témat, ze kterých si můžete vybrat

Nejen web, ale i obrázky jsou přizpůsobeny pro mobilní zařízení, aby pro návštěvníky vypadaly pohodlněji.

9. H-kód

Šablona je nová, ale již se osvědčila. Má 8 témat (vícestránkové, vstupní, firemní, portfolio, blog, e-commerce, útržky) s 3-12 skiny v každém. Kromě své krásy a úhlednosti má tato šablona jednoduše arzenál různých widgetů a prvků. Svou vstupní stránku můžete udělat krásnou a funkční. Potřebujete posuvník? Prosím. Zobrazit portfolio, recenze, výhody? A to je.

10. Nativní

Native je mocný nástroj pro propagaci startupu. Šablony vstupní stránky WordPress založené na tématu využívají různé paralaxové efekty k pohybu mezi sémantickými bloky webu. Rozšířená dokumentace a video tutoriály pomohou začínajícím uživatelům CMS rychle porozumět funkčnosti administračního panelu. Součástí jsou pluginy Visual Composer, Layer Slider a Slider Revolution bezplatná aplikace do šablony.

11. Výrazný

Salient je všestranné téma s responzivním designem, které často volí . Prvotřídní typografie a efekty paralaxy, které se objevují při posouvání stránky, pomáhají zlepšit dojem ze vstupní stránky. Optimalizace snímkové frekvence zajišťuje plynulé animované přechody mezi bloky obsahu. Šablona využívá adaptivní velikosti obrázků, což pomáhá rychle načítat stránky a šetřit provoz.

12. Drahokam

TheGem je moderní téma pro kreativní projekty, optimalizované pro SEO a doplněné o „responzivní“ rozvržení. Nízká hmotnost stránek, rychlost jejich načítání a promyšlené UX zaručují vysoký výkon šablony. Pokud potřebujete propagovat svou firmu pomocí vstupní stránky, vyplatí se tuto šablonu zakoupit, už jen kvůli jejímu SEO-friendly kódu, který zajistí vysoké pozice ve výsledcích Google. 11 dostupných demoverzí vstupních stránek zohledňuje potřeby různých projektů.

Designové prvky pro web na TheGem jsou přizpůsobeny pomocí pluginu Visual Composer. Zobrazení velkého množství obsahu v přistávacích blocích (portfolio, recenze, služby) je organizováno načítáním - automaticky nebo „tlačítkem“, a také pomocí posuvníku přepínání karet. Šablona poskytuje 6 možností animace pro načítání komponent sekce, které se zobrazují při posouvání obsahu vstupní stránky. Pozadí bloků obsahu mohou být videa z vimeo a youtube nebo odvozená z souborový systém stránky používající html5.

13. Marketing Pro

Marketing Pro je šablona navržená s ohledem na konverzi, marketing a SEO. Každá z 9 ukázkových stránek na ní je vytvořena s přihlédnutím k charakteristikám konkrétního marketingového výklenku. Jako bonus k adaptivnímu designu vstupní stránky jsou stylizované šablony pro organizační bloky událostí.

Oshine patří mezi nejprodávanější kreativní témata. Díky krásnému designu a výkonné funkčnosti lze tuto šablonu použít k vytvoření vstupních stránek pro kreativní projekty a podniky. Padesát modulů pro přizpůsobení vzhledu webu, z nichž každý byl pečlivě navržen, pomáhá dosáhnout ideálních výsledků. Možnost „zpět/znovu“ a možnost přiřadit „klávesové zkratky“ určitým akcím zjednodušují proces nastavení.

15. Jevelin

Jevelin je šablona s prémiovým responzivním designem, který usnadňuje vytváření vstupních stránek a jednostránkových webů na Wordpressu. Téma pomůže spustit projekt v krátké době. Díky řadě nástrojů pro přizpůsobení - 9 možností záhlaví v různých rozvrženích, 40 jedinečných prvků, z nichž každý může být individuálně stylizován, vestavěná funkce pro organizování repostů na sociálních sítích, 6 stylových řešení pro návrh sekce portfolia - přizpůsobení vzhledů je rychleji než kdy jindy.

16. Kalium

Kalium je téma, na které se obracejí zástupci různých profesních oborů, aby získali web na propagaci svých služeb. Zvláštní důraz je v designu webových stránek na Kalium kladen na typografii - za tu je zodpovědná specializovaná knihovna pro správu písem. Šablona může používat 4000 písem – Google, Typekit, Font Squirrel, prémiové a vlastní (nahrané uživatelem).

17. Příchozí

Inbound je šablona, ​​která může usnadnit vytváření jednostránkových webových stránek pro aplikace, e-knihy, video kurzy a podobné produkty. Přizpůsobení návrhu se provádí pomocí vizuálního generátoru vstupní stránky Landing Page Builder. Šablona také umožňuje přidělit minisekci ve formátu vstupní stránky každému propagovanému produktu v rámci jednoho webu a lze ji použít pro sekce kategorií produktů ve WooCommerce.

18. Neporušené

Intact je téma s více možnostmi, které vám pomůže vyřešit vaše problémy s online podnikáním. Zahrnuje takové důležité součásti moderní vstupní stránky, jako jsou: bloky “ Tarifní plány“ a „Zaměstnanci společnosti“, posuvník s recenzemi, sady tematických ikon, formuláře předplatného, ​​online konzultant.

19. Kometa

Comet je plně responzivní pixel-perfect šablona pro Visual Composer a . Uživatelům je nabízeno 5 vzhledů pro vstupní stránky, které implementují následující efekty: textový posuvník, paralaxa, video na pozadí – importované z youtube nebo zabudované do html5, animovaný posuvník zoomu. Noví uživatelé snadno pochopí nastavení motivu, když vytváření wordpressu vstupní stránky – pokyny a video lekce jsou dostupné online.

20. LeadEngine

Univerzální téma WordPress, které má vše, co potřebujete k vytvoření vstupní stránky:

• 200 bloků k „sestavení“ do šablony v libovolném pořadí;
• přizpůsobivost v jakékoli fázi;
• 35 plně navržených stránek - můžete jednoduše změnit text a fotografie;
• vysoká rychlost stahování – o 94 % rychlejší než průměr.

Vývojové návrhy lze před nákupem vyhodnotit. Barevná schémata a nastavení se mění ve vizuálním editoru. Autoři slibují podporu kdykoliv.

Vývojář nabízí šablonu webových stránek v různých tématech - od stavebnictví po veterinární služby. Jednoduché a efektivní přistání vám pomůže sdělit potenciálním klientům vaše výhody, pracovní podmínky a další potřebné podrobnosti. Design je citlivý a vypadá dobře na všech zařízeních, od monitorů Retina po mobilní zařízení. K dispozici jsou pluginy pro portfolio, otevírací dobu, kalendář a také vlastní ikony.

22. Inkubátor

„Ideální téma pro startup,“ říkají autoři o svém vývoji. Lehký, minimalistický design roku 2020 je vhodný pro internetové obchody, eventové agentury a mnoho dalších typů podniků na vizitky nebo další rozvoj do většího projektu. Zahrnuta:

• vizuální designér – detaily se mění online;
• mobilní adaptabilita;
• WooCommerce je nejlepší plugin pro internetový obchod;
• podpora pro jakýkoli jazyk.

23. Phlox Pro

Šablona s více šablonami s třiceti ukázkami, ve kterých můžete nahradit pouze požadovaný text. Nabízejí také více než 90 šablon pro posuvníky a efekty a více než 130 možností pro jednotlivé stránky. Zahrnuto je 9 hlavních pluginů, které budou užitečné pro propagaci webových stránek vizitek nebo většího zdroje. To vše je zlevněné, aktuálně dostupné za 30 dolarů. Jedna z nejoblíbenějších šablon pro vstupní stránky.

24. Porto

Další návrhář s více šablonami pro vstupní stránky a vizitky. Čistý kód s nekonečným množstvím možností pro výběr záhlaví a zápatí bez nutnosti učit se programování. Spousta designů, jejichž prvky jsou snadno vyměnitelné díky pluginu grid. Pomocí pokročilého vyhledávání se z jednostránkového webu snadno stane plnohodnotný obchod. Podpora je vždy připravena zodpovědět dotazy.

25. Ekko

Levná a oblíbená multišablona pro přistání, která se liší:

profesionální designové polotovary;

rychlá odezva díky optimalizaci;

způsob nastavení drag and drop pokles;

více než 200 bloků pro obsah.

Profesionální webové stránky na jakékoli téma, které si můžete jednoduše nainstalovat kliknutím a používat. Moderní designy, které nejsou „nudné“ a vypadají svěže a krásně.

26. Ave

„Nová generace více šablon“ je odvážné tvrzení, ale přesně to autoři o svém produktu říkají. Za pouhých 35 $ můžete získat:

• 200 vstupních stránek s krásným „evropským“ designem;
• WooCommerce a pokročilé objednávkové formuláře;
• instalace za minutu;
• nastavení pro portfolio, posuvníky.

Plugin vizuálního editoru Elementor byl skutečně aktualizován Nejnovější verze a velmi snadné použití.

27. Archa

„Nejlepší mezi 9500,“ poznamenávají vývojáři. Šablona se zaměřuje na lidi, kteří nikdy nedělali kódování. Přizpůsobení designu se provádí pomocí pluginu vizuálního návrháře Elementor, který vám umožňuje pracovat v režimu jedna ku jedné bez použití instalace třetích stran a ihned využít plně funkční funkčnost jedné z 300 šablon. Pohodlné a rychlé nastavení.

28.Amedeo

Krásný design v netradičním barevném provedení. Důraz není kladen pouze na elegantní design, protože je nabízen k zakoupení jako sada:

WooCommerce plugin pro internetový obchod;

plugin pro pokročilé kontaktní formuláře;

výběr rolovacích efektů v různých stylech;

výběr z animací.

Čistá a přehledná WordPress šablona pro vizitky a online nakupování. V režimu obchodu jsou nastavení vlastností produktu a jejich vyhledávání.

29. Bolge

Výběr roztomilých vstupních stránek v moderním, elegantním plochém stylu. Ruční kreslení prvků vám umožní vyniknout a zapamatovat si je potenciální klienti. V ceně jsou základní pluginy a widgety – od vizuálního editoru až po paralaxový efekt pro umístění pozadí nebo portfolia. Můžete si přizpůsobit různá zobrazení na ploše a mobilní verze, adaptabilita je standardně dána.

30. Makoto

Několik řešení pro designéry, fotografy, umělce. Užitečné přednastavení pro zveřejňování portfolia vám umožní chránit je před kopírováním a načítat je, když si je uživatel prohlíží, což šetří čas načítání. Snadné stahování videa. Existuje možnost blogování. Připraveny jsou prvky pro umístění infografiky. Vizuální designér vám pomůže snadno nakonfigurovat všechny detaily.

32. Terénní úpravy

Vývojáři vytvořili zajímavý „zelený“ design pro terénní úpravy, pomoc při zahradničení a eko-témata. Obrobek však může být použit pro jiné účely. Krásné ikony, čisté fonty Google, vynikající odezva a vzhled, včetně zařízení Retina, naznačují široké použití témat WordPress.

33. Crowdmerc

Vyrobeno pod Nejnovější verze WordPress. Šablona je neustále aktualizována. Funkčnost pro internetový obchod zajišťuje pohodlný plugin pro pokročilé vyhledávání a objednávání. K dispozici jsou také předvolby pro události, kalendářní data a nahrávání. Použil Elementor k vytvoření nových stránek. Podporuje jakékoli další pluginy.

34. Vyznání

Kreativní „hudební“ téma si návštěvníci zapamatují pro jeho jasný design a vlastníka webu bude zajímat:

• vývoj vstupní stránky a vnitřní stránky- neomezená příležitost pro rozvoj zdrojů;
• instalace jedním kliknutím;
• WYSIWYG nastavení;
• možnost přidávat hudbu, video, posuvné efekty.

36.Vzdělávání

Vzdělávání je vylepšená verze starého tématu eLearning s pokročilejším UX a je určena pro vzdělávací online zdroje: online kurzy a webové stránky vzdělávacích institucí. Šablona má atraktivní design a poskytuje komplexní funkcionalitu nezbytnou pro vzdělávací proces.

37. Jeden

Jedním z nich je kreativní téma pro vytváření vstupních stránek s důrazem na propagaci produktu. Frontend šablony je vytvořen na html5 a lze do něj integrovat bootstrap 3, MailChimp a kontaktní formulář 7. Vývojáři UX témat studovali mnoho podobných projektů, v důsledku čehož uživatelé získali hotové šablony WordPress vstupní stránky, které obsahují všechny nástroje důležité pro obchodní projekty.

38. Celkem

Total je šablona vhodná pro mnoho projektů. Při vytváření stránek využívá: metodu drag-and-drop, neomezená barevná schémata, přizpůsobení v reálném čase, snadno použitelné prémiové posuvníky. Mezi ukázkovými stránkami tématu jsou šablony vstupních stránek pro 11 různých projektů.

39. Stockholm

Stockholm je jednou z 30 nejprodávanějších šablon WordPress od svého vzniku. Při práci s motivem můžete nastavit barevné schéma pro celý web nebo jeho jednotlivé prvky, použít libovolné z 600 písem Google a kombinovat možnosti a bloky z různých demo webů. Uživatelé, kteří potřebují hotové řešení pro obchodní projekt, si mohou stáhnout šablony vstupních stránek a okamžitě je nainstalovat ze sekce pro tvorbu webových stránek.

Další možnost demo:

40. Masivní dynamika

Více než 70+ widgetů, se kterými budou vaše vstupní stránky jedinečné a moderní. Google fonty, infografika, přizpůsobení se SEO, čistý kód, tvorba pohodlných portfolií – to je jen část výhod této šablony. Přistání v doslovném slova smyslu lze sestavit doslova jako mozaiku pouhým přetažením. Na stránce popisu můžete vidět vizuální příklady.

Při prohlížení ukázkových webů je chcete použít všechny.

» Šablony WordPress vstupní stránky zdarma - TOP 30

Bezplatné šablony vstupní stránky WordPress – TOP 30

Konkrétně tento článek bude zvažovat nejlepší přistání WordPress šablony, který může být pro vás vhodný. Všechny budou obsahovat snímek obrazovky a demo verzi návrhu, abyste mohli téma ohodnotit a okamžitě stáhnout, pokud se vám líbí.

Velmi často jsou šablony vstupních stránek pro WordPress distribuovány za poplatek, ale pro vás jsem shromáždil nejlepší a zdarma v tomto článku, abyste si usnadnili hledání.

Také by vás mohlo zajímat Pro ty, kteří hledají hosting 1.

je jednostránkové téma, které vám pomůže vytvořit web bez velkého úsilí. Na druhou stranu má profesionálně nakreslený design, paralaxní rolování, což nám umožňuje nazvat toto téma „krásné“. Tato šablona je vhodná pro začínající podnikatele a malé firmy.

2.

je multifunkční téma WordPress. Obsahuje živé rozhraní, klasický paralaxový efekt a další animace, díky nimž je prohlížení tématu ještě příjemnější. Zerif Lite je téma pro různé prohlížeče, které je také dobře napsané z hlediska kódu.

3. Alhena Lite

Alhena Lite je bezplatné firemní téma WordPress, které je plně integrováno s pluginem WooCommerce a umožňuje vám snadno nastavit váš online obchod.

4.

je čisté, jednoduché obchodní téma, které je plně responzivní a obsahuje mnoho oblíbených funkcí, které usnadňují tvorbu webových stránek.

5. Palmas

Palmas je moderní motiv vyrobený ve světlých barvách, který je vhodný pro provozování osobního nebo módního blogu. Tato šablona také podporuje pluginy jako Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache a mnoho dalších.

6. Brasserie

Brasserie je jednoduchá šablona WordPress, která je ideální pro restauraci, kavárnu nebo kulinářský web. Zahrnuje animační efekty, stejně jako velké množství funkcí.

7.XT Corporate lite

XT Corporate lite je jednoduchý a minimalistický motiv, který je vhodný pro malý produkt nebo službu.

8.

je příjemný motiv ve světlých barvách. Obsahuje různé animace a vizuálně ohromující přechody a paralaxový efekt. Kromě toho Freesia Empire podporuje pluginy jako Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack od WordPress.com, Polylang, Newsletter, bbPress a WooCommerce.

9.

je téma, které je vhodné pro prezentaci malých či středních podnikatelů. To zahrnuje velké množství funkce a doplňky pro kompletní správu přistávací konstrukce.

10.

je všestranné téma se spoustou funkcí. Je adaptivní, všechny prvky jsou animované s paralaxovým efektem. Jedna stránka se snadno přizpůsobuje a umožňuje prohlížet změny v reálném čase. Aktuální téma přistání také podporuje velké množství základních pluginů WordPress.

11. Fotografování

FotoGraphy je vstupní stránka, která je vhodná pro fotografy nebo designéry. Díky jednoduchosti a přítomnosti velkého množství funkcí je ještě více škálovatelný a přizpůsobitelný.

12. Integrální téma

Integrální téma je jednostránkové téma paralaxy vhodné pro kreativce, majitele firem nebo agenty. Jeho nastavení vám zabere jen pár minut.

13. Čtverec

Square je minimalistické téma, které lze použít pro jakýkoli typ webu. Nejlépe se hodí pro malé a střední podniky. Square je nakonfigurován pro mnoho oblíbených pluginů WordPress a je také optimalizován pro SEO.

14.Oživit

Enliven je vysoce kvalitní téma. Nazval bych ho prémiovým, jelikož kombinuje kvalitu a krásu v jedné lahvičce. Podporuje také mnoho oblíbených pluginů a lze jej snadno přizpůsobit.

15. Latte

Latte je šablona pro fotografy. Má vše, abyste mohli adekvátně ukázat své portfolio a také o sobě říct. Nastavení se provádí několika kliknutími.

16. Pondělí

Pondělí je elegantní téma vhodné pro podnikání nebo na volné noze. Dodává se s velkým množstvím funkcí a doplňků a doplňků.

17. Svět podnikání

Business World je šablona, ​​která souvisí s obchodními tématy. Kombinuje styl a kvalitu. Obchodní svět lze také upravit pro osobní, firemní nebo fotografovy webové stránky. Jeho schopnosti vám umožňují vyrobit z něj téměř vše, co chcete.

18.

- Jedná se o příjemné téma, které je vyrobeno ve světlých barvách. Je ideální pro malé a střední podniky a také pro osobní webové stránky. Můžete si v něm přizpůsobit cokoli chcete. Existuje mnoho funkcí a doplňků, díky kterým je tato šablona ještě lepší a atraktivnější.

19. Onetone

Onetone je jednostránková šablona pro WordPress, která je vhodná pro prezentaci „já“ na internetu (ukažte své portfolio a/nebo mluvte o sobě).

20. Vstaň

Arise je minimalistická jednostránková WordPress šablona vhodná pro malý produkt nebo malou firmu. Není v něm nic nadbytečného, ​​pouze vše, co je nejdůležitější.

21. Woot

Woot je minimalistická šablona vyrobená v tmavých barvách pro provozování internetového obchodu. Funguje s WooCommerce a mnoha dalšími populárními pluginy.

22. Západ

West je jednoduché téma vhodné pro web agentury, malé firmy nebo portfolia. Zahrnuje velké množství funkcí, nastavení a uspořádání prvků.

23. Anaglyph Lite

Anaglyph Lite je jednoduchá a elegantní šablona, ​​která je vhodná pro blogování a internetové obchody. Je již nakonfigurován pomocí WooCommerce a dalších oblíbených pluginů.

24.

je pěkný motiv vyrobený v tmavých barvách v kombinaci s barevnými prvky, který se hodí k prezentaci vašeho podnikání, portfolia nebo produktu. Po kliknutí na odkaz v bloku BeOnePage Lite klikněte na „Stáhnout nyní“ a stáhnete bezplatná verze toto téma.

25.

je jednostránková šablona, ​​která je zařazena do kategorie: fitness, jóga, pilates, klub zdraví a mnoho dalších. atd. Styl je vyroben v tmavých barvách, cross-browser, adaptivní a funguje na všech zařízeních.

26. Aglee Lite

Aglee Lite je jednoduchá firemní šablona navržená ve světle šedých a modrých tónech. Toto téma je ideální pro začínající nebo malé firmy.

27.

je silné a funkční obchodní téma. Má pohodlný editor, který vám umožní prohlížet změny v reálném čase. Wimpie Lite je kompatibilní s různými prohlížeči, reaguje a stránky se snadno načítají.

28.

- je víceúčelový WordPress téma, který se vyrábí ve světlých barvách a je vhodný na firemní web, osobní portfolio nebo blog.

Připravené šablony vstupní stránky jsou potřeba k rychlému uvedení nového produktu, jeho propagaci pomocí LP stránky nebo mobilní aplikace nebo motivaci uživatelů k registraci / odběru newsletteru. Pro vstupní stránku je mimořádně důležité pohodlí a snadné použití se správným rozložením. Moderní šablony prodejních vstupních stránek jsou vyvíjeny s ohledem na schopnost vytvářet responzivní webové stránky s vysokou mírou konverze.

Demo | Crossway – Startup Landing Page Template

Ultramoderní téma HTML5 založené na Bootstrapu 3.1.1. Dodává se se 4 rozvrženími: jednoduchý/vícestránkový, možnosti navigační lišty. Do motivu vstupní stránky je integrován efekt lehké paralaxy, přizpůsobený pro mobilní a organický provoz (SEO).

Demo | DotSquare

Html šablona vstupní stránky pro web a mobilní aplikace, zaměřené na snadné generování potenciálních zákazníků. Vlastní rychlé načítání a platný html, css kód. V horní části jednostránkové stránky je duplicitní kontaktní formulář s .

Demo | Šablona vstupní stránky Responsive Primo

Jednostránková vstupní šablona HTML5 s efekty CSS3. Má třísloupcový rám, vytvořený na Bootstrap 3. Vhodné pro prodej aplikací pro iOS/Android. Šablona obsahuje 2 rozvržení (s a bez paralaxy), Ajax formy kontakty, PrettyPhoto lightbox a 5 barevných schémat. Snadné přizpůsobení: změňte hexadecimální kódy a související prvky budou obarveny novou barvou. PSD v ceně.

Demo | Hype – vstupní stránka aplikace

Moderní šablona mobilní aplikace připravená pro Retina nabízí 8 barevných možností, možnosti obrázků/.

Demo | Víceúčelová vstupní stránka Gotte

Víceúčelová šablona vstupní stránky v plochém stylu se dodává se 3 možnostmi indexu a 6 barevnými schématy. Šablona vytvořená na twitteru bootstrap3, zahrnuta PHP skript kontaktní formuláře a stahování.

Demo | Slander – responzivní bootstrap HTML5 vstupní stránka

Slander je ideální varianta pro startupy a firmy, vhodná pro profesionály nebo individuální projekt. Responzivní design s Bootstrap a HTML5/CSS3 zahrnuje adaptivní posuvník, posuvník karet, formulář pro odběr novinek atd.

Demo | Appster – Ultimate Clean App Landing Page Template

Cloud – snadno použitelná vstupní stránka aplikace

Elegantní, čistá a minimalistická šablona vstupní stránky HTML5 / CSS3 s vynikající funkčností. Šablona je navržena pro stránku Coming Soon (brzy bude spuštěna), ideální pro vytvoření stránky aplikace a ukázkového webu.

Demo | OnEvent – ​​Vstupní stránka speciální události

Adaptivní přistávací šablona pro speciály. Události. Má sekce pro, komerční video, plán události, seznam hostů.

Téma vstupní stránky je zcela opotřebované. I když boom vstupních stránek trochu utichl, jsou vstupní stránky stále žádané. Zahajují je všichni a různí, i když pro jejich obchodní výklenky je to zjevně ztrátový tah. Někteří lidé to dělají jen proto, aby hráli, a jiní to dělají proto, aby vydělali peníze. Není ale až tak důležité, jaké cíle sledujete, důležité je, že vývoj stránky bude potřebovat každý. Někteří si objednají od profesionálů, zatímco jiní si z toho či onoho důvodu začnou vytvářet vlastní vstupní stránku sami. Právě těm posledním je věnována tato kolekce.

Lidé, kteří se rozhodnou vytvořit si web sami, mohou začít s vývojem od nuly, nebo mohou využít již hotové, protože nevyžadují speciální znalosti ve vývoji. Dost základní znalosti HTML a CSS, které učí ve škole. Zde opět vyvstává otázka. Mám používat placené nebo bezplatné? Ta placená bude samozřejmě mnohem kvalitnější a pravděpodobně bude vykazovat vyšší konverze. Ta bezplatná bude méně krásná, méně propracovaná z hlediska marketingu, layoutu a designu.

Tento výběr se skládá z bezplatných v čistém HTML pro Vytvoření přistání Strana. Zpočátku se výběr skládal ze 40 pozic, ale když jsem se ráno probudil a podíval se na tyto šablony novýma očima, rozhodl jsem se většinu z nich smazat, protože to byl, upřímně řečeno, odpad a už je toho hodně odpadky na internetu. Zbývají jen ty nejhodnější šablony, na kterých se dá alespoň něco postavit. Výběr zahrnuje šablony vstupních stránek pro různá témata, ale z nějakého důvodu převažují LP pro mobilní aplikace. Ukázalo se, že jsou nejvyšší kvality.

Dříve jsme již vybírali z bezplatných šablon vstupní stránky. Byly šité na míru konkrétnímu tématu. Tentokrát jsem se rozhodl udělat sbírkové téma, které nepatří žádnému směru.

Další kolekce bezplatných šablon vstupní stránky HTML:

Mimochodem. Pokud z nějakého důvodu chcete tyto šablony přetáhnout do enginu Wordpressu, pak jsem na toto téma jednou udělal výběr pluginů pro vytvoření vstupní stránky na Wordpressu. Můžete je zkusit použít. To může ušetřit spoustu času. I když osobně v tom nevidím moc smysl, protože na jednoduché LP stačí čisté HTML.

Tak. Upozorňujeme na 20 bezplatných šablon vstupní stránky HTML.

Appi – Šablona s videem na pozadíDalší šablona vstupní stránky pro mobilní aplikaci s videem na pozadí na celou obrazovku. Na rozdíl od šablony s video pozadím, která bude uvedena níže, je tato mnohem kvalitnější, i když je přizpůsobena konkrétnímu tématu.

BukkuFree HTML šablona pro vytvoření vstupní stránky pro prodej knih. Vyrobeno v plochém stylu v zelených tónech. Je tam nějaká zábavná animace.
Vývojář také poskytuje zdroje ve formátu PSD ke stažení zdarma.

Vstupní stránka pro prodej kávy Šablona vstupní stránky HTML pro prodej kávy. Návrh a realizace dispozice je velmi zajímavá. Při rolování stránky dochází k animaci prvků. Vše je provedeno v jemných barvách. Ideální pro organizace, které dodávají kávu. Tuto šablonu však lze snadno předělat tak, aby vyhovovala vašemu tématu, nahrazením obrázků.

Landing Zero - Přistání s videem na pozadí Zdarma HTML šablona s videem na pozadí univerzálního tématu. Vhodné pro vytvoření portfolia pro freelancera jakéhokoli zaměření, ať už je to fotograf nebo designér.
Vůbec, šablona zdarma Je těžké najít ty s videem na pozadí. Tak pojďme stahovat.
Video na první obrazovce lze nahradit svým vlastním, a pokud žádné neexistuje, můžete si ho stáhnout z bezplatné zásoby videí. Již dříve jsem poskytl seznam video akcií s legálními videi.

EngageDalší univerzální responzivní one pager na Bootstrapu. Stránka je vhodná pro jednoduchou prezentaci produktu. Struktura připomíná prezentační stránku pro produkty Apple.

Vstupní stránka pro kavárnu nebo restauraci Bezplatná šablona vstupní stránky známá průměrnému uživateli RuNet s formulářem pro zachycení na první obrazovce. Navrženo pro vytvoření vstupní stránky pro bar, restauraci, kavárnu nebo cokoliv kulinářského. Pomocí přihlášky si můžete rezervovat stůl na určený čas.

OleoseVelmi kvalitní, adaptivní, zdarma, ale opět pro mobilní aplikaci. Vstupní stránka je implementována na frameworku Bootstrap. Má tři barevné varianty: světle modrá, světle zelená a fialová. Není však tak striktně přizpůsoben svému tématu, takže jej lze snadno předělat na míru.

Take - free-pagerA opět další bezplatná jednostránková HTML šablona pro mobilní aplikaci. Jeho design je však velmi zajímavý a neobvyklý. Dokonce bych řekl unikátní. Většina návštěvníků strážnice nejsou vývojáři mobilních aplikací, takže budete muset vše předělat, aby vyhovovalo vašemu tématu.

Foodee Zdarma jednostránková HTML5 šablona pro vytvoření vstupní stránky pro kavárnu, restauraci nebo nějaký druh jídelny. Šablona s obrázkem na pozadí na celou obrazovku a efekty paralaxy.
Existují takové bloky jako: menu, nadcházející události, zákaznické recenze a standardní sada bloků, do kterých můžete umístit výhody atd.

BÍLÁ Tuto šablonu bych považoval za jakýsi html framework pro tvorbu jednostránkového webu. Není to šité na míru žádnému tématu, takže vše máte ve svých rukou. K dispozici je podpora videa na pozadí na celou obrazovku. Navíc má standardní sadu bloků, typickou pro jednostránkový web.

Cyprass Template je vhodná pro vytvoření vstupní stránky pro jakoukoli digitální společnost: webové studio, tým nezávislých pracovníků nebo podobně. Má k tomu všechny potřebné prostředky: portfolio s filtrem podle práce, různé koláčové grafy, karty, posuvníky... Navíc podporuje video na pozadí na první obrazovce.

Zdravím vás, moji milí čtenáři. Dnes si povíme o technických aspektech, pomocí kterých můžeme zvýšit prodejní konverzi našeho zboží nebo služeb. Jeden z důležité body je dobře promyšlený vstupní stránka se zbožím. Takzvaná landing page, o jejímž vytvoření si povíme později a získáme hotové kódy stránek.

Co je to vstupní stránka? Toto je stránka, na kterou se lidé obvykle dostanou po kliknutí na reklamu. Vytvořeno pro jednu nabídku: produkt, službu nebo předplatné. Efektivní vstupní stránka je základním kamenem úspěšného online marketingu. Produkt může být nejlepší na trhu, reklamy jsou dokonalé, ale bez dobré vstupní stránky úsilí nepřináší 100% výsledky. Návštěvníkům říká, co je v nabídce a proč by to měli chtít. Pocit naléhavosti přispívá k rychlému rozhodování a přechodu uživatele do kategorie klienta.

Jak vytvořit vstupní stránku? Je mylné věřit, že odpověď spočívá ve schopnosti sázet. Dobrá vstupní stránka je výsledkem koordinované práce na cílech, textu, designu a kódu. Vstupní stránky, jejichž příklady budou uvedeny níže, pomohou začátečníkům naučit se základy práce s rozložením, ale nenahradí konverzní texty a porozumění cílové skupině. Můžete je také vytvořit pomocí různých návrhářů vstupní stránky.

Proto před tvorbou vstupní stránka, Zeptejte se sami sebe:

• Co udělá člověk po přistání na vstupní stránce? Koupí něco? Vyplníte formulář? Přihlásit se k odběru newsletteru? Než budete měřit konverzní poměr, stanovte si jasné cíle.
• Kdo jsou moji konkurenti? Ve skutečnosti jsou to tři otázky: kdo, jak úspěšní jsou a jak lze jejich úspěchy uplatnit? Napodobování je nejupřímnější forma lichotky. Pokud vaši konkurenti dělají něco, co funguje, replikujte to na svůj web.
• Kdo je moje publikum? Čím lépe porozumíte své specializaci a cílové skupině, tím větší je šance, že se vaše úsilí vyplatí.

Potřebujete nabídnout všechny potřebné informace, ale ne tolik, abyste svého potenciálního klienta zahltili a odehnali.

Příklady vytvoření vstupní stránky + kódování pro figuríny

Než začneme, pojďme se krátce podívat na HTML a CSS. Pochopení toho, jak fungují, vám pomůže vytvořit přistání.

HTML je značkovací jazyk prohlížeče pro vizualizaci webových stránek. Psáno pomocí značek uzavřených v lomených závorkách, které definují obsah.

Štítek se otevírá () a zavírá () kolem náplně:

obsah

Pro jemné doladění jsou za název přidány atributy:

obsah

CSS – definuje způsob uspořádání prvků HTML. Skládá se ze selektorů, vlastností a hodnot:

#selector (vlastnost: hodnota;)

Selektor odpovídá názvu konkrétní značky v html. Změnou hodnot a přidáním vlastností se upraví jeho vzhled. Můžete vytvořit stránky, které vypadají navzájem odlišně, použitím různých stylů CSS na stejný HTML.

5 úvodních kroků

Pro rychlé rozložení použijeme šablonu s minimálním designem založeným na bootstrapu. Jedná se o systém s vlastními voliči, který se používá po celém světě pro urychlení rozložení.

Vypadá to skromně.

Z této ryby se v několika fázích vytvoří webová stránka pro každý vkus.

Struktura adresáře ve složce:

• index.html: Toto je hlavní soubor, který budeme upravovat.
• /assets: pomocné soubory jsou umístěny zde:
• /css: Adresář obsahuje styly bootstrap a ikon. Soubor, který budeme upravovat, je main.css.
• /img: složka pro obrázky webu.
• /fonts: ikonová písma.
• /js: bootstrap soubory javascriptu.

Krok 1: Použití záhlaví

Nadpis a podnadpisy jsou klíčová místa, která pomáhají sdělit hodnotu nabídky jasným způsobem.

Změňme název a název webu. Zde nemusíte umět psát – píšete svůj vlastní text na místa zvýrazněná žlutě na obrazovce.

Krok 2. Stručnost je sestrou obrácení. Přidání výhod a sazeb

Budete potřebovat 4 sekce:

• výhody;
• sazby;
• recenze;
• výzva k akci.

Vytvořme sekci hlavního obsahu „hlavní“, do které vložíme potřebné sekce:

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

Místo teček vyplňte náplní.

Pro sekci výhod budete potřebovat tento kód:

Výhody
Rychle

Spolehlivý

Sed diam nonummy

Ziskové

Elit, sed diam nonummy

Technicky

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

Spolehlivý

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

Ziskové

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

Technicky

Lorem ipsum dolor sit amet, consectetuer adipiscing

Spolehlivý

Lorem ipsum dolor sit amet, consectetuer adipiscing

Ziskové

Lorem ipsum dolor sit amet, consectetuer adipiscing

Obsah pro přehlednost:

Stále to vypadá nedbale, ale není důvod k panice, pokračujme.

Ceny zapisujeme. Obsah se mění stejným způsobem jako v prvním kroku. obecný popis s třídou „tarify“ a třemi tarify.

Tarifní plány

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.

Tarif č. 1
$10

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat
Tarif č. 2
$20

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat
Tarif č. 3
$30

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat

Vypadá to tak.

Vzhled budoucí vstupní stránky nás prozatím nezajímá – níže se podíváme na příklady změny stylů.

Krok 3: Důvěřujte signálům a výzvě k akci

Použití cílených signálů naznačuje návštěvníkům, že značka je důvěryhodná. Signály mohou mít mnoho podob, ale tou klasickou je zpětná vazba od zákazníků.

Hodnocení zákazníků

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 cvičení 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."

Pojďme nastavit výzvu k akci.

Výhoda při dnešní objednávce

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:

Objednat teď!

Recenze pomohou potenciálním zákazníkům při rozhodování o koupi produktu. Pro přehlednost potřebujeme avatary, takže je okamžitě umístíme – pod každou nabídku.

Jméno klienta.

Krok 4: Grid and Mobile Friendly Integration

K implementaci mřížky potřebujeme kontejnery Bootstrap. Důležité je zapamatovat si celkový počet platných segmentů sloupců – 12. Třída určuje šířku zobrazení obsahu. Výhodou této hotové mřížky je, že kontejnery jsou navrženy s ohledem na přizpůsobivost a jsou okamžitě použitelné mobilní zařízení. Detailní popis na oficiálních stránkách. Mřížka vypadá takto.

Obsah „hlavního“ bude zabalen do kontejneru. K tomu je nahoře napsáno:

… .

Pokud potřebujete, aby se blok vešel na celou šířku obrazovky, kontejner se vloží dovnitř. Tady to bude jumbotron a výzva k akci.

Všechny prvky, které vyžadují umístění na sebe obalíme oddělovači čar.

Nyní můžeme upravit šířku sloupců se zaměřením na bootstrap mřížku. Po zabalení se výplň přestala lepit na okraje obrazovky a objevily se úhledné prohlubně.

Ceny nastavujeme v řádku pomocí třídy sloupců col-lg-4. Uvnitř řádků již není nutné psát samostatné divy pro obtékání, lze je kombinovat se stávajícími oddělenými mezerou.

Analogicky jsme nastavili sloupce pro sekci recenzí a výhod. Pokud potřebujete přesunout prvek na stranu, použijte třídu sloupce odsazení col-lg-offset-2. Číslo na konci určuje, o kolik základních sloupců dojde k posunu.

Krok 5. Písma a ikony

Implementujeme hlavičkové fonty Google Font. Po výběru otevřete kartu importu a zkopírujte z ní data do souboru main.css. Do souboru, pro který je použit nový font, přidáváme také selektory titulků.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import písma pro nadpisy */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", bezpatkové; /* výstup Googlefont */
}

Pro názornost jsou výhody popsány třídou se samovysvětlujícím názvem text-center a ikonami FontAwesome ze sady bootstrap.

V tomto okamžiku je příprava zcela dokončena.

Vstupní stránka: příklady kódů s nabídkou, paralaxou a počítadlem

Používáme tři nejoblíbenější typy: s větou, formou a s odpočítávacím počítadlem. S postupem rozvržení bude šablona doplňována o efekty.

Příklad 1: s větou

Nastavíme pozadí hlavní části a výplně tak, aby byla první obrazovka zakrytá.

Jumbotron (
pozadí: #f5f5f5 url(../img/fon.jpg) nahoře uprostřed bez opakování;
max-šířka: 100 %;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Změňme velikost hlavičky jumbotronu z h2 na h1. Dále napíšeme styly pro prvky, které je třeba změnit.

Začněme ikonami.

Výhody i(
barva: #cac4c4;
}

Za znakem hash je určena barva. Můžete si vybrat vlastní volbu pomocí html barevných tabulek nebo editoru obrázků.

Odsazení pro nadpisy oddílů

sekce h2 (
padding-top: 30px;
margin-bottom: 25px;
}

Děláme pořádek ve vzhledu tarifů. Pro usnadnění vytváříme vlastní třídy pro prvky, které chceme konkrétně zvýraznit.

Tarif č. 1
$10

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat

A hodně CSS. Za jaká místa sekce zodpovídají, je uvedeno v komentářích - /* mezi lomítky s hvězdičkou */

/* =========Tarif styly======== */
/* obecná forma tarif */
.pricing_item(
pozadí: #f2f2f2;
poloha: relativní;
displej: -webkit-flex;
displej: flex;

směr ohybu: sloupec;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
polstrování: 2em 3em;
okraj: 1 em;
barva: #262b38;
kurzor: výchozí;
přepad: skrytý;

}
/* změnit pozadí po kliknutí */
.pricing_item:hover (
barva: #444;
pozadí: #daebef;
}
/* pozadí individuální cenovky v každém tarifu */
.pricing_item:first-child .price (
pozadí: #9ba9b5;
}
.pricing_item:nth-child(2).price (
pozadí: #1f6098;
}
/* na širokoúhlých obrazovkách je prostřední sloupec tarifu odsazen a zvýrazněn */
@media obrazovka a (min. šířka: 66,250 em) (
.pricing_item(
marže: 1,5em 0;
}
.featured(
z-index: 10;
okraj: 0;
velikost písma: 1,15 em;
}
}
/* název */
.pricing_item h3 (
velikost písma: 2em;
marže: 0,5em 0 0;
barva: #1d211f;
}
/* pozadí cenovky */
.cena(
velikost písma: 2em;
váha písma: tučné;
barva: #fff;
poloha: relativní;
z-index: 100;
line-height: 95px;
šířka: 100px;
výška: 100px;
marže: 1,15 em auto 1 em;
hraniční rádius: 50 %;
pozadí: #77a5cc;
-webkit-transition: barva 0,3s, pozadí 0,3s;
přechod: barva 0,3s, pozadí 0,3s;
}
/* měna */
.měna(
velikost písma: 0,5 em;
vertikální zarovnat: super;
}
/* upřesnění návrhu */
.věta (
váha písma: tučné;
okraj: 0 0 1em 0;
polstrování: 0 0 0,5em;
barva: #2a6496;
}
/* seznam */
.pricing_item ul (
velikost písma: 0,95 em;
okraj: 0;
polstrování: 1,5em 0,5em 2,5em;
text-align: left;
}
/* seznam položek */
.pricing_item li (
polstrování: 0,15em 0;
}
/* tlačítko ohodnotit objednávku */
tlačítko .pricing_item(
váha písma: tučné;
margin-top: auto;
polstrování: 1em 2em;
barva: #fff;
border-radius: 5px;
pozadí: #428bca;
-webkit-transition: background-color 0,3s;
přechod: barva pozadí 0,3s;
}
/* změnit barvu po stisknutí tlačítka */
.pricing_item button:hover,
.pricing_item button:focus (
barva pozadí: #285e8e;
}
/* pozadí tarifu*/
.bg-2 (
pozadí: #dddddd;
}

Výsledek

Hodnocení zákazníků. Pojďme se na ně úhledně podívat a označit jejich umístění.

/* =========Styly posudků======== */
posudky (
polstrování: 4em 0;
text-align: center;
}
.testimonials .avatar img (
hraniční rádius: 50 %;
plavat vlevo;
zobrazení: inline;
pravý okraj: 1 em;
šířka: 65px;
výška: 65px;
margin-bottom: 30px;
}
.posudky .avatar p (
text-align: left;
polstrování-top: 1m;
barva: #5d5d5d;
váha písma: 900;
}

Zbývá už jen ozdobit poslední výzvu k akci a zápatí.

/* Akce */
.akce(
pozadí: #476177;
min-výška: 180px;
šířka: 100 %;
polstrování: 4em 0;
text-align: center;
}
.action h2 (
barva: #fff;
váha písma: 300;

}
.akce p(
barva: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0,2);
velikost písma: 1,2 em;
}
.action .container (
margin-top: 3em;
}
/* Zápatí */
zápatí (
pozadí: #333333;
polstrování: 1em 0;
zarovnání textu: vpravo;
}
zápatí p(
barva: #fff;
výška řádku: 1;
text-transform: velká písmena;
velikost písma: 0,7 em;
margin-top: 0,5em;
}

Tlačítku zápatí je přiřazena vestavěná bootstrap třída btn-default.

Oživte šablonu. Zavedeme plynulé rolování a tlačítka pro sekce a také animaci textu na první obrazovce.

Pro přechody do práce nahradíme některé oddílové třídy id - pro výhody a tarify. A do tlačítek přidáme odkazy na id. Snímek obrazovky – co je k čemu připojeno, zvýrazněno žlutou fixou.

Nastavujeme odsazení pro tlačítka - jbutton. Posouvání při stisku funguje, ale velmi prudce.

Hladké přechody jsou vytvářeny pomocí javascriptu nebo jquery. Ten je ve výchozím nastavení připojen k šablonám Bootstrap.

Posouvání je nyní plynulé.

Přidání animace do textu pomocí Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Jedná se o hotový open source kód, lze jej použít na jakémkoli webu. Umístěte soubor z Github do složky css a zadejte cestu.

Efekty vybíráme zde: https://daneden.github.io/animate.css/. Vybrali jsme fadeInDown. V kódu je to napsáno takto:

Nyní, když je stránka načtena nebo obnovena, text bude animován. Připraven.

Příklad 2: s tvarem a paralaxovým efektem

Čím více polí formuláře se návštěvníkovi zobrazí, tím menší je pravděpodobnost, že je vyplní. Žádejte jen minimum nezbytných informací.

Sestavuje se analogicky. Změníme pozadí a barvy. A samozřejmě přidáme tvar.

Začněme paralaxou.

Změňme pozadí jumbotronu na průhledné:

pozadí: průhledné;

Do hlavy vložíme skript:

$(okno).scroll(funkce(e)(
paralaxa();
});
funkční paralaxa())(
var scrolled = $(okno).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

První řádek v těle je kontejner pro paralaxu:

A v CSS je jeho chování:

Bgparalaxa (
pozadí: url(/../img/fon.jpg) opakovat;
poloha: pevná;
šířka: 100 %;
výška: 300 %;
nahoře:0;
vlevo:0;
z-index: -1;
}

Paralaxa je připravena. Provedení změn v kódu a nové pozadí však vyžaduje nové přiřazení barevného schématu.

Ztmavení nabídky:

Navbar-výchozí (
barva pozadí: #333;
barva ohraničení: #444;
barva: tmavě šedá;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
barva: tmavě šedá;
barva pozadí: rgba(0, 0, 0, 0,5);
}

Větu v jumbotronu nahradíme novou - s kódem tvaru:

Vstupní stránka promění návštěvníky v zákazníky
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.

  
  

A předepisujeme vzhled

/* formulář */
.headform-list (
list-style-type: none;
line-height: 26px;
váha písma: 400;
výplň: 0px;
margin-bottom: 40px;
}
.forma hlavy(
přepad: skrytý;
poloha: relativní;
barva pozadí: rgba(0,0,0,.4);
odsazení: 35px 40px;
border-radius: 8px;
}
vstup, tlačítko, výběr, textová oblast (
šířka: 100 %;
margin-bottom: 10px;
}
.headform-list li .fa (
pozice: absolutní;
nahoře: 0px;
vlevo: 0px;
šířka: 42px;
velikost písma: 24px;
text-align: center;
}
.headform-list li(
poloha: relativní;
min-výška: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
barva: #fff;
velikost písma: 16px;
styl písma: kurzíva;
}

Zde skončil i text jumbotronu, který si vyžádal změny.

Měníme tarify.

/* celkový pohled na tarif */
.pricing_item(
barva pozadí: rgba(0,0,0,.4); /* řádek změněn */
border-radius: 4px; /* řádek změněn */
poloha: relativní;
displej: -webkit-flex;
displej: flex;
-webkit-flex-direction: sloupec;
směr ohybu: sloupec;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
polstrování: 2em 3em;
okraj: 1 em;
barva: #f2f2f2; /* řádek změněn */
kurzor: výchozí;
přepad: skrytý;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* změnit pozadí po kliknutí */
.pricing_item:hover (
barva: #444;
pozadí: #ddd; /* řádek změněn */
}

Nyní vypadají takto - průhledné pozadí a zaoblené rohy.

Šablona je připravena.

Příklad 3: s odpočítávacím počítadlem

Opět změníme náplň jumbotronu a šablonu přebarvíme tak, aby odpovídala novému pozadí, podobně jako u předchozí šablony. Připojte skript čítače:

HTML





Čas nečeká
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 auguelo dule dodeleunit

• 
  

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

  
  


• 
  

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

  
  

var myCountdown1 = new Countdown((
čas: 86400 * 3, // 86400 sekund = 1 den
šířka: 300
, výška: 60
, rangeHi: "day"
, styl: "převrátit" //