Jak stworzyć makieta galerii przewijania za pomocą nowych opcji przepełnienia Divi

Szukasz kreatywnego sposobu na wyświetlanie obrazów w swojej witrynie? Pamiętaj, aby czytać dalej, ponieważ w tym poście pokażemy, jak stworzyć makietę galerii przewijania, korzystając tylko z wbudowanych opcji Divi. Konkretnie, zamierzamy zmienić sekcję w makietę i sprawić, że wszystkie wiersze w sekcji będą częścią makiety. Gdy zdobędziesz tę technikę, będziesz w stanie zaprezentować dowolny rodzaj treści w makiecie mobilnej i błyskawicznie dodać interakcję do swoich stron.

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Pobierz projekt makiety galerii przewijania ZA DARMO

Aby położyć ręce na projekcie makiety galerii z bezpłatnym przewijaniem, najpierw musisz ją pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Rozmiary

Zacznij od utworzenia nowej strony lub otwarcia istniejącej i dodania do niej zwykłej sekcji. Otwórz ustawienia przekroju i zmodyfikuj szerokość i maksymalną szerokość w ustawieniach rozmiaru.

• Szerokość: 25vw (komputer stacjonarny), 60vw (tablet), 80vw (telefon)
• Maksymalna szerokość: 25vw (komputer stacjonarny), 60vw (tablet), 80vw (telefon)

Rozstaw

Następnie przejdź do ustawień odstępów, usuń wszystkie domyślne górne i dolne dopełnienie i dodaj górny i dolny margines, aby utworzyć miejsce.

• Górny margines: 9vw
• Dół: 9vw
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Granica

Kontynuuj, przechodząc do ustawień obramowania sekcji i utwórz kształt mobilnej makiety, dodając „30px” do każdego z rogów.

Cień Pudełka

Dodaj subtelny cień w kształcie pudełka, aby kształt mógł się przebić.

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

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #ffffff

Rozmiary

Następnie przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń domyślną górną i dolną wyściółkę.

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

Cień Pudełka

I dodaj również cień do pudełka.

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

Indeks Z

Na koniec upewnimy się, że wiersz (a zwłaszcza jego cień pudełka) nachodzi na następny wiersz, zwiększając indeks Z w ustawieniach widoczności.

• Indeks Z: 99

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Jedyny moduł, którego potrzebujemy w tym wierszu, to moduł tekstowy z pewną zawartością H2.

Ustawienia tekstu H2

Po dodaniu kopii H2 przejdź do ustawień tekstu H2 i dokonaj zmian.

• Czcionka nagłówka 2: Abril Fatface
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 1.5vw (komputer), 3.5vw (tablet), 5vw (telefon)

Rozstaw

Następnie dodaj niestandardowy górny i dolny margines.

• Górny margines: 1,5vw (komputer stacjonarny i tablet), 3,5vw (telefon)
• Margines dolny: 1,5vw (komputer stacjonarny i tablet), 3,5vw (telefon)

Dodaj wiersz nr 2

Struktura kolumny

Do drugiego rzędu! Tutaj używamy następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość sekcji. W kolejnych krokach modyfikujemy również wysokość i maksymalną wysokość, aby uzyskać efekt przewijania w pionie.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wysokość: 38vw (komputer), 100vw (tablet), 120vw (telefon)
• Maksymalna wysokość: 38vw (komputer stacjonarny), 100vw (tablet), 120vw (telefon)

Rozstaw

Następnie przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Przepełnienie pionowe

Jak wspomnieliśmy wcześniej, możemy przewijać ten wiersz w pionie. Aby to zrobić, musimy zmienić przepełnienie pionowe w ustawieniach widoczności wiersza.

• Przepełnienie pionowe: Przewiń

Dodaj moduł obrazu do kolumny

Załaduj obrazek

Śmiało i dodaj pierwszy moduł obrazu do wiersza i prześlij wybrany obraz. Możesz pobrać obrazy, których używamy w tym samouczku, przechodząc do wpisu Pakiet układu Wedding Planner.

Rozmiary

Upewnij się, że włączyłeś opcję „Wymuś pełną szerokość” w module obrazu, aby zapewnić responsywny wynik.

• Wymuś pełną szerokość: tak

Rozstaw

Przejdź do ustawień odstępów dalej i utwórz trochę miejsca między tym a kolejnym modułem, dodając trochę dolnego marginesu.

• Dolny margines: 1vw

Klonuj moduł obrazu tyle razy, ile chcesz

Gdy skończysz modyfikować pierwszy moduł obrazu, możesz go sklonować tyle razy, ile chcesz.

Prześlij różne obrazy

Oczywiście będziesz chciał zmienić obraz w każdym z duplikatów.

Dodaj wiersz nr 3

Struktura kolumny

Do trzeciego i ostatniego rzędu! Używamy następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozmiary

Następnie przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie dodaj niestandardowe górne i dolne wartości dopełnienia.

• Górna wyściółka: 2.1vw (komputer stacjonarny), 3.5vw (tablet), 5vw (telefon)
• Dolna wyściółka: 2.1vw (komputer stacjonarny), 3.5vw (tablet), 5vw (telefon)

Cień Pudełka

I dodaj cień pudełkowy, aby stworzyć głębię.

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

Indeks Z

Aby upewnić się, że ten wiersz (a zwłaszcza jego cień pudełka) pokrywa się z poprzednim wierszem, zwiększymy indeks Z.

• Indeks Z: 99

Dodaj moduł przycisku do kolumny

Dodaj kopię

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Zmodyfikuj również ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2.5vw (tablet), 3.5vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 1px
• Czcionka przycisku: Abril Fatface

Rozstaw

I utwórz kształt, który chcesz, używając niestandardowych wartości dopełnienia.

• Górna wyściółka: 0.5vw (komputer), 1vw (tablet), 2vw (telefon)
• Dolna wyściółka: 0.5vw (komputer), 1vw (tablet), 2vw (telefon)
• Lewa wyściółka: 3vw (komputer), 7vw (tablet), 9vw (telefon)
• Prawa wyściółka: 3vw (komputer), 7vw (tablet), 9vw (telefon)

Pasek przewijania stylu

Dodaj identyfikator CSS do wiersza nr 2

Od Ciebie zależy, czy chcesz stylizować pasek przewijania. Jeśli tak, otwórz drugi wiersz i dodaj do niego klasę CSS.

• Klasa CSS: image-scrollbar

Otwórz ustawienia strony

Następnie otwórz ustawienia wiersza.

Styl paska przewijania za pomocą CSS

I dodaj następujące wiersze kodu CSS do pola Niestandardowy CSS na karcie Zaawansowane:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć piękną makietę galerii przewijania tylko z wbudowanymi opcjami Divi. Na początku tego posta mogłeś również pobrać za darmo układ JSON i używać go na dowolnej stronie internetowej, nad którą pracujesz. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.