Jak wyróżnić kategorie produktów w oszałamiającej sekcji bohaterów witryny Divi?

Jeśli jesteś zaznajomiony z witrynami e-commerce, z pewnością znasz również kategorie produktów. Kategorie produktów mogą być jednymi z najpotężniejszych stron w Twojej witrynie. Dlatego ważne jest, aby łatwo je znaleźć i wyróżnić w prosty i elegancki sposób. Dzięki wbudowanym opcjom Divi możesz pokierować swoim projektem w wielu kierunkach. W tym samouczku pokażemy, jak wyróżnić kategorie produktów w sekcji bohaterów. Stworzymy przykład projektu od podstaw i miejmy nadzieję, że zainspiruje Cię on również do wyróżnienia kategorii produktów w Twój własny, kreatywny sposób!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Tło gradientowe

Zacznij od dodania nowej sekcji do swojej strony. Otwórz ustawienia tej sekcji i dodaj do niej tło gradientowe.

• Kolor 1: #ffffff
• Kolor 2: #757f1e
• Typ gradientu: liniowy
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Rozstaw

Następnie przejdź do zakładki projektowania i dodaj do sekcji niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 130px
• Dolna wyściółka: 130px

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Kolor tła kolumny 1

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj kolor tła do pierwszej kolumny.

• Kolor tła kolumny 1: rgba (0,0,0,0.19)

Obraz tła kolumny 1

Dodaj obraz tła do pierwszej kolumny oraz tryb mieszania.

• Kolumna 1 Pozycja obrazu tła: Dolny środek
• Kolumna 1 Powtórzenie obrazu tła: Bez powtórzeń
• Mieszanie obrazu tła w kolumnie 1: Pomnóż

Kolor tła kolumny 2

Druga kolumna będzie potrzebować tylko białego koloru tła.

• Kolor tła kolumny 2: #ffffff

Rozmiary

Kontynuuj, przechodząc do karty projektu w ustawieniach wiersza i zmień ustawienia rozmiaru.

• Użyj niestandardowej szerokości: Tak
• Jednostka: PX
• Szerokość niestandardowa: 2000px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Usuń również wszystkie domyślne niestandardowe dopełnienie wiersza.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Cień Pudełka

I dodaj subtelny cień w pudełku.

• Siła rozmycia cieni w pudełku: 80px

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Czas zacząć dodawać moduły! Pierwszym modułem, który będziemy potrzebować w drugiej kolumnie, jest tytułowy moduł tekstowy. Dodaj wybrane treści.

Ustawienia tekstu nagłówka

Następnie przejdź do ustawień tekstu nagłówka i wprowadź zmiany.

• Grubość czcionki nagłówka: Ultra Bold
• Rozmiar tekstu nagłówka: 60px (komputer i tablet), 50px (telefon)
• Odstępy między literami nagłówka: -4px
• Wysokość linii nagłówka: 0,8 em

Rozstaw

Dodaj również niestandardowe wartości marginesów i dopełnienia.

• Górny margines: 17vw
• Lewa wyściółka: 2vw (komputer), 4vw (tablet), 5vw (telefon)

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Drugim i ostatnim modułem potrzebnym w drugiej kolumnie jest moduł rozdzielający. Upewnij się, że opcja Pokaż dzielnik jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie zmień kolor separatora.

• Kolor: #757f1e

Style

Zmodyfikuj również styl dzielnika w ustawieniach stylów.

• Styl dzielnika: podwójny

Rozmiary

I zwiększ wagę rozdzielacza w ustawieniach rozmiaru modułu.

• Waga dzielnika: 6px

Rozstaw

Na koniec dodaj niestandardowy górny i dolny margines do modułu dzielnika.

• Górny margines: 2vw
• Margines dolny: 15vw

Dodaj wiersz nr 2

Struktura kolumny

Do drugiego rzędu! Wybierz dla niego następującą strukturę kolumn:

Kolor tła kolumny 1

Otwórz ustawienia wiersza i dodaj kolor tła do pierwszej kolumny.

• Kolor tła kolumny 1: #212121

Rozmiary

Następnie przejdź do zakładki projektowania i pobaw się rozmiarem rzędu.

• Użyj niestandardowej szerokości: Tak
• Jednostka: PX
• Szerokość niestandardowa: 2000px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Usuń również wszystkie niestandardowe dopełnienie wiersza, dodając „0px” do górnego i dolnego dopełnienia.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Cień Pudełka

Na koniec nadaj rzędowi subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Dodaj jeden do pierwszej kolumny z wybraną zawartością.

Ustawienia tekstu

Kontynuuj, przechodząc do karty projektu i zmieniając ustawienia tekstu.

• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 18px (komputer), 15px (tablet), 12px (telefon)
• Wysokość linii tekstu: 1em
• Orientacja tekstu: w lewo
• Kolor tekstu: jasny

Ustawienia tekstu nagłówka

Zmodyfikuj również ustawienia tekstu nagłówka.

• Nagłówek 3 Kolor tekstu: #ffffff
• Rozmiar tekstu nagłówka 3: 25px (komputer), 20px (tablet), 18px (telefon)
• Nagłówek 3 Odstępy między literami: -1px

Rozstaw

Dodaj również niestandardowe wartości dopełnienia w ustawieniach odstępów.

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

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Kontynuuj, dodając kolejny moduł tekstowy do drugiej kolumny. Dodaj wybrane treści i połącz również stronę kategorii produktów w ustawieniach linków.

Domyślny kolor tła

Następnie przejdź do ustawień tła i dodaj kolor tła.

• Kolor tła: #eaeaea

Wskaż kolor tła

Zmień ten kolor tła po najechaniu myszą.

• Kolor tła: #ffbb00

Domyślne ustawienia tekstu

Zmień ustawienia tekstu na karcie projektu obok.

• Grubość czcionki tekstu: Ultra Bold
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #333333
• Rozmiar tekstu: 16px
• Odstępy między literami tekstu: -1px
• Orientacja tekstu: Środek

Ustawienia tekstu najechania kursorem

I zmodyfikuj te ustawienia po najechaniu myszą.

• Kolor tekstu: #ffffff
• Rozmiar tekstu: 20px

Domyślne odstępy

Stosujemy również niektóre domyślne wartości odstępów.

• Górna wyściółka: 45px
• Dolna wyściółka: 45px
• Lewa wyściółka: 5px
• Prawe wypełnienie: 5px

Odstępy najechania

Które zmienimy po najechaniu.

• Górny margines: -50px
• Lewy margines: -20px
• Górna wyściółka: 70px
• Dolna wyściółka: 70px
• Lewa wyściółka: 5px
• Prawe wypełnienie: 5px

Domyślny cień pudełka

Kontynuuj, otwierając ustawienia cienia pudełka i dodaj całkowicie przezroczysty cień pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (255,255,255,0)

Wskaż cień pola

Zmień całkowicie przezroczysty kolor cienia pola po najechaniu kursorem, aby się pojawił.

• Kolor cienia: rgba(0,0,0,0.34)

Klonuj moduł tekstowy nr 2 dwa razy i umieść w pozostałych kolumnach

Po zakończeniu modyfikowania modułu tekstowego w kolumnie 2 możesz sklonować moduł dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień pierwszy duplikat

Zmień zawartość

Otwórz pierwszy duplikat w trzeciej kolumnie i zmień treść oraz link kategorii produktu.

Zmień kolor tła

Zmień również kolor tła tego modułu.

• Kolor tła: #dddddd

Zmień drugi duplikat

Zmień zawartość

Zmień również zawartość drugiego duplikatu w kolumnie 4.

Zmień kolor tła

Wraz z kolorem tła.

• Kolor tła: #c6c6c6

Dodaj moduł obrazu dla mniejszych rozmiarów ekranu do kolumny 2 w wierszu nr 1

Załaduj obrazek

Na koniec dodamy również moduł obrazu do drugiej kolumny pierwszego wiersza, aby zoptymalizować wszystko pod kątem mniejszych rozmiarów ekranu.

Widoczność

Upewnij się, że ten moduł pojawia się tylko na mniejszych ekranach, ukrywając go na pulpicie w zakładce Zaawansowane modułu.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście odtworzyliśmy oszałamiający przykład projektu, który stawia główne kategorie produktów w Twojej witrynie w centrum uwagi. Mamy nadzieję, że ten samouczek zainspiruje Cię również do tworzenia własnych projektów. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!