Paski samoprzylepne nadal są popularnym elementem projektowania stron internetowych. Świetnie nadają się do zwiększania konwersji, utrzymując wezwania do działania na miejscu, nie będąc tak uciążliwymi jak wyskakujące okienka.
W tym przypadku zaprojektujemy lepki pasek dla produktów WooCommerce za pomocą modułów Woo od Divi. Przyklejony pasek może zawierać dowolny moduł Divi. W tym samouczku utworzymy lepki pasek zawierający przycisk „Dodaj do koszyka”, aby był widoczny, gdy użytkownik przewinie stronę w dół. Dodatkowo utworzymy również pasek powiadomień koszyka, aby użytkownicy zawsze widzieli przycisk „wyświetl koszyk” po kliknięciu przycisku „dodaj do koszyka”.
Te lepkie elementy paska pomogą zwiększyć liczbę konwersji, utrzymując te kluczowe wezwania do działania.
badanie
Oto podgląd tego, co będziemy projektować w tym samouczku.
Część 1: Projektowanie paska samoprzylepnego na stronie produktu
W tym przykładzie użyjemy prostej symulacji produktu, więc musisz utworzyć nowy produkt lub zmodyfikować istniejący. Informacje o produkcie nie są ważne w tym samouczku. Upewnij się, że masz podstawowe informacje, takie jak tytuł produktu, cena, opis, zdjęcie itp.
Gdy prosty produkt będzie gotowy, kliknij, aby edytować produkt na zapleczu i wdrożyć Divi Kreator na stronie produktu. W Ustawieniach strony Divi wybierz „Pełna szerokość” dla układu, a następnie kliknij „Utwórz z przodu”.
Strona produktu powinna wyglądać tak.
Poniżej pierwszego wiersza zawierającego informację o bułce tartej i koszyku dodaj nowy wiersz z układem jednokolumnowym.
Ustawienia linii
Przed dodaniem modułów zaktualizuj parametry linii w następujący sposób:
- Kolor tła: # 333333
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 100%
- Wypełnienie: góra 0 pikseli, dół 0 pikseli
Spraw, aby linia była lepka
Aby linia była lepka, dodaj następujący niestandardowy kod CSS do głównego elementu pulpitu:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Następnie dodaj następujący kod CSS do tego samego głównego elementu wyświetlacza tabletu:
top: 0px;
Jeśli nie jesteś zaznajomiony z właściwością css „position:sticky”, jest to coś w rodzaju mieszanki między pozycją stałą a pozycją względną, w której element (w tym przypadku linia) będzie przewijał się wraz ze swoim kontenerem, aż osiągnie wyznaczoną pozycję w u góry lub u dołu strony (lub określone przesunięcie). W tym przykładzie ustawiliśmy przesunięcie na 50 pikseli od góry okna przeglądarki (pozostawiając miejsce na wysokość domyślnego stałego nagłówka na pulpicie). Następnie na tablecie przesunięcie jest zmieniane na „top: 0px”, aby naprawić lepką linię/pasek u góry przeglądarki na telefonie komórkowym.
Uwaga: Zignoruj wszelkie błędy, które widzisz podczas dodawania CSS do strefy. Kod będzie działał poprawnie.
Po CSS zaktualizuj indeks Z w następujący sposób:
- Indeks Z: 10
Teraz linia stanie się lepka, gdy użytkownik przewinie stronę produktu.
Niestandardowa kolumna CSS
Zanim zaczniesz wypełniać linię treść, musimy się upewnić, że moduł w naszym jednokolumnowym wierszu będzie wyrównany poziomo, a nie pionowo. Możemy użyć prostej sztuczki CSS, aby to zrobić za pomocą właściwości flex. Otwórz ustawienia kolumny i dodaj następujący niestandardowy CSS do głównego elementu:
display:flex; align-items:center;
To dba o nasz projekt linii lepkiej. Teraz musimy wypełnić linię treść.
Dodaj tytuł Woo
Dodaj nowy moduł tytułu Woo do lepkiej kolumny wierszy.
Następnie zaktualizuj ustawienia w następujący sposób:
- Kolor tytułu tekstu: #ffffff
- Rozmiar tytułu tekstu: 28px (komputer stacjonarny), 20px (tablet), 16px (telefon)
- Szerokość: 30%
- Tapicerka: 2vw u góry, 2vw u dołu, 2vw po lewej stronie, 2vw po prawej stronie
Dodaj cenę Woo
Następnie dodaj moduł cen Woo, klikając szarą ikonę plusa, która pojawia się po najechaniu kursorem na właśnie utworzony moduł tytułowy Woo.
Następnie zaktualizuj ustawienia Woo Price w następujący sposób:
- Rozmiar tekstu ceny: 28px (komputer stacjonarny), 20px (tablet), 16px (telefon)
- Szerokość: 30%
- Tapicerka: 2vw u góry, 2vw u dołu, 2vw po lewej stronie, 2vw po prawej stronie
- Szerokość prawej krawędzi: 1px
- Kolor prawej krawędzi: #777777
- Szerokość lewej krawędzi: 1px
- Kolor lewej krawędzi: #777777
Dodaj moduł Dodaj do koszyka
Dla ostatniego elementu treść, dodaj moduł Woo Dodaj do koszyka zaraz po module Woo Price.
Następnie zaktualizuj ustawienia w następujący sposób:
Uprość element dodawania do koszyka, ukrywając pole ilości i ilości w magazynie na telefonie komórkowym.
- Pokaż pole ilości: WYŁ. (tabletka)
- Pokaż zapas: WYŁ
- Wyrównanie tekstu: prawe
- Użyj niestandardowych stylów dla Button: YES
- Rozmiar tekstu przycisku: 18px (tablet), 14px (telefon)
- Kolor tekstu przycisku: #ffffff
- Kolor tła przycisku: #0c71c3
- Szerokość obramowania przycisku: 0px
- Szerokość: 40%
- Wypełnienie: 2vw w lewo, 2vw w prawo
Wynik
Zobaczmy teraz, jak to wygląda na stronie na żywo.
Część 2: Utwórz pasek powiadomień o koszyku
Utworzenie lepkiego paska powiadomień o koszyku faktycznie obejmuje kilka prostych kroków, ale wynik może być niezwykle skuteczny. Jak być może już wiesz, powiadomienie o koszyku pojawia się tylko wtedy, gdy użytkownik kliknie przycisk „Dodaj do koszyka”. Ale to kluczowy kolejny krok w procesie zakupu, który prowadzi użytkowników do strony kasy. Tak więc, gdy informacja o koszyku pojawia się jako lepki pasek u dołu okna, jest bardziej widoczna dla użytkownika.
Aby utworzyć pasek samoprzylepny powiadomień o koszyku, najpierw utwórz nowy jednokolumnowy wiersz na dole strony produktu. Następnie zaktualizuj parametry linii w następujący sposób:
- Szerokość: 100%
- Tapicerka: 0px u góry, 0px u dołu
Spraw, aby wiersz był lepki, dodając następujący niestandardowy CSS do głównego elementu:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Uwaga: Tak jak zrobiliśmy to wcześniej, możesz zignorować wszelkie błędy pojawiające się podczas dodawania właściwości position:sticky.
Wiersz będzie przyklejał się do dolnej części okna podczas przewijania w górę.
Następnie zaktualizuj indeks Z, aby zachować go na pierwszym planie, tak jak poniżej:
- Indeks Z: 10
Dodaj moduł powiadomień o koszyku
Po utworzeniu linii dodaj moduł Woo Cart Reviews do linii i zaktualizuj parametry w następujący sposób:
- Rozmiar tekstu (telefon): 15px
- Margines: 0em na dole
Otóż to ! To, czy chcesz usunąć domyślny element ostrzeżenia o koszyku u góry strony, zależy od Ciebie, ale dobrym pomysłem może być pozostawienie go włączonego w celu uzyskania lepszych konwersji.
Ostateczny wynik
Oto jak może wyglądać efekt końcowy.
końcowe przemyślenia
Mamy nadzieję, że ten artykuł pomoże nam zrozumieć, jak tworzyć paski samoprzylepne dla naszych stron produktów w Divi. Omówiliśmy, jak utworzyć pasek samoprzylepny, który zawiera tytuł produktu, cenę i przycisk Dodaj do koszyka. Pokazaliśmy również, jak stworzyć pasek samoprzylepny. Oba te elementy powinny ułatwić proces zakupu i zwiększyć liczbę konwersji. I nie potrzebujemy nawet wtyczki!
