[vc_row content_placement="middle" css=".vc_custom_1508940533685{kolor tła: #f8f6f6 !ważne;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{pxbottom: 0 !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi: najłatwiejszy w użyciu motyw WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="zielony" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] POBIERZ [/vcex_button][/ kolumna_vc][/wiersz_vc]

Divi: Najlepszy motyw WordPress wszechczasów!

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

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 skorzystać z tego trendu i pokazać, jak zaimplementować go na landing page'u zbudowanym w Elementorze?

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.

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

Elementor pozwala tworzyć Łatwo i za darmo dowolny projekt strony internetowej lub bloga o profesjonalnym wyglądzie. Przestań płacić dużo za stronę internetową, którą możesz zrobić sam.

Sekcja otwierająca

Nasza sekcja początkowa to sekcja bohaterów. Pierwszą rzeczą, na którą należy zwrócić uwagę, jest tytuł. Polecam włożyć dużo wysiłku w ten obszar, ponieważ jest to pierwsza rzecz, którą zobaczy Twój gość.
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

Efekt neon czarny piątek elementor.jpg

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

Chcesz sprzedawać swoje produkty w Internecie?

Pobierz bezpłatnie WooCommerce, najlepsze wtyczki e-commerce, aby sprzedawać swoje fizyczne i cyfrowe produkty na WordPress i łatwo tworzyć swój sklep internetowy. Idealny dla początkujących.

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

pole informacyjne elementor.gif
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 „eksploracji” strony. Tutaj możesz zobaczyć tytuł, 3 punktory i przycisk. Aby stworzyć ten pływający efekt 3D, użyłem trochę programu Photoshop w połączeniu z ustawieniami Flip-box firmy Elementor.

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 w stosunku do ekranu, z którego będzie korzystał gość.
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

lista recenzji elementor.jpg
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

price chart elementor.jpg
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 jest bardziej przypominający galaktykę lat 80. Tło tutaj zostało zmienione w Photoshopie, dzięki czemu wygląda na lśniąco fioletową rzodkiewkę i wyróżnia się z czarno-czarnego tła, które istniało wcześniej, nadając mu cios na końcu.
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

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

2 akcji
udział2
ćwierkanie
Enregistrer