Jak dodać kartę Floating About do swojej witryny Divi?

Na prawie każdej odwiedzanej stronie elementy wyskakują i przyklejają się do strony. Ostrzeżenia i zgody dotyczące plików cookie, rejestracje e-mail i pola czatu. Wszyscy mamy tendencję do ignorowania ich w pewnym momencie, stając się ślepi na wszystko, co próbuje nam powiedzieć strona internetowa. Po prostu klikamy X bez czytania. Ale to nie znaczy, że tego rodzaju elementy nie mogą być przydatne ani mieć miejsca. Dzięki Divi możesz łatwo stworzyć pływającą kartę, która zwiększy wartość Twojej witryny, dyskretnie wyjaśniając, kim jesteś i czym zajmuje się Twoja marka. Zobaczmy, jakie to proste.

Zapowiedź

Pulpit

mobilny

1. Utwórz szablon strony

Pierwszą rzeczą, którą chcesz zrobić, to zdecydować, które strony chcesz uwzględnić w tej pływającej karcie. Możesz go chcieć na każdej stronie swojej witryny lub tylko na określonych stronach docelowych. Tak czy inaczej, możesz użyć Divi Theme Builder, aby go skonfigurować. Albo jako szablon globalny, albo szablon, który ma zastosowanie tylko do niektórych stron.

Użyj Theme Buildera do stworzenia szablonu

Aby rozpocząć, przejdź do Divi – Theme Builder na pulpicie WordPress. Wybierz sekcję Niestandardowa treść stron, do których chcesz zastosować pływającą kartę lub treść globalną, aby zastosować ją wszędzie.

Po załadowaniu Divi Visual Builder wybierz opcję Rozpocznij od podstaw po wybraniu opcji.

Dodaj 1-kolumnowy moduł wiersza i publikuj zawartość

A następnie po wyświetleniu monitu wybierz wiersz z jedną kolumną.

Następnie chcesz wybrać moduł Treść posta . To jest przykład naszej funkcji zawartości dynamicznej. Moduł wyświetla towarzyszący projekt wbudowany w samą stronę Divi, co oznacza, że ​​ten moduł pokaże różne treści dla różnych stron za pomocą tego szablonu. W przypadku postów na blogu będzie to treść bloga. W przypadku stron sklepu będą to produkty. A dla poszczególnych stron niestandardowa zawartość, którą stworzyłeś za pomocą Divi.

Dostosuj odstępy między sekcjami i rzędami

Mając je na miejscu, musimy dokonać kilku korekt odstępów. Przejdź do ustawień sekcji (niebieska ramka w kreatorze Divi) i usuń całą górną i dolną wyściółkę. Robisz to na karcie Projekt , nagłówek Odstępy , a następnie ustawiając 0px na Górny i Dolny w obszarze Dopełnienie .

Zapisz zmiany i wprowadź ustawienia Wiersz . Ponownie ustawić górny i dolny dopełnienie do 0px.

Następnie znajdź nagłówek Rozmiar i włącz opcję Użyj niestandardowej szerokości rynny i ustaw jej wartość na 1. Następnie ustaw Szerokość i Maks. szerokość na 100%.

Po zakończeniu przygotowań zabierzmy się do pływającej karty!

2. Dodaj pływającą kartę

Dodaj nową sekcję i wiersz

Najpierw będziesz chciał dodać nową sekcję. Zrób to, przewijając na dół strony i klikając niebieskie kółko + i wybierając Zwykły po wyświetleniu monitu o typ sekcji.

Dodaj moduł Blurb

Będzie to sekcja poświęcona karcie pływającej. Wewnątrz chcemy dodać kolejny jednokolumnowy wiersz. A wewnątrz tego chcemy użyć modułu Blurb dla samej karty pływającej. Moduł Divi Blurb może być najbardziej wszechstronnym modułem w kreatorze, więc chcemy skorzystać z tego, co oferuje dla tej funkcji.

Dostosuj ustawienia sekcji i rzędów

Mając to na miejscu, musimy dostosować wypełnienie i położenie tego rzędu i sekcji. Więc po pierwsze, przejdź do sekcji Ustawienia i ustawić górny i dolny dopełnienie do 0px pod wyświetlaczem - odstęp.

Następnie na karcie Zaawansowane znajdź nagłówek Pozycja . Ustaw indeks Z na 12. Im wyższy numer, tym dalej „z przodu” znajdzie się sekcja i jej zawartość. A ponieważ jest to karta pływająca, chcemy, aby unosiła się na wierzchu wszystkich innych elementów.

Na koniec przejdź do ustawień Row i ponownie ustaw jego dopełnienie na górze i na dole na 0px .

Zawartość modułu Blurb

Teraz nadszedł czas, abyśmy zaprojektowali samą kartę. Wejdź w Ustawienia modułu Blurb. Ponieważ jest to element opisujący Twoją firmę, będziesz chciał mieć krótką wzmiankę o tym, czym zajmuje się Twoja firma lub marka. Ponieważ jest to post przykładowy, wypełniliśmy go lorem ipsum o smaku zombie. Możesz ustawić tytuł i treść na karcie Treść .

Ustaw kolor tła

Oczywiście chcesz, aby pływająca karta wizualnie pasowała do Twojej witryny, więc wybór odpowiedniego koloru tła ma ogromne znaczenie. Jedziemy z #ffffff (biały). Zakładka Zawartość również to zawiera, a znajdziesz je pod nagłówkiem Tło i Puszka z farbą .

Wybierz obraz karty

Moduł Blurb daje możliwość dołączenia obrazu lub ikony do modułu, a my chcemy, aby obraz przedstawiał naszą firmę. Ponownie w zakładce Treść znajdź Obraz i Ikona i po prostu prześlij obraz, który działa dla Twojego modułu.

Kształtuj rogi kart

Następnie przejdź do zakładki Projekt i do nagłówka Obramowanie . Znajdź opcje zaokrąglonych narożników i ustaw każdy róg na 25 pikseli . To wygładzi ostre, kwadratowe krawędzie bez zmiany kształtu całej karty.

Wyrównanie tekstu

Pod nagłówkiem Tekst ustaw Wyrównanie tekstu na środek.

Stylizuj tekst tytułu pływającej karty

Tekst tytułu, który ustawiłeś wcześniej, jest domyślnie ustawiony na H4 . Aby nadać mu styl, przejdź do nagłówka Tekst tytułu , wybierz kartę H4 i zmień następujące opcje tytułu :

• Czcionka: Poppins
• Waga czcionki: pogrubiona
• Kolor tekstu: # 22303f
• Rozmiar tekstu: 20px
• Wysokość linii: 1,3 em

Następnie musimy wejść w ustawienia Responsiveness i zmienić rozmiar tytułu dla urządzeń mobilnych. Zmień Rozmiar tekstu tytułu na 14px .

Stylizuj tekst karty

Następnie przejdź do opcji Tekst główny i zmień czcionkę treści na Poppins, aby dopasować czcionkę tytułu.

Następnie kliknij kartę Link (ikona łańcucha) i zamień kolor tekstu linku na kolor uzupełniający dla Twojej witryny. Wybraliśmy #97c357 .

Rozmiar karty Informacje

Pod nagłówkiem Rozmiar dodaj następujące wartości do tych ustawień:

• Szerokość obrazu: 75%
• Szerokość treści: 25vw
• Szerokość: 25vw
• Maksymalna szerokość: 30vw

W ustawieniach czasu reakcji dostosuj następujące wartości:

• Szerokość treści: 90vw
• Szerokość: 90vw
• Maksymalna szerokość: 95vw

Te wartości zapewnią, że karta zajmie całą szerokość ekranu na urządzeniach mobilnych, ponieważ pływająca karta w rogu jest zazwyczaj niemożliwa do odczytania.

Odstęp na Blurb

Nagłówek Rozstaw jest szybkie ustalenie, gdzie trzeba ustawić lewy margines do 0px, u góry iu dołu dopełnienie do 2vw, a lewy i prawy dopełnienie do 1vw.

W przypadku ustawień responsywnych zmieni się tylko górna i dolna wyściółka . Ustawimy je na 5% .

Dodaj cień pudełka

Ponieważ karta unosząca się w pobliżu pozostanie na swoim miejscu, chcemy, aby wyglądała, jakby faktycznie unosiła się nad zawartością. Ten efekt jest dość prosty dzięki dodaniu do modułu podstawowego cienia pudełkowego. Tę opcję można znaleźć pod Box Shadow , a my wybraliśmy podstawowy cień dolny.

Dostosowywanie responsywnego CSS

Teraz jest fajna część. Przechodzimy do zakładki Zaawansowane , gdzie dodamy pływającą kartę do strony. Aby to zrobić, naszym pierwszym krokiem jest wyłączenie obrazu, który dodaliśmy do pulpitu. Obrazy w module Blurb mogą naprawdę wpłynąć na rozmiar i użyteczność na urządzeniach mobilnych, a ładowanie strony jest czymś innym.

Dlatego chcemy dodać display:none; w polu Obraz Blurb tylko na urządzenia mobilne w sekcji Niestandardowy CSS .

Napraw i unieś kartę z ustawieniem pozycji

Na koniec umieścimy kartę tam, gdzie chcemy, aby unosiła się. Najpierw chcemy przejść do zakładki Zaawansowane i przewinąć do Pozycja . Wybierz Naprawiono z menu rozwijanego.

Następnie znajdź opcje lokalizacji . To jest punkt na ekranie, w którym pozostanie pływająca karta. W przypadku pulpitu chcemy, aby znajdował się w dolnym rogu ekranu. Więc klikamy kwadrat, który z tym koreluje. Chcemy również, aby był nieco odsunięty od krawędzi okna, więc zmienimy przesunięcie pionowe na 3% i przesunięcie poziome na 2%.

Następnie chcemy utworzyć inną lokalizację i przesunięcie dla urządzeń mobilnych. Powyżej ustawiamy szerokość karty, aby rozciągnąć całą szerokość ekranu. Mając to na uwadze, zmienimy Stałą lokalizację na dół pośrodku, aby karta przez cały czas unosiła się na dole ekranu.

Dodatkowo zamierzamy zmienić tylko Przesunięcie w pionie na urządzenia mobilne. Ustaw tę wartość na 3% . Nie ma potrzeby przesunięcia w poziomie, ponieważ jest to szerokość ekranu mobilnego i wyśrodkowane.

Ostateczne rezultaty

Gdy wszystko jest odpowiednio ustawione i dostosowane do Twojej osobistej witryny, produkt końcowy powinien wyglądać podobnie do tego.

Pulpit

mobilny

Wniosek

Dzięki zaawansowanym opcjom i intuicyjnemu interfejsowi Divi możesz błyskawicznie zaprojektować i umieścić pływającą kartę w swojej witrynie. Informując użytkowników od samego początku, z kim mają do czynienia, na pewno zdobędziesz pewną lojalność wobec marki.

Do czego używałeś kart pływających w swoich witrynach? Daj nam znać w komentarzach!