Jak utworzyć niestandardowy suwak galerii zdjęć w Divi
Opublikowany: 2019-06-10Wszyscy wiemy, że suwaki świetnie nadają się do przyciągania użytkowników polecanymi usługami, produktami lub stronami w jednym wygodnym miejscu nad krawędzią ekranu. Niektóre witryny (myślę, że fotografowie) muszą umieścić jedną lub więcej swoich galerii zdjęć na stronie głównej. Używanie do tego suwaka może być dobrą opcją. Jednak być może nie rozważałeś umieszczania swojej galerii zdjęć w takim suwaku.
W tym samouczku pokażę Ci łatwy sposób osadzania galerii zdjęć Divi na slajdach, aby utworzyć całkowicie niestandardowy suwak galerii zdjęć w Divi. Sztuczka polega na utworzeniu galerii obrazów WordPress w obszarze zawartości suwaka. Następnie wystarczy się upewnić i wybrać opcję korzystania z Galerii Divi zamiast domyślnego stylu Galerii WordPress. Jego bardzo łatwe i przyjemne w implementacji.
Zacznijmy.
zapowiedź
Oto zajawka suwaka galerii zdjęć, który zbudujemy w tym samouczku.
Pobierz niestandardowy układ suwaka galerii zdjęć ZA DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go 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 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.
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!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, musisz mieć następującą konfigurację:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Około 6-8 obrazów do wykorzystania w obrazie suwaka i galerii zdjęć
Następnie będziesz mieć puste płótno, aby rozpocząć tworzenie niektórych zakładek w Divi.
Włącz opcję Galerii Divi w Opcjach motywu Divi
Divi umożliwia zastąpienie domyślnego wyświetlacza galerii WordPress wyświetlaczem Galerii Divi. Tak więc za każdym razem, gdy tworzysz galerię WordPress i osadzasz ją w module, galeria będzie wyświetlana jak galeria za pomocą modułu Divi Gallery. To w zasadzie pozwala dodawać galerie obrazów Divi do dowolnego modułu w Divi Builder. W naszym przypadku do modułu slidera dodamy Galerię Divi.
Aby zmienić ustawienie, przejdź do Divi > Opcje motywu. Następnie w zakładce Ogólne kliknij, aby włączyć opcję Galeria Divi.
Otóż to! Teraz domyślny skrót do galerii WordPress będzie wyświetlał galerię zdjęć w stylu Divi.
Tworzenie niestandardowego suwaka galerii zdjęć w Divi
Sekcja i rząd
Aby rozpocząć, śmiało stwórz zwykłą sekcję z jednym rzędem kolumn.
Następnie zaktualizuj ustawienia wiersza w następujący sposób:
- Szerokość: 100% (więc suwak będzie miał pełną szerokość na urządzeniu mobilnym)
- Padding: 0px na górze, 0px na dole
- Zaokrąglone rogi: 20px
Budowanie zawartości suwaka
Następnie dodaj moduł suwaka do wiersza.
Otwórz ustawienia suwaka i usuń jeden ze slajdów, który został dodany domyślnie. Następnie kliknij ikonę koła zębatego na slajdzie, aby otworzyć ustawienia slajdu dla tego slajdu.
Następnie zaktualizuj zawartość slajdu o następujące elementy:
- Tytuł: Nasza Galeria
- Przycisk: Zobacz wszystko
- Body: To jest nasza galeria. Sprawdź to.
W obszarze treści treści kliknij przycisk Dodaj multimedia.
W wyskakującym okienku biblioteki multimediów wybierz kartę Utwórz galerię w lewym górnym rogu. Następnie wybierz 6 obrazów, których chcesz użyć w galerii, i kliknij przycisk „Utwórz nową galerię” w prawym dolnym rogu.
Spowoduje to przejście do strony edycji kategorii w wyskakującym okienku. Zignoruj ustawienia galerii w prawym górnym rogu, ponieważ style Galerii Divi zastąpią te ustawienia Galerii WordPress.
Następnie kliknij przycisk „Wstaw galerię”.
Spowoduje to umieszczenie skróconego kodu galerii w treści modułu suwaka. Jeśli chcesz, aby galeria była wyświetlana po bieżącym tekście głównym, umieść skrót po treści.
Teraz masz osadzoną galerię w stylu Divi wyświetlaną w obszarze zawartości modułu suwaka. Całkiem fajne rzeczy!
Kontynuujmy aktualizację zawartości naszego slajdu, dodając główny obraz slajdu.
Teraz, gdy mamy gotową zawartość suwaka, zapisz ustawienia dla slajdu 1.
Ustawienia suwaka
Upewnij się, że zapisałeś ustawienia dla pojedynczego slajdu. Następnie zaktualizuj następujące ustawienia projektu dla głównego suwaka. Zapewni to, że aktualizacje projektu wpłyną na wszystkie poszczególne slajdy, które dodasz.
Ramka obrazu i cień ramki
- Zaokrąglone rogi obrazu: 20px
- Szerokość obramowania obrazu: 40px (komputer), 0px (tablet)
- Kolor obramowania obrazu: rgba(0,0,0,0)
- Cień pola obrazu: patrz zrzut ekranu
- Pozycja pozioma cienia pudełka: -170px
- Pozycja pionowa cienia pudełka: -220px
- Siła rozprzestrzeniania się cieni w pudełku: -60px
- Kolor cienia: rgba (255,255,255,0.2)
Tytuł i tekst główny
- Czcionka tytułu: Karla
- Wyrównanie tekstu tytułu: do prawej
- Rozmiar tekstu tytułu: 48px
- Wysokość wiersza tytułu: 1,3 em
- Rozmiar tekstu ciała: 16px
- Odstępy między literami: 2px
- Wysokość linii ciała: 2em
Style przycisków
- Rozmiar tekstu przycisku: 16px
- Kolor tła przycisku: #333333
- Szerokość obramowania przycisku: 0px
- Promień obramowania przycisku: 20px
- Odstępy między przyciskami: 2px
- Czcionka przycisku: Karla
- Czcionka przycisku Waga: pogrubiona
- Ikona przycisku: patrz zrzut ekranu
- Wyrównanie przycisków: w prawo
- Margines przycisku: -5em w prawo
- Wypełnienie przycisków (pulpit): 3em w lewo, 5em w prawo
- Wypełnienie przycisków (telefon): 2em w lewo, 6em w prawo
- Cień przycisku: zobacz zrzut ekranu
- Pozycja pionowa cienia pudełka: 0px
- Box Shadow Spread Strength: 20px (komputer), 10px (telefon)
- Kolor cienia: #ffffff
Wypełnienie suwaka
- Wyściółka: 10% na górze, 10% na dole
Dodawanie gradientu tła do slajdu 1
Teraz, gdy mamy już styl suwaka, możemy dodać niestandardowy gradient tła do naszego indywidualnego slajdu. Otwórz ustawienia slajdu dla slajdu 1 i zaktualizuj następujące elementy:
- Kolor lewego gradientu tła: #6d0066
- Prawy kolor gradientu tła: #000000
- Typ gradientu: Promieniowy
- Kierunek promieniowy: górny lewy
Tworzenie slajdu 2
Aby utworzyć drugi slajd, możemy po prostu zduplikować slajd 1 za pomocą ikony duplikatu. Następnie otwórz zduplikowane ustawienia slajdu (slajd 2).
W tym momencie możesz zaktualizować zawartość nowego slajdu zgodnie z potrzebami. Na przykład możesz dodać nowy obraz slajdu i wygenerować kolejny krótki kod do osadzenia galerii, aby dodać nową galerię zdjęć do slajdu.
Następnie zaktualizuj gradient tła w następujący sposób:
- Kolor lewego gradientu tła: #0c71c3
Ostateczny wynik
Oto ostateczny wynik.
A oto jak wygląda suwak na tablecie i telefonie.
A oto suwak, jeśli wyjmiesz obrazy slajdów, aby wyświetlić tylko zawartość slajdów i galerię.
Końcowe przemyślenia
Możliwość osadzenia galerii divi w module suwaka Divi otwiera możliwość tworzenia świetnie wyglądających suwaków galerii zdjęć przy niewielkim wysiłku. Mamy nadzieję, że ten samouczek da ci inspirację do stworzenia pięknych suwaków galerii zdjęć.
Aby uzyskać więcej informacji na temat tej techniki osadzania galerii divi (w tym wskazówek dotyczących stylizacji galerii osadzonych divi), zapoznaj się z postem na temat osadzania galerii Divi w przełącznikach.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!