Jak vytvořit stránku stylu stylu 80 s Elementorem

Design 80. let - milujeme ho! Se všemi těmi geometrickými tvary, prostorovým pozadím a efekty neonového světla by naše vstupní stránka speciální akce (vánoční večírky) nemohla být zářivější! Ukažme nám, jak na to.

Odstraňte čelenky, zapněte si neonová světla a vložte Tron do svého videorekordéru ... 80 roky jsou zpět!

Jako designér jsem vždy měl slabost pro design 80. let, o které nikdo nemluví. Se všemi těmito geometrickými tvary, spoustou vzorů, prostorovým pozadím s levnými neonovými efekty (mělo by to přinést zpět vzpomínky).

Ve skutečnosti to můžete vidět všude. Od „Strangers Things“ od Netflixu, MineCraft nebo Muse, které právě vydalo album s příchutí 80. let - nebo dokonce remake Tron.

Proč tedy nevyužít tohoto trendu a neukázat vám, jak jej implementovat do vstupní stránky vytvořené pomocí Elementor ?

Není to jen teoretický tutoriál. Vzali jsme některé prvky pro aktuální období slev (Černý pátek), abychom vám poskytli nástroje pro přípravu na vaše budoucí události.

Otevírací sekce

Naše úvodní sekce je sekce hrdinů. První věc, kterou je zde třeba poznamenat, je název. Doporučuji věnovat této oblasti hodně úsilí, protože je to vaše první věc návštěvník uvidíme.

Přemýšlejte o přesné zprávě, kterou chcete předat. Díky velkému a jasnému názvu upoutáte pozornost lidí. Tato první část by také měla uživatele povzbudit, aby se posunuli dolů a procházeli zbytek stránky.

Neonový efekt

Do středu kompozice jsem umístil logo, zprávu a tlačítko.

Vidíte, že nejdůležitější zpráva je napsána „neonovým světlem“. Chcete-li získat tento neonový vzhled, musíte do svého designu přidat CSS. CSS přidá do textu hodně růžového stínu. To je celá věc.

Musíte tedy přidat widget záhlaví, změnit velikost vybraného písma, aby svítilo, a nastavit barvu na bílou.

Poté otevřete kartu Upřesnit a vložte ji na vlastní kartu CSS, přidejte tento kód:

selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }

Pokud chcete použít jiný odstín vedle růžové, stačí změnit číslo barvy za znakem libry. To je vše.

Vertikální název

Další zajímavý aspekt tohoto designu se objevuje vedle písmen „FRI“, s připojeným rokem, který se objevuje svisle (90 stupňů).

Chcete-li dosáhnout tohoto vzhledu, musíte přidat widget sekce interiér. To se provádí k implementaci vertikálního efektu pouze na jeden sloupec.

Po přidání vnitřní části přidejte do každého sloupce widget názvu.

Vytvořte styl textu a poté otevřete záložku Upřesnit druhého sloupce (ten, který chcete otáčet) a na vlastní kartu CSS napište tento kód:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

80 retro pozadí

Jakmile dokončíte práci na hlavním příspěvku, začněte pracovat na pozadí, abyste text podpořili a aby retro sci-fi z 80. let vypadalo jako realita. Zde jsem přidal obrázek navržený ve Photoshopu a použil ho jako pozadí hrdiny.

V tomto designu má pozadí geometrickou mřížku připomínající Tron s nádechem palem nakloněných doleva a hlavní gradient modro-fialovo-růžové k dosažení tohoto retro pocitu. Existují také některé pěkné úpravy jako „DeLorean DMC-12“ (pravděpodobně to poznáte v Back to the Future).

Auto, stejně jako padající hvězdy, se zaměřují na hlavní text naší sekce a zdůrazňují naši hlavní zprávu.

Sekce funkcí

Při navrhování vstupní stránky musíte myslet na vztahy mezi jednotlivými částmi. Jedná se o složitější úkol, pokud jde o módní design, jako je retro 80. léta.

Takže poté, co navrhnete úžasnou první sekci a zvednete lištu, musíte zachovat vysokou úroveň a zachovat stejné téma designu, přičemž každou sekci považujete za kompozici samo o sobě.

Návrh

V této části jsem navrhl tmavší vzhled „neznámých objektů“, když „procházíme“ stránku. Zde vidíte nadpis, 3 odrážky a tlačítko. K vytvoření tohoto plovoucího 3D efektu jsem použil trochu Photoshopu v kombinaci s nastavením Flip-boxuElementor.

Představeno na Photoshopu

První věc, kterou jsem udělal, bylo vytvořit celou scénu ve Photoshopu, abych zjistil, jak bude všechno vypadat, než jsem ji začal stavět. V nadpisu vidíte neonový vzhled z minulosti a pod něj jsem přidal 3 trojúhelníky s ikonami a nadpisem (kruhy).

Každému trojúhelníku jsem přidal modro-fialovo-růžový přechod. Nahoře, řádkový vzor mu dodává vzhled a rozmazání televize z 80. let, aby vytvořil šumivý sci-fi vzhled.

Ikony také získají neonový vzhled a také nadpis ve spodní části trojúhelníku. Přidejte plovoucí efekt tučným písmem. Pozadí má zakouřený, zamračený a tmavý efekt se stejným vzorem čáry, jaký se používá pro trojúhelník.

Pro 3D animaci budou mít trojúhelníky průhledné pozadí. To znamená, že text na zadní straně se zobrazí, pokud není zakryt. Přidal jsem tedy po stranách trojúhelníku trochu černého kouře, aby se deka prolínala a stále zakrývala záda.

V zásadě tedy lze do editoru zabudovat tři vrstvy: pozadí, ikonu a název.

Vytvořte živě

V editoru jsem přidal widget flip-box. Na kartě přední obsah jsem vybral obrázek jako grafický prvek a přidal název. Na kartě Pozadí v Barvě jsem změnil barvu na průhlednou a přidal jsem trojúhelník, který jsem navrhl v části obrázku, poté změnil polohu tak, aby dokonale zapadl .

Pak jsem na zadní kartě udělal to samé, ale místo přidání názvu jsem přidal text. Chcete-li přejít na kartu nastavení. Zde jsem si pohrál s výškou bedny. Použil jsem jednotku VH, protože je to relativní jednotka, která změní obraz vzhledem k obrazovce jako návštěvník použije.

Díky tomu je citlivější. V části efektů jsem ponechal efekt Flip, změnil směr doleva a aktivoval 3D hloubku, abych dosáhl tohoto úžasného 3D efektu.

CTA

Celá kompozice je zde zaměřena na tlačítko (protože chcete, aby uživatel na tlačítko klikl). Zde vidíte, že tlačítko není tučně a „ve tváři“, ale pěkně splývá s kouřovým pozadím a s trochou záře kolem něj. Ale když po něm přejdete, objeví se růžová barva.

Sekce kritiků

Pokud uživatel přejde do třetí části - znamená to, že děláte něco správně. Po rozhovoru o produktu a jeho úžasu tedy nastal čas, aby promluvila další strana.

Návrh

V této části máme widget komentářů na radikálním geometrickém pozadí s neonovým nadpisem. Pozadí bylo navrženo ve Photoshopu a poté umístěno na pozadí sekce jako pevné pozadí, aby se vytvořil efekt posouvání vznášení.

Chtěl jsem, aby tato část vypadala „v zákulisí“, takže když se posunete dolů, budete tomu vystaveni.

Část tabulky cen

Tato část je částí Tabulka cen . Zde vidíte všechny položky, které mohou podporovat prodej. Název, odpočítávání a samozřejmě - cenová tabulka.

Toto je cílová čára vstupní stránky. Pokud tedy váš uživatel neklikne, něco se pokazilo.

Návrh

Návrh v této sekci má více než jeden Kontakt Galaxie 80. let. Zdejší pozadí bylo upraveno ve Photoshopu, čímž získalo zářivý ředkvičkový fialový vzhled a vyčnívalo z černo-černého pozadí, které existovalo, než mu nakonec dalo punc.

Pod hlavičkou a sloganem je počítadlo, které ukazuje zbývající čas do konce prodeje. Zde jsem použil prostorné písmo s názvem „space mono“, které jsem přidal pomocí možnosti vlastního písma.

V níže uvedené tabulce cen má každá tabulka světle černé pozadí, které jí dodává vzhled „plovoucí v prostoru“. Když na něj přejedete myší, pozadí ztmavne a kolem vás bude záře jako ohnisko, které vás nasměruje ke čtení textu uvnitř.

Když přesunete kurzor myši nad tlačítko, tlačítko se znovu změní. Jakmile dokončíte přečtení informací o našich skvělých snímcích,

Získejte tento naprosto úžasný model

Šablona zobrazená v tomto kurzu je nyní k dispozici v knihovně Elementor. Můžete jej tedy používat jedním kliknutím.

Jak vytvořit stránku stylu stylu 80 s Elementorem