Jak utworzyć interaktywny kolaż obrazów za pomocą opcji pozycji Divi
Opublikowany: 2020-01-29Nowe opcje pozycji Divi otwierają drzwi do tworzenia unikalnych układów kolaży obrazów przy użyciu właściwości pozycji bezwzględnej. Pozwala to na dokładniejsze rozmieszczenie każdego elementu projektu. A kiedy połączysz to z niezliczonymi kombinacjami ustawień projektowych w Divi, możesz zaprojektować całkiem niesamowite kolaże obrazów.
W tym samouczku pokażę ci, jak korzystać z wbudowanych opcji pozycji Divi, aby w kilka minut stworzyć piękny interaktywny kolaż obrazów dla swojej witryny Divi.
Zacznijmy!
zapowiedź
Oto krótki rzut oka na układ interaktywnego kolażu obrazów, który zbudujemy w tym samouczku.
Pobierz układ za DARMO
Aby położyć ręce na układzie kolażu obrazów 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 wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
- Wybierz opcję „Buduj od podstaw”.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Tworzenie interaktywnego kolażu obrazów z opcjami pozycji Divi
Optymalizacja wiersza i kolumny
Aby rozpocząć, utwórz wiersz z jedną kolumną.
Ustawienia wiersza
Następnie musimy zaktualizować wiersz, aby nie było dodatkowej przestrzeni między modułami (poprzez szerokość rynny), więc ustawimy szerokość rynny na 1. Musimy również upewnić się, że wiersz obejmuje całą szerokość okna przeglądarki więc możemy wykorzystać jednostki długości vw do pozycjonowania naszych obrazów (jednostka długości vw (szerokość widoku) jest powiązana z szerokością okna przeglądarki). Przy szerokości ustawionej na 100% możemy użyć jednostek długości vw, aby ustawić nasze obrazy w wierszu/kolumnie, tak aby pozycja pozostała nienaruszona na wszystkich szerokościach przeglądarki, co zapewnia płynny, responsywny projekt. Aby ukryć wszelkie przepełnienie obrazu poza wierszem, musimy ustawić przepełnienie na ukryte.
Aby to zrobić, zoptymalizuj ustawienia wierszy w następujący sposób:
Ustawianie wysokości kolumny
Domyślnie wysokość kolumny jest określona przez wysokość zawartej w niej treści (lub modułów Divi). Moduły Divi (jak wszystkie div w HTML) będą miały domyślnie pozycję statyczną, co oznacza, że dodadzą rzeczywistą przestrzeń/wysokość do swojej kolumny nadrzędnej, ponieważ są one umieszczone w normalnym przepływie strony. Jednak moduły Divi, które mają pozycję bezwzględną, wyłamują się z normalnego przepływu i nie stworzą rzeczywistej przestrzeni/wysokości dla kolumny. Z tego powodu musimy dodać określoną wysokość kolumny, abyśmy mogli następnie umieścić obrazy w określonej przestrzeni.
Aby to zrobić, otwórz ustawienia wiersza i zaktualizuj ustawienia kolumn, dodając następujący niestandardowy CSS do elementu głównego.
height: 40vw;
Pod zakładką telefonu przywróć wysokość do stanu domyślnego, ponieważ zmieniamy również obrazy z powrotem do pozycji statycznej na telefonie. Dodaj następujący niestandardowy kod CSS do karty telefonu:
height: auto !important;
Dodawanie tekstu tytułu
Mając ustawioną wysokość kolumny, możemy zacząć dodawać do kolumny nasze bezwzględnie pozycjonowane elementy. Zacznijmy od dodania modułu tekstowego do tytułu naszego układu kolażu obrazów.
Zawartość modułu tekstowego
Następnie zaktualizuj tekst o następującą treść:
<h2>Recent Work</h2>
Ustawienia modułu tekstowego
Następnie zaktualizuj ustawienia modułu tekstowego w następujący sposób:
- Czcionka nagłówka 2: Światło wapienne
- Nagłówek 2 Wyrównanie tekstu: do środka
- Kolor tekstu nagłówka 2: #24005b
- Rozmiar tekstu nagłówka 2: 5vw (komputer i tablet), 50px (telefon)
- Szerokość: 100%
- Maksymalna szerokość: 35vw (komputer i tablet), 100% (telefon)
- Pozycja: bezwzględna (komputer), domyślna (telefon)
- Przesunięcie w poziomie (stacjonarny): 35vw
Tworzenie i pozycjonowanie obrazów
Teraz, gdy tytuł jest już gotowy, utwórzmy pierwszy obraz do naszego interaktywnego kolażu obrazów. Pomysł polega na stworzeniu pierwszego z wszystkimi optymalizacjami na miejscu, abyśmy mogli go zduplikować, aby ułatwić tworzenie i pozycjonowanie pozostałych obrazów do kolażu.
Optymalizacja pierwszego obrazu za pomocą efektów najechania, Lightbox i pozycjonowania bezwzględnego.
Najpierw dodaj moduł obrazu pod modułem tekstowym.
Następnie wgraj obraz do modułu i wybierz opcję otwarcia obrazu w lightboxie. Teraz obraz pojawi się w lightbox po kliknięciu.
Skaluj obraz po najechaniu kursorem
Oprócz interakcji lightbox dodaj efekt najechania, który sprawi, że obraz będzie nieco większy. Aby to zrobić, zaktualizuj następującą opcję transformacji:
- Skala transformacji (najechanie): 115%
Pozycjonowanie bezwzględne z priorytetem indeksu Z przy Hover
Aby ustawić nasz obraz, użyjemy pozycji bezwzględnej z jednostkami długości vw. Zaktualizuj opcje pozycji w następujący sposób:
Na komputerze (i tablecie)
- Pozycja: bezwzględna
- Lokalizacja: górny lewy
- Przesunięcie pionowe: 5vw
- Przesunięcie w poziomie: -2vw
Na telefonie
- Pozycja: domyślna
Po najechaniu
- Indeks Z: 2
Projektowanie obrazu i ustawienia responsywne
Następnie zaktualizuj następujące elementy:
- Wyrównanie obrazu: lewy (komputer), środek (telefon)
- Szerokość: 75% (telefon)
- Maksymalna szerokość: 20vw (komputer i tablet), 100% (telefon)
- Margines (telefon): 30px dół
- Cień pudełka: patrz zrzut ekranu
- Nasycenie: 0% (komputer), 100% (najechanie)
Używanie pierwszego obrazu jako szablonu do szybkiego tworzenia i pozycjonowania innych obrazów
Gdy pierwszy obraz jest gotowy, bardzo łatwo jest tworzyć nowe obrazy w celu stworzenia interaktywnego kolażu obrazów. Jest to również potężne narzędzie do projektowania, ponieważ będziesz mógł przeciągać obrazy w miejscu i dostosowywać rozmiar podczas przeglądania projektu w czasie rzeczywistym.
Oto proces…
- Zduplikuj obraz, klikając ikonę duplikatu. Zduplikowany obraz zostanie umieszczony absolutnie w tym samym miejscu, bezpośrednio nad obrazem, który duplikujesz.
- Przeciągnij obraz w miejscu. Ponieważ zduplikowany obraz dziedziczy jednostkę długości vw poprzedniego obrazu, możesz użyć ikony przeciągania, aby umieścić obraz dokładnie tam, gdzie chcesz w rzędzie.
- Zaktualizuj obraz o nowy.
- Dostosuj rozmiar obrazu za pomocą wbudowanych opcji rozmiaru.
Oto ilustracja tego, jak by to wyglądało podczas tworzenia drugiego obrazu.
Fajną częścią tego procesu jest to, że pozycja (przesunięcia w pionie i poziomie) będzie określana za każdym razem, gdy przeciągniesz obraz na miejsce. Nie ma potrzeby ręcznej aktualizacji pozycji przesunięcia w ustawieniach.
Ale abyście mogli zobaczyć przesunięcia, których użyłem w tym przykładzie, uwzględnię je dla każdego obrazu poniżej wraz z korektami rozmiaru.
Obraz #2 Aktualizacje
- Przesunięcie pionowe: 10,06 vw
- Przesunięcie poziome: 16,51 vw
- Maksymalna szerokość: 18 vw
Obraz #3 Aktualizacje
- Przesunięcie pionowe: 24,25vw
- Przesunięcie poziome: 7.13vw
- Maksymalna szerokość: 20vw
Aktualizacje obrazu #4
- Przesunięcie pionowe: 17,69vw
- Przesunięcie poziome: 31,91vw
- Maksymalna szerokość: 18vw
Obraz #5 Aktualizacje
- Przesunięcie pionowe: 12vw
- Przesunięcie poziome: 46,82vw
- Maksymalna szerokość: 15vw
Aktualizacje obrazu #6
- Przesunięcie pionowe: 19,13vw
- Przesunięcie poziome: 58,84vw
- Maksymalna szerokość: 12vw
Obraz #7 Aktualizacje
- Przesunięcie pionowe: 28,24vw
- Przesunięcie poziome: 54,2vw
- Maksymalna szerokość: 10vw
Aktualizacje obrazu nr 8
- Przesunięcie pionowe: 32,5vw
- Przesunięcie poziome: 74,04vw
- Maksymalna szerokość: 8vw
Aktualizacje obrazu nr 9
- Przesunięcie pionowe: 1,01vw
- Przesunięcie poziome: 75,5vw
- Szerokość: 27vw
- Maksymalna szerokość: 27vw
Dodaj obraz tła
Na koniec dodaj obraz tła do sekcji i gotowe!
Ostateczny wynik
Tak będzie wyglądać interaktywna galeria obrazów na komputerze i tablecie. Zwróć uwagę na efekty najechania, które przesuwają obraz do przodu, pokazują pełnokolorową wersję obrazu i powiększają obraz. Następnie możesz kliknąć obraz, aby pokazać efekt lightbox.
Oto projekt na wyświetlaczu telefonu.
Zmiana punktu położenia obrazów dla różnych projektów układu
Ponieważ przesunięcia dla każdego z obrazów odnoszą się do punktu lokalizacji, możemy zmienić oryginalny punkt lokalizacji obrazów, aby zobaczyć, jak nasz projekt pochodzi z różnych kierunków w ciągu kilku sekund.
Aby to zrobić, użyj funkcji wielokrotnego wyboru Divi, aby wybrać wszystkie moduły obrazu. Następnie otwórz jedno z ustawień modułu obrazu, aby wyświetlić modalne ustawienia elementu.
Następnie możesz zmienić lokalizację na każdy z czterech rogów dla różnych struktur układu.
Położenie w prawym górnym rogu
Położenie w lewym dolnym rogu
Położenie w prawym dolnym rogu
Końcowe przemyślenia
Nowe opcje pozycji Divi są zarówno potężne, jak i wygodne. Jak widzieliśmy w tym samouczku, dostarczają nam wspaniałych narzędzi projektowych do projektowania unikalnych układów naszych obrazów. Mamy nadzieję, że ten interaktywny kolaż obrazów posłuży jako inspiracja do następnego projektu.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!