Jak pięknie układać pozycje z portfolio za pomocą opcji transformacji Divi

Nowe opcje transformacji Divi otworzyły mnóstwo nowych drzwi w kierunku tworzenia atrakcyjnych wizualnie projektów internetowych. To przybliża nas o krok do tego, że przy projektowaniu strony internetowej od podstaw nie potrzebujemy żadnego oprogramowania do edycji obrazu. Możemy go przekształcić, aby wyglądał dokładnie tak, jak chcemy, zachowując jednocześnie w 100% responsywny projekt.

W tym poście zamierzamy wykorzystać nowe opcje transformacji, aby pięknie układać elementy portfolio. To świetne podejście do zaprezentowania na przykład wcześniej wykonanych stron internetowych. Upewnimy się również, że obrazy pozostaną tam, gdzie się znajdują, niezależnie od rozmiaru ekranu używanego przez odwiedzających. Mamy nadzieję, że ten samouczek zainspiruje Cię do kreatywności dzięki nowym opcjom przekształcania Divi podczas dostosowywania witryny do swoich potrzeb.

Weźmy się za to!

Zapowiedź

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

Zacznijmy odtwarzać!

Dodaj nową sekcję

Tło gradientowe

Zacznij od dodania nowej sekcji do swojej strony. Otwórz ustawienia sekcji i dodaj do niej tło gradientowe.

• Kolor 1: #f4f4f4
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 30%
• Pozycja końcowa: 30%

Rozstaw

Następnie przejdź do zakładki projekt i zmodyfikuj niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 0px (komputer), 18vw (tablet), 40vw (telefon)
• Dolna wyściółka: 0px (komputer), 18vw (tablet), 40vw (telefon)

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

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

Rozstaw

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

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

Wyświetlacz

Dbamy też o to, by obie kolumny pojawiały się obok siebie na mniejszych ekranach. Aby to zrobić, musimy dodać jedną linię kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł obrazu nr 1 do kolumny 1

Załaduj obrazek

Możemy teraz zacząć dodawać różne moduły! Aby móc postępować zgodnie z tym samouczkiem, zapisz na swoim komputerze następujący zrzut ekranu:

Prześlij zrzut ekranu do modułu obrazu w pierwszej kolumnie.

Rozmiary

Następnie przejdź do zakładki projektowania i włącz opcję „Wymuś pełną szerokość”. Gdy to zrobisz, obraz zajmie całą szerokość kolumny.

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

Rozstaw

Aby zmniejszyć rozmiar obrazu, dodamy niestandardowy lewy i prawy margines. Zauważysz, że używamy jednostki rzutni, aby upewnić się, że rozmiar obrazu pozostanie nienaruszony, bez względu na rozmiar ekranu.

• Górny margines: -10vw
• Lewa wyściółka: 11vw
• Prawa wyściółka: 11vw

Granica

Dodaj „2vw” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Wraz z cieniem pudełkowym.

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

Przekształć Tłumacz

Teraz możemy zacząć przekształcać obraz! Dodaj następujące wartości do zakładki translacji przekształcenia w opcjach przekształcenia:

• Dół: -26vw
• Po prawej: -2vw

Dodane tutaj wartości zależą od szerokości i wysokości obrazu, więc jeśli używasz innego obrazu, musisz odpowiednio zmodyfikować wartości. Upewnij się, że używasz jednostek widocznego obszaru, aby upewnić się, że pozycja obrazu pozostaje taka sama na wszystkich rozmiarach ekranu.

Przekształć Obróć

Przejdź do zakładki obracania transformacji i odpowiednio obróć obraz:

• Po lewej: 24 stopnie
• Środek: 46 stopni
• Prawo: -7 stopni

Przetłumacz Pochylenie

Na koniec włącz tłumaczenie skosu z następującymi wartościami:

• Dół: -4 stopnie
• Prawo: 24 stopnie

Dodaj moduł obrazu nr 2 do kolumny 1

Załaduj obrazek

Przejdź do następnego modułu obrazu! Zapisz następujący zrzut ekranu na swoim komputerze lub użyj innego wybranego zrzutu ekranu:

Kontynuuj, przesyłając zrzut ekranu do drugiego modułu obrazu w kolumnie 1.

Rozmiary

Następnie przejdź do ustawień rozmiaru i włącz opcję „Wymuś pełną szerokość”.

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

Rozstaw

Zmniejszamy rozmiar obrazu i nakładamy go na poprzedni obraz, używając pewnych niestandardowych wartości marginesów w ustawieniach odstępów.

• Górny margines: -81vw (komputer stacjonarny), -50vw (tablet i telefon)
• Lewy margines: 11vw
• Prawy margines: 11vw

Granica

Dodamy „2vw” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Dodamy też cień do pudełka. Zwróć uwagę, jak używamy ciemniejszego cienia pudełka dla drugiego obrazu elementu portfolio. Pomoże to stworzyć większą głębię między pozycjami portfela.

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

Przekształć Tłumacz

Następnie przejdź do ustawień transformacji i zmodyfikuj wartości translacji transformacji:

• Dół: -8vw
• Po prawej: 0px

Ponownie, te wartości naprawdę zależą od tego, jak chcesz umieścić ekran drukowania i jakie wymiary ma twój ekran drukowania. Im mniejszy obraz, tym bardziej będziesz musiał przesunąć go w lewo, używając większej wartości ujemnej.

Przekształć Obróć

Przejdź do zakładki obracania transformacji i baw się wszystkimi trzema wartościami.

• Po lewej: 24 stopnie
• Środek: 46 stopni
• Prawo: -7 stopni

Przetłumacz Pochylenie

Na koniec zmodyfikuj wartości skosu tłumaczenia:

• Dół: -4 stopnie
• Prawo: 24 stopnie

Dodaj moduł obrazu nr 3 do kolumny 1

Załaduj obrazek

Przejdź do następnego i ostatniego modułu obrazu, którego potrzebujemy w kolumnie 1. Zapisz następujący zrzut ekranu na swoim komputerze lub użyj innego wybranego zrzutu ekranu:

Dodaj zrzut ekranu, który zapisałeś do nowego modułu obrazu.

Rozmiary

Następnie przejdź do ustawień rozmiaru i włącz opcję „Wymuś pełną szerokość”.

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

Rozstaw

Następnie przejdź do ustawień odstępów i odpowiednio zmodyfikuj wartości marginesów:

• Górny margines: -107vw
• Lewy margines: 19vw
• Prawy margines: 19vw

Granica

Kontynuuj, dodając „2vw” do każdego z rogów modułu obrazu.

Cień Pudełka

Następnie dodaj cień do pudełka. Ponownie, używamy mocniejszego koloru cienia niż te, których używaliśmy w dwóch poprzednich modułach obrazu.

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

Przekształć Tłumacz

Następnie przejdź do ustawień transformacji i zmodyfikuj wartości translacji transformacji:

• Dół: -42vw
• Po prawej: 11vw

Przekształć Obróć

Przejdź do zakładki obracania transformacji i tam też wprowadź pewne zmiany.

• Po lewej: 24 stopnie
• Środek: 46 stopni
• Prawo: -7 stopni

Przetłumacz Pochylenie

Na koniec zmodyfikuj wartości skosu tłumaczenia.

• Dół: -4 stopnie
• Prawo: 24 stopnie

Dodaj moduł tekstu tytułu do kolumny 2

Dodaj kopię H2

Do drugiej kolumny! Dodaj moduł tekstowy z wybraną zawartością H2.

Ustawienia tekstu H2

Przejdź do ustawień tekstu H2 i dokonaj zmian.

• Czcionka nagłówka 2: Roboto
• Grubość czcionki nagłówka 2: Cienka
• Wyrównanie tekstu nagłówka 2: do lewej
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 5vw (komputer), 6vw (tablet), 7vw (telefon)
• Nagłówek 2 Odstępy między literami: -1px

Rozstaw

Kontynuuj, dodając kilka niestandardowych wartości marginesów w ustawieniach odstępów.

• Górny margines: 35vw (komputer), 10vw (tablet), 0vw (telefon)
• Lewy margines: -4vw
• Prawy margines: 4vw

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Następnym modułem, którego potrzebujemy w kolumnie 2, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie przejdź do zakładki projekt i zmień kolor przekładki.

• Kolor: #8193fa

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 8px
• Szerokość: 28%

Rozstaw

I dodaj kilka niestandardowych wartości marginesów.

• Górny margines: 1vw
• Lewy margines: -4vw
• Prawy margines: 4vw

Dodaj moduł tekstu opisu do kolumny 2

Dodaj zawartość

Następnym modułem, którego potrzebujemy w kolumnie 2, jest kolejny moduł tekstowy. Dodaj dowolną treść akapitu.

Ustawienia tekstu

Następnie przejdź do ustawień tekstu i wprowadź zmiany.

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,6vw (komputer), 1,2vw (tablet), 1,8vw (telefon)
• Wysokość linii tekstu: 3,1 metra (komputer), 2,7 metra (tablet), 2,6 metra (telefon)
• Orientacja tekstu: w lewo

Rozstaw

Następnie dodaj kilka niestandardowych wartości marginesów.

• Górny margines: 1vw
• Lewy margines: -4vw
• Prawy margines: 4vw

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następnym i ostatnim modułem potrzebnym do ukończenia projektu jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor 1: #5627ba
• Kolor 2: #8fb5fc
• Kierunek gradientu: 122deg
• Szerokość obramowania przycisku: 0px
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

Zmień również niestandardowe wartości marginesów i dopełnienia.

• Górny margines: 2vw (komputer stacjonarny), 3vw (tablet), 5vw (telefon)
• Margines dolny: 6vw (tablet), 8vw (telefon)
• Lewy margines: -4vw
• Prawy margines: 4vw
• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Prawa wyściółka: 3vw (komputer), 5vw (tablet), 7vw (telefon)

Cień Pudełka

Na koniec dodaj subtelny cień pudełkowy i gotowe!

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

Zapowiedź

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

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki nowym opcjom transformacji Divi. Dokładniej, ułożyliśmy elementy portfolio, aby stworzyć ładny i atrakcyjny wizualnie projekt. Zadbaliśmy również o to, aby obrazy wyglądały świetnie na wszystkich rozmiarach ekranu. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!