3 bezproblemowe przekształcanie efektów najechania, które możesz zastosować do swoich obrazów za pomocą Divi

Szukasz fajnego sposobu na zaprezentowanie zdjęć na swojej następnej witrynie Divi? Czytaj dalej, ponieważ w tym poście zajmiemy się 3 efektami najechania z transformacją obrazu, które pomogą poprawić ogólny wygląd i styl Twojej strony. Będziesz mógł prześledzić proces odtwarzania od A do Z trzech różnych przykładów, a nawet pobrać je do natychmiastowego użycia. Głównym celem tego samouczka jest zainspirowanie Cię do połączenia nowych opcji transformacji Divi z już istniejącymi opcjami, aby stworzyć piękny projekt strony internetowej.

Weźmy się za to!

Zapowiedź

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

Pulpit

Przykład 1

Przykład #2

Przykład #3

mobilny

Przykład 1

Przykład #2

Przykład #3

Pobierz Efekty najechania transformacją obrazu ZA DARMO

Subskrybuj nasz kanał YouTube

Aby położyć ręce na darmowych efektach najechania transformacją obrazu, najpierw musisz je pobrać za pomocą poniższego przycisku. 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!

Ogólne kroki

Dodaj nową sekcję

Rozstaw

Zanim odtworzymy każdy z przykładów z osobna, przejdziemy przez kilka ogólnych kroków. Dodaj nową zwykłą sekcję do swojej strony, używając następujących wartości marginesów i dopełnienia:

• Górny margines: 200px
• Margines dolny: 200px
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

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

Kolor tła kolumny 2

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj kolor tła do drugiej kolumny.

• Kolor tła kolumny 2: #efefef

Rozmiary

Przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie dodaj następujące niestandardowe wartości dopełnienia:

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Kolumna 2 Górna wyściółka: 10vw
• Dolna wyściółka kolumny 2: 10vw
• Kolumna 2 Lewa wyściółka: 5vw
• Kolumna 2 prawa wyściółka: 5vw

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość H2

Czas zacząć dodawać różne moduły do ​​kolumny 2, zaczynając od modułu tekstowego. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i zmodyfikuj ustawienia tekstu H2.

• Czcionka nagłówka 2: Times New Roman
• Grubość czcionki nagłówka 2: pogrubiona
• Kolor tekstu nagłówka 2: #0f47ff
• Rozmiar tekstu nagłówka 2: 3.5vw

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Następnym modułem, którego potrzebujemy w drugiej kolumnie, 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: #ff961e

Rozmiary

Zmodyfikuj również wartości rozmiaru.

• Waga dzielnika: 1px
• Szerokość: 20%
• Wyrównanie modułu: do lewej
• Wysokość: 0px

Rozstaw

I utwórz trochę miejsca na moduł, używając następujących wartości górnego i dolnego marginesu:

• Górny margines: 1vw
• Dolny margines: 1vw

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Przejdźmy do następnego modułu, którym jest kolejny moduł tekstowy. Wprowadź dowolną treść akapitu.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,7vw (komputer), 1,7vw (tablet), 2,5vw (telefon)
• Wysokość linii tekstu: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3,5vw (telefon)
• Orientacja tekstu: wyjustuj

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 61% (komputer stacjonarny), 80% (tablet i telefon)

Rozstaw

I dodaj niestandardowy górny i dolny margines.

• Górny margines: 2vw
• Dolny margines: 2vw

Dodaj moduł tekstowy #3 do kolumny 3

Dodaj zawartość

Do następnego i ostatniego modułu potrzebujemy w drugiej kolumnie, która jest kolejnym modułem tekstowym. Użyjemy tego modułu jako przycisku, dodając zawartość akapitu.

Dodaj link

Kontynuuj, dodając link do CTA.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Times New Roman
• Kolor tekstu: #ff961e
• Rozmiar tekstu: 1,5vw (komputer), 2,5vw (tablet), 3,5vw (telefon)

Rozmiary

Zmień również szerokość modułu w ustawieniach rozmiaru.

• Szerokość: 48%

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe dopełnienie.

• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw

Granica

Zakończ moduł tekstowy, dodając dolną ramkę z następującymi ustawieniami:

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #0f47ff

Klonuj sekcję dwukrotnie

Po zakończeniu dostosowywania sekcji i wszystkich zawartych w niej elementów możesz sklonować ją dwukrotnie. Użyjemy każdej z sekcji na naszej stronie, aby odtworzyć trzy przykłady, które zostały udostępnione na początku tego posta.

Odtwórz przykład nr 1

Dodaj moduł obrazu do kolumny 1

Pozostaw puste pole obrazu

Zacznijmy od pierwszego przykładu! Dodaj nowy moduł obrazu do pierwszej kolumny i upewnij się, że pole obrazu zostało puste.

Domyślny kolor tła

Zmień kolor tła modułu obrazu:

• Kolor tła: #0f47ff

Wskaż kolor tła

Zmodyfikuj kolor tła po najechaniu myszą.

• Kolor tła: rgba (255,150,30,0.65)

Zdjęcie w tle

Zamiast przesyłać obraz, dodamy go do tła wraz z następującymi ustawieniami:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: miękkie światło

Rozstaw

Przejdź do ustawień odstępów modułu i dodaj kilka niestandardowych wartości dopełnienia:

• Pokaż przestrzeń pod obrazem: Nie
• Górna wyściółka: 22vw
• Dolna wyściółka: 22vw

Domyślny obrót tłumaczenia

Obrócimy również obraz po najechaniu myszą. Upewnij się, że obraz jest wyświetlany w oryginalnym stanie, zanim najedziesz kursorem, dodając „0deg” do prawej opcji.

• Po prawej: 0 stopni

Najedź Tłumacz Obróć

Zmień tę wartość po najechaniu:

• Prawo: 180 stopni

Przejścia

Aby uzyskać efekt natychmiastowy, usuniemy czas trwania przejścia:

• Czas trwania przejścia: 0 ms

Odtwórz przykład nr 2

Dodaj moduł obrazu do kolumny 1

Pozostaw puste pole obrazu

Przejdźmy do drugiego przykładu! Ponownie upewnij się, że pole obrazu zostało puste.

Domyślny kolor tła

Przejdź do ustawień tła i dodaj następujący (całkowicie przezroczysty) kolor tła:

• Kolor tła: rgba (255,255,255,0)

Wskaż kolor tła

Zmodyfikuj ten kolor po najechaniu myszą:

• Kolor tła: rgba (0,0,0,0,65)

Zdjęcie w tle

Ponownie używamy obrazu tła zamiast wgrywania go do samego modułu. Połącz obraz tła z następującymi ustawieniami:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: miękkie światło

Rozstaw

Następnie przejdź do ustawień odstępów i zmodyfikuj górną i dolną wyściółkę:

• Pokaż przestrzeń pod obrazem: Nie
• Górna wyściółka: 22vw
• Dolna wyściółka: 22vw

Domyślna skala transformacji

Upewnij się, że domyślne wartości skali transformacji pozostają „100%”.

• Prawo: 100%
• Dół: 100%

Skala przekształcenia najechania

I zmień te wartości po najechaniu kursorem, aby uzyskać efekt skalowania.

• Prawo: 120%
• Dół: 120%

Domyślny tłumacz przekształcenia

Domyślnie zachowujemy „0px” jako dolną opcję w ustawieniach tłumaczenia transformacji.

• Dół: 0px

Przekształć kursor myszy

Zmodyfikuj tę wartość po najechaniu kursorem, aby zmienić położenie elementu.

• Dół: 9vw

Przejścia

Tworzymy również nieco szybsze przejście, zmieniając czas trwania przejścia w zakładce Zaawansowane:

• Czas trwania przejścia: 200 ms

Odtwórz przykład nr 3

Zmień strukturę kolumn

Przejdźmy do następnego i ostatniego przykładu! Zacznij od zmodyfikowania struktury kolumn wiersza.

Dodaj moduł obrazu do kolumny 1

Prześlij obraz 1:1

Następnie dodaj moduł obrazu do pierwszej kolumny. W przeciwieństwie do pierwszych dwóch przykładów, prześlemy obraz w proporcji 1:1 (taka sama szerokość i wysokość).

Rozmiary

Przejdź do karty projektu i wymuś, aby obraz miał pełną szerokość w ustawieniach rozmiaru.

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

Rozstaw

Usuń spację pod obrazem w następnych ustawieniach odstępów.

• Pokaż przestrzeń pod obrazem: Nie

Domyślna ramka

Następnie przejdź do ustawień obramowania i dodaj „500vw” do każdego z rogów. Upewniamy się, że ta wartość jest wystarczająco wysoka, aby pokryć wszystkie rozmiary ekranu.

Wskaż granicę

Usuń zaokrąglone rogi dodane po najechaniu myszą.

Filtry domyślne

Następnie przejdź do ustawień filtrów i upewnij się, że dodano te wartości domyślne:

• Nasycenie: 100%
• Jasność: 46%
• Krycie: 3%

Po najechaniu na filtry

Włącz opcję najechania na każdym ze zmodyfikowanych ustawień i użyj następujących wartości:

• Nasycenie: 300%
• Jasność: 46%
• Krycie: 100%

Domyślna skala transformacji

Następnie przejdź do opcji transformacji i zmodyfikuj domyślne opcje skali transformacji:

• Prawo: 68%
• Dół: 68%

Skala przekształcenia najechania

Zmień te wartości po najechaniu myszą.

• Prawo: 130%
• Dół: 130%

Domyślny tłumacz przekształcenia

Przejdź do wartości tłumaczenia transformacji i upewnij się, że domyślne wartości tłumaczenia transformacji pozostają takie same:

• Po prawej: 0px
• Dół: 0px

Przekształć kursor myszy

Zmodyfikuj wartości po najechaniu myszą.

• Po prawej: 1vw
• Dół: 8vw

Przejścia

Na koniec zwiększ czas trwania przejścia w zakładce Zaawansowane, aby uzyskać płynne przejście i gotowe!

• Czas trwania przejścia: 600ms

Zapowiedź

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

Pulpit

Przykład 1

Przykład #2

Przykład #3

mobilny

Przykład 1

Przykład #2

Przykład #3

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki modułowi obrazu i opcjom najeżdżania i przekształcania Divi. Efekty, które odtworzyliśmy, to tylko kilka z wielu pięknych możliwości. 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.