Jak tworzyć sekcje najechania za pomocą nowych ustawień rozmiaru i przepełnienia Divi

Korzystanie z nowych opcji zmiany rozmiaru Divi, które można przeciągać, nie tylko pomaga w tworzeniu wysoce responsywnych witryn internetowych, ale może również naprawdę pomóc w tworzeniu unikalnych interakcji. Bawiąc się tymi opcjami, możesz dostosować dowolną tworzoną witrynę internetową i dostosować struktury swoich stron do aktualnych trendów projektowych.

W tym samouczku pokażemy ci, jak tworzyć sekcje najechania za pomocą Divi. Utworzymy nową stronę i umożliwimy wyświetlanie wszystkich tytułów sekcji, ale każda sekcja będzie otwierać się tylko po najechaniu myszą (komputer) lub kliknięciu (na urządzeniu mobilnym). Gdy tylko otworzysz inną sekcję, ta, którą otworzyłeś wcześniej, zostanie automatycznie zamknięta. Zaczniemy od wyjaśnienia ogólnego podejścia, a następnie odtworzymy od zera przykład, który można zobaczyć poniżej. Mamy nadzieję, że ten samouczek zachęci Cię również do tworzenia własnych projektów sekcji najazdu!

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Pobierz układ sekcji najazdu ZA DARMO

Aby położyć swoje ręce na darmowym układzie sekcji najechania, musisz najpierw pobrać go 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!

Zbliżać się

Zanim przejdziemy do właściwego samouczka, omówimy technikę używaną do tworzenia sekcji najechania. Możesz zastosować tę technikę do każdego rodzaju witryny, którą tworzysz, z dowolnym stylem projektowania.

1. Dodaj pierwszą sekcję do swojej strony

Załóżmy, że zaczynasz nowy projekt na zupełnie nowej stronie. Pierwszą rzeczą, którą musisz zrobić, to dodać do niego nową zwykłą sekcję.

2. Dodaj nowy wiersz zawierający tytuł sekcji

Następnie możesz kontynuować, dodając nowy wiersz z modułem tekstowym zawierającym tytuł sekcji. Możesz także dodać moduł rozdzielający i coś, co wskazuje, że wiersz rozwija się po najechaniu lub dotknięciu (patrz przykład w podglądzie tego posta). Ważne jest, aby tytuł sekcji był oddzielony od pozostałej zawartości sekcji, więc upewnij się, że pozostawiłeś wystarczająco dużo odstępu między tytułem sekcji a tym, co będzie dalej.

3. Dostosuj pozostałą zawartość sekcji (dodaj tyle wierszy i modułów, ile chcesz)

Elementy projektu, które następują po tytułach sekcji, zależą wyłącznie od Ciebie. Możesz ustawić sekcję tak długą lub tak krótką, jak chcesz i wykorzystać dowolny styl projektowania.

4. Zmodyfikuj domyślną i najedź na maksymalną wysokość sekcji

Po zakończeniu dostrajania sekcji i wszystkich zawartych w niej elementów projektu nadszedł czas, aby stworzyć efekt najechania. Domyślna wysokość sekcji ma pasować tylko do tytułu sekcji. Po najechaniu kursorem sekcja przywróci swój początkowy rozmiar.

5. Ukryj przepełnienie pionowe

Inną ważną częścią tej techniki jest ukrywanie pionowego przelewu. Po ustawieniu domyślnej maksymalnej wysokości sekcji, która jest mniejsza niż początkowa wysokość sekcji, zostanie utworzone przepełnienie. Aby upewnić się, że przepełnienie się nie wyświetla, musisz upewnić się, że jest ukryte w ustawieniach widoczności sekcji.

5. Powtórz kroki dla wszystkich sekcji na stronie

Powtórz te same kroki dla wszystkich sekcji na swojej stronie, aby stworzyć oczywiste wrażenia użytkownika, które docenią Twoi odwiedzający.

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać!

Dodaj nową sekcję

Domyślny kolor tła

Teraz, gdy omówiliśmy podejście do tego posta, czas zacząć wprowadzać rzeczy w życie! Dodaj pierwszą zwykłą sekcję do zupełnie nowej strony w witrynie WordPress i otwórz ustawienia sekcji. Zmień domyślny kolor tła sekcji na wybrany przez siebie kolor.

• Kolor tła: #000000

Wskaż kolor tła

Zmień ten kolor tła po najechaniu myszą.

• Kolor tła: #ffffff

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy

Dodaj zawartość H2

Następnie dodaj moduł tekstowy do nowego wiersza. Dodaj trochę kopii H2 wraz z symbolem „▼”, który oznacza, że ​​coś będzie dalej.

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2.

• Czcionka nagłówka 2: Trebuchet
• Grubość czcionki nagłówka 2: Ultra Bold
• Wyrównanie tekstu nagłówka 2: do lewej
• Kolor tekstu nagłówka 2: #ff0f3b
• Rozmiar tekstu nagłówka 2: 100px (komputer), 80px (tablet), 60px (telefon)
• Nagłówek 2 Odstępy między literami: -5px

Dodaj moduł dzielnika

Widoczność

Drugim i ostatnim modułem, którego potrzebujemy w tym rzędzie, jest moduł rozdzielający. Upewnij się, że włączyłeś opcję „Pokaż dzielnik” w ustawieniach widoczności.

• Pokaż dzielnik: tak

Kolor

Następnie przejdź do zakładki projektu i zmień kolor przekładki.

• Kolor: #ff0f3b

Rozmiary

Zmodyfikuj również ustawienia rozmiaru modułu.

• Waga dzielnika: 2px
• Szerokość: 14%

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! W tym miejscu musisz umieścić całą zawartość, którą chcesz wyświetlić po najechaniu kursorem (komputer) lub kliknięciu (tablet i telefon komórkowy). Używamy następującej struktury kolumn, ale pamiętaj, że możesz dodać dowolną liczbę wierszy i modułów i dostosować je do swoich potrzeb:

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Umieść moduł tekstowy w pierwszej kolumnie z wybraną zawartością.

Ustawienia tekstu

Przejdź do zakładki projektowania modułu tekstowego i zmień orientację tekstu.

• Orientacja tekstu: wyjustuj

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Dodaj moduł tekstowy do drugiej kolumny z wybraną zawartością.

Ustawienia tekstu

Ponownie zmień orientację tekstu w ustawieniach tekstu modułu.

• Orientacja tekstu: wyjustuj

Dodaj ustawienia rozmiaru do sekcji

Rozmiar domyślny

Po ukończeniu sekcji nadszedł czas, aby wprowadzić efekt najechania. Otwórz ustawienia sekcji i zmień maksymalną wysokość na różnych rozmiarach ekranu:

• Maksymalna wysokość: 300px (komputer), 280px (tablet), 260px (telefon)

Rozmiar po najechaniu kursorem

Włącz opcję najechania również na maksymalnej wysokości i dodaj wartość, która jest wystarczająco wysoka, aby pokryć wszystkie elementy na różnych rozmiarach ekranu. Ta wartość zapewnia, że ​​wszystkie elementy są wyświetlane bez przekraczania początkowego rozmiaru kontenera sekcji.

• Maksymalna wysokość: 5000px

Przepełnienie pionowe

Następnie przejdź do zakładki zaawansowanej sekcji i zmień przepełnienie pionowe. Spowoduje to ukrycie całej zawartości, która przekracza kontener sekcji.

• Przepełnienie pionowe: ukryte

Przejścia

Aby stworzyć płynne przejście, zmieniamy również ustawienia przejść w zakładce Zaawansowane.

• Czas trwania przejścia: 800ms
• Opóźnienie przejścia: 500 ms

Klonuj całą sekcję tyle razy, ile chciałeś

Po zakończeniu tworzenia pierwszej sekcji najechania kursorem możesz ją sklonować dowolną liczbę razy.

Zmień tytuły sekcji

Oczywiście będziesz chciał zmienić tytuły sekcji duplikatów.

Zmień kolory tekstu H2

Aby stworzyć pewną wariację w projekcie, zmienimy również kolory tekstu modułów wyróżnionych na poniższym zrzucie ekranu.

• Kolor tekstu nagłówka 2: #c4c4c4

Zmień kolory dzielnika

Wraz z kolorami rozdzielaczy, które towarzyszą modułom tekstowym.

• Kolor: #c4c4c4

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie wykorzystać nowe opcje zmiany rozmiaru Divi do przeciągania, aby tworzyć unikalne interakcje za pomocą sekcji najechania na dowolnej tworzonej witrynie. Zaczęliśmy od wyjaśnienia podejścia i kontynuowaliśmy, odtwarzając przykład projektu od podstaw. Udało Ci się również bezpłatnie pobrać plik JSON! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.