Příklady vstupních stránek pro příslušenství. Nejlepší vstupní stránky: odborný výběr

Velký počet stránky, které jsou v RuNet, jsou velmi monotónní a vždy je potřeba vytvořit něco nového, neobvyklého, přitahujícího pozornost. Tentokrát jsem se rozhodl napsat článek nejen o dalším efektu na webu, ale ukázat, jak lze tyto efekty kombinovat v rámci jednoho velkého projektu. To je velmi důležité, aby váš web nevypadal jako soubor náhodně se objevujících z různé strany animace. Chci vám představit výběr 10 nejlepších interaktivních Vstupní stránka které stojí za pozornost.

O tom, kde začít při studiu tvorby míst, a zejména přistání, jsem řekl v malém minikurzu:.

Zde je tedy výběr 9 vstupních stránek, kde byste měli čerpat inspiraci:

Výborná verze webu, kde nemůžete ani hnout myší, protože v reakci okamžitě uvidíte zkreslení bloku s obsahem. Za pomalu "plave" prostor. Přechody vás také nemohou nechat lhostejnými, protože všechny se dějí s zajímavý efekt, a zdá se, že každý z bloků je "rozřezán" na dvě poloviny.

Na tomto webu se při rolování nic nezobrazuje, ale zde je to velmi elementární: rozevírací seznamy, změny barev, vzhled dalších prvků a popisy. Žádné drsné efekty, vše se děje v jednotný styl. Doporučuji věnovat pozornost efektům, některé z nich lze aplikovat na vaše projekty.

Tento projekt by vám měl být již známý – jedná se o profesionální videohosting. Ale tato stránka hovoří o možnosti úpravy videa přímo z mobilního zařízení. Ale chci se zaměřit na efekty, ke kterým dochází při rolování stránky. Nejprve se obrázek na pozadí v záhlaví zmenší a poté se objeví v telefonu. Přitahuje hodně pozornosti, že?

Charakteristickým rysem tohoto webu nad všemi ostatními je jeho nestandardní rolování. Jak vidíte, je horizontální. K pohybu také dochází přetažením obsahu doleva. Ale co je ještě působivější, je počet efektů v každém bloku: , , stejně jako vertikální rolování bloků. Video na pozadí je trochu matoucí, ale přesto je vše udělané docela originálně a neobvykle.

Zde bych vás chtěl upozornit nikoli na efekty vznášení, ale na pozadí. Po plně naložen webu, když najedete kurzorem myši na pozadí, objeví se skvrny jako na vodě. Po kliknutí se také vytvářejí pruhy a tento efekt dělá vynikající dojem. To neuvidíte na každém webu.

Během rolování se na stránce objevují (nakreslují) různé ikony a nadpisy. Aniž si to uvědomujete, začnete se dívat na proces kreslení a čekáte, co se tam objeví na konci, a tím čtete nakreslený text. Pokud vás zajímá, jak tento efekt vzniká a chcete stejný efekt vytvořit i na vašem webu nebo vstupní stránce, pak si prostudujte tyto články: a.

Co mě na této stránce přitahovalo, byly efekty vznášení. Přestože byla stránka vytvořena v moderním minimalistickém stylu, jsou zde velmi krásně kombinovány 3D objekty: rozbalovací pohlednice, pohyb objektů na pohlednici. Věnujte také pozornost

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.

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áváním vlastností se reguluje vzhled. Můžete vytvořit různé stránky použitím různých stylů CSS na stejný HTML.

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

Elit, sed diam nonummy

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

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

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.

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

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:

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:

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í. Detailní 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.

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.

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

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,
tlačítko .pricing_item: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.

Čí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.

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 zzril du deleunit

• 
  

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

  
  


• 
  

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