Jak stylizować i pozycjonować obrazy w abstrakcyjnych miejscach w Divi

Obrazy są kluczowym aspektem projektowania stron internetowych. A nowoczesne projektowanie stron internetowych wydaje się wymagać nowych i abstrakcyjnych sposobów wyświetlania obrazów w Twojej witrynie. Opcje transformacji Divi ułatwiają stylizowanie i pozycjonowanie obrazów na stronie w dowolnym miejscu. To otwiera drzwi do tworzenia unikalnych układów, które przeniosą Twoją witrynę na wyższy poziom.

W tym samouczku pokażę Ci kilka sposobów stylizacji i pozycjonowania obrazów w abstrakcyjnych miejscach na Twojej witrynie. Umożliwi to tworzenie niezliczonych odmian projektów dla obrazów, które mogłeś uważać za możliwe tylko w edytorze zdjęć, takim jak Photoshop lub Sketch.

Zacznijmy!

zapowiedź

Oto zapowiedź projektów, które zbudujemy w tym samouczku.

Pobierz przykłady projektów z tego samouczka ZA DARMO

Aby położyć ręce na tych przykładowych projektach, najpierw musisz je 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!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy teraz do samouczka, dobrze?

Pierwsze kroki

Aby rozpocząć, upewnij się, że masz zainstalowany i aktywny motyw Divi. Następnie utwórz nową stronę i wdróż Divi Builder na interfejsie. Wybierz opcję „Buduj od podstaw”.

Teraz jesteś gotowy do projektowania!

Pozycjonowanie obrazów częściowo poza rzutnią (po prawej lub lewej stronie)

W tym pierwszym przykładzie pokażę, jak umieścić obrazy częściowo poza widocznym obszarem. To dobry sposób, aby dodać więcej abstrakcyjnych obrazów do swoich obrazów, które będą działać podobnie do niestandardowego obrazu tła dla twoich treści. Następnie możesz stylizować obraz, aby uzyskać jeszcze bardziej unikalne projekty.

Oto jak to zrobić.

Tworzenie i stylizowanie modułu tekstowego

Najpierw stworzymy moduł tekstowy, który będzie główną treścią naszej sekcji.

Jeśli jeszcze tego nie zrobiłeś, utwórz zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza.

Zaktualizuj zawartość, aby zawierała następujące elementy:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Następnie zaktualizuj ustawienia projektu w następujący sposób:

Czcionka tekstu: Raleway
Czcionka nagłówka 2: Raleway
nagłówek 2 Grubość czcionki: pogrubiona
Rozmiar tekstu nagłówka 2: 44px (komputer), 24px (telefon)
Szerokość: 680px (komputer), 60% (tablet), 80% (telefon)
Niestandardowe wypełnienie: 10% góra, 10% dół, 10% lewo, 5% prawo

Dodaj obraz #1

Teraz jesteśmy gotowi do dodania pierwszego obrazu. Śmiało i dodaj moduł obrazu bezpośrednio nad modułem tekstowym.

Następnie prześlij swój obraz do modułu obrazu. Upewnij się, że obraz jest wystarczająco duży, aby nie stracił jakości, gdy powiększamy obraz za pomocą właściwości transform. Używam obrazu o wymiarach 400 na 580 pikseli.

Następnie zmniejsz szerokość modułu obrazu i wyrównaj go w lewo w następujący sposób:

Szerokość: 5%
Wyrównanie modułu: w lewo

Zmniejszenie modułu obrazu w ten sposób początkowo pozwala nam zmniejszyć negatywną przestrzeń układu. W ten sposób nie musimy dostosowywać odstępów za pomocą ujemnych marginesów.

Teraz możemy powiększyć obraz za pomocą opcji transformacji w następujący sposób:

Skala transformacji osi X: 416%
Skala transformacji osi Y: 416%

Następnie możemy ustawić obraz za pomocą translacji transformacji w następujący sposób:

Przekształć Przesuń oś X: -36%
Przekształć Przesuń oś Y: 41%

Na koniec możesz obrócić obraz za pomocą transformuj obrót:

Przekształć Obróć oś Z: 11 stopni

Teraz jesteśmy gotowi do dodania drugiego obrazu. Śmiało i dodaj moduł obrazu bezpośrednio pod modułem tekstowym.

Następnie prześlij nowy obraz do modułu obrazu.

Następnie zmniejsz szerokość modułu obrazu i wyrównaj go w lewo w następujący sposób:

Szerokość: 10%
Wyrównanie modułu: w lewo

Szerokość nie musi wynosić dokładnie 10%. Wszystko, co chcesz zrobić, to zmniejszyć moduł na tyle, aby nie zajmował zbyt dużo miejsca w pionie na układzie.

Następnie zaktualizuj opcje transformacji w następujący sposób:

Skala transformacji osi X: 464%
Skala transformacji osi Y: 464%

Przekształć Przesuń oś X: 7%
Przekształć Przesuń oś Y: -80%

Przekształć Obróć oś Z: -10deg

Następnie dodaj cień pudełkowy dla dodatkowego elementu projektu.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -20px
Pozycja pionowa cienia pudełka: -7px

Upewnij się, że moduł tekstowy pozostaje na wierzchu

Chcemy mieć pewność, że moduł tekstowy pozostaje na wierzchu obrazów, gdy zaczną się nakładać na urządzeniach mobilnych. Dzięki temu obrazy będą nadal służyć jako obrazy tła w projekcie.

Aby to zrobić, otwórz moduł tekstowy i dodaj następujący niestandardowy CSS do elementu głównego:

Główny element CSS:

position: relative;

Następnie ustaw indeks Z na 1.

Ukrywanie przepełnienia sekcji

Ponieważ będziemy mieć obrazy wychodzące poza sekcję strony, szerokość widocznego obszaru przeglądarki zwiększy się, aby pomieścić dodatkową przestrzeń. Zaangażuje to poziomy pasek przewijania na dole przeglądarki. Aby to wyłączyć, musisz dodać do sekcji fragment kodu CSS.

Otwórz ustawienia sekcji i dodaj następujący niestandardowy kod CSS do elementu głównego:

overflow: hidden;

Teraz Sprawdź efekt końcowy.

Tworzenie abstrakcyjnego tła kolażu obrazów dla nagłówka

W następnym projekcie pokażę, jak zbudować abstrakcyjny kolaż obrazów, który posłuży jako tło dla nagłówka. Aby to zrobić, użyjemy właściwości display flex, aby utworzyć rząd obrazów, które możemy skalować i przesuwać w kreatywny sposób.

Oto jak to zrobić.

Projektowanie modułu tekstu nagłówka

Najpierw utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza i zaktualizuj następującą zawartość:

<h1>Interior Design</h1>
<p>This is some content</p>

Następnie zaktualizuj projekt w następujący sposób:

Kolor tła: rgba (0,0,0,0,07)
Kolor tekstu: #ffffff
Orientacja tekstu: Środek
Czcionka nagłówka: Raleway
Grubość czcionki nagłówka: pogrubiona
Wyrównanie tekstu nagłówka: do prawej
Kolor tekstu nagłówka: #ffffff
Rozmiar tekstu nagłówka: 44px (komputer), 34px (tablet), 24px (telefon)
Szerokość: 500px (komputer), 60% (tablet), 80% (telefon)
Wyrównanie modułu: Środek
Niestandardowe wypełnienie: 5vw góra, 5vw dół, 1vw prawo

Ustawienia sekcji

Zanim dodasz nasze obrazy i zbudujemy tło kolażu, dostosujmy naszą sekcję. Zapewni to nasze płótno do ukończenia reszty projektu.

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Kolor tła: #4c606d
Niestandardowe wypełnienie (komputer): 0px na górze, 0px na dole
Niestandardowa wyściółka (tablet): spód 20px
Niestandardowe wypełnienie (telefon): 40px na dole

Następnie dodaj cień wewnętrznego pudełka na dole sekcji w kolorze pasującym do tła następnej sekcji na stronie (w tym przypadku będzie to biały). To pozwoli nam stworzyć efekt nakładania się naszych obrazów na dolną część nagłówka do następnej sekcji (zobaczysz, co mam na myśli później).

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: -80px
Kolor cienia: #ffffff

A ponieważ będziemy przenosić obrazy poza obszar wyświetlania sekcji dla naszego kolażu, będziemy musieli dodać następujący kod CSS do elementu głównego.

overflow: hidden;

Ustawienia rzędu 1

Teraz musimy dodać dopełnienie do wiersza zawierającego nasz moduł tekstowy. Musimy również dodać indeks Z, aby sekcja znajdowała się nad obrazami, które dodamy do naszej sekcji. Domyślnie każda sekcja ma wartość z-index równą 9. Więc wszystko, co musimy zrobić, to dodać z-index równy 10 do wiersza, który chcemy pozostać na górze.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Niestandardowa wyściółka: góra 10vw
Indeks Z: 10

Tworzenie abstrakcyjnego kolażu obrazów

W tym momencie sekcja jest gotowa do rozpoczęcia dodawania naszych obrazów.

Aby utworzyć abstrakcyjny kolaż obrazów, dodamy 5 obrazów do jednego wiersza kolumny, a następnie użyjemy „display: flex”, aby wyrównać wszystkie te obrazy poziomo na stronie. Jest to konieczne, aby obrazy były na miejscu (w poziomie) we wszystkich rozmiarach przeglądarek. Gdybyśmy mieli użyć tradycyjnego 5-kolumnowego układu, obrazy rozbijają się na różne układy kolumn na różnych urządzeniach i psują projekt.

Następnie będziemy mogli stylizować i pozycjonować nasze obrazy jeden po drugim, korzystając z opcji transformacji.

Dodawanie rzędu obrazów

Śmiało i utwórz nowy jednokolumnowy wiersz bezpośrednio pod wierszem zawierającym moduł tekstowy.

Następnie otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 50%
Szerokość rynny: 1

Aby wyrównać wszystkie moduły w tym wierszu poziomo, dodaj następujący kod CSS do głównego elementu kolumny:

display: flex;

Teraz, gdy dodasz moduły obrazu do wiersza, zostaną one wyrównane w poziomie.

Zobacz, co się dzieje, gdy powielam moduł obrazu w wierszu z display:flex add do kolumny.

Śmiało i dodaj 5 obrazów do rzędu, upewniając się, że są wystarczająco duże, aby pomieścić wzrost rozmiaru podczas skalowania obrazu do kolażu. Używam obrazów z naszego pakietu Home Improvement Layout Pack, które mają około 800 pikseli szerokości i różnią się wysokością. Obrazy o różnych wymiarach tworzą lepiej wyglądający abstrakcyjny kolaż.

Pozycjonowanie obrazów za pomocą Transform Translate

Czas zacząć pozycjonować nasze obrazy, aby stworzyć nasz kolaż.

Obraz #1

Otwórz ustawienia pierwszego modułu obrazu (z lewej) i zaktualizuj opcje transformacji w następujący sposób:

Skala transformacji osi X: 266%
Przekształć skalę osi Y: 266%

Translacja transformacji: oś X: -68%
Translacja transformacji: oś Y: -54%

Obraz #2

Otwórz ustawienia drugiego modułu obrazu i zaktualizuj opcje transformacji w następujący sposób:

Skala transformacji osi X: 184%
Skala transformacji osi Y: 184%

Przekształć Przesuń: oś X: -36%
Translacja transformacji: oś Y: -66%

Obraz #3

Otwórz ustawienia trzeciego modułu obrazu i zaktualizuj opcje transformacji w następujący sposób:

Przekształć skalę osi X: 206%
Przekształć skalę osi Y: 206%

Transform Translacja: oś X: -51%
Translacja transformacji: oś Y: -27%

Obraz #4

Otwórz ustawienia czwartego modułu obrazu i zaktualizuj opcje transformacji w następujący sposób:

Przekształć skalę osi X: 180%
Przekształć skalę osi Y: 180%

Przekształć Przetłumacz: oś X: 20%
Przekształć Przesuń: oś Y: 42%

Obraz #5

Otwórz ustawienia piątego modułu obrazu i zaktualizuj opcje transformacji w następujący sposób:

Przekształć skalę osi X: 290%
Przekształć skalę osi Y: 290%

Przekształć Przetłumacz: oś X: -50%
Przekształć Przesuń: oś Y: 72%

Dodawanie cienia pudełka do obrazów

Aby stworzyć dodatkowy element projektu, możemy dodać cień do naszych zdjęć. Aby to zrobić, aktywuj tryb siatki i użyj funkcji wielokrotnego wyboru, aby wybrać wszystkie moduły obrazu. Następnie otwórz ustawienia jednego z modułów obrazu, aby wdrożyć modalne ustawienia elementu.

Następnie zaktualizuj następujące elementy:

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -40px
Pozycja pionowa cienia pudełka: 40px
Kolor cienia: rgba (255,255,255,0.13)

Ostateczny wynik

Oto efekt końcowy projektu.

Pulpit

Tablet

Telefon

Końcowe przemyślenia

Te przykładowe projekty powinny dostarczyć Ci inspiracji, jak stylizować i pozycjonować obrazy w witrynie w sposób, o którym nigdy nie myślałeś, że jest możliwy poza oprogramowaniem do edycji zdjęć. Gdy nauczysz się prawidłowo dostosowywać układ, opcje transformacji Divi mogą pozycjonować obrazy w unikalnych i abstrakcyjnych miejscach. Mamy nadzieję, że przyda się to w Twoim następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!