• přistávací šablony. Šablony vstupní stránky

    » Volné přistání šablony stránek WordPress – TOP 30

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

    Konkrétně tento článek bude diskutovat nejlepší přistání Témata WordPress, která by pro vás mohla být vhodná. Všechny budou obsahovat snímek obrazovky a ukázku návrhu, abyste mohli téma ohodnotit a okamžitě si jej stáhnout, pokud se vám líbí.

    Velmi často jsou přistávací šablony 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 námahy. Na druhou stranu má profesionálně nakreslený design, paralaxní rolování, což umožňuje nazvat toto téma „krásným“. Tato šablona je vhodná pro začínající podnikatele a malé firmy.

    2.

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

    3. Alhena Lite

    Alhena Lite je bezplatné téma WordPress, které je plně integrováno s pluginem WooCommerce, takže můžete snadno nastavit svůj online obchod.

    4.

    - je to čisté jednoduché podnikání téma, které je plně responzivní a obsahuje mnoho oblíbených funkcí pro snadná tvorba místo.

    5 Palmas

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

    6. Brasserie

    Brasserie je jednoduché téma WordPress, které je skvělé pro restaurace, kavárny nebo stránky s jídlem. Zahrnuje animační efekty, stejně jako velký počet funkčnost.

    7.XT Corporate lite

    XT Corporate lite je jednoduché a minimalistické téma vhodné pro malý produkt nebo službu.

    8.

    - To je pěkné téma, vyrobené ve světlých barvách. Obsahuje různé animace a vizuálně skvělé 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.

    - Jedná se o téma, které je vhodné pro prezentaci malých nebo středních podniků. Obsahuje obrovské množství funkcí a doplňků pro plná kontrola přistávací konstrukce.

    10.

    je mnohostranné téma, velké množství funkčnost. Je citlivý, všechny prvky jsou animované s paralaxovým efektem. Jedna stránka je snadno přizpůsobitelná a umožňuje vám vidět 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.Fotografie

    FotoGraphy je vstupní stránka 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 optimalizován pro SEO.

    14. Oživit

    Enliven je kvalitní exekuční 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 je vysoce přizpůsobitelný.

    15.Latte

    Latte je šablona pro fotografy. Má vše, abyste mohli adekvátně ukázat své portfolio a také o sobě říct. Nastavení zabere pár kliknutí.

    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ěkné téma, které je vyrobeno v jasných barvách. Je ideální pro malé a střední podniky, stejně jako pro osobní webové stránky. Dá se přizpůsobit čemukoli chcete. 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 řekněte o sobě).

    20. Vstaň

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

    21. Woot

    Woot je minimalistické téma navržené v tmavých barvách, které provozuje internetový obchod. Funguje s WooCommerce a mnoha dalšími populárními pluginy.

    22. Západ

    Západ je jednoduché téma, který je vhodný pro agenturu, malou firmu nebo portfolio web. Zahrnuje velké množství funkcí, nastavení a uspořádání prvků.

    23. Anaglyph Lite

    Anaglyph Lite je jednoduchá a elegantní šablona vhodná pro blogování a internetový obchod. Už má nastaven WooCommerce a další oblíbené pluginy.

    24.

    Zdravím vás, moji milí čtenáři. Dnes budeme mluvit o technické body, pomocí kterého můžeme zvýšit konverzi prodeje našich produktů 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íž tvorbě si povíme dále 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. Je vytvořen 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 dovedené k dokonalosti, ale bez dobré vstupní stránky úsilí nedává 100% výsledek. 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 přistání? Je mylné věřit, že odpověď spočívá ve schopnosti sázet. Dobrá vstupní stránka je výsledkem dobře koordinované práce na cílech, textu, designu a kódu. Vstupní stránka, jejíž příklady budou uvedeny níže, pomůže začátečníkům naučit se základy práce s layoutem, ale nenahradí konverzní texty a porozumění cílové skupině. Můžete je také vytvořit pomocí různých konstruktorů vstupní stránky.

    Než tedy vytvoříte vstupní stránku, zeptejte se sami sebe:

    • Co udělá člověk, když se dostane na vstupní stránku? Koupí něco? Vyplnit formulář? Přihlásit se k odběru newsletteru? Před sledováním konverzního poměru si stanovte 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 konkurenti dělají to, co funguje, zopakujte to na svém webu.
    • Kdo je moje publikum? Čím lépe porozumíte své specializaci a cílové skupině, tím je pravděpodobnější, že se vaše úsilí vyplatí.

    Vše musí být nabízeno nezbytné informace, ale ne natolik, aby zahltil a odehnal potenciálního klienta.

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

    Než se pustíme do práce, pojďme se rychle podívat na HTML a CSS. Pochopení toho, jak fungují, pomůže vytvořit přistání.

    HTML je značkovací jazyk prohlížeče pro vykreslování webových stránek. Napsáno pomocí přiložených značek úhlové konzoly, které definují obsah.

    Značka se otevírá () a zavírá () kolem náplně:

    obsah

    Pro přizpůsobení bodu se za název přidávají atributy:

    obsah

    CSS – určuje způsob umístění HTML prvky. 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 různé stránky 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á skromně.

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

    Struktura adresáře ve složce:

    • index.html: Toto je hlavní soubor, který budeme upravovat.
    • /assets: zde jsou pomocné soubory:
    • /css: adresář obsahuje bootstrap a styly ikon. Soubor k úpravě je main.css.
    • /img: složka pro obrázky webových stránek.
    • /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ěňte název a název webu. Zde není vyžadována schopnost sazby – váš text je napsán na místech zvýrazněných ž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.

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


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

    Místo teček naplňte nádivkou.

    Sekce výhod bude vyžadovat 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


    Vizuální obsah:

    Zatím to vypadá odfláknutě, ale není důvod k panice, pokračujeme.

    Zapište si sazby. Obsah se mění podobně 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.

    I když nás nezajímá vzhled budoucí vstupní stránky, níže zvážíme příklady změn stylů.

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

    Použití cílových signálů naznačuje návštěvníkům, že značka je důvěryhodná. Lze přijímat signály různé druhy, ale klasika jsou recenze 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."

    Nastavte 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 pomáhají 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ě napíšeme na místo – pod každou nabídku.


    Jméno klienta.


    Krok 4: Integrace do sítě a optimalizace pro mobilní zařízení

    K implementaci mřížky potřebujeme kontejnery Bootstrap. Je důležité si uvědomit, že celkový počet povolených segmentů sloupců je 12. Třída definuje šíř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í. Podrobný popis na oficiálních stránkách. Síť vypadá takto.

    Obsah „hlavního“ bude zabalen do kontejneru. K tomu je v jeho horní části napsáno:

    … .

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

    Všechny prvky, které je třeba naskládat na sebe, budou zabaleny pomocí oddělovačů č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, objevily se úhledné prohlubně.

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

    Analogicky nastavíme sloupce pro sekci recenzí a výhod. Pokud chcete prvek posunout na stranu, použijte třídu sloupce odsazení col-lg-offset-2. Číslo na konci určuje, o kolik základních sloupců bude posunuto.

    Krok 5. Písma a ikony

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

    @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ýhodami třída s vypovídajícím názvem text-center a ikony FontAwesome ze sady bootstrap.

    Tím je příprava dokončena.

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

    Používáme tři nejoblíbenější typy: s nabídkou, s formulářem a s odpočítávacím počítadlem. Po dokončení rozvržení bude šablona doplněna o efekty.

    Příklad 1: s nabídkou

    Nastavte pozadí hlavního těla a výplň tak, aby byla zakryta první obrazovka.

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

    Změňte velikost názvu jumbotronu z h2 na h1. Dále předepíšeme styly pro prvky, které je třeba změnit.

    Začněme ikonami.

    Výhody i(
    barva: #cac4c4;
    }

    Za znakem libry je uvedena 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áváme do pořádku vzhled tarifů. Pro usnadnění vytváříme vlastní třídy pro prvky, které chceme bodově vybrat.


    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 napsáno 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í kliknutím */
    .pricing_item:hover (
    barva: #444;
    pozadí: #daebef;
    }
    /* individuální cenovka 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, výplň a zvýraznění prostředního sloupce tarifu */
    @media obrazovka a (min. šířka: 66,250 em) (
    .pricing_item(
    marže: 1,5em0;
    }
    .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;
    }
    /* podložení 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í poloměr: 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í věty */
    .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,5 em 0,5 em 2,5 em
    text-align: left;
    }
    /* seznam položek */
    .pricing_item li(
    polstrování: 0,15em0;
    }
    /* tlačítko pro objednání tarifu */
    tlačítko .pricing_item(
    váha písma: tučné;
    horní okraj: 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 kliknutím na tlačítko */
    .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, určit místo.

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

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

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

    }
    .actionp(
    barva: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0,2);
    velikost písma: 1,2 em
    }
    .akce .kontejner(
    margin-top: 3em;
    }
    /* Zápatí */
    zápatí(
    pozadí: #333333;
    polstrování: 1em0;
    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.

    Šablonu oživíme. Implementujeme plynulé rolování a tlačítka pro sekce a také animaci textu na první obrazovce.

    Aby přechody fungovaly, nahradíme část oddílových tříd id - pro výhody a tarify. A do tlačítek napíšeme odkazy na id. Obrazovka - to, co je připojeno k tomu, co je zvýrazněno žlutou fixou.

    Nastavit odsazení pro tlačítka - jbutton. Posouvání na kliknutí funguje, ale velmi náhle.

    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). Je to připravené open source, lze jej použít na jakékoli webové stránce. Soubor z githubu vložíme do složky css a napíšeme cestu.

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

    Nyní, když se stránka načte nebo obnoví, bude text animován. Připraveno.

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

    Čím více polí formuláře je návštěvníkovi nabídnuto, tím menší je pravděpodobnost, že je vyplní. Požadujte pouze nezbytné minimum informací.

    sestavené analogicky. Změníme pozadí a barvy. A samozřejmě přidáme formulář.

    Začněme paralaxou.

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

    pozadí: průhledné;

    Vložte skript do hlavy:


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

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

    A v CSS je jeho chování:

    bgparallax(
    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. Ale provádění změn v kódu a nové pozadí vyžaduje nové přiřazení barevného schématu.

    Ztmavení nabídky:

    navbar-default(
    barva pozadí: #333;
    barva ohraničení: #444;
    barva: tmavě šedá;
    poloměr okraje: 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ředepsat vzhled

    /* formulář */
    .headform-list(
    list-style-type: none;
    line-height: 26px;
    váha písma: 400
    výplň: 0px
    okraj-dolní: 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;
    okraj-dolní: 20px
    }
    .jumbotronp(
    barva: #fff;
    velikost písma: 16px;
    styl písma: kurzíva;
    }

    Přišel sem i text jumbotronu, který si vyžádal změny.

    Měníme sazby.

    /* 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í kliknutím */
    .pricing_item:hover (
    barva: #444;
    pozadí: #ddd; /* řádek změněn */
    }

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

    Šablona je připravena.

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

    Opět vyměníme výplň jumbotronu a šablonu překreslíme na nové pozadí analogicky s předchozí šablonou. Připojíme 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 a si. zzril dule deleunit




    • 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: "flip" //