Jak stworzyć stronę stylu 80 z Elementorem

Design z lat 80 - kochamy to! Dzięki tym wszystkim geometrycznym kształtom, przestrzennym tłom i efektom światła neonowego, nasza strona docelowa na specjalne wydarzenie (przyjęcia świąteczne) nie może być bardziej promienna! Pokażmy, jak to zrobić.

Zdejmij pałąki, włącz neony i włóż Tron do magnetowidu ... lata 80 powróciły!

Jako projektant zawsze miałem słabość do projektowania z lat 80., o którym nikt nie mówi. Z tymi wszystkimi geometrycznymi kształtami, mnóstwem wzorów, przestrzennym tłem z tymi tanimi neonowymi efektami (powinno przywołać miłe wspomnienia).

W rzeczywistości możesz to zobaczyć wszędzie. Z „Strangers Things” Netflix, MineCraft czy Muse, który właśnie wydał album w klimacie lat 80-tych - a nawet remake Tron.

Dlaczego więc nie wykorzystać tego trendu i pokazać, jak go zaimplementować na landing page stworzonym za pomocą Elementor ?

To nie jest tylko samouczek teoretyczny. Wzięliśmy kilka elementów z bieżącego okresu rabatowego (Czarny piątek), aby zapewnić narzędzia do przygotowania się na przyszłe wydarzenia.

Sekcja otwierająca

Nasza sekcja otwierająca jest sekcją bohaterów. Pierwszą rzeczą, na którą należy zwrócić uwagę, jest tytuł. Radzę włożyć wiele wysiłku w tę dziedzinę, ponieważ jest to najważniejsza rzecz, jaką robisz gość zobaczymy.

Pomyśl o dokładnej wiadomości, którą zamierzasz przekazać. Duży i wyraźny tytuł przyciągnie uwagę ludzi. Ta pierwsza sekcja powinna również zachęcić użytkowników do przewijania w dół i przeglądania pozostałej części strony.

Efekt neonu

W centrum kompozycji umieściłem logo, komunikat oraz guzik.

Widać, że najważniejsza wiadomość jest zapisana w „neonie”. Aby uzyskać ten neonowy wygląd, musisz dodać CSS do swojego projektu. CSS doda dużo różowego cienia do tekstu. To wszystko.

Musisz więc dodać widżet nagłówka, zmienić rozmiar wybranej czcionki, aby świeciła i ustawić kolor na biały.

Następnie otwórz kartę Zaawansowane i wklej ją do niestandardowej karty CSS, dodaj ten kod:

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; }

Jeśli chcesz użyć innego odcienia obok różu, po prostu zmień numer koloru po znaku funta. To wszystko.

Tytuł pionowy

Kolejny interesujący aspekt tego projektu pojawia się obok liter „FRI”, z dołączonym rokiem, który pojawia się pionowo (90 stopni).

Aby uzyskać taki wygląd, musisz dodać widżet sekcji wewnętrznej. Ma to na celu zaimplementowanie efektu pionowego tylko na jednej kolumnie.

Po dodaniu sekcji wewnętrznej dodaj widżet tytułu do każdej kolumny.

Stylizuj tekst, a następnie otwórz zaawansowaną kartę drugiej kolumny (tej, którą chcesz obrócić) i na niestandardowej karcie CSS napisz następujący kod:

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

Tło retro 80

Po zakończeniu pracy nad głównym postem zacznij pracować w tle, aby nadać tekstowi impuls i sprawić, by science-fiction retro z lat 80-tych stała się rzeczywistością. Tutaj dodałem obraz zaprojektowany w Photoshopie i użyłem go jako tła bohatera.

W tym projekcie tło ma geometryczną siatkę przypominającą Tron z odrobiną palm pochylonych w lewo i głównym gradientem niebiesko-fioletowo-różowym, aby uzyskać efekt retro. Jest też kilka fajnych akcentów, takich jak „DeLorean DMC-12” (prawdopodobnie rozpoznasz go w Back to the Future).

Samochód, a także spadające gwiazdy, wszystkie celują w główny tekst naszej sekcji, podkreślając nasze główne przesłanie.

Sekcja Funkcje

Projektując stronę docelową, musisz pomyśleć o relacjach między każdą sekcją. Jest to bardziej skomplikowane zadanie, jeśli chodzi o modne wzornictwo, takie jak retro lata 80.

Po zaprojektowaniu niesamowitej pierwszej sekcji i podniesieniu poprzeczki musisz utrzymać wysoki poziom i zachować ten sam motyw projektu, jednocześnie rozważając każdą sekcję jako kompozycję samą w sobie.

Projekt

W tej sekcji zaprojektowałem ciemniejszy wygląd „nieznanych obiektów” podczas „indeksowania” strony. Tutaj możesz zobaczyć tytuł, 3 kule i przycisk. Aby stworzyć ten pływający efekt 3D, użyłem trochę Photoshopa w połączeniu z ustawieniami Flip-box zElementor.

Wystawiony na Photoshopie

Więc pierwszą rzeczą, którą zrobiłem, było stworzenie całej sceny w Photoshopie, aby zobaczyć, jak wszystko będzie wyglądać, zanim zacznę ją budować. W tytule widać wygląd neonów sprzed lat, a pod nim dodałem 3 trójkąty z ikonami i tytułem (kółka).

Dodałem gradient niebiesko-fioletowo-różowy do każdego trójkąta. Powyżej wzór linii nadaje mu wygląd telewizora z lat 80. i rozmycie z tyłu, aby stworzyć lśniący wygląd science fiction.

Ikony mają również wygląd neonowy, a także tytuł na dole trójkąta. Dodaj efekt unoszenia się pogrubioną czcionką. Tło ma efekt zadymienia, zachmurzenia i ciemności z tym samym wzorem linii, co trójkąt.

W przypadku animacji 3D trójkąty będą miały przezroczyste tło. Oznacza to, że tekst z tyłu będzie wyświetlany, gdy nie jest zakryty. Więc dodałem trochę czarnego dymu po bokach trójkąta, aby koc się wtopił i nadal zakrywał tył.

Zasadniczo istnieją trzy warstwy do wbudowania w edytorze: tło, ikona i tytuł.

Twórz na żywo

W edytorze dodałem widget typu flip-box. Na karcie treści z przodu wybrałem obraz jako element graficzny i dodałem tytuł. W zakładce Background, w Color, zmieniłem kolor na przezroczysty i dodałem trójkąt, który zaprojektowałem w sekcji obrazka, a następnie zmieniłem położenie tak, aby pasował idealnie .

Następnie w tylnej zakładce zrobiłem to samo, ale zamiast dodać tytuł, dodałem tekst. Aby przejść do zakładki ustawień. Tutaj bawiłem się wysokością pudełka. Użyłem jednostki VH, ponieważ jest to jednostka względna, która zmieni obraz względem ekranu jako gość będzie użyty.

Dzięki temu jest bardziej responsywny. W części z efektami zachowałem efekt Flip, zmieniłem kierunek w lewo i aktywowałem głębię 3D, aby uzyskać ten niesamowity efekt 3D.

CTA

Cała tutaj kompozycja jest skierowana na przycisk (ponieważ chcesz, aby użytkownik kliknął przycisk). Tutaj widać, że przycisk nie jest pogrubiony i „przykuwa twarz”, ale ładnie komponuje się z zadymionym tłem z niewielką poświatą wokół niego. Ale kiedy po nim przejdziesz, pojawi się różowy kolor.

Sekcja krytyków

Jeśli użytkownik przewinie do trzeciej sekcji - oznacza to, że robisz coś dobrze. Tak więc, po rozmowie o produkcie i jego zdumieniu, przyszedł czas na zabranie głosu przez inną stronę.

Projekt

W tej sekcji mamy widżet komentarzy na radykalnie geometrycznym tle z neonowym tytułem. Tło zostało zaprojektowane w Photoshopie, a następnie umieszczone w tle sekcji jako stałe tło, aby stworzyć efekt przewijania.

Chciałem, aby ta sekcja wyglądała „za kulisami”, aby podczas przewijania w dół byłeś na nią narażony.

Sekcja cennika

Ta sekcja jest sekcją Tabela cenowa . Tutaj możesz zobaczyć wszystkie przedmioty, które mogą wspierać sprzedaż. Tytuł, odliczanie i oczywiście - cennik.

To jest meta strony docelowej. Dlatego jeśli użytkownik nie kliknie, coś poszło nie tak.

Projekt

Projekt w tej sekcji ma więcej niż jeden skontaktuj się 80s-galaktyka. Tło tutaj zostało edytowane w Photoshopie, nadając mu jasny purpurowy wygląd i wyróżniające się z czarno-czarnego tła, które istniało przed ostatecznym uderzeniem.

Pod nagłówkiem i hasłem znajduje się licznik pokazujący czas pozostały do zakończenia wyprzedaży. Tutaj użyłem spacy font o nazwie „space mono”, który dodałem za pomocą opcji niestandardowej czcionki.

W poniższej tabeli cen każda tabela ma jasnoczarne tło, co nadaje jej wygląd „unoszący się w przestrzeni”. Gdy najedziesz na niego kursorem, tło ciemnieje, a wokół pojawia się poświata jako centralny punkt, który kieruje cię do czytania tekstu w środku.

Po przesunięciu kursora myszy nad przycisk, przycisk zmienia kolor ponownie. Po przeczytaniu informacji o naszych wspaniałych ujęciach,

Zdobądź ten całkowicie niesamowity model

Szablon pokazany w tym samouczku jest teraz dostępny w bibliotece Elementor. Dzięki temu możesz z niego skorzystać jednym kliknięciem.

Jak stworzyć stronę stylu 80 z Elementorem