Jak stylovat popisky s Live Designerem?

Jak stylovat popisky s Live Designerem?

Vzhled popisků je možné zcela individuálně přizpůsobit vzhledu e-shopu. Ukážeme si krok po kroku, jak vzhled vytvořit v nástroji Live Designer.

Jak funguje Live Designer

Do Pobo Page Builder jsme přidali nástroj nazvaný Live Designer. jehož cílem je umožnit individuální vzhled popisků zcela bez znalosti stylů (CSS) a HTML. V designeru si můžete upravit: 

1. Velikost, odsazení, barvu a řádkování nadpisů druhé i třetí úrovně, odstavců a seznamů. 
2. Rozestupy mezi widgety
3.  Detailní ostylování widgetů

Upravme si první produkt...

Vyberte si produkt který chcete upravit, následně v horní liště zvolte sekci úprava vzhledu. 

Kliknutím na jakýkoliv widget se Vám v pravém pruhu otevře editor.

V rámci widgetu můžete upravit fotografii, nadpis a text. To můžete provést zvolením elementu v pravém pruhu editoru, nebo kliknutím na zelenou ikonku tužky u elementu. 

Po zvolení elementu se Vám v pravém pruhu zobrazí možnosti úpravy:

• velikost písma
• řádkování
• barva textu
• vnější odstavení
• font písma
• zvýraznění textu

V defaultním nastavení se úpravy aplikují podle zvoleného rozsahu stylování, který můžete nastavit v horní části editoru.

Pomocí přepínače Tato stránka a Celý e-shop můžete určit, zda se změny použijí pouze pro aktuální stránku, nebo globálně pro celý e-shop.

V rámci úpravy individuálního widgetu je také možné nastavit barevné pozadí, gradient (včetně jeho barev a úhlu) nebo obrázek na pozadí widgetu.

V rámci Live Designeru máte také možnost se podívat na živý náhled stránky na tabletu a telefonu. V horní liště stačí zvolit tlačítko počítač, následně se otevře selekce (počítač, tablet a mobil). Po kliknutí na příslušnou variantu se vám otevře daný náhled. 

Nastylujte si vzhled popisků pomocí AI designeru

Live Designer nově obsahuje také funkci AI Designer, která umožňuje upravit vzhled popisků pomocí umělé inteligence. Pomocí jednoduchých textových pokynů můžete rychle změnit velikost nadpisů, barvy, odsazení nebo celkový styl obsahu bez nutnosti ručního nastavování.

Jak otevřít AI Designer

AI Designer otevřete kliknutím na tlačítko AI v pravém panelu Live Designeru. Následně se zobrazí pole, do kterého můžete zadat požadovanou úpravu vzhledu.

Jak používat AI Designer

Do pole zadejte popis požadované změny, například:

• změň barvu nadpisů
• zvětši velikost textu
• přidej větší odsazení mezi widgety
• použij moderní design se zaoblenými rohy

AI Designer automaticky vytvoří odpovídající styla aplikuje jej na obsah. Není nutné upravovat jednotlivé parametry ručně, protože AI provede změny na základě vašeho zadání. 

AI Live Designer zachovává všechny možnosti klasického Live Designeru. Můžete tak i nadále ručně upravovat vzhled jednotlivých widgetů, konkrétní stránky nebo celého e-shopu, využívat náhled pro různá zařízení a kombinovat AI úpravy s ručním nastavením v pravém panelu.

Po dokončení úprav klikněte v pravém horním rohu na tlačítko Uložit změny. Změny se následně aplikují podle zvoleného rozsahu stylování (například na aktuální stránku nebo celý e-shop).

Pokud chcete provedené úpravy zrušit, můžete použít tlačítko Zahodit změny, které umožňuje vrátit poslední verzi nebo odstranit provedené úpravy.