Chcesz wiedzieć jak ujawnić treść po najechaniu kursorem na separator sekcji w Divi ?
Dzielniki sekcji nadal są elementem projektu Divi popularny. Istnieje wiele stylów przekładek do wyboru z przydatnymi opcjami, które ułatwiają dodawanie unikalnych przejść i tła do Twojej strony.
W tym samouczku użyjemy dzielników sekcji nieco inaczej. Divi pozwala dostosować wysokość i układ każdej przegrody. Dzięki temu możemy ustawić separatory nad pewnymi obszarami lub treść sekcji.
Używając opcji najechania dla wysokości separatora, możemy dodać unikalne efekty najechania, które ujawniają treść częściowo ukryte. Działa to świetnie, jeśli chcesz zwrócić uwagę na konkretne wezwanie do działania lub przycisk, który chcesz, aby ludzie kliknęli. odwiedzający Kliknij.
badanie
Pobierz DIVI teraz !!!
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.
Projektowanie efektu zawisu dzielnika sekcji w Divi
Tworzenie przekroju i linii
Utwórz zwykłą sekcję z wierszem w dwóch kolumnach.
Przed dodaniem modułu otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Gradient tła (po lewej): #73ba57
Gradient tła (prawy): #2a4c23
Szerokość: 80%
Maksymalna szerokość: 1px
Wyrównanie sekcji: Środek
Dodaj tytuł sekcji
Aby dodać tytuł sekcji, utwórz moduł Tekst i wstaw następujący tekst:
<h2>The Juice</h2>
Następnie zaktualizuj projekt w następujący sposób:
Czcionka: Lato
Rozmiar tekstu: 80px
Odstępy między literami: -5px
Margines: -50px (góra), -40px (dół)
Indeks Z: -1
Margines niestandardowy i indeks Z pozwolą tekstowi pozostać za obrazem, który dodamy w następnym kroku.
Dodaj obraz
W module Tekst z tytułem w kolumnie 1 dodaj moduł Obraz. Następnie prześlij obraz z przezroczystym tłem. Używamy obrazu z pakietu układów Sklep z sokami 240 pikseli na 300 pikseli.
Regulacja wyrównania obrazu na środku.
Dodaj moduł „Wezwanie 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.
Stylizacja tła i tekstu tytułu CTA
Następnie zaktualizuj następujące ustawienia projektu:
Tło: #ffffff
Kolor tekstu: ciemny
Czcionka tytułu: Lato
Grubość czcionki tytułu: Ciężka
Styl czcionki: TT
Rozmiar tekstu tytułu: 18px
Dostosuj przycisk CTA
Zaktualizuj projekt przycisku w następujący sposób:
- Użyj niestandardowych stylów dla przycisku: TAK
- Kolor tekstu przycisku: #ffffff
- Kolor tła przycisku: #73ba57
- Szerokość obramowania: 0px
Dostosuj obramowanie modułu 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)
Dodano efekt najechania kursorem na rozdzielacz, aby odsłonić moduł „Wezwanie do działania”
Teraz nadszedł czas, aby dodać efekt najechania do dzielnika sekcji, aby odsłonić moduł „Wezwanie do działania”. Aby to zrobić, najpierw musimy stworzyć nasze dzielniki sekcji.
Czytaj także: Divi: Jak ujawniać zawartość po najechaniu kursorem na zakładki
Dodanie górnego separatora
Otwórz parametry sekcji i górny separator za pomocą następujących parametrów.
Styl Top Divider: patrz zrzut ekranu
Kolor górnego rozdzielacza: #73ba57
Wysokość dzielnika: 70% (domyślnie), 0% (najechanie)
Top Divider Flip: poziomy
Zauważ, że wysokość separatora zaczyna się od domyślnej wysokości 70%, a następnie zmienia się na wysokość 0% po najechaniu myszą.
Dodano dolną przegrodę
Następnie dodaj dolny separator podobny do sekcji o następujących parametrach.
- Styl dolnego rozdzielacza: patrz zrzut ekranu
- Kolor dolnego rozdzielacza: #73ba57
- Wysokość dzielnika: 70% (domyślnie), 0% (najechanie)
- Odwróć przegrodę: pozioma
- Układ: na górze treści sekcji
Ta dolna przegroda również zaczyna się od wysokości 70%, która spada do 0% po najechaniu kursorem. Ponieważ jednak opcja rozmieszczenia podziału jest ustawiona nad zawartością, podział sekcji ukrywa dolną część modułu „Call To Action” w kolumnie 1. Następnie po najechaniu kursorem ujawnia się reszta modułu.
Sprawdź dotychczasowy wynik.
Pobierz DIVI teraz !!!
Dodano efekt najechania cieniem pola dla unikalnego przejścia i projektu
Aby uzyskać wyjątkowe przejście i projekt po najechaniu, możemy dodać efekt najechania cieniem pola, który będzie miał miejsce jednocześnie z efektem najechania na rozgałęzienie. Aby to zrobić, dodaj następujący cień do sekcji.
- Cień pudełka: patrz zrzut ekranu
- Pozycja pozioma: 0px
- Pozycja pionowa: 0px
- Siła rozprzestrzeniania się cieni w pudełku: 0px (domyślnie), 150px (najechanie)
- Kolor cienia: #73ba57
Zwolnij czas przejścia
Na ostatni krok spowolnijmy czas przejścia.
Czas trwania przejścia: 700ms
Ostateczny wynik
Teraz, gdy przeszliśmy przez wszystkie kroki, zobaczmy efekt końcowy.
Pobierz DIVI teraz !!!
Wnioski
Mamy nadzieję, że ten artykuł dał ci inspirację do stworzenia unikalnych efektów najechania separatorem sekcji w celu ujawnienia treści.
W rzeczywistości regulacja hover splitter może być sama w sobie świetnym elementem projektu. Dodatkowo przykładowe projekty powinny pomóc w rozpoczęciu własnych poszukiwań i projektów.
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.
...
