Przejdź do głównej treści

Jak zaprojektować paski samoprzylepne dla stron produktów za pomocą modułów Divi Woo

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Lepkie paski nadal są popularnym elementem projektowania stron internetowych. Idealnie nadają się do zwiększania liczby konwersji dzięki utrzymywaniu wezwań do działania na najwyższym poziomie bez ingerencji jak wyskakujące okienka.

W tym przypadku użyjemy lepkiego paska dla produktów WooCommerce przy użyciu modułów Divi Woo. Lepki pasek może zawierać dowolny moduł Divi. W tym samouczku utworzymy lepki pasek zawierający przycisk „Dodaj do koszyka”, dzięki czemu będzie widoczny, gdy użytkownik przewinie stronę. Ponadto utworzymy pasek koszyka, aby użytkownicy zawsze widzieli przycisk „pokaż koszyk” po kliknięciu przycisku „Dodaj do koszyka”.

Te elementy z lepkim paskiem pomogą zwiększyć konwersje, zapewniając widoczność tych kluczowych wezwań do działania.

badanie

Oto podgląd tego, co zaprojektujemy w tym samouczku.

Część 1: Projekt paska samoprzylepnego na stronie produktu

W tym przykładzie użyjemy prostego symulowanego produktu, więc musisz utworzyć nowy produkt lub zmodyfikować istniejący. Informacje o produkcie nie są ważne w tym samouczku. Upewnij się, że znasz podstawy, takie jak tytuł produktu, cena, opis, zdjęcie itp.

Gdy pojedynczy produkt będzie gotowy, kliknij, aby edytować produkt na zapleczu i wdrożyć Divi Builder na stronie produktu. W obszarze Ustawienia strony Divi wybierz układ „Fullwidth”, a następnie kliknij „Build on Front”.

Strona produktu powinna wyglądać następująco.

Pod pierwszym wierszem zawierającym nawigację i powiadomienie o koszyku dodaj nowy wiersz z układem jednokolumnowym.

Ustawienia linii

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

  • Kolor tła: # 333333
  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Tapicerka: góra 0px, dół 0px

Ulepsz linię

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:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

top: 0px;

Jeśli nie jesteś zaznajomiony z właściwością css „position: sticky”, jest to swego rodzaju mieszanka między ustaloną pozycją a pozycją względną, w której element (w tym przypadku linia) będzie przewijał się wraz ze swoją kontener do wyznaczonej pozycji u góry lub u dołu strony (lub określonego przesunięcia). W tym przykładzie ustawiliśmy przesunięcie na 50px 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 „góra: 0px”, aby poprawić linię / pasek samoprzylepny u góry przeglądarki mobilnej.

Uwaga: zignoruj ​​błędy widoczne podczas dodawania CSS do strefy. Kod będzie działał dobrze.

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

Przed rozpoczęciem wypełniania linii treścią musimy upewnić się, że moduł wewnątrz linii jednokolumnowej wyrówna się w poziomie zamiast w pionie. Możemy użyć prostej sztuczki CSS, aby to zrobić za pomocą właściwości flex. Otwórz ustawienia kolumn i dodaj następujący niestandardowy CSS do głównego elementu:

display:flex; align-items:center;

Dba to o naszą lepką linię. Teraz musimy wypełnić linię treścią.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Dodaj tytuł Woo

Dodaj nowy moduł tytułu Woo do kolumny z lepką linią.

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

  • Kolorowy tytuł 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ł cenowy Woo, klikając szarą ikonę plusa, która pojawia się po najechaniu wskaźnikiem myszy na właśnie utworzony moduł tytułu woo.

Następnie zaktualizuj ustawienia Woo Price w następujący sposób:

  • Cena Rozmiar 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
  • Szerokość prawej ramki: 1px
  • Kolor prawej ramki: #777777
  • Szerokość lewej krawędzi: 1px
  • Kolor lewej krawędzi: #777777

Dodaj moduł Dodaj do koszyka

Aby dodać ostatni fragment treści, dodaj moduł Dodaj do koszyka Woo zaraz po module Woo Price.

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

Uprość pozycję Dodaj do koszyka, ukrywając ilość w magazynie i pole ilości na telefonie komórkowym.

  • Wyświetl pole ilości: WYŁ. (Tablet)
  • Pokaż zapasy: WYŁ
  • Wyrównanie tekstu: prawo
  • 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%
  • Tapicerka: 2vw po lewej stronie, 2vw po prawej stronie

Wynik

Zobaczmy, jak to wygląda na stronie na żywo.

Część 2: Utwórz pasek powiadomień koszyka

Utworzenie paska powiadomień paska samoprzylepnego wymaga kilku prostych kroków, ale wynik może być niezwykle skuteczny. Jak zapewne wiesz, Powiadomienie o koszyku pojawia się tylko wtedy, gdy użytkownik kliknie przycisk „Dodaj do koszyka”. Ale to kolejny ważny krok w procesie zakupu, który prowadzi użytkowników do strony płatności. Tak więc, gdy powiadomienie o koszyku pojawia się w postaci paska samoprzylepnego na dole okna, jest bardziej widoczne dla użytkownika.

Aby utworzyć pasek powiadomień koszyka, najpierw utwórz nowy wiersz kolumny 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

Ulepsz linię, dodając następujący niestandardowy CSS do głównego elementu:

position: -webkit-sticky !important; position: sticky !important; bottom: 0px;

Uwaga: Tak jak poprzednio, możesz zignorować błędy pojawiające się podczas dodawania właściwości position: sticky.

Podczas przewijania w górę wiersz będzie przyklejał się do dolnej części okna.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Następnie zaktualizuj indeks Z, aby był na pierwszym planie, w następujący sposób:

  • Indeks Z: 10

Dodaj moduł powiadomień koszyka

Po utworzeniu linii dodaj do niej moduł Woo Cart Notice i zaktualizuj ustawienia w następujący sposób:

  • Rozmiar tekstu (telefon): 15px
  • Margines: 0em na dole

To jest to! To Ty decydujesz, czy chcesz usunąć domyślny element ostrzegawczy koszyka u góry strony, ale dobrym pomysłem może być pozostawienie go dla lepszych konwersji.

Ostateczny wynik

Oto jak może wyglądać końcowy wynik.

końcowe przemyślenia

Mamy nadzieję, że ten artykuł pomoże nam zrozumieć, jak tworzyć samoprzylepne paski dla naszych stron produktów w Divi. Wyjaśniliśmy, jak utworzyć pasek samoprzylepny, który zawiera tytuł produktu, cenę i przycisk Dodaj do koszyka. Pokazaliśmy też, jak stworzyć lepki pasek. Oba powinny ułatwić proces zakupu i zwiększyć liczbę konwersji. I nie potrzebujemy nawet wtyczki!

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
3 akcji
udział3
ćwierkanie
Enregistrer