Jak odsłonić zawartość po najechaniu kursorem z rozwijanymi zakładkami narożnymi w Divi (DARMOWE pobieranie)

Zawsze fajnie jest odkrywać nowe i kreatywne sposoby angażowania użytkowników w treści za pomocą unikalnych efektów najechania kursorem. Jednym ze świetnych sposobów, aby to zrobić, jest ujawnienie zawartości po najechaniu kursorem za pomocą rozwijanych zakładek narożnych. Dzięki temu użytkownik może najechać kursorem na kartę w rogu kolumny lub obrazu, aby rozwinąć nakładkę o dodatkowe przydatne treści dla użytkownika.

W tym samouczku stworzymy całkowicie unikalny układ Divi, który pokaże zawartość po najechaniu kursorem za pomocą rozwijanych zakładek narożnych. W rzeczywistości pokażemy, jak zaprojektować rozwijaną zakładkę narożną dla wszystkich czterech rogów kolumny w Divi.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na układ rozwijanej zakładki narożnej, który wspólnie zbudujemy. Zwróć uwagę, że efekty najechania i zawartość są pięknie symetryczne.

Pobierz układ za DARMO

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?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie rozszerzonego układu nakładek treści od podstaw

Część 1: Tworzenie rozwijanej zakładki narożnej od prawego dolnego rogu

Na początek dodaj dwukolumnowy (pół do połowy) wiersz do zwykłej sekcji.

Przed dodaniem modułu zaktualizuj ustawienia wiersza z niestandardową szerokością rynny w następujący sposób:

• Szerokość rynny: 4

Dla tego pierwszego polecanego elementu utworzymy obraz tła kolumny, który będzie miał zakładkę narożną (przy użyciu modułu notatek) w prawym dolnym rogu kolumny, która rozwija się i nakłada na całą kolumnę/obraz po najechaniu myszą.

Zacznijmy od dodania modułu notki.

Dodaj moduł Blurb

Dodaj moduł notki do kolumny 1.

Nie zamierzamy jeszcze go stylizować. Zasadniczo potrzebowaliśmy trochę treści, aby nadać styl kolumnie zawierającej notkę.

Ustawienia kolumny 1

Po umieszczeniu notki otwórz ustawienia wiersza, a następnie kliknij, aby edytować ustawienia kolumny 1. Następnie zaktualizuj następujące elementy:

• Obraz tła [wstaw obraz]
• Rozmiar obrazu tła: rzeczywisty rozmiar

UWAGA: na przykład używam obrazów piwa z przezroczystym tłem zaczerpniętych z pakietu Brewery Layout Pack. Są one 128 na 359 pikseli, dlatego używam rzeczywistego rozmiaru obrazu.

Kolumna 1 Obramowanie

• Zaokrąglone rogi: 10px w prawym dolnym rogu
• Szerokość prawego obramowania: 2px
• Kolor prawego obramowania: #e94558
• Szerokość dolnej krawędzi: 2px
• Kolor dolnej krawędzi: #e94558

Niestandardowy CSS i przepełnienie

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu:

height: 400px;

Aktualizacja następujących elementów:

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Ta niestandardowa wysokość jest niezbędna, aby nasz moduł notatek (zakładka narożna) mógł rozszerzyć pełną wysokość kolumny. A ukryte przepełnienie jest potrzebne, abyśmy mogli ukryć większość modułu blurb poza kolumną, aż do stanu najechania.

Dodawanie zawartości modułu Blurb

Teraz jesteśmy gotowi do rozpoczęcia dostosowywania modułu notatek w kolumnie 1. Otwórz ustawienia notatek i zaktualizuj następujące elementy:

• Tytuł: Mango IPA
• Ciało:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• Obraz: Dodaj ten sam obraz, który został użyty jako tło kolumny

Projektowanie modułu Blurb

Nadaj notce kolor tła po najechaniu kursorem w następujący sposób:

• Kolor tła (pulpit): przezroczysty
• Kolor tła (najechanie): rgba (255,255,255,0.9)

Na karcie projekt zaktualizuj następujące elementy:

• Umieszczenie obrazu/ikony: po lewej
• Czcionka tytułu: Oswald
• Styl czcionki tytułu: TT
• Rozmiar tekstu tytułu: 40px
• Grubość czcionki ciała: pół pogrubiona
• Kolor tekstu ciała (komputer): przezroczysty
• Kolor tekstu (najechanie): #121212

• Szerokość obrazu: 100px (komputer), 64px (telefon)
• Szerokość treści: 100%
• Wzrost: 100%
• Wypełnienie (pulpit): 15% góra, 15% dół, 8% lewo, 8% prawo
• Dopełnienie (najechanie): 8% góra, 8% dół, 8% lewo, 8% prawo

• Zaokrąglone rogi (domyślnie): 20px w lewym górnym rogu
• Zaokrąglone rogi (najechanie): 10px w lewym górnym rogu
• Szerokość górnej krawędzi: 4px (komputer), 2px (najechanie)
• Kolor górnej krawędzi: #e94558
• Szerokość lewego obramowania: 4px (komputer), 2px (najechanie)
• Kolor lewej krawędzi: #e94558

Opcja przekształcania (komputer stacjonarny)

• Skala transformacji Oś Y: 50%
• Skala transformacji osi X: 50%
• Przekształć Przesuń oś Y: 50%
• Przekształć Przesuń oś X: 30%
• Przekształć początek: dolny prawy

Opcje transformacji (najedź kursorem)

• Skala transformacji Oś Y (najechanie): 100%
• Skala transformacji osi X (najechanie): 100%
• Przekształć Przesuń oś Y (najechanie): 0%
• Przekształć Przesuń oś X (najechanie): 0%

Aby odwrócić obraz rozmycia na prawą stronę, dodaj następujący niestandardowy kod CSS do pola Treść rozmycia:

direction: rtl

UWAGA: Kierunek „rtl” oznacza „od prawej do lewej”, co zmienia domyślną kolejność treści (od lewej do prawej).

Wynik

Sprawdźmy końcowy wynik naszej rozwijanej zakładki narożnej z prawej dolnej pozycji. Zwróć uwagę, jak rozszerza się, aby wypełnić całą kolumnę po najechaniu myszą.

Część 2: Tworzenie rozwijanej zakładki narożnej od lewej dolnej pozycji

Powiel kolumnę

Aby utworzyć rozwijaną zakładkę narożną od dolnej lewej pozycji, możemy szybko rozpocząć projektowanie poprzez zduplikowanie całej kolumny. Otwórz ustawienia wiersza i zduplikuj kolumnę 1. Następnie usuń dodatkową kolumnę, aby mieć tylko dwa dokładne duplikaty.

Aktualizuj ustawienia kolumny 2

Następnie otwórz ustawienia dla kolumny 2 i zaktualizuj następujące elementy:

• Zaokrąglone rogi: 10px w lewym dolnym rogu
• Szerokość prawego obramowania: 0px
• Szerokość lewej krawędzi: 2px
• Kolor lewej krawędzi: #e94558

Zaktualizuj ustawienia rozmycia

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

• Wyrównanie tekstu: prawo
• Zaokrąglone rogi (komputer): 20px w prawym górnym rogu
• Zaokrąglone rogi (najechanie): 10px w prawym górnym rogu
• Szerokość lewej krawędzi: 0px
• Szerokość prawego obramowania: 4px (komputer), 2px (najechanie)
• Kolor prawego obramowania: #e94558

• Przekształć Przetłumacz oś X (komputer stacjonarny): -30%
• Transform Origin (pulpit): na dole po lewej

Następnie pamiętaj o usunięciu niestandardowego kodu CSS w polu Treść Blurb.

Wynik

Oto wynik. Zauważ, że ten jest symetryczny do pierwszego i rozszerza się od lewego dolnego położenia kolumny.

Część 3: Tworzenie rozwijanej zakładki narożnej od prawej górnej pozycji

Teraz jesteśmy gotowi do rozpoczęcia naszych dwóch ostatnich projektów rozwijanych zakładek narożnych. Aby mieć przewagę, zduplikujmy cały wiersz zawierający notkę, którą już zaprojektowaliśmy.

Aktualizuj ustawienia kolumny 1

Następnie otwórz ustawienia zduplikowanego wiersza, a następnie otwórz ustawienia dla kolumny 1 i zaktualizuj następujące elementy:

• Zaokrąglone rogi 10px w prawym górnym rogu
• Szerokość dolnej krawędzi: 0px
• Szerokość górnej krawędzi: 2px
• Kolor górnej krawędzi: #e94558

Zaktualizuj ustawienia modułu Blurb

Następnie otwórz ustawienia modułu notki i zaktualizuj następujące elementy:

• Zaokrąglone rogi (komputer): 20px na dole po lewej
• Zaokrąglone rogi (najechanie): 10px w lewym dolnym rogu
• Szerokość górnej krawędzi: 0px
• Szerokość dolnego obramowania: 4px (komputer), 2px (najechanie)
• Kolor dolnej krawędzi: #e94558
• Przekształć Przesuń oś Y (komputer stacjonarny): -50%
• Przekształć pochodzenie: w prawym górnym rogu

Niestandardowy CSS Blurb

W tej chwili widzimy tylko dolną lewą część modułu notatek, która nie pokazuje naszego tytułu, jak pozostałe dwie notki w powyższym rzędzie. Aby wyświetlić tytuł na karcie, musimy zmienić położenie tytułu w lewym dolnym rogu notki za pomocą niestandardowego kodu CSS.

Dodaj następujący niestandardowy kod CSS do pola Tytuł Blurb:

position: absolute;
bottom: 0;
left: 15px;

Następnie dodaj następujący kod CSS do pola treści Blurb:

direction: rtl;
height: 100%;

Część 4: Tworzenie rozwijanej zakładki narożnej od lewej górnej pozycji

Dla naszego czwartego i ostatniego efektu najechania na rozwijaną zakładkę narożną, umieścimy ją w lewym górnym rogu, aby ukończyć symetryczny projekt całego układu siatki.

Aktualizuj ustawienia kolumny 2

W ustawieniach wiersza otwórz ustawienia dla kolumny 2 i zaktualizuj następujące elementy:

• Zaokrąglone rogi: 10px w lewym górnym rogu
• Szerokość dolnej krawędzi: 0px
• Szerokość górnej krawędzi: 2px
• Kolor górnej krawędzi: #e94558

Zaktualizuj ustawienia rozmycia

Następnie otwórz ustawienia notki w kolumnie 2 i zaktualizuj następujące elementy:

• Zaokrąglone rogi (komputer): 20px w prawym dolnym rogu
• Zaokrąglone rogi (najechanie): 10px w prawym dolnym rogu
• Szerokość górnej krawędzi: 0px
• Szerokość dolnego obramowania: 4px (komputer), 2px (najechanie)
• Kolor dolnej krawędzi: #e94558

Następnie zaktualizuj opcje transformacji:

• Przekształć Przetłumacz oś X (komputer stacjonarny): -30%
• Przekształć pochodzenie: górny lewy

Niestandardowy CSS Blurb

Następnie dodaj następujący niestandardowy kod CSS w polu Tytuł plamy:

position: absolute;
bottom: 0%;
right: 0%;

Następnie dodaj następujący kod CSS do pola Treść Blurb:

height: 100%;

Część 4: Wykończenie projektu układu

Kolor tła sekcji

Dodaj kolor tła sekcji w następujący sposób:

• Kolor tła: #efefef

Dodawanie tytułu

Aby utworzyć tytuł, dodaj wiersz pośrodku dwóch wierszy i dodaj moduł tekstowy do jednego wiersza kolumny.

Dodaj treść: „Sezonowy”.

Następnie zaktualizuj następujące ustawienia:

• Czcionka nagłówka 2: Merriweather
• Grubość czcionki nagłówka 2: pogrubiona
• Styl czcionki nagłówka 2: TT
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #999999
• Rozmiar tekstu nagłówka 2: 50px (komputer), 30px (tablet), 24px (telefon)
• Nagłówek 2 Odstępy między literami: 1em
• Padding: 50px w lewo (komputer), 30px w lewo (tablet), 24px w lewo (telefon)

Ostateczny wynik

Sprawdź końcowy wynik układu z rozwijanymi zakładkami narożnymi.

A oto projekt na telefon komórkowy.

Końcowe przemyślenia

Rozwijające się zakładki narożne zawarte w tym projekcie układu z pewnością będą działać dla wszystkich rodzajów treści, które chcesz umieścić na swojej stronie internetowej Divi. Nie musisz też wykorzystywać wszystkich czterech rogów. Na przykład możesz utworzyć układ siatki dla obrazów, używając tylko kart w prawym górnym rogu, aby wyświetlić zawartość po najechaniu myszą. Możliwości projektowe są w tym przypadku obfite. Baw się dobrze.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!