Sticky Bars jsou i nadále oblíbeným prvkem webdesignu. Jsou skvělé pro řízení konverzí tím, že udržují hovory na akci špičkové, aniž by byly rušivé jako vyskakovací okna.
V tomto případě použití navrhneme lepicí lištu pro produkty WooCommerce pomocí modulů Woo od divi. Lepicí lišta může obsahovat jakýkoli modul divi. Pro tento tutoriál vytvoříme lepicí lištu, která bude obsahovat tlačítko „Přidat do košíku“, aby zůstala viditelná, když uživatel posouvá stránku dolů. Kromě toho také vytvoříme oznamovací lištu nákupního košíku, takže uživatelé vždy uvidí tlačítko „zobrazit košík“ po kliknutí na tlačítko „přidat do košíku“.
Tyto lepkavé sloupcové prvky pomohou posílit konverze tím, že udržují tyto klíčové CTA v dohledu.
přehled
Zde je náhled toho, co navrhneme v tomto tutoriálu.
Část 1: Návrh lepicí lišty na stránce produktu
V tomto příkladu použijeme jednoduchý simulovaný produkt, takže musíte vytvořit nový produkt nebo upravit existující produkt. Informace o produktu nejsou pro tento výukový program důležité. Ujistěte se, že máte základní informace, jako je název produktu, cena, popis, obrázek atd.
Jakmile je jednoduchý produkt připraven, kliknutím upravte produkt na backendu a nasaďte jej divi Tvůrce na stránce produktu. V části Nastavení stránky Divi vyberte rozvržení „Plná šířka“ a poté klikněte na „Vytvořit vpředu“.
Stránka produktu by měla vypadat takto.
Pod první řádek obsahující upozornění na strouhanku a košík přidejte nový řádek s rozložením jednoho sloupce.
Nastavení linky
Před přidáním modulů aktualizujte nastavení linky následujícím způsobem:
- Barva pozadí: # 333333
- Použijte vlastní šířku okapu: ANO
- Šířka okapu: 1
- Šířka: 100%
- Čalounění: 0px Top, 0px Bottom
Udělejte linii lepivou
Chcete-li čáru zlepit, přidejte do hlavního prvku plochy následující vlastní kód CSS:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Poté přidejte následující kód CSS do stejného hlavního prvku displeje tabletu:
top: 0px;
Pokud nejste obeznámeni s vlastností css "position: sticky", jedná se o jakýsi mix mezi pevnou pozicí a relativní pozicí, kde bude prvek (v tomto případě řádek) rolovat s jeho kontejner, dokud nedosáhne určené polohy v horní nebo dolní části stránky (nebo zadaného odsazení). V tomto příkladu jsme nastavili offset na 50px z horní části okna prohlížeče (ponechali jsme prostor pro výšku výchozí pevné hlavičky na ploše). Poté se na tabletu offset změní na „top: 0px“, aby se opravila lepicí čára / lišta v horní části prohlížeče v mobilu.
Poznámka: Ignorujte všechny chyby, které uvidíte, když do pole přidáte CSS. Kód bude fungovat dobře.
Po CSS aktualizujte index Z následovně:
- Z index: 10
Řádek se nyní bude lepit, jak se uživatel posouvá stránkou produktu.
Vlastní sloupec CSS
Než začnete plnit linku s obsah, musíme se ujistit, že modul uvnitř našeho jednosloupcového řádku bude zarovnán vodorovně, nikoli svisle. K tomu můžeme použít jednoduchý CSS trik s vlastností flex. Otevřete nastavení sloupců a do hlavního prvku přidejte následující vlastní CSS:
display:flex; align-items:center;
To se stará o náš design lepivé linie. Nyní musíme řádek vyplnit obsah.
Přidejte název Woo
Do sloupce s lepkavými řádky přidejte nový titulní modul Woo.
Poté aktualizujte nastavení následovně:
- Název barevného textu: #ffffff
- Velikost názvu textu: 28px (stolní), 20px (tablet), 16px (telefon)
- Šířka: 30%
- Čalounění: 2vw nahoře, 2vw dole, 2vw vlevo, 2vw vpravo
Přidejte cenu Woo
Poté přidejte modul ceny Woo kliknutím na šedou ikonu plus, která se zobrazí, když umístíte kurzor na právě vytvořený modul woo title.
Poté aktualizujte nastavení ceny Woo takto:
- Cena Velikost textu: 28px (stolní), 20px (tablet), 16px (telefon)
- Šířka: 30%
- Čalounění: 2vw nahoře, 2vw dole, 2vw vlevo, 2vw vpravo
- Šířka pravého okraje: 1px
- Barva pravého okraje: #777777
- Šířka levého okraje: 1px
- Barva levého okraje: #777777
Přidat modul Přidat do košíku
Pro poslední prvek obsah, přidejte modul Woo Add to Cart hned za modul Woo Price.
Poté aktualizujte nastavení následovně:
Zjednodušte prvek Přidat do košíku skrytím pole množství a množství v mobilu.
- Zobrazit pole množství: VYPNUTO (tablet)
- Zobrazit skladovou zásobu: VYPNUTO
- Zarovnání textu: vpravo
- Pro tlačítko: ANO použijte vlastní styly
- Velikost textu tlačítka: 18px (tablet), 14px (telefon)
- Barva textu tlačítka: #ffffff
- Barva pozadí tlačítka: #0c71c3
- Šířka okraje tlačítka: 0px
- Šířka: 40%
- Čalounění: 2vw vlevo, 2vw vpravo
Výsledek
Uvidíme, jak to vypadá na živé stránce.
Část 2: Vytvořte lištu pro oznámení košíku
Vytvoření oznamovací lišty lepicího vozíku ve skutečnosti zahrnuje několik jednoduchých kroků, ale výsledek může být velmi efektivní. Jak již možná víte, upozornění na košík se zobrazí, pouze když uživatel klikne na tlačítko „Přidat do košíku“. Je to však další zásadní krok v nákupním procesu, který uživatele zavede na stránku pokladny. Když se tedy upozornění na košík zobrazí jako lepicí lišta v dolní části okna, je pro uživatele viditelnější.
Chcete-li vytvořit lepicí lištu s upozorněním na košík, nejprve vytvořte nový řádek s jedním sloupcem ve spodní části stránky produktu. Poté aktualizujte nastavení řádku následovně:
- Šířka: 100%
- Čalounění: 0px nahoře, 0px na dně
Vytvořte řádek lepkavým přidáním následujícího vlastního CSS do hlavního prvku:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Poznámka: Stejně jako dříve jsme můžete ignorovat chyby, které se objeví při přidávání vlastnosti position: sticky.
Řádek se při rolování nahoru přilepí na spodní část okna.
Poté aktualizujte index z, abyste jej udrželi v popředí, například:
- Z index: 10
Přidejte modul oznámení koše
Po vytvoření řádku přidejte do řádku modul upozornění vozu Woo a aktualizujte nastavení následujícím způsobem:
- Velikost textu (telefon): 15px
- Margin: 0em dole
A je to ! Zda chcete odstranit výchozí položku upozornění na košík v horní části stránky, je jen na vás, ale pro lepší konverze může být dobrý nápad ji nechat.
Konečný výsledek
Zde by mohl vypadat konečný výsledek.
Závěrečné myšlenky
Doufejme, že nám tento článek pomůže pochopit, jak vytvořit lepicí pruhy pro naše produktové stránky v Divi. Vysvětlili jsme, jak vytvořit lepicí lištu, která obsahuje název produktu, cenu a tlačítko Přidat do košíku. A také jsme si ukázali, jak vytvořit lepicí lištu. Oba by měly usnadnit proces nákupu a podpořit konverze. A nepotřebujeme ani plugin!
