Jak umieszczać podpowiedzi w dowolnym miejscu na stronie za pomocą Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy Ci, jak tworzyć i umieszczać podpowiedzi w dowolnym miejscu na stronie za pomocą Divi. To świetny sposób na udostępnianie informacji pobocznych użytkownikom bez bezpośredniego umieszczania ich na stronie.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ podpowiedzi po najechaniu kursorem ZA DARMO

Aby położyć swoje ręce na darmowym układzie podpowiedzi, musisz najpierw pobrać go 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!

Utwórz nową stronę za pomocą układu strony głównej wyprowadzacza psów

Dodaj nową stronę

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę, przechodząc do Strony > Dodaj nową . Kontynuuj, nadając swojej stronie tytuł, publikując stronę i przełączając się na Visual Builder.

Prześlij stronę docelową wyprowadzacza psów

Następnie prześlij układ strony docelowej na swoją stronę. Chociaż będziemy używać tego pakietu układów, aby przejść przez technikę podpowiedzi, możesz zastosować to podejście do dowolnego rodzaju układu, nad którym pracujesz.

Utwórz projekt podpowiedzi po najechaniu kursorem

Dodaj nowy wiersz na dole sekcji

Struktura kolumny (zdecyduj, ile podpowiedzi potrzebujesz)

Po przesłaniu układu strony docelowej czas zacząć tworzyć podpowiedzi. Dodamy je w określonym miejscu na stronie, ale możesz je umieścić w dowolnym miejscu, korzystając z opcji tłumaczenia transformacji. Znajdź następującą sekcję na swojej stronie i dodaj trzykolumnowy wiersz na jej dole:

Maksymalna szerokość rzędu

Aby upewnić się, że projekty podpowiedzi pojawiają się we właściwym miejscu, użyjemy tej samej maksymalnej szerokości wiersza, która została użyta dla wiersza znajdującego się powyżej. Przejdź do ustawień rozmiaru wiersza i odpowiednio dostosuj maksymalną szerokość:

• Maksymalna szerokość: 1280 pikseli

Rozstaw

Aby zmniejszyć miejsce zajmowane przez kontener wierszy, usuniemy domyślne górne i dolne dopełnienie w ustawieniach odstępów.

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

Przepełnienia

Dbamy też o to, aby przepełnienia wiersza były widoczne na karcie Zaawansowane.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: widoczne

Dodaj moduł tekstu podpowiedzi do kolumny 1

Dodaj zawartość do pola zawartości

Rozpiętość znaku zapytania

Czas zacząć tworzyć pierwszy projekt podpowiedzi! Użyjemy modułu tekstowego. Dodamy span (dla ikony podpowiedzi) i div (dla treści podpowiedzi) w polu treści. Daje nam to większą swobodę indywidualnego stylizowania ikony podpowiedzi po najechaniu kursorem i zawartości podpowiedzi. Zacznij od dodania zakresu i przypisania do niego „znaku zapytania” klasy.

Div podpowiedzi

Kontynuuj, dodając element div do pola treści z klasą „tooltip-content”. Dodaj wybraną zawartość podpowiedzi w tym div.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #ffffff

Ustawienia tekstu H3

Zmodyfikuj również ustawienia tekstu H3.

• Czcionka nagłówka 3: Amatic SC
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 30px

Rozmiary

Bawimy się również szerokością i wysokością modułu, aby uzyskać efekt najechania.

• Szerokość: 300px
• Wysokość: 42px

Rozstaw

Dodaj też górną wyściółkę.

• Górna wyściółka: 10px

Widoczność domyślna

Teraz, w stanie domyślnym, chcemy, aby wszystko, co znajduje się pod ikoną podpowiedzi, było ukryte. Dlatego ukryjemy przepełnienia w zakładce Zaawansowane.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Widoczność najechania

Jednak po najechaniu myszą chcemy, żeby wszystko się pokazało. Zrobimy to, wyświetlając przepełnienia po najechaniu myszą.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Dodaj moduł kodu poniżej modułu tekstowego

Teraz, gdy już ostylowaliśmy moduł, nadal musimy nadać styl span i div w polu zawartości, używając klas CSS, które do niego przypisaliśmy. Dodaj moduł kodu tuż pod modułem tekstowym podpowiedzi.

Dodaj kod CSS do stylów div w module tekstowym

Dodaj następujące wiersze kodu CSS, aby nadać styl różnym częściom modułu tekstowego:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

Klonuj moduł tekstowy podpowiedzi dwa razy i umieść w pozostałych kolumnach

Po ukończeniu pierwszej kolumny możesz dwukrotnie sklonować moduł tekstowy podpowiedzi i umieścić duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień zawartość podpowiedzi

Upewnij się, że zmieniłeś treść podpowiedzi każdego duplikatu.

Zmień pozycję podpowiedzi (używając tłumaczenia przekształceń)

Etykietka nr 1

Na koniec musimy zmienić położenie podpowiedzi w dowolnym miejscu na stronie. Aby osiągnąć dokładnie taki sam wynik, jak pokazano na podglądzie tego posta, otwórz pierwszy moduł tekstowy podpowiedzi i zastosuj następujące wartości tłumaczenia transformacji:

• Po prawej: -450px (komputer), -2000px (tablet), -1900px (telefon)

Etykietka nr 2

Przejdź do modułu tekstowego podpowiedzi w drugiej kolumnie i zmień wartości translacji transformacji w następujący sposób:

• Po prawej: -400px (komputer), -1300px (tablet), -1250px (telefon)

Etykietka #3

Zrób to samo dla modułu tekstowego podpowiedzi w kolumnie 3 i gotowe!

• Po prawej: -500px (komputer), -600px (tablet i telefon)

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć i umieszczać podpowiedzi w dowolnym miejscu na stronie bez potrzeby korzystania z dodatkowej wtyczki. To świetny sposób na dodawanie dodatkowych informacji bez bezpośredniego umieszczania ich na swojej stronie. Ten samouczek dotyczący przypadków użycia jest częścią naszej ciągłej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do zestawu narzędzi projektowych. Jeśli masz jakieś pytania, upewnij się, że zostawiłeś pytanie w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.