Jak odsłonić zawartość za pomocą efektu migawki w Divi

Ujawnianie zawartości modułu po najechaniu myszą może przynieść kilka pomocnych korzyści. 1) Może to być świetny sposób na uzyskanie bardziej zwartego lub eleganckiego projektu strony internetowej. 2) Oszczędza miejsce. 3) Może zachęcić użytkowników do interakcji z Twoją stroną. 4) Wygląda fajnie :). Podstawową ideą jest pokazanie tylko części zawartości modułu (jak zwiastun), co zachęca odwiedzających do najechania kursorem, aby zobaczyć więcej. Po najechaniu na moduł cała zawartość zostaje ujawniona z płynnym efektem najechania, który otwiera się i zamyka jak migawka.

W tym samouczku pokażę, jak możesz odsłonić zawartość modułu za pomocą efektu najechania w stylu migawki za pomocą konstruktora Divi.

zapowiedź

Oto krótkie spojrzenie na to, co będziemy wspólnie budować.

Pierwsze kroki

Subskrybuj nasz kanał YouTube

Aby rozpocząć, utwórz nową stronę, nadaj jej tytuł, a następnie wdróż Divi Builder, aby zbudować na interfejsie. Wybierz opcję "Wybierz gotowy układ". Następnie z wyskakującego okienka Divi Library wybierz pakiet układu Day Spa i kliknij, aby użyć układu strony docelowej.

Po załadowaniu układu na stronę możesz zacząć!

Dodawanie dzielników na górze i na dole Blurb

Przewiń stronę w dół do sekcji zatytułowanej „Luksusowe doświadczenia spa” z czterema uwagami. Użyjemy wiersza z czterema notatkami, aby rozpocząć projekt.

Dodawanie pierwszego dzielnika

Naszym pierwszym krokiem jest dodanie przegród nad i pod modułem notatek, aby ukryć za sobą treść notatek. Możesz myśleć o tych przegrodach jak o okiennicach okna, które otwierają się i zamykają po najechaniu.

Dodaj moduł rozdzielający nad notką w pierwszej kolumnie i zaktualizuj następujące elementy:

Kolor tła: #ffffff
Kolor (przegrody): #ffffff
Waga dzielnika: 100px
Wysokość: 100px
Margines niestandardowy: 0px dół

Białe tło pasuje do tła naszej sekcji, ponieważ nie chcemy go widzieć. Upewnij się, że waga i wysokość przegrody są takie same.

Dodawanie drugiej (pomarańczowej) przegrody

Następnie utwórz kolejną przegrodę bezpośrednio pod właśnie utworzoną przegrodą i zaktualizuj następujące elementy:

Kolor: #ff7a6b
Waga dzielnika: 2px
Wysokość: 2px
Margines niestandardowy: 0px dół

Następnie przejdź do zakładki treści i nadaj rozdzielaczowi etykietę administratora „pomarańczowy rozdzielacz”. Pomoże to odróżnić dzielnik od poprzedniego (białego) dzielnika, gdy użyjemy trybu modelu krawędziowego do skopiowania i wklejenia dzielnika do innych kolumn.

Zapisz swoją stronę.

Kopiowanie i wklejanie dzielników wokół Blurbs

Teraz jesteśmy gotowi do skopiowania i wklejenia naszych dzielników nad i pod każdą z notatek w każdej z kolumn. Aby nieco ułatwić ten proces, wdróż tryb szkieletowy, otwierając menu ustawień na dole strony i klikając ikonę szkieletu. (lub użyj shft + w)

W trybie szkieletowym znajdź wiersz zawierający notki i dzielniki, które właśnie utworzyliśmy. Następnie skopiuj i wklej dzielnik i pomarańczowy dzielnik nad i pod każdą z notatek, aby końcowy wynik wyglądał tak.

Następnie wróć do widoku pulpitu (shft + w), aby zakończyć projekt. Twoja strona powinna wyglądać tak.

Dostosowywanie modułów Blurb

Teraz, gdy masz już wszystkie dzielniki, nadszedł czas na edycję naszych modułów notatek z kilkoma dostosowaniami stylu, w tym niestandardowym marginesem, aby stworzyć efekt najechania w stylu migawki.

Najpierw użyj wielokrotnego wyboru, aby wybrać wszystkie cztery moduły notatek. Aby to zrobić, po prostu przytrzymaj ctrl (lub cmd) i kliknij każdy moduł. Następnie otwórz ustawienia jednego z modułów, aby wdrożyć modalne ustawienia elementu.

Pod zakładką treści dodaj kilka linijek pozorowanej treści.

Następnie całkowicie wyłącz cień pola obrazu.

Aby stworzyć efekt najechania migawki, musimy dodać ujemne marginesy górny i dolny, aby domyślnie ukryć zawartość za przegrodami. Następnie ustawiamy marginesy na 0px, aby wyświetlić zawartość po najechaniu myszą. Aby to zrobić, dodaj następujące odstępy.

Margines niestandardowy (domyślny): -100px góra, -65px dół
Margines niestandardowy (najechanie): 0px góra, 0px dół

Dopełnienie niestandardowe (najechanie): 10px góra, 10px dół

Może być konieczne dostosowanie ujemnych wartości marginesów w zależności od ilości posiadanej zawartości. Na przykład może być konieczne ustawienie większego marginesu ujemnego w przypadku dłuższej zawartości tekstowej.

Teraz sprawdź dotychczasowy wynik.

Zauważ, że góra i dół każdego modułu są ukryte za przegrodami, dopóki nie najedziesz na nie.

Czyszczenie efektu zawisu migawki

Centrowanie modułów w pionie

Obecnie efekt najechania migawką przesuwa resztę treści w dół strony po każdym najechaniu myszą. Powoduje to pewien ruch na stronie, który może rozpraszać. Ponadto akcja najechania przesuwa się tylko w dół, co nie jest prawdziwym efektem migawki. Chcemy, aby zawartość otwierała się zarówno w górę, jak i w dół od środka. Aby to osiągnąć, musimy wykonać następujące czynności:

Otwórz ustawienia wierszy i wyrównaj wysokości kolumn.

Następnie przejdź do zakładki zaawansowane i wprowadź następujący niestandardowy kod CSS w elemencie głównym:

align-items: center;

Zapewni to, że moduły pozostaną wyśrodkowane w pionie w kolumnie, dając nam efekt migawki w górę iw dół.

Nadawanie rzędowi stałej wysokości

Aby efekt najechania nie powodował przesuwania zawartości strony poniżej, musimy powstrzymać wzrost wiersza przy każdym najechaniu. Aby to zrobić, musimy ustawić stałą wysokość naszego wiersza na pulpicie. Ponieważ wysokość będzie stała, musisz upewnić się, że wysokość wiersza jest wystarczająco wysoka, aby pomieścić zawartość notki w stanie najechania. Jednak nie chcesz, aby był zbyt wysoki, ponieważ zostawisz zbyt dużo pustej przestrzeni nad i pod modułami. W tym przykładzie ustawię wysokość wiersza na 600px. Ale ponieważ chcemy ustawić stałą wysokość tylko na komputerze, musimy dodać trochę CSS do naszych ustawień strony za pomocą zapytania o media.

Oto, co musisz zrobić.

Przede wszystkim w ustawieniach wiersza nadaj swojemu wierszowi identyfikator CSS:

Identyfikator CSS: stała wysokość

Następnie otwórz ustawienia strony (w zakładce Zaawansowane) i dodaj następujący niestandardowy CSS:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Daje to wierszowi stałą wysokość 600 pikseli na komputerze i zapobiega przesuwaniu reszty zawartości strony w dół przez efekt najechania.

Otóż ​​to!

Wynik końcowy

Sprawdź ostateczny projekt.

A oto efekt najechania migawki.

Dobrym pomysłem może być wyłączenie efektu najechania na urządzeniu mobilnym. Aby to zrobić, wystarczy ustawić niestandardowy margines dla każdego modułu notki w następujący sposób:

Margines niestandardowy (tablet): 0px góra, 0px dół

Końcowe przemyślenia

Ten efekt najechania migawką to kreatywny sposób, aby drażnić odbiorców, aby szukali więcej informacji o różnych usługach. A dzięki magii Divi i kilku fragmentom CSS końcowy wynik jest całkiem elegancki. Jestem pewien, że istnieje wiele innych zastosowań tego efektu najechania migawką, ponieważ możesz użyć dowolnego modułu. Zachęcamy do odkrywania własnych, ekscytujących nowych projektów i nie wahaj się podzielić nimi z nami. Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!