Tworzenie opisów usług pop-out na Hover za pomocą Divi

Tworzenie wyskakujących opisów usług po najechaniu kursorem może być skutecznym sposobem informowania i angażowania użytkowników dodatkowymi informacjami. Podobnie jak podpowiedź, te wyskakujące opisy ujawnią więcej informacji o Twojej usłudze po najechaniu myszą. Ale dzięki Divi masz pełny zestaw narzędzi do projektowania dostępnych w kreatorze Divi, aby tworzyć oszałamiające wyskakujące projekty bez dodatkowego niestandardowego CSS.

W tym samouczku pokażemy Ci, jak łatwo jest tworzyć wyskakujące opisy usług na Twojej stronie Divi. Sztuczka polega na ustawieniu modułów w taki sposób, aby przesuwały się za sobą i wyskakiwały za każdym razem, gdy dostosujesz szerokość wiersza po najechaniu kursorem.

Zacznijmy!

zapowiedź

Pobierz układ 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 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!

Subskrybuj nasz kanał YouTube

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?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, będziesz potrzebować:

1. Zainstalowany i aktywny motyw Divi
2. Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
3. Obrazy, które mają być wykorzystane do pozorowanych treści. W tym samouczku użyjemy kilku z naszego pakietu układów firmy inwestycyjnej.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie wyskakujących opisów usług na Hover za pomocą Divi

Utwórz sekcję i wiersz

Najpierw utwórz nową zwykłą sekcję z jednokolumnowym wierszem.

Przed dodaniem jakichkolwiek modułów zaktualizuj ustawienia wierszy w następujący sposób:

Dodaj ciemny obraz tła lub ciemny kolor tła. Używam abstrakcyjnego obrazu tła z pakietu układu firmy inwestycyjnej. Ale jeśli nie chcesz tego używać, możesz po prostu dodać kolor tła #161c29.

• Szerokość rynny: 1
• Szerokość: 100%
• Wysokość: 320px (komputer), auto (tablet i telefon)\
• Padding: 0px na górze, 0px na dole

Dodaj moduł Blurb

Następnie dodaj moduł notki do swojego wiersza.

I zaktualizuj ustawienia modułu notki w następujący sposób:

• Tytuł: Usługa
• Ikona: zobacz zrzut ekranu

Usuń również domyślną treść treści.

• Obraz w tle: dodaj obraz o wymiarach około 320 na 215 pikseli
• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: górny środek

• Kolor gradientu tła po lewej stronie: rgba (31,72,192,0.61)
• Gradient tła Prawy kolor: #161c29
• Pozycja startowa: 34%
• Pozycja końcowa: 71%
• Umieść gradient nad obrazem tła: TAK

• Kolor ikony: #ffffff
• Wyrównanie tekstu: do środka
• Czcionka tytułu: Archiwum
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 38px
• tytuł Odstępy między literami: 4px
• Maksymalna szerokość: 320px
• Wyrównanie modułu: środek
• Wysokość: 320px

• Wypełnienie: góra 68px
• Zaokrąglone rogi: 10px
• Indeks Z: 1

Dodanie wartości z index 1 ma kluczowe znaczenie, aby upewnić się, że moduł notki pozostaje nad innymi modułami, które ostatecznie zostaną ułożone za nim.

Dodaj moduł Wezwania do działania

Następnie musimy dodać moduł call to action, który zostanie umieszczony po lewej stronie modułu notatek.

To będzie nasz pierwszy z dwóch obszarów zawartości, które w końcu pojawią się po najechaniu myszą.

Teraz musimy usunąć domyślny kolor tła i zaktualizować ustawienia projektu w następujący sposób:

• Wyrównanie tekstu: do lewej
• Czcionka tytułu: Archiwum
• Rozmiar tekstu tytułu: 22px
• Szerokość: 320px
• Wyrównanie modułu: w lewo (komputer stacjonarny), środek (tablet i telefon)
• Wysokość: 320px (komputer), auto (tablet i telefon)
• Margines: -320px (komputer), 0px (tablet i telefon)
• Padding: 40px u góry, 40px w lewo, 40px w prawo

Zduplikuj moduł wezwania do działania i ustaw go w prawo

Aby utworzyć drugi blok treści, który pojawi się po prawej stronie notki, możemy wdrożyć tryb widoku szkieletowego i powielić moduł wezwania do działania. Następnie otwórz ustawienia duplikatu i zaktualizuj wyrównanie modułu w prawo.

Oto jak powinien wyglądać projekt do tej pory.

Tworzenie przycisku

Ostatnim elementem, który musimy dodać do naszego projektu, jest przycisk. Jeśli chcesz, możesz dodać przycisk w dowolnym z modułów wezwania do działania. Ale w przypadku tego projektu pomyślałem, że lepiej będzie dodać przycisk, który pozostanie widoczny na dole naszego rzędu.

Aby utworzyć przycisk, wdróż moduł widoku szkieletowego i dodaj moduł przycisku bezpośrednio pod drugim modułem wywołania akcji, tak aby był to ostatni moduł w wierszu/kolumnie.

Otwórz ustawienia modułu przycisków, a następnie przełącz tryb widoku pulpitu, aby wizualnie edytować przycisk.

Dodaj tekst przycisku „Dowiedz się więcej”.

Następnie zaktualizuj styl przycisku w następujący sposób:

• Wyrównanie przycisków: środek
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #1f48c0
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 10px
• Odstępy między przyciskami: 4px
• Czcionka przycisku: Archiwum

Teraz wystarczy tylko ustawić nasz przycisk.

• Margines (komputer): -25px góra
• Margines (tablet i telefon): 25px góra, 50px dół
• Indeks Z: 2

Wartość indeksu z wynosząca 2 sprawi, że przycisk pozostanie nad modułem notki (o indeksie z równym 1).

Tworzenie efektu najechania wyskakującym okienkiem

Główny efekt najechania, którego potrzebujemy do wykonania wyskakujących opisów usług, polega na zmianie szerokości wiersza po najechaniu. Aby to zrobić, będziemy musieli domyślnie nadać naszemu wierszowi wąską szerokość. Spowoduje to, że moduły ułożą się jeden za drugim i pozostaną ukryte za modułem notek. Następnie rozszerzymy szerokość wiersza po najechaniu kursorem, aby odsłonić dwa ukryte moduły wezwania do działania.

Otwórz ustawienia wiersza i zaktualizuj szerokość w następujący sposób:

• Maksymalna szerokość (komputer): 320px
• Maksymalna szerokość (najechanie): 1080px
• Maksymalna szerokość (tablet i telefon) 1080px

Następnie na koniec dodaj promień obramowania do wiersza i zaktualizuj opcję przepełnienia widoczności, aby była widoczna, aby przycisk nie był ukryty.

• Zaokrąglone rogi: 10px
• Przepełnienie poziome: widoczne
• Przepełnienie pionowe: widoczne

Ostateczny wynik

Sprawdź dotychczasowe opisy usług.

I oto jest na wyświetlaczu tabletu i telefonu.

Więcej opcji projektowania do wypróbowania

Zawsze fajnie jest eksperymentować z większą liczbą opcji projektowych teraz, gdy mamy już podstawową konfigurację. Oto kilka sugestii, które możesz wypróbować w przypadku wyskakujących opisów usług.

Dodawanie koloru tła sekcji

Jeśli chcesz, możesz dodać kolor tła do sekcji, który pasuje do koloru tła / obrazu wiersza, aby uzyskać unikalny projekt wyskakującego okienka.

Przejdź do ustawień wiersza i zaktualizuj następujące elementy:

• Kolor tła: #161c29

Następnie sprawdź wynik.

Korzystanie tylko z dwóch modułów

Jeśli chcesz bardziej zwięzłego wyskakującego okienka, używając tylko dwóch modułów, możesz usunąć jeden z modułów wezwania do działania, a następnie wyrównać moduł notki do lewej, tak aby oba były widoczne po najechaniu myszą.

Aby to zrobić, wdróż tryb widoku krawędziowego. Następnie usuń pierwszy moduł wezwania do działania bezpośrednio pod modułem notki.

Następnie zaktualizuj moduł notki z wyrównaniem do lewego modułu.

• Wyrównanie modułu: w lewo (komputer), środek (tablet)

Na koniec zmniejsz maksymalną szerokość rzędu po najechaniu kursorem, aby był bardziej zwarty. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Maksymalna szerokość (najechanie): 700px
• Maksymalna szerokość (tablet): 700px

Oto ostateczny wynik.

A tutaj jest na białym tle.

Końcowe przemyślenia

Tworzenie wyskakujących opisów usług po najechaniu kursorem to wyjątkowy sposób na zaangażowanie odwiedzających w treści. Ta funkcja działa podobnie jak wymyślna i pouczająca podpowiedź wypełniona wszystkimi możliwościami projektowania Divi. I jest to całkiem proste. Po ustaleniu rozmiaru i rozmieszczeniu modułów wystarczy tylko dostosować szerokość wiersza po najechaniu kursorem. Zachęcamy do eksperymentowania z różnymi modułami i treściami, aby uzyskać jeszcze więcej zastosowań. Jeśli już, mam nadzieję, że da ci to trochę więcej inspiracji, aby zrobić więcej z Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!