Jak odsłonić zawartość kolumny na Hover za pomocą Divi (bezpłatne pobieranie!)

W jednym z najnowszych postów Divi pokazaliśmy, jak wyświetlić ukrytą zawartość wierszy po najechaniu myszą. Dzisiaj pokażemy, jak użyć tego samego podejścia do ujawnienia zawartości kolumny. Podejście, którym się zajmiemy, jest podobne i pozwoli Ci tworzyć wszelkiego rodzaju projekty, które mają przyjemny efekt najechania na pulpicie, ale działają dobrze również na mniejszych ekranach bez opcji najechania.

Mamy nadzieję, że ten samouczek zainspiruje Cię do tworzenia wszelkiego rodzaju interaktywnych projektów dla tworzonych stron internetowych! Na końcu posta będziesz mógł pobrać plik JSON i dostosować go do swoich potrzeb.

Weźmy się za to!

Zapowiedź

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

Pulpit

Jak widać na poniższym GIF-ie, mamy płynne przejście, które pokazuje zawartość kolumny po najechaniu myszą.

mobilny

Z drugiej strony na mniejszych ekranach zawartość kolumny będzie już wyświetlana bez konieczności najeżdżania kursorem.

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową zwykłą sekcję

Rozstaw

Otwórz nową lub istniejącą stronę i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i dodaj niestandardowe górne i dolne niestandardowe dopełnienie w ustawieniach odstępów.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i wprowadź zmiany w ustawieniach rozmiaru. Te ustawienia pozwolą wierszowi zająć całą szerokość ekranu, a także pomogą usunąć całą przestrzeń między kolumnami.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Przejdź do ustawień odstępów następnego wiersza. W tym miejscu zastąpimy spację, którą usunęliśmy w poprzednim kroku, dodając niestandardowe wartości dopełnienia.

• Lewa wyściółka: 8vw
• Prawa wyściółka: 8vw
• Kolumna 1 Prawa wyściółka: 2vw
• Kolumna 2 Lewa wyściółka: 1vw
• Kolumna 2 Prawa wyściółka: 1vw
• Kolumna 3 Lewa wyściółka: 2vw

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Zacznij od modułu tekstowego w kolumnie 1. Dodaj wybrane treści H3.

Ustawienia tekstu H3

Następnie przejdź do ustawień tekstu nagłówka i wprowadź zmiany w wyglądzie treści H3.

• Czcionka nagłówka 3: Dydaktyka gotycka
• Grubość czcionki nagłówka 3: pogrubiona
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #3567ff
• Rozmiar tekstu nagłówka 3: 1.2vw (komputer), 20px (tablet i telefon)

Rozstaw

Dodaj kilka niestandardowych wartości odstępów do modułu tekstowego.

• Dolny margines: 4vw
• Górna wyściółka: 4vw
• Dolna wyściółka: 4vw

Cień Pudełka

I nadaj modułowi subtelny cień pudełka.

• Pozycja pionowa cienia pudełka: 36px
• Siła rozmycia cieni w pudełku: 60px
• Kolor cienia: rgba (0,0,0,0,06)

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Kontynuuj, dodając kolejny moduł tekstowy tuż pod poprzednim. Dodaj dowolną treść akapitu.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i wprowadź zmiany w ustawieniach tekstu.

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0.8vw (komputer), 14px (tablet i telefon)
• Odstępy między literami tekstu: -0,05vw
• Wysokość linii tekstu: 2,2 em
• Orientacja tekstu: wyjustowana
• Kolor tekstu: ciemny

Rozstaw

Pobaw się również z niestandardowymi wartościami marginesów i dopełnienia w ustawieniach odstępów.

• Dolny margines: 3vw
• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw
• Lewa wyściółka: 4vw
• Prawa wyściółka: 4vw

Granica

I dodaj lewą i prawą ramkę do modułu, używając następujących ustawień:

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #e5e5e5

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym modułem, którego potrzebujemy w pierwszej kolumnie, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie przycisku na środek.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, otwierając ustawienia przycisków i zmieniając wygląd przycisku, aby dopasować go do ogólnego projektu, który chcemy osiągnąć.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 15px (tablet i telefon)
• Kolor tekstu przycisku: #000000
• Szerokość obramowania przycisku: 1px
• Kolor obramowania przycisku: #dddddd
• Promień obramowania przycisku: 0px
• Odstępy między literami przycisków: -0,05vw
• Waga czcionki: pogrubiona
• Styl czcionki: wielkie litery

Rozstaw

Pobaw się również wartościami odstępów modułu przycisku.

• Margines dolny: 100px (tablet i telefon)
• Górna wyściółka: 0.8vw (komputer stacjonarny), 10px (tablet i telefon)
• Dolna wyściółka: 0,8vw (komputer stacjonarny), 10px (tablet i telefon)
• Lewa wyściółka: 3.5vw (komputer), 50px (tablet i telefon)
• Prawa wyściółka: 3.5vw (komputer), 50px (tablet i telefon)

Klonuj moduły w kolumnie 1 dwukrotnie i umieść duplikaty w pozostałych kolumnach

Gdy skończysz dodawać trzy różne moduły do ​​kolumny 1, możesz sklonować każdy z nich dwukrotnie. Umieść duplikaty w dwóch pozostałych kolumnach, aby uzyskać ten sam projekt w każdej z kolumn.

Zmień kolor tekstu modułu tekstowego nr 1 w kolumnie 2

Otwórz pierwszy moduł tekstowy w kolumnie 2 i zmień kolor tekstu.

• Kolor tekstu nagłówka 3: #6d28c1

Zmień kolor tekstu modułu tekstowego nr 1 w kolumnie 3

Zrób to samo dla pierwszego modułu tekstowego w trzeciej kolumnie.

• Kolor tekstu nagłówka 3: #15668e

Dodaj moduł tekstu nakładki do kolumny 1

Dodaj zawartość

Teraz, gdy mamy już całą potrzebną zawartość kolumny, możemy dodać nakładający się element, który ukryje zawartość przed najechaniem. Aby to osiągnąć, użyjemy innego modułu tekstowego. Śmiało i dodaj kolejny do pierwszej kolumny. Upewnij się, że jest to ostatni moduł w kolumnie. Dodaj wybrane przez siebie treści.

Tło gradientowe

Kontynuuj, dodając gradientowe tło do modułu.

• Kolor 1: #6a30ff
• Kolor 2: #3567ff
• Kierunek gradientu: 124deg

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Czcionka tekstu: Didact Gothic
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 2vw
• Orientacja tekstu: Środek

Rozstaw

I utwórz kształt z modułu, dodając kilka niestandardowych wartości wypełnienia. Dodajemy także ujemny margines górny, aby utworzyć nakładanie się tego modułu i zawartości kolumny. Treści, które ukryjesz za modułem tekstowym, nie będzie można kliknąć. Dlatego ważne jest, aby wezwanie do działania, takie jak przycisk w naszym przykładzie, było widoczne bez najechania kursorem.

• Górny margines: -38vw
• Górna wyściółka: 15vw
• Dolna wyściółka: 15vw

Granica

Dodaj kilka zaokrąglonych rogów do modułu tekstowego.

Cień Pudełka

Wraz z subtelnym pudełkowym cieniem.

• Siła rozmycia cieni w pudełku: 40px
• Kolor cienia: rgba(0,0,0,0.16)

Filtry domyślne

Następnie przejdź do ustawień filtrów i upewnij się, że krycie to domyślnie „100%”.

• Krycie: 100%

Po najechaniu na filtry

Zmień krycie po najechaniu na „0%”. Spowoduje to, że moduł zniknie i zamiast tego pojawi się cała zawartość kolumny.

• Krycie: 0%

niestandardowe CSS

Aby upewnić się, że moduł tekstowy pozostaje na wierzchu całej zawartości kolumny, dodaj dwa wiersze kodu CSS w zakładce zaawansowanej modułu tekstowego.

z-index: 99;
position: relative

Widoczność

I ukryj cały moduł na tablecie i telefonie. Jak wspomniano na początku tego postu, wyświetlamy całą zawartość kolumn na mniejszych ekranach, aby upewnić się, że wrażenia użytkowników są dobre.

Klonuj moduł tekstowy nakładki dwa razy i umieść duplikaty w pozostałych kolumnach

Gdy skończysz modyfikować moduł tekstowy nakładki, sklonuj go dwukrotnie. Umieść każdy z duplikatów w dwóch pozostałych kolumnach.

Zmień tło gradientowe modułu tekstu nakładki w kolumnie 2

Zmień kolor tła gradientu pierwszego duplikatu.

• Kolor 1: #d530ff
• Kolor 2: #6d28c1

Zmień tło gradientowe modułu tekstu nakładki w kolumnie 3

Zrób to samo dla drugiego duplikatu.

• Kolor 1: #41ff30
• Kolor 2: #15668e

Pobierz sekcję ZA DARMO

Aby położyć ręce na sekcji ujawniania kolumn, najpierw musisz ją 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!

Zapowiedź

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wyświetlić zawartość kolumny po najechaniu myszą. Możesz użyć tego podejścia do każdego rodzaju tworzonej witryny, aby dodać dodatkowy poziom interakcji. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!