Přejít k hlavnímu obsahu

Vytvoření dynamické tabulky výhod pro produkty WooCommerce

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]

Způsob, jakým navrhujete svou produktovou stránku, má okamžitý dopad na chování vašich návštěvníků. Dobře zpracovaný a přizpůsobený design stránky produktu může návštěvníkům usnadnit rozhodování, zda si chtějí produkt koupit. Pokud hledáte způsob, jak zvýšit produktivitu vaší produktové stránky, pravděpodobně se vám bude líbit tento návod. 

Ukážeme vám, jak do svého designu zahrnout dynamickou mřížku výhod produktu pomocí Divi a pluginu Advanced Custom Fields. Začneme vytvořením skupiny polí pro výhody. Poté vyplníme vlastní pole na naší stránce produktu a zahrneme dynamický obsah do naší šablony stránky produktu. 

Možný výsledek

Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.

Možný výsledek divi

1. Nainstalujte zásuvný modul ACF Plugin A Product Benefit Field Group

Nainstalujte si plugin Advanced Custom Fields

Abychom zobrazili různé výhody produktů v backendu našich produktů, použijeme bezplatný plugin Advanced Custom Fields. Přístup k vašemu Backend WordPressu> Pluginy> Přidat nové> Najít plugin ACF> Instalovat> Aktivovat .

Nainstalujte si rozšířený modul pro vlastní pole

Přejděte na vlastní pole a přidejte novou skupinu polí

Po instalaci a aktivaci pluginu ACF budete mít přístup ke svým vlastním polím a přidáte novou skupinu polí.

Vytvořte pole ACF

Nastavení skupiny polí

Přiřaďte své nové skupině polí název a povolte, aby se zobrazovala pouze na stránkách produktů.

  • „Typ zprávy“ se rovná „Produkt“
Přidat pravidla

Přidejte první pole

Pokračujte přidáním nového pole pro název první výhody produktu.

  • Štítek pole: Název výhody 1
  • Typ pole: text
Přidejte AC pole
Přizpůsobení pole Divi

Opakujte krok pro zbývající pole

Totéž proveďte pro další výhody produktu a jejich popisy. Všechna tato pole vyžadují přiřazený typ pole „Text“.

  • Název služby 1
  • Popis výhod 1
  • Název služby 2
  • Popis výhod 2
  • Název služby 3
  • Popis výhod 3
  • Název služby 4
  • Popis výhod 4
Nakonfigurujte pole ACF

2. Přidejte výhody do produktů

Otevřete nebo přidejte nový produkt

Jakmile vytvoříte skupinu polí a pole, můžete přidat výhody svých produktů na jednotlivé úrovni. Otevřete produkt podle svého výběru nebo vytvořte nový.

Vytváření produktů Divi

Vyplňte pole Výhody produktu

A plní výhody produktu.

Vyplňte pole výhod divi

3. Vytvořte šablonu stránky produktu v Divi Theme Builder

Přejděte do Divi Theme Builder a přidejte novou šablonu

Je čas začít s Divi! Chcete-li vytvořit novou šablonu, přejděte do Tvůrce motivů Divi a klikněte na „Přidat novou šablonu“.

Tvůrce motivů Divi

Použijte šablonu na všechny produkty

Tuto šablonu používáme u všech produktů, ale můžete místo toho vybrat produkty s konkrétní kategorií nebo štítkem.

Přidejte všechny produkty woocommerce

Vstupte do editoru šablon těla modelu

Poté zadejte tělo modelu kliknutím na „Přidat vlastní tělo“ a výběrem „Vytvořit vlastní tělo“.

Budování divi těla

Upravit sekci # 1

Barva pozadí

Jakmile se dostanete do editoru šablon, všimnete si sekci. Otevřete tuto sekci a změňte barvu pozadí na černou.

  • Barva pozadí: # 000000
Konfigurace pozadí sekce Divi

vzdálenost

Přejděte na záložku návrhu sekce a přidejte vlastní polstrování nahoře a dole.

  • Horní výplň: 10px
  • Spodní výplň: 10px
Konfigurace rozestupu oddílů Divi

Přidejte nový řádek

Struktura sloupce

Pokračujme přidáním nového řádku do sekce, která má následující strukturu:

Konfigurace rozvržení modulu linky

vzdálenost

Bez přidání jakýchkoli modů otevřete nastavení řádků a proveďte několik úprav mezer.

  • Použít přizpůsobený žlab: Ano
  • Šířka okapu: 1
  • Šířka: 90%
  • Maximální šířka: 100%
Nastavení řádkových modulů

vzdálenost

Odstraňte všechny horní a spodní vnitřní mezery.

  • Vysoká vnitřní marže: 0px
  • Nízká vnitřní marže: 0px
Nastavení rozteče modulu Divi line

Do sloupce přidejte modul oznámení vozíku Woo

Dynamický obsah

Jediným modulem, který na tomto řádku a v této sekci potřebujeme, je modul Woo Cart Notice. Ujistěte se, že je v dynamické sekci vybrán „Tento produkt“.

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]

  • Produkt: Tento produkt
Nastavení modulu upozornění woo košíku divi

Barva pozadí

Poté otevřete nastavení modulu a použijte průhledné pozadí.

  • Barva pozadí: rgba (0,0,0,0)
Nastavení divi modulu Woo cart

Nastavení textu

Přepněte na kartu „Návrh“ a změňte písmo textu.

  • Textové písmo: Karla
Nastavení písma modulu Divi

Nastavení tlačítka

Dokončete nastavení pluginu definováním nastavení stylu:

  • Použít vlastní styly pro tlačítko: Ano
  • Velikost textu tlačítka: 20 px
  • Barva textu tlačítka: # 000000
  • Pozadí tlačítka: # ffd623
  • Šířka ohraničení tlačítka: 0px
  • Tlačítko zaoblené ohraničení: 0px
Nastavení barev modulu upozornění Woo cart
  • Tlačítko písmo: Oswald
  • Styl písma tlačítka: Shift
Úprava barevného designu modulu Woo cart module
  • Vysoká vnitřní marže: 20px
  • Nízká vnitřní marže: 20px
  • Levá vnitřní marže: 50px
  • Vnitřní pravá marže: 50px
Konfigurační návrhový modul woo cart upozornění

Přidat oddíl # 2

Přechodové pozadí

Přidejte další pravidelnou sekci pod předchozí. Poté otevřete nastavení a použijte gradient pozadí takto:

  • Barva 1: # 000000
  • Barva 2: #ffffff
  • Počáteční pozice:
    • Desktop: 30%
    • Tablet: 57%
    • Telefon: 54%
  • Koncová pozice:
    • Desktop: 30%
    • Tablet: 57%
    • Telefon: 54%
Zadní nastavení modulu Divi line

vzdálenost

Pojďme na kartu Návrh a přidejme vysokou vnitřní marži.

  • Horní výplň: 150px
Konfigurace mezer mezi moduly Divi line

Přidat nový řádek

Struktura sloupce

Pokračujte přidáním nového řádku se stejnou strukturou, jak je znázorněno níže:

Konfigurace stylu čáry Divi

dimenzování

Aniž bychom přidali nějaké mody, otevřeme nastavení a změníme mezery následujícím způsobem:

  • Použít vlastní žlaby: Ano
  • Okapový prostor: 1
  • Šířka: 95%
  • Maximální šířka: 2560 px
  • Zarovnání čáry: Střed
Divi modul konfigurace okapu

Vzdálenost

Také odstraníme horní vnitřní okraj.

  • Horní výplň: 0px
Konfigurace rozteče modulů Divi

Hlavní prvek

A k vycentrování obsahu sloupce na ploše použijeme dva řádky kódu CSS v hlavním prvku modulu řádků.

Desktop:

displej: flex; zarovnání-položky: střed;

Tablet a telefon:

zobrazení: blok;
Nastavení stylu modulu Divi line

Přidejte modul Woo Image do sloupce 1

Dynamický obsah

Je čas přidat moduly, začneme s modulem Woo Images ve sloupci 1. Zkontrolujte, zda je vybrán „Tento produkt“.

  • Produkt: Tento produkt
Nastavení modulu obrazu produktu Woocommerce

Efekt vertikální rolování animace

Přidáme jemný pohyb do obrazu pomocí efektu posouvání vodorovného pohybu na kartě Upřesnit.

  • Aktivujte svislý pohyb: Ano
  • Počáteční posun:
    • Kancelář: -4
    • Tablet a telefon: 0
  • Průměrný offset: 0
  • Koncový offset: 0
  • Efekt spouštěcího pohybu: střed prvku
Nastavení obrazového modulu Divi

Do sloupce 2 přidejte titulní modul Woo

Dynamický obsah

Ve sloupci 2 je prvním modem, který potřebujeme, modifikace názvu Woo. Zkontrolujte, zda je v oblasti dynamického obsahu vybrán „Tento produkt“.

  • Produkt: Tento produkt
mřížka výhod produktu

Nastavení textu nadpisu

Poté přejděte na kartu Návrh a stylujte název textu takto:

  • Písmo názvu: Oswald
  • Styl písma nadpisu: velká písmena
  • Barva textu nadpisu: # ffd623
  • Velikost textu nadpisu: 80 pixelů
Úprava designu titulního modulu Divi

vzdálenost

Dokončete titulní modul Woo přidáním levého a pravého okraje.

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]

  • Levý okraj: 5%
  • Pravý okraj: 5%
Nastavení modulu názvu Divi

Do sloupce 2 přidejte modul popisu Woo

Dynamický obsah

Pojďme k dalšímu modulu, kterým je modul popisu Woo. K tomu používáme následující dynamický obsah:

  • Produkt: Tento produkt
  • Typ popisu: Krátký popis
Nastavení modulu popisu produktu

Nastavení textu

Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:

  • Textové písmo: Karla
  • Barva textu: #dbdbdb
  • Velikost textu: 17 px (stolní počítač a tablet), 15 px (telefon)
  • Výška textového řádku: 1,9 em
Popis modulu úpravy barev divi

dimenzování

Poté změňte šířku na různých velikostech obrazovky.

  • Šířka: 59% (stolní), 82% (tablet a telefon)
Nastavení šířky modulu Divi Summary

vzdálenost

Vyplňte modul popisu Woo přidáním vlastních hodnot okrajů v nastavení mezer.

  • Horní okraj: 50px
  • Dolní okraj: 100px
  • Levý okraj: 5%
  • Pravý okraj: 5%
Modul popisu produktu Divi

Přidejte modul Blurb do sloupce 2

Dynamický obsah

Pro zobrazení výhod produktu, které jsme přidali v první části tohoto tutoriálu, použijeme moduly Blurb. Přidejte první modul Blurb a použijte dynamický obsah první výhody vytvořené pro titul a tělo.

  • Název: Benefit Název 1
  • Tělo: Benefit Popis 1
Nastavení textu modulu Divi Summary

Nahrát obrázek

Nahrajte obrázek nebo použijte další ikonu. Ty, které jsme použili v tomto tutoriálu, najdete ve složce ke stažení, kterou jste si mohli stáhnout na začátku tohoto tutoriálu.

Souhrnný obrazový modul konfigurace divi

Nastavení obrázku / ikony

Přejděte na kartu návrhu modulu a změňte nastavení obrázku / ikony následujícím způsobem:

  • Umístění obrázku / ikony: nahoru
  • Zarovnání obrázku / ikony: Vlevo
Modul nastavení Divi

Nastavení textu nadpisu

Dále upravujeme nastavení textu nadpisu.

  • Písmo názvu: Oswald
  • Styl písma nadpisu: Velká písmena
  • Velikost textu nadpisu: 25 pixelů
Konfigurace písma modulu souhrnu divi

Nastavení textu těla

Spolu s nastavením základního textu.

  • Tělo Písmo: Karla
  • Velikost textu: 17 px (stolní počítač a tablet), 15 px (telefon)
  • Výška linie těla: 1,9 em
Nakonfigurujte souhrnný textový modul div

dimenzování

Poté přejděte na nastavení velikosti a změňte šířky. Je důležité použít hlavní šířku menší než 50%, což nám umožní v následujících krocích ukázat vedle sebe dva Blurb moduly.

  • Šířka obrázku: 25%
  • Šířka: 49%
Konfigurace dimenze modulu souhrnu divi

vzdálenost

Také přidáme mezery kolem modulu Blurb pomocí vlastních hodnot výplně na různých velikostech obrazovky.

  • Horní výplň: 8%
  • Dolní výplň: 8%
  • Výplň vlevo: 8% (stolní počítač a tablet), 2% (telefon)
  • Pravá výplň: 8% (stolní počítač a tablet) 2% (telefon)
Nakonfigurujte rozteč modulů souhrnu divi

Hlavní prvek

Nyní se ujistíme, že modul Souhrn zobrazuje text vedle sebe ve dvou krocích. Nejprve se ujistíme, že šířka modulu je menší než 50% (jako v předchozím kroku). Dále použijeme vlastnost na řádku. Tuto vlastnost CSS přidáme na hlavní prvek v pokročilé části.

zobrazení: inline-block;
Přidejte modul divi kódu CSS

Souhrnný modul klonujte třikrát

Jakmile dokončíte první Blurb mod, můžete jej klonovat třikrát. Automaticky si všimnete, že se moduly Blurb objevují v mřížce.

Sekce názvu produktu divi

Upravte obrázky modulu Blurb

Upravte obrázek v každém duplikátu Blurb pod. Najdete je ve složce pro stahování, kterou jste si možná stáhli na začátku tohoto článku.

Obrázek modulu shrnutí Divi

Upravte dynamický obsah modulu Blurb

Upravte také dynamický obsah každého duplikovaného modulu Blurb.

  • Název: Název služby (2,3 nebo 4)
  • Tělo: popis výhod (2,3 nebo 4)
Pravidla modulu Divi Summary

Přidejte hranice k Blurb modulům individuálně

Nastavení okrajů modulu 1

Nyní, abychom dokončili návrh naší mřížky, přidáme hranice modulům Blurb na individuální úrovni. Otevřete první Blurb mod a použijte přímý okraj.

  • Šířka pravého okraje: 1px
  • Barva pravého okraje: # ffd623
Zaokrouhlený ohraničovací modul divi souhrnný modul

Také přidejte spodní okraj k prvnímu modulu Blurb.

  • Šířka dolního okraje: 1px
  • Barva dolního okraje: # 000000
Nakonfigurujte dolní okraj divi
Nastavení okrajů modulu 2

Poté otevřete druhý modul Blurb a použijte spodní ohraničení.

  • Šířka dolního okraje: 1px
  • Barva dolního okraje: # 000000
Konfigurační hraniční modul shrnutí divi
Nastavení okrajů modulu 3

Dokončete návrh mřížky přidáním přímého okraje do třetího modulu Blurb.

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]

  • Šířka pravého okraje: 1px
  • Barva pravého okraje: # ffd623
mřížka výhod produktu

Přidat Woo Přidat do košíku Modul ve sloupci 2

Dynamický obsah

Posledním modulem, který v našem designu potřebujeme, je modul Woo Add to Cart. Zkontrolujte, zda je v oblasti dynamického obsahu vybrán „Tento produkt“.

  • Produkt: Tento produkt
Přidejte na kartu nastavení modulu divi

Nastavení pole

Přejděte na další kartu návrhu a změňte nastavení pole.

  • Barva pozadí polí: #ffffff
  • Barva textu pole: # 000000
Konfigurovat modul barevného stylu přidat do košíku divi
  • Zaoblená pole: 0px (všechny rohy)
  • Šířka dolního okraje polí: 1px
  • Barva dolního okraje polí: # 000000
Nakonfigurujte rozteč divi sekcí

Nastavení tlačítek

Poté tlačítko odpovídajícím způsobem upravte:

  • Pro tlačítko použijte vlastní styly: Ano
  • Velikost textu tlačítka: 20 pixelů
  • Barva textu tlačítka: # 000000
  • Barva pozadí tlačítka: # ffd623
  • Šířka ohraničení tlačítka: 0px
  • Poloměr ohraničení tlačítka: 0px
Nakonfigurujte design tlačítka divi
  • Tlačítko písmo: Oswald
  • Styl písma tlačítka: velká písmena
Nakonfigurujte tlačítko divi
  • Horní výplň: 20px
  • Spodní výplň: 20px
  • Levá výplň: 50px
  • Pravá výplň: 50px
Nakonfigurujte velikost modulu divi

vzdálenost

A dokončete parametry modulu přidáním vlastních hodnot okrajů.

  • Horní okraj: 100px
  • Levý okraj: 5%
Nakonfigurujte divi mezery

3. Uložte změny generátoru motivu a zobrazte náhled výsledku

Po dokončení navrhování šablony stránky produktu můžete uložit všechny své změny Tvůrce motivů a zobrazit výsledky svých produktů!

Uložit design divi
Uložit divi úpravy

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.

Výsledek ukázky

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak získat kreativitu s vaší další šablonou stránky produktu Divi. Konkrétně jsme vám ukázali, jak zahrnout dynamickou mřížku výhod produktu a přidat na stránku produktu další výhody. Tento tutoriál jsme vytvořili pomocí Divi v kombinaci s pluginem Advanced Custom Fields. Můžete si také stáhnout soubor JSON 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