Korzystanie z nowych opcji zmiany rozmiaru Divi, które można przeciągać, nie tylko pomaga nam tworzyć wysoce responsywne strony internetowe, ale także pomaga nam tworzyć unikalne interakcje. Korzystając z tych opcji, możesz dostosować dowolne Witryna internetowa tworzysz i dostosowujesz strukturę swoich stron w oparciu o aktualne trendy projektowe.
W szczególności w tym samouczku pokażemy, jak tworzyć sekcje wskaźnika za pomocą Divi. Stworzymy nową stronę i umożliwimy wyświetlanie wszystkich tytułów sekcji, ale każda sekcja będzie otwierana tylko po najechaniu kursorem (komputer) lub kliknięciu (telefon). Gdy tylko otworzysz inną sekcję, ta, którą wcześniej otworzyłeś, zostanie automatycznie zamknięta. Zaczniemy od wyjaśnienia ogólnego podejścia i kontynuujemy, odtwarzając od podstaw przykład, który można zobaczyć poniżej. Mamy nadzieję, że ten samouczek zachęci Cię do tworzenia własnych projektów sekcji estakady!
Chodźmy!
badanie
Przed zanurzeniem się w samouczku rzućmy okiem na wynik.
Etap projektowania
Zanim zagłębimy się w samouczek, omówimy technikę używaną do tworzenia sekcji najazdowych. Możesz zastosować tę technikę do każdego rodzaju Witryna internetowa budujesz w dowolnym stylu.
1. Dodaj pierwszą sekcję do swojej strony
Załóżmy, że zaczynasz nowy projekt na zupełnie nowej stronie. Pierwszą rzeczą do zrobienia jest dodanie nowej zwykłej sekcji.
2. Dodaj nowy wiersz zawierający tytuł sekcji
Następnie możesz kontynuować, dodając nową linię z modułem tekstowym zawierającym tytuł sekcji. Możesz także dodać moduł dzielnika i coś, co wskazuje, że linia rozwija się po najechaniu kursorem lub dotknięciu. Ważne jest, aby oddzielić tytuł sekcji od reszty treść sekcji. Dlatego pamiętaj, aby pozostawić wystarczającą ilość miejsca między tytułem sekcji a wszystkim, co następuje.
3. Dostosuj resztę treść sekcji
Elementy projektu, które pojawiają się po tytułach sekcji, zależą wyłącznie od Ciebie. Możesz utworzyć sekcję tak długą lub tak krótką, jak chcesz i użyć dowolnego stylu projektowania.
4. Zmień domyślne wysokości i najedź kursorem na sekcję
Po dopracowaniu sekcji i wszystkich jej elementów projektu nadszedł czas na utworzenie efektu najazdu. Domyślna wysokość sekcji jest dopasowana tylko do tytułu sekcji. Po najechaniu kursorem sekcja powróci do swojego początkowego rozmiaru.
5. Ukryj przepełnienie pionowe
Kolejną ważną częścią tej techniki jest ukrycie przelewu pionowego. 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 nie jest wyświetlane, musisz upewnić się, że jest ukryte w ustawieniach widoczności sekcji.
5. Powtórz kroki dla wszystkich sekcji strony.
Powtórz te same kroki dla wszystkich sekcji swojej strony, aby stworzyć oczywiste wrażenia użytkownika, że Twoja odwiedzający docenią.
Rozpoczęcie projektowania!
Dodaj nową sekcję
Domyślny kolor tła
Teraz, gdy zastosowaliśmy podejście opisane w tym poście, czas zacząć wprowadzać rzeczy w życie! Dodaj zwykłą pierwszą sekcję do zupełnie nowej strony Witryna internetowa WordPress i otwórz ustawienia sekcji. Zmień domyślny kolor tła sekcji na wybrany przez siebie kolor.
- Kolor tła: # 000000
Lataj nad kolorem tła
Zmień ten kolor tła unoszący się.
- Kolor tła: #ffffff
Dodaj wiersz 1
Struktura kolumny
Kontynuuj dodawanie pierwszego wiersza do sekcji za pomocą następującej struktury kolumn:
Dodaj moduł tekstowy
Dodaj zawartość H2
Dodaj moduł tekstowy do następnej nowej linii. Dodaj kopię H2 z symbolem „▼” w miarę rozwoju sekcji.
Ustawienia tekstu H2
Przejdź do zakładki Module Design i zmień ustawienia tekstu H2.
- Nagłówek 2 Czcionka: Trebuchet
- Tytuł 2 Waga czcionki: Ultra Bold
- Tytuł 2 Text Alignment: Left
- Tytuł 2 Kolor tekstu: #ff0f3b
- Tytuł Rozmiar tekstu 2: 100 pikseli (komputer stacjonarny), 80 pikseli (tablet), 60 pikseli (telefon)
- Tytuł 2 Odstępy między literami: -5px
Dodaj moduł podziału
widoczność
Drugi i ostatni moduł, którego potrzebujemy w tym wierszu, to moduł podziału. Upewnij się, że w ustawieniach widoczności jest włączona opcja „Pokaż separator”.
- Pokaż dzielnik: Tak
Kolor
Następnie przejdź do zakładki Projekt i zmień kolor separatora.
- Kolor: #ff0f3b
zaklejania
Zmień także parametry wymiarowania modułu.
- Waga dzielnika: 2px
- Szerokość: 14%
Dodaj linię 2
Struktura kolumny
Następny rząd! Tutaj będziesz musiał umieścić wszystkie treść które chcesz wyświetlić po najechaniu myszką (komputer stacjonarny) lub kliknięciu (tablet i telefon komórkowy). Stosujemy następującą strukturę 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 treść
Umieść moduł tekstowy w pierwszej kolumnie z wybraną treścią.
Ustawienia tekstu
Przejdź do zakładki Projekt modułu tekstowego i zmień orientację tekstu.
- Orientacja tekstu: uzasadnij
Dodaj moduł tekstowy do kolumny 2
Dodaj treść
Dodaj także moduł tekstowy do drugiej kolumny z wybraną treścią.
Ustawienia tekstu
Ponownie zmień orientację tekstu w ustawieniach tekstu modułu.
- Orientacja tekstu: uzasadnij
Dodaj parametry rozmiaru do sekcji
Domyślny rozmiar
Po zakończeniu sekcji nadszedł czas, aby utworzyć efekt najechania. Otwórz ustawienia sekcji i zmień maksymalną wysokość dla różnych rozmiarów ekranu:
- Maksymalna wysokość: 300px (komputer stacjonarny), 280px (tablet), 260px (telefon)
Unieś
Włącz także opcję najechania na maksymalną wysokość i dodaj wartość wystarczająco dużą, aby pokryć wszystkie elementy, niezależnie od rozmiaru ekranu. Ta wartość gwarantuje, że wszystkie elementy pojawią się bez przekraczania początkowego rozmiaru kontenera sekcji.
- Maksymalna wysokość: 5000px
Przelew pionowy
Następnie przejdź do zakładki Zaawansowane sekcji i zmień przepełnienie w pionie. Spowoduje to ukrycie całej treści, która wykracza poza kontener sekcji.
- Przelew pionowy: ukryty
Przejścia
Aby stworzyć płynne przejście, zmieniamy również ustawienia przejścia w zakładce Zaawansowane.
- Czas przejścia: 800ms
- Czas przejścia: 500 ms
Sklonuj całą sekcję tyle razy, ile chcesz
Po utworzeniu pierwszej sekcji estakady możesz ją klonować tyle razy, ile chcesz.
Zmień tytuły sekcji
Oczywiście będziesz chciał zmienić duplikaty tytułów sekcji.
Zmień kolory tekstu H2
Aby stworzyć wariacje w projekcie, zmienimy również kolory tekstu modułów podświetlonych na poniższym ekranie drukowania.
- Tytuł 2 Kolor tekstu: #c4c4c4
Zmień kolory separatora
Dzięki kolorom separacji towarzyszącym modułom tekstowym.
- Kolor: #c4c4c4
badanie
Teraz, gdy wszystkie kroki zostały zakończone, rzućmy okiem na wynik.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak kreatywnie korzystać z nowych, przeciąganych opcji rozmiaru Divi, aby tworzyć unikalne interakcje za pomocą sekcji kursora w dowolnej utworzonej witrynie. Zaczęliśmy od wyjaśnienia podejścia i kontynuujemy od odtworzenia przykładu projektu od zera. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej.
