Jak stworzyć przewijany katalog mody z Divi

W tym poście pokażemy Ci, jak stworzyć przewijany katalog mody. Korzystanie z tej metody pomoże Ci połączyć się z odbiorcami, tak jak byś wręczył im papierowy katalog. Tworzenie przewijanego katalogu mody online może pomóc w zwiększeniu wyników uzyskiwanych z katalogu. Umieszczając na przykład bezpośrednie linki do artykułów w sklepie, proces zakupu również zostanie usprawniony.

Wynik

Wynik, który pokażemy krok po kroku, wygląda tak na komputerze:

I tak na telefonie i tablecie:

Jak stworzyć przewijany katalog mody z Divi

Subskrybuj nasz kanał YouTube

Dodaj przezroczyste kształty do obrazów za pomocą Photoshopa

Pierwszą rzeczą, którą pokażemy, jest dodanie przezroczystej części do obrazu za pomocą Photoshopa. Istnieje darmowa alternatywa dla Photoshopa o nazwie GimpShop, ale w tej części samouczka będziemy używać tylko Photoshopa. Będziemy potrzebować dwóch obrazów o dwóch różnych kształtach; jeden na komputer stacjonarny i jeden na telefon komórkowy i tablet. W tej części po prostu pokażemy, jak dodać przezroczysty kształt do obrazu. Następnie możesz samodzielnie wykonać wszystkie potrzebne obrazy.

Otwórz Photoshopa

Zacznij od otwarcia Photoshopa na swoim komputerze.

Otwórz obraz

Następnie otwórz pierwszy obraz, który chcesz edytować. Metoda pozostaje taka sama dla wszystkich trzech obrazów, których będziesz używać w tym samouczku. Dlatego wyjaśnimy to tylko raz.

Kliknij dwukrotnie Obraz i utwórz warstwę

Po otwarciu obrazu, który chcesz edytować, kliknij go dwukrotnie i utwórz dla niego nową warstwę.

Dodaj kolejną warstwę

Kontynuuj, dodając kolejną pustą warstwę na wierzchu.

Wybierz warstwę 1 i narzędzie Lasso wielokątne

Wybierz warstwę 1 i zacznij używać narzędzia Lasso wielokątne.

Stwórz kształt

Mając aktywowane narzędzie Lasso wielokątne, śmiało utwórz przezroczysty kształt na swoim obrazie.

Spraw, aby warstwa 1 była niewidoczna i naciśnij klawisz Delete, mając wybraną warstwę 0

Po wybraniu obszaru, który ma stać się przezroczysty, ustaw warstwę 1 jako niewidoczną, ponownie wybierz warstwę 0 i naciśnij przycisk Usuń na klawiaturze.

Wybierz prostokątne narzędzie zaznaczania i kliknij gdzieś na obrazie

Gdy to zrobisz, wybierz narzędzie Rectangular Marquee Tool i kliknij gdzieś na obrazie.

Zapisz obraz jako PNG

Na koniec musisz zapisać obraz jako PNG i powtórzyć ten sam proces dla wszystkich czterech obrazów, których będziesz używać w całym układzie.

Ustawienia głównego paska menu

Ustawienia głównego paska menu, których potrzebujemy dla tworzonego układu, są następujące:

• Ukryj obraz logo: Włącz
• Wysokość menu: 30
• Rozmiar tekstu: 15
• Odstępy między literami: -1
• Czcionka: Lato
• Styl czcionki: pogrubienie i wielkie litery
• Kolor tekstu: #FFFFFF
• Kolor aktywnego łącza: #FFFFFF
• Kolor tła: rgba (255,255,255,0)
• Kolor tła menu rozwijanego: rgba (255,255,255,0)

Wprowadzenie do edycji

Po zmodyfikowaniu podstawowego paska menu możesz dodać nową stronę, użyć Divi Builder i przejść do Visual Builder.

Dodaj nową sekcję

Na tej stronie zacznij od dodania standardowej sekcji.

Kolor tła sekcji

Tłem tego koloru musi być „#d6d6d6”.

Niestandardowe wypełnienie

Przejdź do karty Projekt w tej sekcji. W podkategorii Odstępy dodaj „24px” do górnego dopełnienia i 0px do dolnego.

Dodaj wiersz jednokolumnowy

Gdy to zrobisz, możesz przejść dalej i dodać do sekcji wiersz z jedną kolumną.

Rozmiary

Przejdź do zakładki Projekt i zmodyfikuj podkategorię Sizing:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: 1

Niestandardowe wypełnienie

Przewiń w dół i dodaj „0px” do górnego wypełnienia wiersza.

Pierwszy moduł tekstowy

Gdy to zrobisz, możesz dodać moduł tekstowy do wiersza. Po wprowadzeniu tekstu, który ma się pojawić, przejdź do zakładki Projekt i upewnij się, że następujące zmiany dotyczą podkategorii Tekst:

• Czcionka tekstu: stary standardowy TT
• Styl czcionki: wielkie litery
• Rozmiar czcionki tekstu: 72 (komputer stacjonarny), 41 (tablet), 29 (telefon)
• Kolor tekstu: #000000
• Odstępy między literami tekstu: 11px
• Wysokość linii tekstu: 1em
• Orientacja tekstu: Środek

Otwórz podkategorię Odstępy i dodaj „30px” do górnego i dolnego dopełnienia.

Moduł rozdzielający

Tuż pod modułem tekstowym dodaj moduł dzielnika i włącz opcję „Pokaż dzielnik”.

Przejdź do zakładki Projekt i wybierz „#FFFFFF” jako kolor rozdzielacza.

Następnie wybierz „Solidny” jako styl dzielnika i „Góra” jako pozycję dzielnika w podkategorii Style.

Następnie otwórz podkategorię Rozmiar i wprowadź następujące ustawienia:

• Waga dzielnika: 10px
• Wysokość: 23px
• Szerokość: 100%
  

Drugi moduł tekstowy

Tuż pod modułem dzielnika dodaj kolejny moduł tekstowy. Wybierz dowolną ikonę z mapy znaków (Windows) lub palety znaków (Mac) i umieść ją w zakładce Zawartość. W tym przykładzie użyliśmy następującego symbolu: '↓'. Następnie przejdź do zakładki Projekt i wprowadź następujące ustawienia:

• Rozmiar czcionki tekstu: 42px
• Kolor tekstu: #000000
• Orientacja tekstu: Środek

Desktopowy katalog mody (nowa sekcja)

Teraz dodaj kolejną sekcję standardową. Ta sekcja będzie zawierać dwa wiersze, które będą wyświetlać inną część katalogu na komputerze.

Ustawienia sekcji

Kolor tła

Użyj „#FFFFFF” jako koloru tła tej sekcji.

Niestandardowe wypełnienie

Następnie przejdź do zakładki Projekt i dodaj „15px” do górnego dopełnienia.

Pierwszy rząd

Struktura kolumny

Po wprowadzeniu zmian w ustawieniu dodaj wiersz o następującej strukturze kolumn:

Kolor tła

Otwórz ustawienia wiersza i dodaj „rgba(255,255,255,0.14)” jako kolor tła.

Zdjęcie w tle

Dodaj jeden z obrazów, które stworzyłeś w części tego posta w Photoshopie i użyj „Hue” jako mieszania obrazu tła.

Rozmiary

Na koniec wprowadź następujące zmiany w podkategorii Rozmiar:

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

Pierwszy moduł tekstowy

Po zakończeniu ustawień wiersza dodaj moduł tekstowy do drugiej kolumny. Użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: gorzka
• Rozmiar czcionki tekstu: 63px
• Kolor tekstu: #000000
• Orientacja tekstu: Środek

Moduł rozdzielający

Tuż pod pierwszym modułem tekstowym dodaj moduł dzielnika i włącz opcję „Pokaż dzielnik”.

Przejdź do karty Projekt i użyj „#000000” jako koloru rozdzielacza.

W podkategorii Style użyj opcji „Solid” jako stylu dzielnika i „Góra” jako pozycji dzielnika.

Przewiń w dół tę samą kartę i wprowadź następujące ustawienia w podkategorii Rozmiar:

• Waga dzielnika: 3px
• Wysokość: 23px
• Szerokość: 57%
• Wyrównanie modułu: do lewej

Na koniec dodaj górny margines „30px” i dolny margines „50px”.

Drugi moduł tekstowy

Po umieszczeniu dzielnika dodaj drugi moduł tekstowy, który będzie zawierał tytuł. Przede wszystkim użyj „#000000” jako koloru tła w zakładce Treść.

Następnie przejdź do karty Projekt i wprowadź następujące ustawienia w podkategorii Tekst:

• Czcionka tekstu: gorzka
• Rozmiar czcionki tekstu: 92px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1em
• Orientacja tekstu: w lewo

Otwórz podkategorię Border i użyj następującego obramowania:

• Użyj obramowania: tak
• Kolor obramowania: #000000
• Szerokość obramowania: 3px
• Styl obramowania: Solidny

Ponadto użyj szerokości „77%” i lewego wyrównania modułu.

Na koniec dodaj „15px” do dopełnienia górnego, prawego, dolnego i lewego modułu tekstowego.

Trzeci moduł tekstowy

Dodaj kolejny moduł tekstowy tuż pod poprzednim. Ten będzie reprezentował opis. Przejdź do zakładki Projekt i użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 16px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1em
• Orientacja tekstu: w lewo

Otwórz podkategorię Sizing, użyj '70%' dla szerokości i wybierz lewe ustawienie modułu.

Na koniec dodaj górny margines „20px”.

Piąty moduł tekstowy

Piąty moduł tekstowy służy jako minimalistyczny przycisk. W zakładce Treść użyj symbolu „→” + tekst i umieść za nim link.

Następnie przejdź do zakładki Projekt. Użyj następujących ustawień dla podkategorii Tekst:

• Czcionka tekstu: gorzka
• Rozmiar czcionki tekstu: 23px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1em
• Orientacja tekstu: w lewo

Przewiń tę samą kartę, aż natkniesz się na podkategorię Rozmiar. W ramach tej podkategorii użyj szerokości „49%” i odpowiedniego wyrównania modułu.

Na koniec dodaj górny margines „80px”.

Szósty moduł tekstowy

Szósty i ostatni moduł, którego będziemy potrzebować, jest prawie taki sam jak poprzedni. Użyj '→' + tekst i umieść za nim link.

Ustawienia podkategorii Tekst są następujące:

• Czcionka tekstu: gorzka
• Rozmiar czcionki tekstu: 23px
• Kolor tekstu: #e02b20
• Wysokość linii tekstu: 1em
• Orientacja tekstu: w lewo

Zmień szerokość na „39%” i użyj również odpowiedniego wyrównania modułu.

Drugi rząd

Kolor tła

Otwórz ustawienia wiersza i dodaj „rgba(255,255,255,0.14)” jako kolor tła.

Zdjęcie w tle

Dodaj jeden z obrazów, które stworzyłeś w części tego posta w Photoshopie i użyj „Hue” jako mieszania obrazu tła.

Struktura kolumny

Drugi wiersz, który musisz dodać do standardowej sekcji, jest przeciwieństwem poprzedniego.

Moduły klonowania

Moduły, których użyliśmy w poprzednim wierszu, są tymi samymi, których potrzebujemy w tym wierszu, więc śmiało, sklonuj je i umieść w pierwszej kolumnie zamiast w drugiej. W następnej części tego posta będziemy musieli wprowadzić pewne zmiany w wyrównaniu.

Pierwsze modyfikacje modułu tekstowego

Otwórz pierwszy moduł tekstowy i dodaj górny margines „20px”.

Modyfikacje modułu rozdzielacza

Następnie otwórz moduł rozdzielacza i zmień ustawienie modułu w podkategorii wymiarowania na prawo.

Modyfikacje drugiego modułu tekstowego

Ustaw Orientację tekstu drugiego modułu tekstowego na prawo.

Wybierz również odpowiednie ustawienie modułu w podkategorii Rozmiar.

Modyfikacje trzeciego modułu tekstowego

Trzeci moduł tekstowy również będzie wymagał właściwej orientacji tekstu.

Oraz właściwe wyrównanie modułów.

Piąte modyfikacje modułu tekstowego

Jedyną rzeczą, którą musisz zrobić dla piątego modułu tekstowego, jest zmiana szerokości na „82%”.

Modyfikacje szóstego modułu tekstowego

To samo dotyczy szóstego modułu tekstowego, ale zamiast tego użyj „87%”.

Ukryj sekcję dla tabletu i telefonu

Po ukończeniu dwóch rzędów możesz wyłączyć całą sekcję na telefonie i tablecie.

Katalog tabletów i telefonów (nowa sekcja)

Aby wszystko wyglądało świetnie również na tablecie i telefonie, stworzymy nową sekcję standardową.

Ustawienia sekcji

Kolor tła

Dodaj „#FFFFFF” jako kolor tła tej sekcji.

Niestandardowe wypełnienie

Przejdź do zakładki Projekt i dodaj górną wyściółkę „15px”.

Pierwszy rząd

Struktura kolumny

Następnie dodaj do sekcji dwukolumnowy wiersz.

Rozmiary

Przejdź do podkategorii Rozmiar tego wiersza i wprowadź następujące zmiany:

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

Moduł obrazu

Zamiast używać obrazu tła, zamiast tego użyjemy modułu obrazu. W ten sposób będziemy mieć pewność, że tekst i obraz nie będą się na siebie nakładać. Śmiało i dodaj moduł obrazu do pierwszej kolumny wiersza i prześlij obraz.

Klonuj moduły pierwszego rzędu w wersji na komputery

Następnie sklonuj wszystkie moduły, których użyłeś w pierwszym wierszu wersji na komputery i umieść je w drugiej kolumnie.

Zmień rozmiar czcionki drugiego modułu tekstowego

Jest tylko jedna rzecz, którą należy zmienić; rozmiar czcionki drugiego modułu tekstowego. Zmień to na 65px.

Drugi rząd

Struktura kolumny

Następnie przejdź dalej i dodaj kolejny dwukolumnowy wiersz do sekcji.

Rozmiary

Ten wiersz również będzie wymagał zmodyfikowanej podkategorii Sizing:

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

Moduł obrazu

Dodaj moduł obrazu również do pierwszej kolumny i prześlij obraz.

Klonuj moduły drugiego rzędu w wersji na komputery stacjonarne

Następnie sklonuj moduły umieszczone w drugim rzędzie wersji na komputery. Po sklonowaniu umieść je w drugiej kolumnie tego rzędu.

Zmień rozmiar czcionki drugiego modułu tekstowego

Należy również zmienić rozmiar tekstu drugiego modułu tekstowego. Śmiało i nadaj mu rozmiar czcionki „65px”.

Ukryj sekcję na pulpicie

Po ukończeniu obu wierszy możesz wyłączyć całą sekcję na komputerze.

Wynik

Et voila, po wykonaniu wszystkich kroków w tym poście, powinieneś osiągnąć następujący wynik na pulpicie:

Oraz na telefonie i tablecie:

Końcowe przemyślenia

W tym poście pokazaliśmy Ci, jak stworzyć ładny, przewijany katalog mody. Aby nasz projekt działał, najpierw pokazaliśmy, jak zrobić przezroczysty kształt na obrazie za pomocą Photoshopa. Następnie wykorzystaliśmy te obrazy w naszym samouczku Divi, aby stworzyć projekt. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecany obraz autorstwa Rvector / shutterstock.com