Jak prezentować funkcje w zakładkach najechanych za pomocą Divi

Opublikowany: 2019-02-10

Szukasz nowych i kreatywnych sposobów prezentowania funkcji i/lub produktów na swoich stronach internetowych? Jeśli tak, czytaj dalej, ponieważ w tym poście pokażemy, jak wyświetlać funkcje w zakładkach po najechaniu kursorem tylko za pomocą wbudowanych opcji Divi. Możliwości, jakie masz dzięki temu podejściu, są nieograniczone i na pewno pozwolą ci zrozumieć Divi na głębszym poziomie. Efekt najechania na kartę pojawi się tylko w środowiskach graficznych przyjaznych najechaniu kursorem. Gdy zakładki najechane są wyświetlane z mniejszych rozmiarów ekranu, funkcje będą wyświetlane w ich oryginalnej formie.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

Pulpit

najedź na zakładki

mobilny

najedź na zakładki

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Tło gradientowe

Dodaj nową stronę lub otwórz istniejącą i dodaj nową sekcję. Otwórz ustawienia przekroju i dodaj do przekroju tło gradientowe. Użyjemy gradientowego tła, aby zakryć lewą część zakładek, jak widać na zrzutach ekranu powyżej.

Kolor 1: #f2f2f2
Kolor 2: #ffffff
Kierunek gradientu: 87 stopni
Pozycja startowa: 20%
Pozycja końcowa: 20%

najedź na zakładki

Rozstaw

Następnie usuń niestandardowe górne i dolne dopełnienie sekcji, dodając „0px” do obu opcji.

Górna wyściółka: 0px
Dolna wyściółka: 0px

najedź na zakładki

Dodaj nowy wiersz

Struktura kolumny

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

najedź na zakładki

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

Kolor tła: #ffffff

najedź na zakładki

Wyrównanie wierszy

Zmodyfikuj również wyrównanie wierszy.

Wyrównanie wierszy: do lewej

najedź na zakładki

Rozmiar domyślny

I zmień też ustawienia rozmiaru.

Użyj niestandardowej szerokości: Tak
Jednostka: PX
Szerokość niestandardowa: 400px
Użyj niestandardowej szerokości rynny: Tak
Szerokość rynny: 1

najedź na zakładki

Rozmiar po najechaniu kursorem

Zmodyfikuj opcję Niestandardowa szerokość w ustawieniach rozmiaru po najechaniu myszą. Umożliwi to rozszerzenie wiersza po najechaniu kursorem.

Szerokość niestandardowa: 2000px

najedź na zakładki

Rozstaw

Następnie przejdź do ustawień odstępów i usuń domyślne górne i dolne wartości dopełnienia.

Górna wyściółka: 0px
Dolna wyściółka: 0px

najedź na zakładki

Domyślna ramka

Dodaj „20px” w prawym górnym rogu wiersza i dodaj również lewą ramkę do wiersza.

Szerokość lewej krawędzi: 20px
Kolor lewej krawędzi: #6d44ff

najedź na zakładki

Wskaż granicę

Usuń zaokrąglony prawy górny róg „20px” po najechaniu myszą, dodając zamiast tego „0px”.

najedź na zakładki

Domyślny cień pudełka

Na koniec dodaj subtelny cień pudełkowy.

Siła rozmycia cieni w pudełku: 80px
Siła rozprzestrzeniania się cieni w pudełku: -10px
Kolor cienia: rgba(0,0,0,0.11)

najedź na zakładki

Wskaż cień pola

I zmień kolor cienia na całkowicie przezroczysty po najechaniu myszą.

Kolor cienia: rgba (255,255,255,0)

najedź na zakładki

Dodaj moduł Blurb do wiersza

Dodaj zawartość

Teraz, gdy skończyliśmy modyfikować wszystkie ustawienia wierszy, możemy śmiało dodać moduł Blurb do kolumny. Zachęcamy do skorzystania z dowolnego innego wybranego modułu. Po dodaniu modułu dodaj wybraną zawartość.

najedź na zakładki

Wybierz ikonę

Następnie wybierz wybraną ikonę.

najedź na zakładki

Ustawienia ikon

I zmień wygląd ikony w ustawieniach ikon.

Kolor ikony: #5323ff
Umieszczenie ikon: góra
Użyj rozmiaru czcionki ikony: Tak
Rozmiar czcionki ikony: 54px

najedź na zakładki

Domyślne ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

Czcionka tytułu: Poppins
Wyrównanie tekstu tytułu: do środka
Kolor tekstu tytułu: #5323ff
Rozmiar tekstu tytułu: 25px
Odstępy między literami tytułu: -1px
Wysokość wiersza tytułu: 1em

najedź na zakładki

Ustawienia tekstu w tytule najechania kursorem

I zmień wysokość wiersza tytułu po najechaniu myszą.

Wysokość wiersza tytułu: 1,5 em

najedź na zakładki

Domyślne ustawienia tekstu podstawowego

Następnie przejdź do ustawień tekstu podstawowego i wprowadź zmiany. Obejmuje to zmianę rozmiaru tekstu na „0px”. Pomoże nam to sprawić, by tekst główny pojawiał się tylko po najechaniu myszą.

Czcionka ciała: Poppins
Waga czcionki ciała: lekka
Wyrównanie tekstu podstawowego: do środka
Kolor tekstu ciała: #000000
Rozmiar tekstu podstawowego: 0px (komputer), 15px (tablet i telefon)
Wysokość linii ciała: 2,2 em

najedź na zakładki

Ustawienia tekstu w nawinięciu

Aby upewnić się, że tekst główny pojawia się po najechaniu myszą, zmień rozmiar tekstu po najechaniu myszą.

Rozmiar tekstu ciała: 15px

najedź na zakładki

Domyślne odstępy

Aby zapewnić modułowi trochę przestrzeni do oddychania, dodajemy do niego niestandardowe górne i dolne wyściółki.

Górna wyściółka: 80px
Dolna wyściółka: 80px

najedź na zakładki

Odstępy najechania

Zmodyfikujemy ustawienia odstępów po najechaniu myszą. Nie będziesz mógł zobaczyć wyniku końcowego przed wyjściem z programu Visual Builder, ponieważ stosujemy opcje najechania kursorem zarówno do wiersza, jak i modułu Blurb.

Górna wyściółka: 80px
Dolna wyściółka: 80px
Lewa wyściółka: 20vw
Prawa wyściółka: 20vw

najedź na zakładki

Klonuj rząd 3 razy

Gdy skończysz modyfikować pierwszy wiersz i jego Moduł Blurb, możesz śmiało sklonować wiersz tyle razy, ile chcesz.

najedź na zakładki

Zmień moduł wiersza i rozmycia nr 2

Zmień odstępy między wierszami

Otwórz pierwszy duplikat i dodaj niestandardowy lewy margines. Pozwoli nam to stworzyć efekt schodów, który można zauważyć na podglądzie tego posta.

Lewy margines: 6vw

najedź na zakładki

Zmień kolor obramowania wiersza

Zmień również kolor lewego obramowania wiersza.

Kolor lewej krawędzi: #00ffcc

najedź na zakładki

Zmień treść i ikonę Blublu

Następnie otwórz moduł Blurb i zmień ikonę.

najedź na zakładki

Zmień kolor ikony modułu rozmycia

Wraz z kolorem ikony.

Kolor ikony: #00eda6

najedź na zakładki

Zmień kolor tekstu tytułu

I kolor tekstu tytułu.

Kolor tekstu tytułu: #00eda6

najedź na zakładki