Jak przekonwertować wiersze Divi na poziome i pionowe zakładki Hover?
Opublikowany: 2019-05-29Zakładki zdecydowanie przydają się do udostępniania ważnych informacji w zwięzłym obszarze witryny. Zmniejsza to potrzebę przewijania przez użytkownika długiej zawartości strony. Moduł zakładek Divi jest łatwy w użyciu i doskonale nadaje się do przełączania prostych treści jednym kliknięciem.
Ale w tym samouczku pokażę, jak przekonwertować całe wiersze Divi na zakładki po najechaniu kursorem. Pokażę Ci również, jak tworzyć zarówno poziome, jak i pionowe zakładki. To odblokuje moc Divi do projektowania kompletnych układów wierszy z wieloma modułami dla każdego obszaru zawartości karty. Nie potrzebujesz wtyczki!
Zacznijmy.
zapowiedź
Oto krótkie spojrzenie na poziome i pionowe zakładki, które zbudujemy razem w tym samouczku.
Pobierz układ zakładek Divi Rows Hover Tabs ZA DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać 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 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.
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!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Subskrybuj nasz kanał YouTube
Czego potrzebujesz, aby zacząć
Aby rozpocząć, musisz mieć następującą konfigurację:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Trzy obrazy, które mają być wykorzystane do pozorowanej treści
Następnie będziesz mieć puste płótno, aby rozpocząć tworzenie niektórych zakładek w Divi.
Tworzenie poziomych zakładek najechania za pomocą rzędów Divi
Aby rozpocząć, utwórz nową zwykłą sekcję z wierszem w dwóch kolumnach.
Tło wiersza, wypełnienie i cień pudełka
Zanim dodamy nasze moduły, dostosujmy najpierw nieco ustawienia wierszy. Będziemy musieli później wrócić do tego wiersza, aby ustawić go dla funkcji naszej karty.
Otwórz ustawienia wiersza i zaktualizuj następujące elementy:
Kolor gradientu tła po lewej stronie: #284f91
Prawy gradient tła: #4646c4
Padding: 50px góra, 50px dół, 50px po lewej, 50px po prawej
Cień pudełka: patrz zrzut ekranu
Kolor cienia pudełka: rgba (70,70,196,0.66)
Dodawanie treści do wiersza
Teraz dodamy trochę pozorowanej zawartości do naszego wiersza. Pamiętaj, że do obszaru zawartości możesz dodać dowolną kombinację kolumn i modułów.
W kolumnie 1 dodaj obraz z modułem obrazu. Używam jednego z pakietu Design Conference Layout Pack.
W prawej kolumnie dodaj moduł call to action 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)
Tworzenie zakładki
Aby utworzyć rzeczywistą kartę, na którą użytkownicy najadą kursorem, aby wyświetlić zawartość 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ść: „Karta pierwsza”
Kolor tła: #284f91 (powinien pasować do lewego koloru gradientu wiersza)
Tekst Wyrównanie tekstu: do środka
Kolor tekstu: #ffffff
Szerokość: 100px
Wysokość: 50px
Margines: -100px u góry, -50px w lewo
Wypeł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;
Ten kod CSS oraz dodane przez nas niestandardowe marginesy sprawią, że karta zostanie umieszczona dokładnie w lewym górnym rogu wiersza. Ważne jest, aby karty faktycznie znajdowały się nad wierszem, aby użytkownik mógł później nad nimi najechać.
Wysokość przekroju i odstępy
Teraz, zanim przejdziemy do tworzenia pozostałych wierszy i kart, dajmy naszym wierszom trochę miejsca, dodając do sekcji trochę górnego i dolnego marginesu. W przypadku tego projektu ważne jest, abyśmy używali marginesów, aby rozdzielić naszą sekcję, ponieważ nadamy naszej sekcji również ustaloną wysokość. Musimy nadać naszej sekcji ustaloną wysokość, ponieważ chcemy, aby nasze wiersze obejmowały pełną wysokość naszej sekcji. Oznacza to, że każdy z naszych wierszy (zawartość zakładki) będzie miał taką samą wysokość naszej sekcji. Najlepiej więc, aby każdy z wierszy zawierał podobną ilość treści, w przeciwnym razie w niektórych zakładkach wierszy pojawi się niechciana ujemna przestrzeń. Powinno to nabrać większego sensu później.
Na razie otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Wysokość: 500px (komputer), 900px (tablet), 750px (telefon)
Margines: 100px góra, 100px dół
Padding: 0px na górze, 0px na dole
Zwróć uwagę, że wysokość sekcji będzie musiała zostać dostosowana, aby uwzględnić dłuższą przestrzeń treści, gdy kolumny wierszy są ułożone na sobie na urządzeniu mobilnym. Więc trzeba będzie trochę poprawić do tej wysokości na własne potrzeby.
Teraz zapisz ustawienia i wróćmy do dodawania kolejnych wierszy.
Tworzenie drugiego wiersza zawartości karty
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.
Otwórz ustawienia drugiego rzędu i zmień kolory gradientu tła, najeżdżając kursorem na obszar podglądu tła i kliknij małą ikonę „przełącznika”.
Następnie otwórz ustawienia modułu tekstowego użytego do utworzenia karty w kolumnie 1 i nadaj jej kolor pasujący do nowego górnego gradientu.
Kolor tła: #4646c4
Następnie musimy przesunąć kartę w prawo, aby gdy ten wiersz nakłada się na wiersz powyżej, można zobaczyć kartę bezpośrednio po prawej stronie karty w pierwszym wierszu.
Margines: 50px w lewo
Dodawanie efektu zawinięcia filtra krycia dla drugiego rzędu
Do wiersza możemy dodać efekt najechania na filtr opacity, aby uzyskać ładne przejście po najechaniu kursorem na kartę i odkryciu zawartości wiersza.
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 trwania przejścia: 500 ms
Krzywa prędkości przejścia: liniowa
Tworzenie trzeciego wiersza zawartości karty
Teraz możemy dodać nasz ostatni wiersz zawartości karty. Aby to zrobić, zduplikuj drugi wiersz, który właśnie utworzyłeś. Następnie przenieś moduł tekstowy do kolumny 1, a obraz do kolumny 2. I zaktualizuj moduł obrazu o nowy obraz.
Zaktualizuj ustawienia wiersza z nowym gradientem tła.
Kolor gradientu tła po lewej stronie: #333333
Prawy gradient tła: #4646c4
Następnie otwórz ustawienia modułu tekstowego użytego do utworzenia zakładki w kolumnie 1 i zaktualizuj kolor i margines.
Kolor tła: #333333
Margines: pozostało 150 pikseli
Tak powinna wyglądać Twoja strona, zanim ustawimy nasze wiersze tak, aby nakładały się na siebie.
Nakładanie wierszy z pozycjonowaniem bezwzględnym
Aby nakładać się na nasze wiersze, musimy użyć pozycjonowania bezwzględnego. Następnie użyjemy opcji indeksu Z, aby wysunąć każdy wiersz na pierwszy plan po najechaniu kursorem na zakładki. Ale ponieważ nadajemy naszym wierszom pozycję bezwzględną (a rodzic/sekcja ma ustaloną wysokość), możemy dodać 100% wysokości do każdego wiersza, aby obejmowały pełną wysokość sekcji.
Oto jak to zrobić.
Najpierw wdróż tryb szkieletowy. Następnie użyj opcji wielokrotnego wyboru, aby wybrać wszystkie trzy wiersze i otwórz ustawienia jednego z nich, aby wdrożyć modalne ustawienia elementu. Następnie zaktualizuj wysokość do 100%.
Wzrost: 100%
To ustawi wysokość wszystkich trzech wierszy na 100%.
Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:
position: absolute !important; left: 0; right: 0; margin: auto;
Teraz wdróż tryb widoku pulpitu, aby zobaczyć, jak wiersze ładnie zachodzą na siebie, tworząc nasze karty.
Zmiana kolejności wierszy po najechaniu za pomocą indeksu Z
Być może zauważyłeś, ż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ę.
Aby to zrobić, wróć do trybu widoku krawędziowego i otwórz ustawienia dla pierwszego utworzonego wiersza (z pierwszą zakładką). Następnie zaktualizuj indeks z w następujący sposób:
Indeks Z: 10
Następnie użyj wielokrotnego wyboru, aby wybrać drugi i trzeci wiersz. Następnie otwórz modalne ustawienia elementu i dodaj następujący indeks z po najechaniu myszą na oba wiersze.
Indeks Z: 11 (najedź)
Otóż to. Sprawdźmy efekt końcowy.
Ostateczny wynik
Powodem, dla którego to działa, jest to, że technicznie każda zakładka (moduł tekstowy) jest częścią każdego wiersza, nawet jeśli znajdują się powyżej i poza wierszem. Dlatego najechanie kursorem na kartę spowoduje wyświetlenie wiersza, w którym się ona znajduje.
A oto jak to wygląda na telefonie komórkowym.
Tworzenie pionowych zakładek najazdu
Jeśli chcesz dodać pionowe tabulatory do wierszy, wszystko, co naprawdę musisz zrobić, to zmienić położenie modułów tekstowych używanych do tworzenia każdej karty. Będziemy również musieli dostosować rozmiar naszych wierszy i odstępy między sekcjami, aby zrobić miejsce na zakładki.
Oto co robić.
Śmiało i zduplikuj sekcję zawierającą zakładki, które właśnie zbudowaliśmy, aby mieć nowy projekt do pracy.
Następnie otwórz ustawienia sekcji i zaktualizuj następujące elementy:
Wyściółka: 10% w lewo, 10% w prawo
Następnie użyj opcji wielokrotnego wyboru, aby wybrać wszystkie trzy wiersze i zaktualizuj ustawienia elementu za pomocą następujących elementów:
Szerokość: 70% (komputer), 70% (tablet), 80% (telefon)
Maksymalna szerokość: 980 pikseli
Następnie zaktualizuj kierunek gradientu do 90 stopni dla wszystkich trzech notatek, aby po umieszczeniu zakładek po lewej stronie lewy kolor gradientu zmieszał się z kolorem tła zakładki.
Kierunek gradientu: 90 stopni
Teraz nadszedł czas, aby umieścić nasze zakładki modułu tekstowego po lewej stronie naszych wierszy, aby uzyskać żądane pionowe zakładki.
Otwórz ustawienie karty modułu tekstowego w pierwszym wierszu i zaktualizuj następujące elementy:
Margines (komputer): -50px u góry, -150px w lewo
Margines (telefon): -100px u góry, -50px w lewo
Ustawienie marginesu dla telefonu polega na przeniesieniu karty z powrotem nad wiersz w celu wyświetlania poziomej karty.
Następnie otwórz ustawienia karty modułu tekstowego w wierszu sekcji i zaktualizuj następujące elementy:
Margines (komputer): 0px u góry, -150px w lewo
Margines (telefon): -100px u góry, 50px w lewo
A na ostatniej karcie w trzecim rzędzie zaktualizuj następujące elementy:
Margines (komputer): 50px u góry, -150px w lewo
Margines (telefon): -100px u góry, 150px w lewo
Ostateczny wynik
Sprawdźmy teraz efekt końcowy.
A oto jeden tablet i telefon.
Końcowe przemyślenia
Przy odrobinie kreatywnego myślenia i mocy Divi możesz stworzyć całkiem fajne niestandardowe zakładki najechania za pomocą rzędów Divi. Istnieje kilka ograniczeń dotyczących tego, co możesz wyświetlić. Na przykład przy tej konfiguracji wszystkie rzędy muszą mieć tę samą wysokość co przekrój. Ale ponieważ nie trzeba używać wtyczki, myślę, że jest to świetne rozwiązanie. I nie zapomnij, ponieważ możesz używać wierszy Divi do swoich treści, istnieje mnóstwo sposobów wykorzystania tych zakładek w następnym projekcie.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!