Přejít k hlavnímu obsahu

Transformujte modul Divi Shop do dynamických produktových map na mobilu

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 701.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Když vytvoříte vstupní stránku pro konkrétní produkty, ať už jde o nové spuštění nebo prodej, na který se připravujete, je velká šance, že v určitém okamžiku budete modul Shop používat. Modul Divi's Shop umožňuje dynamicky extrahovat produkty z pluginu WooCommerce a upravovat je pomocí vestavěných možností Divi. 

Nyní je modul obchodu ve výchozím nastavení dodáván s několika strukturami sloupců, které se všechny překládají do dvou sloupců na menších velikostech obrazovky. To znamená, že čím více produktů se rozhodnete zobrazit, tím více vertikálního posouvání se vyžaduje, abyste se dostali na další část vaší vstupní stránky.

V moderním webovém designu se často používá technika omezující vertikální posouvání a zobrazování prvků podle preferencí vašich návštěvníků pomocí magnetických karet. V tomto tutoriálu vám ukážeme, jak převést modul obchodu Divi na dynamické mapy produktů na menších velikostech obrazovky bez použití pluginu. 

Začneme přípravou různých prvků naší produktové sekce a k aktivaci efektu zametání použijeme malé množství kódu CSS. Je to skvělý způsob, jak na vstupní stránce předvést širokou škálu produktů, aniž byste ohromili své návštěvníky. 

Možný výsledek

Než se ponoříme do tutoriálu, podívejme se na výsledek. Aktivujeme pouze magnetické karty produktu na tabletech a mobilních telefonech. Na ploše ponecháme strukturu sloupců, kterou určíme v modulu Obchod.

Animace obchodu s produktovým modulem Divi

1. Nakonfigurujte WooCommerce a stránky produktů

Před vstupem do části Divi tohoto tutoriálu je důležité, aby byl na vašem webu nainstalován a aktivován plugin WooCommerce. Pokud jste to ještě neudělali, přidejte více produktů v závislosti na počtu produktů, které chcete zobrazit v modulu Shop.

Vytvářejte woocommerce produkty

2. Vytvořte novou stránku a stáhněte si rozvržení stránky šablony

Vytvořte novou stránku

Jakmile jsou produkty na místě, přidejte novou stránku do backendu WordPress. Pojmenujte svou stránku, publikujte ji a aktivujte Divi Visual Builder.

Vytvořte divi stránku
Vytvořte novou stránku divi

Stáhněte si rozvržení vstupní stránky

Jakmile se dostanete na novou stránku, přejděte k přednastaveným rozložením a stáhněte si rozložení vstupní stránky šablony. I když používáme toto konkrétní rozložení, můžete použít libovolné další rozložení, které chcete, pokud do tohoto rozložení přidáte nebo vyhledáte modul úložiště.

Vyberte rozložení divi

3. Upravte sekci obchodu

Vyhledejte sekci s modulem Shop

Pokud přejdeme dolů na naši novou stránku, kterou jsme vytvořili pomocí rozložení domovské stránky šablony, narazíme na sekci s modulem obchodu. Tuto část použijeme v dalších krocích tohoto tutoriálu.

Vyhledejte modul obchodu

Nastavení linky

Citlivé dimenzování

Začněte otevřením nastavení řádku řádku obsahujícího modul Shop. Jak již bylo zmíněno dříve, na ploše ponecháme stejný design, karty s aktivací produktu aktivujeme pouze na menších velikostech obrazovky. 

Chcete-li vytvořit zážitek bez námahy, umožníme řadě dotknout se levé a pravé strany obrazovky změnou šířky v nastavení velikosti.

  • Použijte vlastní šířku okapu: 1
  • Šířka: 80% (stolní), 100% (tablet a telefon)
Citlivá úprava designu

viditelnost

Zajistíme také, aby nic nepřekračovalo řádkový kontejner nastavením nastavení viditelnosti na skryté.

  • Horizontální přetečení: skryté
  • Vertikální přetečení: skryté
Konfigurace viditelnosti Divi

Nastavení modulu obchodu

Vyberte si počet produktů a strukturu sloupců podle vaší volby

Dále otevřeme nastavení modulu Obchod. Změny, které provedeme v našem kódu CSS (které přidáme později), závisí na počtu produktů, které zobrazujeme. 

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Začneme tím, že vám ukážeme, jak proměnit modul obchodu s 8 produkty na produktové karty. Můžete si vybrat libovolné rozložení sloupců, které chcete pro plochu.

  • Počet produktů: 8
  • Rozložení sloupců: 4 sloupce
Upravit design sloupce divi

Citlivé dimenzování

Abychom zvětšili velikost našeho obchodního modulu, změníme parametry dimenzování na kartě design. Upozorňujeme, že to děláme pouze pro tablet a telefon.

  • Šířka: 100% (stolní), 250% (tablet a telefon)
  • Maximální šířka: 100% (stůl), 250% (tablet a telefon)
Konfigurace citlivého designu

CSS třídy

Do našeho modulu obchodu také přidáme třídu CSS. Později, když přidáme kód CSS, můžeme transformovat modul Shop, který nese pouze tuto třídu CSS. Jinými slovy, pokud chcete, aby se jiný modul Shop zobrazoval v normálním stavu, vynechání této třídy CSS vám to umožní.

  • Třída CSS: swipe karty
Změnit atribut css module store divi

Reaktivní přetečení

Doplníme nastavení linky změnou nastavení viditelnosti na různých velikostech obrazovky. Jak vidíte v nastavení, chceme, aby se efekt posouvání vyskytoval pouze na menších velikostech obrazovky.

  • Horizontální přetečení: skryté (stůl), rolování (tablet a telefon)
  • Vertikální přetečení: skryté
Konfigurace přetečení

Přidejte modul kódu pod modul Shop

Jakmile upravíte modul Shop, můžete přidat modul kódu těsně pod.

Přidejte modul kódu pod modul divi shop

Přidejte do modulu kód CSS

Následující kód CSS automaticky transformuje náš prodejní modul 8 produktů na reaktivní magnetické karty:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Přidat kód css divi

Porovnejte různé účty produktů

Nyní, pokud hledáte přidat do svého modulu obchodu méně (nebo více) produktů, se kód mírně změní na dvou místech. Obě tato místa je nutné změnit ručně, aby odpovídala požadovanému výsledku. Změňme například počet produktů v našem obchodním modulu na „4“.

  • Počet produktů: 4
Přiřaďte jiný produktový účet

Když se vrátíme k našemu kódu, musíme provést dvě změny. Nejprve budeme muset upravit sloupce šablony mřížky. Namísto 8 používáme 4 (stejný počet jako náš počet produktů). Zvyšujeme také procentuální velikost, kterou tyto produkty zabírají v našich produktových listech (čím více produktů, tím méně místa).

sloupce mřížky-šablony: opakujte (4, 14%)! důležité;

Pak také změníme šířku kontejneru, do kterého jsou produkty umístěny. U 4 produktů se to rovná 150%. Tyto hodnoty nejsou pevné, jsou získány hraním a nalezením harmonie mezi sloupci modelu mřížky a šířkou kontejneru. 

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

Chcete-li najít správné vyvážení, přepněte do mobilního zobrazení uvnitř nástroje Visual Builder a pečlivě upravte hodnoty při prohlížení výsledku těchto změn.

width: 150%!important;

Přidejte další kód divi css

Přidání snímku do posouvání

Pokud chcete posunout uživatelský zážitek o krok dále v designu vaší karty přejetí prstem, můžete také přidat rolovací snímek. Zachycení posouvání umožňuje vašim návštěvníkům posouvat se pohledem na začátek nového produktu.

 To znamená, že jejich skenování nemusí být přesné, v určitém okamžiku převezme posuvný slam a upraví jeho polohu uvnitř postranního rolovacího mechanismu. 

Chcete-li povolit posouvající se zachycení na kartách tažení vašeho produktu, přidejte do každého kódu CSS každý kód CSS samostatně (viz tisková obrazovka níže).

scroll-snap-zarovnání: start

Aktivujeme také snímání svitků v našem obchodním modulu přidáním následujícího řádku kódu CSS:

scroll-snap-type: x povinné

Přizpůsobte kód CSS

Opětovné použití modulu dílny k zobrazení dalších kategorií

Klonovat celou řadu jednou

Jakmile dokončíte první sadu švihacích karet, můžete celou řadu naklonovat jednou.

Opětovně použijte dílní modul divi

Odebrat modul kódu ve dvojím řádku

Dokud váš modul úložiště obsahuje stejnou třídu CSS jako předchozí, bude to fungovat modul kódu. Pokračujte a odeberte modul kódu z duplikátu řádku.

Duplikujte modul kódu divi

Klonujte duplikovanou řádku tolik, kolik chcete

A duplikujte řádek nyní tolikrát, kolikrát to bude nutné, v závislosti na počtu sad karet, které chcete zobrazit na vstupní stránce!

Klonujte modul podle potřeby
Duplikovaný divi modul

4. Uložte změny stránky a zobrazte výsledky na mobilním zařízení

Ujistěte se, že jakmile přidáte karty pro přejetí produktu, uložíte stránku před ukončením Visual Builderu a máte hotovo!

Ukázkový náhled na mobilním zařízení

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

Animace obchodu s produktovým modulem Divi

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak proměnit integrovaný modul Divi Shop na magnetické karty produktu na menších velikostech obrazovky. Na ploše jsme ponechali původní strukturu sloupců přiřazenou modulu Shop. 

Používání map pro přejíždění produktů vám umožňuje přidávat nekonečné produkty do mechanismu vodorovného přejetí prstem, aniž byste ohromili návštěvníky se svislým posouváním.

Jedná se o trend často používaný v moderním designu webových stránek, protože se zaměřuje na chování uživatelů a usnadňuje přístup k široké škále prvků na menších obrazovkách.

 Tyto produktové listy můžete použít na jakékoli stránce, ale obzvláště se hodí pro všechny vstupní stránky produktů, které vytvoříte. Také jste si mohli stáhnout soubor JSON s rozložením zdarma! 

Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat