Chcesz tworzyć zakładki z efektem najechania z wierszy z Divi ?
Zakładki są zdecydowanie przydatne do udostępniania ważnych informacji w zwięzłym obszarze Twojego Witryna internetowa. Zmniejsza to potrzebę przewijania przez użytkownika treść długiej strony. Moduł zakładek Divi jest łatwy w obsłudze i idealny do przeglądania treść proste jednym kliknięciem.
Ale w tym samouczku pokażemy, jak konwertować wiersze Divi na karcie i pojawiają się po najechaniu myszką.
Pokażemy Ci również, jak tworzyć poziome i pionowe zakładki. To odblokuje moc Divi do tworzenia kompletnych układów z wieloma modułami dla każdego obszaru treść patka.
Żadne wtyczki nie są potrzebne!
Zacznijmy.
badanie
Oto przegląd kart, które wspólnie stworzymy w tym samouczku.
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.
Tworzenie poziomych zakładek najechania za pomocą "Wierszy Divi"
W obecnej sekcji domyślnej dodaj wiersz z dwiema kolumnami.
Tło linii, wypełnienie pola i cień
Zanim dodamy nasze moduły, dostosujmy najpierw nieco ustawienia wierszy. Otwórz ustawienia linii i zaktualizuj następujące elementy:
- Lewy kolor gradientu: #284f91
- Prawy kolor gradientu: #4646c4
- Padding: 50px (Góra i Dół), 50px (Lewy i Prawy)
- Cień pudełka: patrz zrzut ekranu
- Kolor cienia pudełka: rgba (70,70,196,0.66)
Dodaj zawartość do wiersza
Dodamy teraz zawartość zastępczą do naszego wiersza. W kolumnie 1 dodaj wybrany obraz za pomocą modułu Obraz. Tutaj użyliśmy obrazu z pakietu układów « Zaprojektuj pakiet układu konferencji« .
W prawej kolumnie dodaj moduł CTA (Wezwanie do działania) i zaktualizuj następujące elementy:
- URL linku do przycisku: # (tylko po to, aby na razie wyświetlić przycisk)
- Użyj koloru tła: NIE
- Wyrównanie tekstu: do lewej
- Czcionka tytułu: Lato
- Rozmiar tekstu tytułu: 60px (komputer), 50px (telefon)
Stworzenie zakładki
Aby utworzyć rzeczywistą kartę, na którą użytkownicy będą najeżdżać, aby odsłonić zawartość tego wiersza, musimy utworzyć moduł tekstowy i umieścić go w prawym górnym rogu za pomocą niestandardowego kodu CSS.
Śmiało i dodaj nowy moduł tekstowy pod obrazem w kolumnie 1 i zaktualizuj następujące elementy:
- Treść: „Tab 1”
- Tło: #284f91 (powinno pasować do lewego koloru gradientu linii)
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu: #ffffff
- Szerokość: 100px
- Wysokość: 50px
- Margines: -100px (górny), -50px (lewy)
- Dopełnienie: 14px (góra)
Na koniec dodaj następujący niestandardowy css do głównego elementu, aby nadać mu bezwzględną pozycję na górze wiersza.
position: absolute !important;
top: 0;
Wysokość i rozstaw sekcji
Na razie otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Minimalna wysokość: 500px (komputer), 900px (tablet), 750px (telefon)
- Margines: 100px (góra i dół)
- Padding: 0px (góra i dół)
Stworzenie drugiej linii
Aby utworzyć drugi wiersz, zduplikuj wiersz utworzony wcześniej. Przenieś moduł tekstowy do kolumny 1, a obraz do kolumny 2. Następnie zaktualizuj obraz o nowy. Pomoże Ci to zorientować się, jak różne treści wyglądają na każdej karcie.
Następnie otwórz ustawienia modułu Tekst użyty do utworzenia karty w kolumnie 1 i przesuń kartę w prawo, aby tam, gdzie ten wiersz nakłada się na wiersz powyżej, zobaczysz kartę bezpośrednio po prawej stronie karty pierwszego wiersza.
- Margines: 50px (lewy)
Dodano efekt najechania
Otwórz ustawienia wiersza i dodaj następujący filtr:
- Krycie: 70% (domyślnie), 100% (najechanie)
Następnie dodaj czas trwania przejścia i krzywą szybkości dla efektu najechania filtra krycia.
- Czas przejścia: 500 ms
- Krzywa prędkości przejścia: liniowa
Utworzenie trzeciej zakładki
Możemy teraz dodać naszą ostatnią zakładkę. Aby to zrobić, zduplikuj drugą właśnie utworzoną linię. Następnie przenieś moduł tekstowy do kolumny 1, a obraz do kolumny 2. I zaktualizuj moduł obrazu o nowy obraz.
Zaktualizuj ustawienia linii za pomocą nowego gradientu tła.
- Kolor gradientu lewego tła: #333333
- Prawy kolor gradientu tła: #4646c4
Następnie otwórz ustawienie modułu Tekst używane do utworzenia karty w kolumnie 1 i zaktualizuj kolor i margines.
- Tło: #333333
- Margines: 150px (lewy)
Oto, jak powinna wyglądać Twoja strona, zanim ustawimy nasze wiersze tak, aby się nakładały.
Nakładające się linie z pozycjonowaniem bezwzględnym
Aby nakładać się na nasze linie, musimy użyć pozycjonowania bezwzględnego. Najpierw zaktualizuj wysokość wszystkich trzech wierszy do 100%.
- Wzrost: 100%
Następnie dodaj następujący niestandardowy kod CSS do głównego elementu wszystkich trzech linii:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Tak w tej chwili wyglądają nasze zakładki.
Zmiana kolejności wierszy po najechaniu kursorem z indeksem Z
W tym momencie mogłeś zauważyć, że trzeci wiersz/karta jest na pierwszym planie. Musimy więc zmienić kolejność wierszy za pomocą indeksu Z, aby pierwsza karta była wyświetlana jako pierwsza, dopóki nie najedziesz kursorem na inną kartę.
Czytaj także: Jak tworzyć niestandardowe nakładki obrazów w Divi
Aby to zrobić, otwórz ustawienia pierwszego wiersza i zaktualizuj indeks Z w następujący sposób:
Indeks Z: 10
Następnie umieść indeks Z pozostałych dwóch linii na najechaniu.
Indeks Z: 11 (najedź)
Zrobione ! Zobaczmy efekt końcowy.
Ostateczny wynik
Pobierz DIVI teraz !!!
Tworzenie pionowych zakładek
Jeśli chcesz dodać pionowe tabulatory do wierszy, oto co zrobić.
Śmiało i zduplikuj sekcję zawierającą właśnie utworzone zakładki, aby mieć nowy projekt do pracy.
Następnie otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Wyściółka: 10% (lewy i prawy)
Zaktualizuj następujące ustawienia dla wszystkich trzech wierszy zduplikowanej sekcji o następujące:
- Szerokość: 70% (komputer), 70% (tablet), 80% (telefon)
- Maksymalna szerokość: 980 pikseli
Następnie zaktualizuj kierunek gradientu do 90 stopni dla wszystkich trzech linii.
- Kierunek gradientu: 90 stopni
Teraz nadszedł czas, aby umieścić nasze zakładki modułu Tekst po lewej stronie naszych wierszy, aby uzyskać żądane pionowe zakładki.
Zobacz także: Jak utworzyć menu obracającego się koła po najechaniu kursorem w Divi
Otwórz ustawienie zakładki modułu tekstowego w pierwszym wierszu i zaktualizuj następujące elementy:
- Margines (komputer): -50px (góra), -150px (lewy)
Następnie otwórz ustawienia karty modułu Tekst sekcji 2nd Line i zaktualizuj następujące elementy:
- Margines (komputer): 0px (góra), -150px (lewy)
A dla ostatniej karty w trzecim rzędzie zaktualizuj następujące elementy:
- Margines (komputer): 50px u góry, -150px w lewo
Ostateczny wynik
Zobaczmy teraz końcowy wynik.
Pobierz DIVI teraz !!!
Wnioski
Przy odrobinie kreatywności i mocy Divi możesz tworzyć całkiem fajne niestandardowe zakładki za pomocą linii Divi. Istnieją pewne ograniczenia dotyczące tego, co możesz wyświetlić.
Na przykład w tej konfiguracji wszystkie wiersze muszą mieć taką samą wysokość jak sekcja. Ale żeby nie trzeba było używać wtyczki, jest to świetne rozwiązanie.
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.
...
