Przejdź do głównej treści

Jak stworzyć stronę stylu 80 z Elementorem

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Design lat 80 - uwielbiamy to! Wszystkie te geometryczne kształty, przestrzenne tła i efekty świetlne neonów sprawiają, że nasza strona docelowa na specjalne wydarzenie (przyjęcia świąteczne) nie może być bardziej promienna! Pokażmy sobie, 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 projektu 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 to przypominać dobre wspomnienia).

W rzeczywistości możesz to zobaczyć wszędzie. Z „Strangers Things” firmy Netflix, MineCraft lub Muse, która właśnie wydała album na gust 80 - a nawet remake Trona.

Dlaczego więc nie skorzystać z tego trendu i pokazać, jak wdrożyć go na stronie docelowej utworzonej za pomocą Elementora?

To nie tylko teoretyczny samouczek. Wzięliśmy pewne elementy z okresu Czarnego Piątku, aby dać ci narzędzia do przygotowania przyszłych wydarzeń.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Sekcja otwierania

Nasza sekcja początkowa to sekcja bohaterów. Pierwszą rzeczą do odnotowania tutaj jest tytuł. Zalecam włożenie dużego wysiłku w tę dziedzinę, ponieważ jest to pierwsza rzecz, którą zobaczy użytkownik.
Pomyśl o dokładnej wiadomości, którą zamierzasz przekazać. Szeroki i wyraźny tytuł przyciągnie uwagę ludzi. Ta pierwsza sekcja powinna również zachęcić użytkowników do przewijania w dół i przewijania pozostałej części strony.

Efekt neonu

Efekt neon czarny piątek elementor.jpg

W centrum kompozycji umieściłem logo, wiadomość i przycisk.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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

Musisz dodać widżet nagłówka, zmienić rozmiar 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:

selektor {tekstu cień: 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óży, po prostu zmień numer koloru po znaku funta. To wszystko.

Tytuł pionowy

Kolejny interesujący aspekt tego projektu pojawia się obok liter „FRI”, a rok dołączony do niego pojawia się pionowo (stopnie 90).

Aby uzyskać ten wygląd, musisz dodać wewnętrzny widget sekcji. Odbywa się to w celu wdrożenia efektu pionowego tylko w jednej kolumnie.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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

Nadaj styl tekstowi, a następnie otwórz kartę zaawansowaną drugiej kolumny (tej, którą chcesz obrócić), a następnie w niestandardowej karcie CSS napisz ten 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 komunikatem rozpocznij pracę w tle, aby nadać tekstowi nowy impuls i nadać 80 science fiction retro wygląd. Tutaj dodałem zdjęcie zaprojektowane w Photoshopie i wykorzystałem je jako tło bohatera.
W tym projekcie tło przedstawia geometryczną siatkę przypominającą Tron z odrobiną palm wygiętych w lewo i główny gradient niebiesko-fioletowo-różowy, aby uzyskać wrażenie retro. Istnieją również drobne poprawki, takie jak „DeLorean DMC-12” (prawdopodobnie rozpoznasz go w „Powrót do przyszłości”).
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

pole informacyjne elementor.gif
Projektując stronę docelową, musisz pomyśleć o relacjach między poszczególnymi sekcjami. To bardziej skomplikowane zadanie, jeśli chodzi o modny design, taki jak retro 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 aspekt „nieznanych obiektów” podczas „eksploracji” strony. Tutaj możesz zobaczyć tytuł, kulki 3 i przycisk. Aby stworzyć ten pływający efekt 3D, użyłem trochę Photoshopa w połączeniu z ustawieniami Flip-boxa firmy Elementor.

Wystawiony na Photoshopie

Pierwszą rzeczą, którą zrobiłem, było stworzenie całej sceny w Photoshopie, aby zobaczyć, jak będzie wyglądać, zanim zacznę ją budować. W tytule widać wcześniej wygląd neonów, a pod tym dodałem trójkąty 3 z ikonami i tytułem (kółka).
Do każdego trójkąta dodałem gradient niebiesko-fioletowo-różowy. Powyżej wzór linii nadaje telewizorowi wygląd z lat 80 i rozmycie z tyłu, aby stworzyć błyszczący wygląd science fiction.
Ikony otrzymują również wygląd neonu, a także tytuł na dole trójkąta. Dodaj pogrubiony efekt pływający. Tło ma dymny, mętny, ciemny efekt z takim samym wzorem linii, jak w przypadku trójkąta.
W przypadku animacji 3D trójkąty będą miały przezroczyste tło. Oznacza to, że tekst z tyłu pokaże się, gdy nie będzie objęty. Dodałem więc trochę czarnego dymu po bokach trójkąta, aby okładka się mieszała i zawsze zakrywała tył.
Zasadniczo istnieją trzy warstwy do zintegrowania z edytorem: tło, ikona i tytuł.

Twórz na żywo

W edytorze dodałem widżet flip-box. W zakładce treści wcześniej wybrałem obraz jako element graficzny i dodałem tytuł. Na karcie Tło w kolorze zmieniłem kolor na przezroczysty i dodałem trójkąt, który zaprojektowałem w sekcji obrazu, a następnie zmieniłem położenie, aby idealnie pasowało ,
Następnie na tylnej karcie zrobiłem to samo, ale zamiast dodać tytuł, dodałem tekst. Aby przejść do karty ustawień. Tutaj grałem z wysokością pudełka. Użyłem jednostki VH, ponieważ jest to jednostka względna, która zmieni obraz w stosunku do ekranu, z którego będzie korzystał gość.
To sprawia, że ​​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ć niesamowity efekt 3D.

CTA

Cała kompozycja jest skierowana na przycisk (ponieważ użytkownik chce kliknąć przycisk). Tutaj możesz zobaczyć, że przycisk nie jest odważny i „na twojej twarzy”, ale idealnie pasuje do zadymionego tła z lekkim blaskiem wokół. Ale kiedy go przekażesz, pojawi się różowy kolor.

Sekcja krytyków

lista recenzji elementor.jpg
Jeśli użytkownik przewinie do trzeciej sekcji - oznacza to, że robisz coś dobrze. Po rozmowie o produkcie i jego zdumieniu nadszedł czas, aby porozmawiać z inną stroną.

Projekt

W tej sekcji mamy widżet komentarza na radykalnym 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 nadać tej sekcji wygląd „za kulisami”, więc kiedy przewiniesz w dół, będziesz na nią narażony.

Sekcja cennika

price chart elementor.jpg
Ta sekcja jest sekcją Tabela cenowa , Tutaj możesz zobaczyć wszystkie elementy, które mogą wspierać sprzedaż. Tytuł, odliczanie i oczywiście wykres cen.
To jest meta strony docelowej. Dlatego jeśli użytkownik nie kliknie, coś nie działało.

Projekt

Projekt w tej sekcji ma więcej niż jeden kontakt z latami galaktyki 80. Tło tutaj zostało zmienione w Photoshopie, co nadaje mu jasny fioletowo-rzodkiewkowy wygląd i wyróżnia się na tle czarno-czarnego tła, które istniało wcześniej, co nadaje mu ostateczny charakter.
Pod nagłówkiem i hasłem znajduje się licznik wskazujący czas pozostały do ​​zakończenia sprzedaży. Tutaj użyłem czcionki spacy o nazwie „space mono”, którą dodałem za pomocą niestandardowej czcionki.
W poniższej tabeli cen każda tabela ma jasne czarne tło, dzięki czemu ma wygląd „unoszącego się w kosmosie”. Po najechaniu na nią tło ciemnieje, a wokół niego pojawia się poświata, która kieruje 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

Model przedstawiony w tym samouczku jest już dostępny w bibliotece Elementor. Możesz więc użyć go jednym kliknięciem.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
4 akcji
udział4
ćwierkanie
Enregistrer