Jak odtworzyć podgląd pakietu układów ET z efektami przesuwania w trybie Fan-Out w Divi

Jedną z fajnych funkcji nowego projektu strony internetowej elegantthemes.com są gotowe podglądy pakietów układów na stronie produktu Divi. To, co sprawia, że ​​ten projekt jest wyjątkowy, to sposób, w jaki każdy pakiet układu zawiera trzy oddzielne obrazy, które rozkładają się po najechaniu myszą.

Dzisiaj pokażemy, jak odtworzyć projekt naszych podglądów pakietów układów z tym samym imponującym efektem najechania w Divi. Ponieważ projekt jest nieco bardziej zaawansowany, użyjemy niestandardowego CSS w połączeniu z wbudowanymi opcjami projektowania Divi. Ale nie martw się, zbudowanie nie potrwa długo, a wynik jest zdecydowanie tego wart.

Zacznijmy.

zapowiedź

Oto rzut oka na podglądy pakietów układów z efektem najechania. Zwróć uwagę, że dolny wiersz ma dodatkowy efekt najechania, który obraca obrazy osobno po najechaniu.

Trzykolumnowy układ na pulpicie dostosuje się do jednej kolumny na tablecie i telefonie.

Pobierz za DARMO podgląd pakietu Layout-Out z efektami najazdu

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 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 do samouczka, dobrze?

Subskrybuj nasz kanał YouTube

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz mieć następującą konfigurację:

1. Zainstalowany i aktywny motyw Divi
2. Nowa strona stworzona do budowania od podstaw na interfejsie (wizualnym) kreatora Divi.
3. Trzy obrazy, które mają być wykorzystane do pozorowanej treści. Aby uzyskać najlepsze wyniki, obrazy powinny mieć około 250 na 375 pikseli. Ponieważ są to podglądy stron internetowych, możesz tworzyć własne zrzuty ekranu dowolnego projektu strony, a następnie odpowiednio przycinać/zmieniać rozmiar każdego obrazu.

Następnie będziesz mieć puste płótno, aby rozpocząć tworzenie niektórych zakładek w Divi.

Odtwarzanie podglądów pakietu układów ET z efektami przesuwania w trybie Fan-Out w Divi

Budowanie sekcji i rzędu

Utwórz nową zwykłą sekcję z wierszem z trzema kolumnami.

Przed dodaniem jakichkolwiek modułów otwórz ustawienia wierszy i zaktualizuj rozmiar i odstępy w następujący sposób:

• Szerokość rynny: 2
• Szerokość: 90%
• Maksymalna szerokość: 1120px (komputer), 400px (tablet)

Następnie dodaj trochę dopełnienia do wiersza na tablecie, aby uzyskać więcej miejsca na telefonie komórkowym.

• Wypełnienie kolumny 1: 20% dół
• Kolumna 2 Wyściółka: 20% dół
• Kolumna 3 Wyściółka: 20% dół

Dodawanie obrazu 1

Teraz jesteśmy gotowi, aby dodać nasz pierwszy z trzech obrazów, które stworzą nasz projekt podglądu pakietu układu. Śmiało i dodaj moduł obrazu do kolumny 1.

Następnie prześlij obraz do modułu obrazu (powinien mieć rozmiar około 250 na 375 pikseli).

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

• Wyrównanie obrazu: środek
• Szerokość: 220px
• Przepełnienie pionowe: ukryte
• Indeks Z: 4

Ponieważ musimy kierować na kontener obrazu (nie sam obraz), musimy dodać niestandardową wysokość, cień pola i promień obramowania za pomocą niestandardowego CSS. Dodaj następujący kod CSS do elementu głównego:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Umożliwi to dostosowanie obrazu za pomocą kontenera obrazu, gdy później dodamy efekt najechania. Jak widać teraz, obraz został lekko przycięty na dole, ponieważ mamy niestandardową wysokość 240px i przepełnienie ustawione na „ukryte”.

Dodawanie obrazu 2

Aby utworzyć drugi obraz, dodaj nowy moduł obrazu poniżej pierwszego modułu obrazu w kolumnie 1. Następnie prześlij nowy obraz (250X350) do modułu.

Następnie musimy umieścić obraz za i nieco na lewo od obrazka 1. Aby to zrobić, musimy dodać niestandardową szerokość i wysokość z ukrytym przepełnieniem pionowym (podobnie jak zrobiliśmy z obrazkiem 1). Główną różnicą jest to, że musimy nadać obrazowi pozycję bezwzględną, aby wyświetlał się w lewym górnym rogu kolumny za obrazem 1.

Aby to zrobić, zaktualizuj następujące elementy:

• Szerokość: 180px
• Przepełnienie pionowe: ukryte

Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Dodawanie obrazu 3

Teraz jesteśmy gotowi do dodania trzeciego obrazu, aby ukończyć podgląd pakietu układu. W tym momencie sensowne jest użycie trybu widoku krawędziowego, ponieważ mamy pewne nakładanie się, co utrudnia korzystanie z wizualnego konstruktora. Wdróż tryb szkieletowy i zduplikuj obraz 2.

Zduplikowaliśmy obraz, ponieważ chcemy przenieść większość ustawień, których użyliśmy dla obrazka 2. Jedyną różnicą (oprócz nowego obrazu) jest to, że musimy ustawić obraz po prawej zamiast po lewej stronie.

Otwórz zduplikowany obraz (obraz 3) i zaktualizuj moduł obrazu o nowy obraz (250×375).

Następnie zaktualizuj niestandardowy CSS, zmieniając left właściwość pozycji na right właściwość pozycji. Żadne inne zmiany w CSS nie są potrzebne.

Jeśli wolisz, możesz skopiować i wkleić następujący kod CSS w elemencie głównym, aby zastąpić bieżący kod CSS.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Jak na razie dobrze

Oto ostateczny wynik do tej pory.

Projekt jest naprawdę piękny, jak jest, ale podnieśmy go nieco z efektem unoszenia się.

Dodanie CSS efektu rozwierania się w powietrzu

Normalnie, gdybyśmy mieli do czynienia tylko z jednym obrazem, moglibyśmy łatwo dodać efekty najechania za pomocą wbudowanych opcji Divi. Ale ten efekt najechania po najechaniu wymaga, aby aktywować stan najechania wielu elementów podrzędnych (obrazów) jednocześnie, gdy najedziemy kursorem na kolumnę nadrzędną. Po najechaniu kursorem na kolumnę chcemy, aby następujące elementy wykonały następujące korekty obrazów.

1. Dodaj czas trwania przejścia do każdego obrazu, aby uzyskać płynne przejście po najechaniu myszą.
2. Dostosuj obraz 1, aby miał szerokość 180 pikseli i wysokość 240 pikseli. Spowoduje to, że kontener obrazu stanie się wyższy i węższy, aby pokazać więcej obrazu.
3. Dostosuj obraz 2 i 3, aby miał szerokość 160 pikseli i wysokość 220 pikseli. Spowoduje to również, że obrazy staną się wyższe i węższe, aby pokazać więcej obrazu.
4. Wyreguluj Obraz 2, aby obrócić o 5 stopni w kierunku przeciwnym do ruchu wskazówek zegara i przesuń lekko w lewo. Możemy to zrobić, dodając wartość -5 stopni właściwości transform:rotate i zmieniając wartość właściwości left pozycji na 0.
5. Wyreguluj obraz 3, aby obrócić o 5 stopni w prawo i przesuń lekko w prawo. Możemy to zrobić, dodając wartość 5 stopni do właściwości transform:rotate i zmieniając wartość właściwości right pozycji na 0.

Aby dodać niestandardowy CSS potrzebny do tych efektów najechania, musimy dodać niestandardową klasę CSS do wiersza zawierającego obrazy. Umożliwi nam to zastosowanie niestandardowego CSS tylko do obrazów w określonym wierszu.

Otwórz ustawienia wiersza i dodaj następującą klasę CSS.

• Klasa CSS: fan-out-images

Aby dodać niestandardowy CSS do strony, otwórz ustawienia strony i dodaj następujący niestandardowy CSS na karcie Zaawansowane.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Dodałem komentarz nad każdym fragmentem CSS, aby przypomnieć, co każdy z nich robi.

Kiedy skończysz. Sprawdź efekt końcowy.

Ostateczny wynik

Opcjonalny efekt najechania: Oddzielne obracanie obrazu 1 i 2 po najechaniu kursorem

Aby dodać kolejny poziom zaangażowania do obrazów podglądu pakietu układów, możemy ustawić obrót obrazu 1 i obrazu 2 niezależnie od początkowego efektu najechania. Umożliwi to użytkownikowi interakcję z obrazami w wyjątkowy sposób. Jeśli chcesz, możesz nawet dodać osobne linki lub podglądy lightbox do tych obrazów.

Oto jak to robisz.

Wyjmowanie właściwości przekształcenia z ustawień strony Niestandardowy CSS

Najpierw musisz usunąć dwie linie niestandardowego CSS, które obracają obraz po najechaniu kursorem na kolumnę. Otwórz niestandardowy CSS w ustawieniach strony i wyjmij następujące elementy:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Dodawanie właściwości transformacji po najechaniu na obraz 2

Następnie otwórz ustawienia modułu obrazu dla obrazu 2 i użyj wbudowanych opcji transformacji Divi, aby dodać tę samą wartość obrotu transformacji, którą wcześniej usunęliśmy dla stanu najechania.

• Przekształć Obróć oś Z (najechanie): -5deg
• Przekształć Przesuń oś X (najechanie): -20px

Dodawanie właściwości przekształcenia po najechaniu na obraz 3

Następnie zaktualizuj ustawienia modułu obrazu dla obrazu 3, aby dodać właściwość transform rotate.

• Przekształć Obróć oś Z (najechanie): 5 stopni
• Przekształć Przesuń oś X (najechanie): 20px

Teraz sprawdź efekt końcowy.

Ostateczny wynik

Dodawanie linków do obrazów

Jeśli chcesz utworzyć łącza przekierowujące, aby zaprezentować określony pakiet układów lub projekt strony na osobnej stronie, najlepiej byłoby dodać ten sam adres URL łącza do wszystkich trzech obrazów w pakiecie. Aby to zrobić, otwórz każdy z modułów obrazu i dodaj adres URL łącza.

Dodawanie nowych podglądów pakietu układów do innych kolumn

Aby zakończyć projekt, możemy skopiować trzy obrazy z kolumny 1 i wkleić je do kolumny 2 i kolumny 3.

Następnie wystarczy zaktualizować każdy z obrazów w kolumnie 2 i 3 o nowe.

Otóż ​​to!

Ostateczny projekt

Oto ostateczny projekt. W górnym wierszu widoczny jest efekt rozproszenia po najechaniu kursorem na kolumnę. Drugi rząd pokazuje dodatkowy efekt najechania, który został dodany do obrazu 2 i 3 osobno.

Trzykolumnowy układ na pulpicie dostosuje się do jednej kolumny na tablecie i telefonie.

Końcowe przemyślenia

Efekt rozwierania się to piękny i wciągający element projektu, którego możesz użyć do wyróżnienia układów stron we własnej witrynie. Połączenie niestandardowego CSS i wbudowanych ustawień Divi, które omówiliśmy w tym samouczku, będzie działać magicznie. Ta konfiguracja będzie doskonałym punktem wyjścia do odkrywania większej liczby projektów za pomocą konstruktora Divi. Mamy nadzieję, że to zainspiruje Cię do przeniesienia swojego portfolio na wyższy poziom.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!