Dzielniki sekcji nadal są popularnym elementem projektu w Divi. Istnieje wiele stylów separatorów, w tym kilka przydatnych opcji, które ułatwiają dodawanie unikalnych przejść i tła do strony.
W tym samouczku użyjemy dzielników sekcji nieco inaczej. Divi umożliwia dostosowanie wysokości i układu każdej przegrody. Dzięki temu możemy umieścić separatory nad określonymi obszarami lub treścią sekcji. Używając opcji najechania dla wysokości dzielnika, możemy dodać unikalne efekty najechania ujawniające: treść częściowo ukryte. Działa to świetnie, jeśli chcesz zwrócić uwagę na wezwanie do działania lub konkretny przycisk, który chcesz, aby ludzie kliknęli. odwiedzający Kliknij.
Zacznijmy.
Przykładowy wynik
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, potrzebujesz:
- Le Motyw Divi zainstalowany i aktywny
- Nowa strona stworzona do tworzenia od zera w interfejsie użytkownika (konstruktor wizualny)
- Niektóre fikcyjne obrazy do wykorzystania w projekcie. Zamierzam użyć niektórych obrazów z przezroczystym tłem z Juice Shop Layout Pack .
Następnie możesz zacząć!
Implementacja projektu efektu najechania na wysokość podziału sekcji w Divi
Tworzenie przekroju i linii
Zacznijmy od utworzenia zwykłej sekcji z rzędem dwóch kolumn.
Przed dodaniem modułu otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Gradient po lewej stronie: #73ba57
Gradient prawego tła: #2a4c23
Szerokość: 80%
Maksymalna szerokość: 1080px
Wyrównanie sekcji: Środek
Ale możesz także wybrać schemat kolorów, który Ci się podoba, zgodnie z Twoim obrazem. mój schemat kolorów to: # fff200 - # e09900 w gradiencie.
Dodaj tytuł sekcji
Aby dodać tytuł sekcji, utwórz moduł tekstowy i zaktualizuj plik treść ciała z następującym nagłówkiem h2:
Sok
Następnie zaktualizuj rysunek w następujący sposób:
Nagłówek 2 Czcionka: Lato
Nagłówek 2 Rozmiar tekstu: 80px
Nagłówek 2 Odstępy między literami: -5px
Margines: -50px na górze, -40px na dole
Indeks Z: -1
Niestandardowy margines i indeks z umożliwią umieszczenie tekstu za obrazem, który dodamy w następnym kroku.
Dodaj obraz
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 Juice Shop Layout Pack o wymiarach 240 na 300 pikseli.
Dostosuj wyrównanie obrazu do środka.
Dodanie wezwania do działania w kolumnie 2
W kolumnie 2 dodaj wywołanie do modułu akcji.
Dodaj adres URL linku do przycisku, aby upewnić się, że przycisk jest wyświetlany.
Tło CTA i styl tytułu
Następnie zaktualizuj następujące parametry projektu:
Kolor tła: #ffffff
Kolor tekstu:
tytuł Czcionka: Lato
Tytuł Zasady wagi: Ciężki
Styl czcionki tytułu: TT
tytuł Rozmiar tekstu: 18px
Stylizuj przycisk CTA
Zaktualizuj projekt przycisku w następujący sposób:
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: # e09900
Szerokość obramowania przycisku: 0 px
Stylizacja granicy CTA
Następnie dodaj obramowanie, aby obramować moduł w następujący sposób:
Szerokość obramowania: 10px
Kolor obramowania: rgba (224,145,0,0.25)
Dodano efekt najechania na wysokość podziału, aby pokazać wezwanie do działania
Teraz nadszedł czas, aby dodać efekt po najechaniu na wysokość podziału sekcji, aby wyświetlić wezwanie do działania. Aby to zrobić, musimy najpierw utworzyć nasze separatory sekcji.
Dodanie górnego separatora
Otwórz parametry sekcji i górny separator za pomocą następujących parametrów.
Styl górnej ścianki działowej: patrz zrzut ekranu Kolor górnej ścianki działowej: # 73ba57 Wysokość górnej ścianki działowej: 70% (domyślnie), 0% (najechanie)
Odwróć górną przegrodę: poziomo
Zauważ, że wysokość separatora zaczyna się od domyślnej wysokości 70%, a następnie przechodzi do wysokości 0% podczas najazdu.
Dodanie dolnego dzielnika
Następnie dodaj dolny separator podobny do sekcji o następujących parametrach.
Styl górnej ścianki działowej: patrz zrzut ekranu Kolor górnej ścianki działowej: # 73ba57 Wysokość górnej ścianki działowej: 70% (domyślnie), 0% (najechanie)
Odwróć górną przegrodę: poziomo
Układ rozdzielacza: u góry sekcji Treść
Ten separator tła również zaczyna się od wysokości 70%, która zmienia się na 0% po najechaniu kursorem. Jednak, ponieważ opcja układu separatora jest ustawiona na górze treści, separator sekcji ukrywa dolną część wezwania do działania w kolumnie 1. Następnie po najechaniu kursorem reszta l Wezwanie do działania zostaje ujawnione.
Sprawdź dotychczasowy wynik.
Dodano efekt unoszenia cienia w polu, aby uzyskać wyjątkowe przejście i wygląd
Aby uzyskać wyjątkowe przejście i projekt najechania, możemy dodać efekt najechania cieniem pola, który będzie miał miejsce jednocześnie z efektem zawisu wysokości rozdzielacza. Aby to zrobić, dodaj cień następującego pola do sekcji.
Box Shadow: patrz zrzut ekranu
Pozycja pozioma w polu Shadow: 0px
Pozycja pionowa w cieniu ramki: 0px
Pole Spread Spread Shadow Force: 0px (domyślnie), 150px (najechanie kursorem)
Kolor Shadow Box: #73ba57
Zwolnij czas przejścia
Na ostatni krok spowolnijmy czas przejścia.
Czas przejścia: 700ms
Ostateczny wynik
Oto końcowy wynik na pulpicie.
W oparciu o to, co zrobiliśmy powyżej, będziesz mógł dostosować wyświetlacz na telefonie komórkowym i tablecie.
końcowe przemyślenia
Mam nadzieję, że ten samouczek dał ci inspirację do stworzenia unikalnych efektów po najechaniu na wysokość podziału sekcji, aby odsłonić zawartość. W rzeczywistości regulacja wysokości wiszącej przegrody może być niezwykłym elementem projektu. A próbki projektowe powinny pomóc w rozpoczęciu własnych poszukiwań i własnych projektów.
Mam nadzieję, że usłyszę od Ciebie w komentarzach.
Do twojego zdrowia!
