Jedną z wyjątkowych stron docelowych, które udostępniamy jako dożywotni członkowie i nowi klienci w Czarny piątek w tym roku, jest oszałamiająca strona docelowa UI Kit. Ten układ zawiera jedne z najlepszych wbudowanych kombinacji projektowych Divi i wysokiej jakości makiety, które przeniosą Twoją witrynę na wyższy poziom. W tym poście pokażemy Ci, jak go zdobyć i efektywnie go wykorzystać.

Jeśli jesteś obecnym klientem Lifetime lub jeśli kupiłeś nowe konto lub uaktualniłeś podczas naszej wyprzedaży w Czarny piątek, możesz pobrać ten układ już teraz.

Zdobądź ekskluzywną stronę docelową zestawu interfejsu użytkownika na Czarny piątek

Zanim przejdziesz do tego przypadku użycia, musisz położyć ręce na ekskluzywnej stronie docelowej zestawu interfejsu użytkownika w Czarny piątek, którą możesz zdobyć, zostając nowym członkiem Elegant Themes, ulepszając swoje istniejące konto lub będąc już u nas dożywotnim członkiem. Jeśli rzeczywiście jesteś już dożywotnim członkiem, możesz zalogować się do naszej strefy członkowskiej i pobrać wszystkie nasze ekskluzywne strony docelowe tutaj. Wszyscy inni będą musieli użyć poniższego przycisku, aby kupić lub uaktualnić, zanim będą mogli śledzić resztę naszego samouczka.

Odbierz ofertę, zanim zniknie!

Korzystanie ze struktur kolumn Divi, aby pięknie wyświetlać produkty i funkcje

W dalszej części tego posta założymy, że albo skorzystałeś z naszej oferty w Czarny piątek, albo że jesteś już dożywotnim członkiem i masz dostęp do strony docelowej zestawu interfejsu użytkownika w Czarny piątek.

Po pobraniu nowej strony docelowej UI Kit z naszego obszaru członków, możesz obejrzeć poniższy film, aby zobaczyć, jak łatwo jest skonfigurować. Zachęcamy również do śledzenia tego samouczka, aby przygotować witrynę do dalszego dostosowywania.

W tym poście przypadku użycia pokażemy, jak oszałamiająco wypisać swoje funkcje i/lub produkty przy użyciu nowych struktur kolumn Divi. Projekt, którym się zajmiemy, wygląda świetnie z Landing Page UI Kit i pozwala wykorzystać przestrzeń na Twojej stronie w efektywny i piękny sposób.

Zapowiedź

Przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

Najechanie i animacja

Dodamy również kilka subtelnych ustawień najechania kursorem i animacji do różnych elementów projektu. Da to następującą interakcję:

Zacznijmy!

Dodaj nową stronę za pomocą strony docelowej zestawu UI

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę za pomocą strony docelowej UI Kit, którą pobrałeś i przesłałeś. Jeśli nie jesteś pewien, jak to zrobić, sprawdź film z poprzedniej części tego posta, który poprowadzi Cię tam krok po kroku.

Znajdź sekcję funkcji na stronie

Po przesłaniu układu przewiń w dół, aż natkniesz się na sekcję funkcji na stronie.

Usuń istniejące wiersze

Usuń ostatnie dwa wiersze, które możesz znaleźć w tej sekcji. Zastąpimy zawartość tych wierszy naszą listą funkcji/produktów.

Dodaj nowy wiersz poniżej wiersza zawierającego wiersz

Struktura kolumny

Dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w zakładce projektu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: Tak
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Aby upewnić się, że ten projekt wygląda dobrze na wszystkich rozmiarach ekranu, użyjemy różnych niestandardowych wartości marginesów i dopełnienia:

• Górny margines: 100px
• Margines dolny: 100px
• Górna wyściółka: 87px
• Kolumna 1: Dopełnienie górne: 100px (komputer), 0px (tablet i telefon)
• Kolumna 2 Górna wyściółka: 100px (komputer), 0px (tablet i telefon)
• Kolumna 3 Górna wyściółka: 100px (komputer stacjonarny). 0px (tablet i telefon)
• Kolumna 3 Dolna wyściółka: 50px (tablet i telefon)
• Kolumna 4 lewe wypełnienie: 10px (tylko telefon)
• Kolumna 4 prawa dopełnienie: 10px
• Kolumna 5 lewe wypełnienie: 5px (komputer i tablet), 10px (telefon)
• Kolumna 5 po prawej stronie: 5px (komputer i tablet), 10px (telefon)
• Kolumna 6 Lewa wyściółka: 10px
• Kolumna 6 lewe wypełnienie: 10px (tylko telefon)

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj moduł tekstowy do pierwszej kolumny z liczbą.

Domyślny kolor tła

Dodaj kolor tła do tego modułu.

• Kolor tła: #0f0f0f

Wskaż kolor tła

I zmień kolor tła po najechaniu myszą.

• Kolor tła: #ff5400

Zdjęcie w tle

Możesz także dodać do tła jeden z obrazów ikon, które możesz znaleźć w Bibliotece multimediów:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń

Domyślne ustawienia tekstu

Kontynuuj, modyfikując ustawienia tekstu.

• Czcionka tekstu: Muli
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 80px (komputer i telefon), 40px (telefon)
• Wysokość linii tekstu: 1em

• Kolor cienia tekstu: ##ffffff
• Orientacja tekstu: w lewo

Domyślne odstępy

Dodaj niestandardowe wypełnienie, aby utworzyć kwadrat.

• Górna wyściółka: 200px
• Lewa wyściółka: 50px (tylko telefon)
• Prawe wypełnienie: 50px (tylko telefon)

Odstępy najechania

Zmodyfikuj ustawienia odstępów po najechaniu kursorem.

• Lewa wyściółka: 100px

Granica

Aby dopasować stronę docelową zestawu UI, dodaliśmy również delikatnie zaokrąglone rogi. Dodaj „20px” do każdego z rogów.

Cień Pudełka

Użyj następującego cienia pola, aby dodać trochę koloru do modułu:

• Pozycja pozioma cienia pudełka: 20px
• Pozycja pionowa cienia pudełka: -50px
• Siła rozprzestrzeniania się cieni w pudełku: 17px
• Kolor cienia: #593aff

Animacja

Na koniec dodaj bardzo subtelną animację slajdów do modułu tekstowego.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Intensywność animacji: 3%

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Następnym modułem, którego będziemy potrzebować, jest moduł rozdzielający. Śmiało i dodaj jeden do drugiej kolumny. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie zmień kolor separatora.

• Kolor: #ffffff

Rozstaw

Aby nałożyć moduł tekstowy w pierwszej kolumnie, użyjemy pewnych niestandardowych wartości marginesów, które dostosujemy zgodnie z różnymi rozmiarami ekranu.

• Górny margines: 30px
• Lewy margines: -200px (komputer i tablet), 0px (telefon)
• Prawy margines: 200px (komputer i tablet), 0px (telefon)

Dodaj moduł tekstowy #1 do kolumny 3

Dodaj zawartość

Do następnej kolumny! Tutaj pierwszym modułem, którego będziemy potrzebować, jest tytułowy moduł tekstowy. Śmiało i dodaj tytuł swojej pierwszej funkcji lub produktu.

Ustawienia tekstu nagłówka

Następnie przejdź do ustawień tekstu nagłówka i wprowadź zmiany, aby dopasować pakiet układu UI Kit.

• Czcionka nagłówka 3: Muli
• Grubość czcionki nagłówka 3: Lekka
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 30px (komputer i tablet), 18px (telefon)

Rozstaw

Aby przesunąć ten moduł w lewo, użyjemy niestandardowych wartości odstępów.

• Górny margines: 20px
• Margines dolny: 20px
• Lewy margines: -180px (komputer i tablet), 0px (telefon)
• Lewa wyściółka: 20px (komputer stacjonarny i tablet), 50px (telefon)
• Prawe dopełnienie: 20px (komputer i tablet), 50px (telefon)

Dodaj moduł tekstowy nr 2 do kolumny 3

Dodaj zawartość

Następnym modułem, którego będziemy potrzebować, jest opis Moduł tekstowy. Śmiało i wprowadź opis swojej funkcji lub produktu.

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Kolor tekstu: rgba (255,255,255,0,5)
• Wysokość linii tekstu: 2,2 em

Rozstaw

Przesuń ten moduł również w lewo, używając niestandardowych wartości odstępów.

• Lewy margines: -180px (komputer i tablet), 0px (telefon)
• Lewa wyściółka: 20px (komputer stacjonarny i tablet), 50px (telefon)
• Prawe dopełnienie: 20px (komputer i tablet), 50px (telefon)

Moduł przycisku klonowania i umieszczania w kolumnie 3

Ostatnim modułem, którego będziemy potrzebować w kolumnie 3, jest moduł przycisku. Aby zaoszczędzić czas, sklonujemy istniejący przycisk na stronie i umieścimy duplikat tuż pod pozostałymi dwoma dodanymi modułami.

Zmień zawartość

Zmień zawartość modułu przycisków.

Zmień odstępy

Ten moduł również przesuwamy w lewo. Jak widać, wszystkie moduły w kolumnie 3 zajmują przestrzeń dwóch kolumn. Takie podejście pozwala nam stworzyć kolejną strukturę kolumn, która pasuje do pożądanego wyniku.

• Górny margines: 50px
• Lewy margines: -160px (komputer i tablet), 50px (telefon)
• Prawy margines: 50px (tylko telefon)

Dodaj moduł obrazu do kolumny 4

Załaduj obrazek

Do następnej kolumny! Dodaj moduł obrazu do kolumny 4 i prześlij wybrany obraz. W tym przykładzie użyliśmy obrazów o wymiarach 500 × 500, ale możesz też pobawić się innymi rozmiarami obrazów.

Cień Pudełka

Dodaj subtelny cień do tego modułu.

• Kolor cienia: #ffffff

Animacja

A na dodatek dodaj animację slajdu do obrazu.

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Opóźnienie animacji: 100 ms
• Intensywność animacji: 3%

Dodaj moduł tekstowy nr 1 do kolumny 4

Dodaj zawartość

Tuż pod modułem obrazu, dodaj tytułowy moduł tekstowy z wybraną zawartością.

Domyślny kolor tła

Zmień kolor tła tego modułu.

• Kolor tła: #0f0f0f

Wskaż kolor tła

I użyj innego koloru tła po najechaniu myszą.

• Kolor tła: #593aff

Ustawienia tekstu nagłówka

Kontynuuj, zmieniając ustawienia tekstu nagłówka, aby pasowały do ​​strony docelowej zestawu UI.

• Czcionka nagłówka 4: Muli
• Grubość czcionki nagłówka 4: Lekka
• Kolor tekstu nagłówka 4: #ffffff
• Rozmiar tekstu nagłówka 4: 23px (komputer i tablet), 18px (telefon)

Domyślne odstępy

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górna wyściółka: 50px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Odstępy najechania

I zmień te wartości po najechaniu kursorem, aby stworzyć ładne przejście.

• Margines dolny: 50px
• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Dodaj moduł tekstowy nr 2 do kolumny 4

Dodaj zawartość

Drugim i ostatnim modułem, którego będziemy potrzebować w kolumnie 4, jest opis Moduł tekstowy. Wprowadź dowolną treść.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #0f0f0f

Ustawienia tekstu

I zmodyfikuj ustawienia tekstu.

• Kolor tekstu: rgba (255,255,255,0,5)
• Wysokość linii tekstu: 2,2 em

Rozstaw

Aby stworzyć przejrzysty wygląd i styl, dodaj do tego modułu niestandardowe wypełnienie.

• Dolna wyściółka: 50px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Granica

Na koniec dodaj „20px” w dwóch dolnych rogach modułu.

Sklonuj wszystkie moduły w kolumnie 4 dwukrotnie i umieść w pozostałych kolumnach

Zmień obraz i treść

Teraz, gdy masz już wszystkie potrzebne moduły w kolumnie 4, możesz sklonować wszystkie te moduły dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach. Zmień treść i obrazy, aby urozmaicić.

Klonuj wiersz tyle razy, ile chcesz (według liczby elementów listy)

Zakończyliśmy naszą pierwszą pozycję na liście! Teraz możesz śmiało sklonować ten wiersz tyle razy, ile chcesz, w zależności od liczby funkcji i/lub produktów, które chcesz zaprezentować.

Zmień zawartość klonu

W przypadku każdego z duplikatów musisz zmienić zawartość.

Znajdź i zamień kolor

Możesz także użyć funkcji Znajdź i zamień Divi, aby szybko zmienić paletę kolorów elementu listy.

Zmień kolor tła po najechaniu kursorem

Upewnij się, że gdy zmienisz paletę kolorów, zmienisz również kolor tła w module tekstowym numeru.

• Kolor tła: #593aff

Zmień obraz tła

Wreszcie, co nie mniej ważne, możesz również wybrać inną ikonę z listy w zależności od funkcji i/lub produktu, na który zezwalasz.

Końcowe przemyślenia

Ten przypadek użycia jest częścią naszej oferty z okazji Czarnego Piątku, w ramach której udostępniamy 6 DARMOWYCH stron docelowych z limitowanej edycji klientom z okazji Czarnego Piątku i dożywotnim członkom. Dołączając do naszej wzmocnionej społeczności w tych dniach i stając się członkiem, zyskasz:

• 25% ZNIŻKI NA WSZYSTKO
• Wszystkie 6 stron docelowych za darmo
• Dostęp do naszych niesamowitych motywów i wtyczek
• Nagrody bonusowe

Skorzystaj z okazji i zostań członkiem już dziś!