Divi: Jak ujawniać zawartość po najechaniu kursorem na zakładki

Czy chciałbyś mieć treść który jest widoczny po najechaniu kursorem na rozszerzalne karty kątowe Divi ?

Zawsze fajnie jest odkrywać nowe i kreatywne sposoby interakcji z użytkownikami za pomocą efektów najechania myszką. Świetnym sposobem na osiągnięcie tego jest ujawnienie treść po najechaniu myszą za pomocą wysuwanych zakładek narożnych. Dzięki temu użytkownik może najechać kursorem na kartę w rogu kolumny lub obrazu, aby rozwinąć nakładkę za pomocą treść dodatkowa użyteczność dla użytkownika.

W tym samouczku stworzymy układ Divi całkowicie unikalny, który ujawni zawartość po najechaniu myszką za pomocą rozwijanych zakładek kątowych. W rzeczywistości pokażemy Ci, jak zaprojektować wysuwane narożniki dla wszystkich czterech narożników kolumny w Divi.

Zacznijmy!

badanie

Oto krótkie spojrzenie na układ rozwijanych zakładek narożnych, które będziemy wspólnie budować. Zwróć uwagę, jak pięknie symetryczne są efekty najechania i zawartość.

Utwórz nową stronę za pomocą Divi Builder

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

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

Tworzenie rozszerzalnego układu nakładek zawartości w Divi

Konstrukcja wysuwanego narożnika narożnego z prawej dolnej pozycji

Aby rozpocząć, dodaj dwukolumnowy wiersz do zwykłej sekcji.

Przed dodaniem modułu zaktualizuj parametry linii w następujący sposób:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 4

Dla pierwszego pokazanego elementu utworzymy obraz tła kolumny, który będzie miał zakładkę narożną (za pomocą modułu reklama wydawnicza) w prawym dolnym rogu kolumny, która rozwija się i obejmuje całą kolumnę/obraz po najechaniu myszą.

Przeczytaj także nasz przewodnik na temat Divi: Jak utworzyć płynną siatkę słupów po najechaniu myszą

Zacznijmy od dodania modułu Blurb.

Dodaj moduł Blurb do kolumny 1

Ustawienia kolumny 1

Po umieszczeniu notki otwórz ustawienia wiersza i zaktualizuj następujące elementy:

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

UWAGA: W tym przykładzie używamy przezroczystych obrazów piwa w tle pobranych z pakietu układów « Browar“. Są to 128 pikseli na 359 pikseli, więc używamy rzeczywistego rozmiaru obrazu.

Obramowanie kolumny 1

• Zaokrąglone rogi: 10px w prawym dolnym rogu
• Szerokość obramowania (prawa i dolna): 2px
• Kolor obramowania (prawy i dolny): #e94558

Niestandardowy CSS i przepełnienie

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

height: 400px;

Opcja rozwijania 'Widoczność' i wprowadź następujące zmiany:

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

Dodaj treść do modułu Blurb

Jesteśmy teraz gotowi do rozpoczęcia dostosowywania modułu Blurb w kolumnie 1. Otwórz ustawienia modułu 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

Dostosowanie modułu Blurb

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

• Tło (pulpit): przezroczyste
• Pulpit (najechanie): rgba (255,255,255,0.9)

Pod zakładką Wnętrze, zaktualizuj następujące informacje:

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

• Szerokość obrazu/ikony: 100px (komputer), 64px (telefon)
• Szerokość treści: 100%
• Wzrost: 100%
• Wypełnienie (biurkowy): 15% (góra i dół), 8% (lewy i prawy)
• Wypełnienie (uniesienie): 8% (góra, dół, lewo i prawo)

• Zaokrąglone rogi (komputer): 20 pikseli w lewym górnym rogu
• Zaokrąglone rogi (najechanie): 10 pikseli w lewym górnym rogu
• Szerokość obramowania (góra i lewo): 4px (komputer), 2px (najechanie)
• Kolor obramowania (górny i lewy): #e94558

Opcja przekształcania (komputer stacjonarny)

• Skala transformacji (X i Y): 50%

• Przekształć Tłumacz
  • oś Y: 50%
  • Oś X: 30%

Przeczytaj także nasz przewodnik na temat: Divi: Jak stworzyć przyklejoną stopkę z efektem „Odsłoń”

• Przekształć pochodzenie: dolny i prawy

Opcje transformacji (najedź)

• Skala transformacji (Y i X) (najechanie): 100%

• Przekształć Przetłumacz (Y i X) (Najechanie): 0%

Aby odwrócić wyróżniony obraz po prawej stronie, dodaj następujący niestandardowy CSS do obszaru Treść rozmycia :

direction: rtl

UWAGA: „rtl” oznacza "Od prawej do lewej", który zmienia domyślną kolejność zawartości (od lewej do prawej).

Wynik

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

Konstrukcja wysuwanego narożnika narożnego od dolnej lewej pozycji

Zduplikowana kolumna

Aby utworzyć zakładkę narożną rozszerzającą się od lewego dolnego położenia, możemy ponownie uruchomić projekt 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.

Zaktualizuj ustawienia kolumny 2

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

• Zaokrąglone rogi: 10 pikseli w lewym dolnym rogu
• Szerokość obramowania (po prawej): 0px
• Szerokość obramowania (po lewej): 2px
• Kolor: #e94558

Zaktualizuj parametry modułu Blurb

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

• Translacja transformacji (oś X) (komputer stacjonarny): -30%
• Transform Origin (komputer): na dole po lewej

Następnie usuń niestandardowy kod CSS z obszaru zawartości Blurb.

Wynik

Oto wynik. Zauważ, że ta jest symetryczna do pierwszej i rośnie od lewej dolnej pozycji kolumny.

Projekt wysuwanego narożnika narożnego z prawej górnej pozycji

Jesteśmy teraz gotowi do rozpoczęcia naszych dwóch ostatnich projektów narożników rozsuwanych. Aby mieć przewagę, zduplikujmy cały wiersz zawierający notkę, którą już zaprojektowaliśmy.

Zaktualizuj ustawienia kolumny 1

Następnie otwórz ustawienia dla 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 parametry modułu Blurb

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

• Zaokrąglone rogi (komputer): 20px na dole po lewej
• Zaokrąglone rogi (najechanie): 10px na dole po lewej
• Szerokość górnej krawędzi: 0px
• Szerokość dolnego obramowania: 4px (komputer), 2px (najechanie)
• Szerokość dolnej krawędzi: #e94558

• Translacja transformacji (oś Y) (komputer): -50%
• Przekształć pochodzenie: w prawym górnym rogu

Niestandardowy CSS

W tej chwili widzimy tylko lewą dolną część modułu prezentacji, która nie wyświetla naszego tytułu, jak dwie pozostałe prezentacje 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 CSS.

Dodaj następujący niestandardowy CSS do obszaru Tytuł plamy :

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

Następnie dodaj następujący kod CSS do obszaru zawartości Treść rozmycia :

direction: rtl;
height: 100%;

Projekt wysuwanego narożnika narożnego 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.

Zaktualizuj ustawienia kolumny 2

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

• Obramowania Narożniki: 10 pikseli w lewym górnym rogu
• Szerokość dolnej krawędzi: 0px
• Szerokość górnej krawędzi: 2px
• Kolor górnej krawędzi: #e94558

Zaktualizuj parametry modułu Blurb

Następnie otwórz ustawienia tekstu modułu Blurb w kolumnie 2 i zaktualizuj następujące elementy:

• Zaokrąglone rogi (komputer): 20 pikseli 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:

• Translacja transformacji (oś Y) (komputer): -50%
• Przekształć pochodzenie: u góry po lewej

Niestandardowy CSS

Następnie dodaj następujący niestandardowy CSS do obszaru Tytuł plamy :

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

Dodaj również następujący kod CSS w polu Treść rozmycia :

height: 100%;

Zakończ projektowanie układu

Kolor tła sekcji

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

• Tło: #efefef

Dodaj tytuł

Aby utworzyć tytuł, dodaj linię do kolumny pośrodku dwóch linii

Następnie dodaj moduł Tekst.

Dodaj treść: „Sezonowy”.

Następnie zaktualizuj następujące ustawienia:

• Czcionka: Merriweather
• Waga czcionki: pogrubiona
• Styl: TT
• Wyrównanie tekstu: wyśrodkowane
• Kolor tekstu: #999999
• Rozmiar: 50px (komputer), 30px (tablet), 24px (telefon)
• Odstępy między literami: 1em

• Padding (po lewej): 50px (komputer), 30px (tablet), 24px (telefon)

Ostateczny wynik

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

A oto projekt na telefon komórkowy.

Pobierz DIVI teraz !!!

Wnioski

Zakładki narożne pokazane w tym samouczku z pewnością będą działać dla każdego rodzaju treści, które chcesz zaprezentować na swoim Witryna internetowa 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ą.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...