Jak korzystać z efektów najechania na wysokość dzielnika sekcji, aby odsłonić zawartość w Divi
Opublikowany: 2019-06-24Dzielniki sekcji nadal są popularnym elementem projektu Divi. Do wyboru jest wiele stylów dzielników z przydatnymi opcjami, które ułatwiają dodawanie unikalnych przejść i tła do strony.
W tym samouczku użyjemy dzielników sekcji nieco inaczej. Divi pozwala na regulację wysokości i ułożenie każdej przegrody. Pozwala nam to na umieszczenie przegród nad określonymi obszarami lub treściami w obrębie sekcji. Używając opcji hover dla wysokości separatora, możemy dodać unikalne efekty hover, które ujawniają częściowo ukrytą zawartość. Świetnie się to sprawdza w celu przyciągnięcia uwagi do konkretnego wezwania do działania lub przycisku, który użytkownicy mają kliknąć.
Zacznijmy.
zapowiedź
Pobierz ZA DARMO efekty unoszenia dzielnika sekcji wysokości
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 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.
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ąć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Kilka próbnych obrazów do wykorzystania w projekcie. Użyję kilku obrazów z przezroczystym tłem z pakietu układów Juice Shop Layout Pack.
Następnie możesz zacząć!
Implementacja projektu efektu zawisu dzielnika przekroju na wysokość w Divi
Tworzenie sekcji i wiersza
Najpierw utwórzmy zwykłą sekcję z wierszem w dwóch kolumnach.
Przed dodaniem modułu otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Kolor gradientu tła po lewej stronie: #73ba57
Prawy gradient tła: #2a4c23
Szerokość: 80%
Maksymalna szerokość: 1080px
Wyrównanie sekcji: Środek
Dodawanie tytułu sekcji
Aby dodać tytuł sekcji, utwórz moduł tekstowy i zaktualizuj treść treści o następujący nagłówek h2:
<h2>The Juice</h2>
Następnie zaktualizuj projekt w następujący sposób:
Czcionka nagłówka 2: Lato
Rozmiar tekstu nagłówka 2: 80px
Nagłówek 2 Odstępy między literami: -5px
Margines: -50px góra, -40px dół
Indeks Z: -1
Margines niestandardowy i indeks z pozwolą tekstowi usiąść za obrazem, który dodamy w następnym kroku.
Dodawanie obrazu
Pod modułem tekstowym z tytułem w kolumnie 1 dodaj moduł obrazu. Następnie prześlij obraz z przezroczystym tłem. Używam obrazu z pakietu układów sklepu Juice o wymiarach 240 na 300 pikseli.
Dostosuj wyrównanie obrazu do środka.
Dodawanie wezwania do działania w kolumnie 2
W kolumnie 2 dodaj moduł call to action.
Dodaj adres URL linku przycisku, aby upewnić się, że przycisk jest wyświetlany.
Stylizowanie tła CTA i tekstu tytułu
Następnie zaktualizuj następujące ustawienia projektu:
Kolor tła: #ffffff
Kolor tekstu: ciemny
Czcionka tytułu: Lato
Grubość czcionki tytułu: Ciężka
Styl czcionki tytułu: TT
tytuł Rozmiar tekstu: 18px
Stylizacja przycisku CTA
Zaktualizuj projekt przycisku w następujący sposób:
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: #73ba57
Szerokość obramowania przycisku: 0px
Stylizacja obramowania CTA
Następnie dodaj ramkę, aby obramować moduł w następujący sposób:
Szerokość obramowania: 10px
Kolor obramowania: rgba (115,186,87,0.15)
Dodawanie efektu najechania na wysokość dzielnika, aby odsłonić wezwanie do działania
Teraz nadszedł czas, aby dodać efekt najechania na wysokość podziału sekcji, aby odsłonić wezwanie do działania. Aby to zrobić, musimy najpierw utworzyć nasze dzielniki sekcji.
Dodawanie górnego rozdzielacza
Otwórz ustawienia sekcji i górną przegrodę z następującymi ustawieniami.
Styl Top Divider: patrz zrzut ekranu
Kolor górnego rozdzielacza: #73ba57
Wysokość górnej przegrody: 70% (domyślnie), 0% (najechanie)
Top Divider Flip: poziomy
Zauważ, że wysokość dzielnika zaczyna się od domyślnej wysokości 70%, a następnie zmienia się na wysokość 0% po najechaniu kursorem.
Dodawanie dolnej przegrody
Następnie dodaj podobną dolną przegrodę do sekcji z następującymi ustawieniami.
Styl Top Divider: patrz zrzut ekranu
Kolor górnego rozdzielacza: #73ba57
Wysokość górnej przegrody: 70% (domyślnie), 0% (najechanie)
Top Divider Flip: poziomy
Układ rozdzielający: na górze treści sekcji
Ta dolna przegroda również zaczyna się od wysokości 70%, która zmienia się na 0% po najechaniu kursorem. Ponieważ jednak opcja rozmieszczenia separatorów jest ustawiona na górze treści, separator sekcji ukrywa dolną część wezwania do działania w kolumnie 1. Następnie po najechaniu kursorem ujawnia się reszta wezwania do działania.
Sprawdź dotychczasowy wynik.
Dodanie efektu najechania w tle w celu uzyskania unikalnego przejścia i projektu
Aby uzyskać wyjątkowe przejście i projekt po najechaniu myszą, możemy dodać efekt najechania na cień pudełka, który będzie miał miejsce jednocześnie z efektem najechania na wysokość dzielnika. Aby to zrobić, dodaj następujący cień do sekcji.
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: 0px
Siła rozprzestrzeniania się cieni w pudełku: 0px (domyślnie), 150px (najechanie)
Kolor cienia pudełka: #73ba57
Spowolnienie czasu przejścia
Na koniec zwolnijmy nieco czas trwania przejścia.
Czas trwania przejścia: 700ms
Ostateczny wynik
Oto ostateczny wynik na pulpicie.
Jeśli nie chcesz, aby zawartość była ukryta na wyświetlaczu tabletu i telefonu, możesz łatwo zmienić układ dzielników na „pod treścią sekcji” dla tych urządzeń.
Oto ostateczny projekt na tablecie i telefonie.
Eksperymentowanie z innymi stylami dzielników sekcji w celu uzyskania całkowicie unikalnych projektów w kilka sekund
Dzięki tej konfiguracji możesz łatwo eksperymentować z różnymi stylami i kombinacjami przegródek!
Oto kilka innych, które dołączyłem do bezpłatnego pobrania.
Końcowe przemyślenia
Mamy nadzieję, że ten post dał ci trochę inspiracji, jak stworzyć unikalne efekty najechania na wysokość dzielnika sekcji, aby odsłonić zawartość. W rzeczywistości regulacja wysokości dzielnika po najechaniu może być sama w sobie świetnym elementem projektu. A przykłady projektów powinny pomóc w rozpoczęciu własnych poszukiwań i projektów.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!