Sladké téma
Flatsome je výkonné téma WordPress určené pro webové stránky elektronického obchodování a přichází s integrací WooCommerce.
Je to jedno z nejpopulárnějších témat WooCommerce na ThemeForest. V době psaní tohoto tutoriálu to bylo více než 174 500 prodejů a úžasné 4,8 hvězdičkové hodnocení pocházející z více než 6 600+ recenzí.
Flatsome je primárně navržen s ohledem na začátečníky a technicky zdatné uživatele.
To je skvělé pro lidi, kteří chtějí začít s online obchodem, ale nevědí, jak kódovat nebo mají rozpočet, aby si najali profesionálního kodéra. S Flatsome budete moci vytvořit profesionálně vypadající web pomocí jednoduchých a intuitivních nástrojů.
Flatsome je nyní vybaven spoustou úžasných funkcí a funkcí. Abychom předvedli, co je k dispozici a jak to funguje, máme rychlý návod, který vám ukáže, jak vytvořit produktovou stránku WooCommerce pomocí Flatsome.
Takže bez dalších okolků začneme:
Obsah:
- Sladké téma
- Rozdíl mezi Flatsome, WooCommerce a WordPress
- Vytvořte produktovou stránku WooCommerce pomocí motivu Flatsome
- Krok 1: Vyberte rozložení stránky produktu
- (Volitelné) Krok 2: Vytvořte stránku produktu ručně
- Krok 3: Přizpůsobte stránku produktu
- Zabalení
Rozdíl mezi Flatsome, WooCommerce a WordPress
Protože vítáme naše nové čtenáře, musíme uvést některé nezbytné informace, abychom zajistili, že všichni naši čtenáři budou na stejné stránce. Zde probereme rozdíl ve všech třech terminologiích, které budeme v tomto článku používat.
Začněme s WordPress. Je to platforma, kde si nainstalovat různá témata a plugin s k vytvoření své webové stránky. K dispozici jsou tisíce plugin a motivů, které splňují další úkoly podle vašeho požadavku.
WooCommerce je plugin , který instalujeme na WordPress a který vám umožňuje přidávat na náš web různé funkce. Díky instalaci tohoto plugin můžeme vytvořit náš web a online obchod s dalšími funkcemi, jako je nákupní košík, zpracování plateb, správa produktů atd.
Konečně, ale jistě, jedním z nejdůležitějších prvků je výhled na naše webové stránky. Flatsome je téma, které nám umožňuje přizpůsobit perspektivu našeho webu podle našich přání. Pokud je například logo vaší společnosti oranžové, měli byste se zamyslet nad barvou vašeho webu. To je to, co vám Flatsome může poskytnout.
Vytvořte produktovou stránku WooCommerce pomocí motivu Flatsome
Protože všichni naši čtenáři mají znalosti o WordPressu, WoCommerce a Flatsome, je čas, abychom se posunuli vpřed k přizpůsobení naší produktové stránky pomocí fantastického UX builderu, který je dodáván s tématem Flatsome. Jedná se o funkci drag and drop, která extrémně usnadňuje život návrháře.
Téměř každý nakupoval online, pravděpodobně kvůli obtížným dobám, kterým jsme čelili v posledních několika měsících. Zůstat doma byl pro nás všechny nejbezpečnějším řešením. To je důvod, proč se všichni naši čtenáři shodnou na skutečnosti, že online obchod je ve srovnání se standardním webem mnohem komplikovanější.
S pomocí WooCommerce a Flatsome se však tento úkol stal velmi snadným. Musíte si sednout a naplánovat, jak bude vypadat váš web, a to je vše. WooCommerce vám bude pomáhat s možnostmi stavitele. Plný fungující online obchod můžete vytvořit pomocí drag and drop během několika minut.
S WooCommerce a Flatsome budete moci dát svým nápadům mít internetový obchod zcela nový život. Váš web musí mít moderní a krásný vzhled, aby dokázal zaujmout zákazníky. Flatsome je proto nejlepším řešením pro všechny vaše problémy, takže si jej stáhněte odtud můžeme začít.
Flatsome má několik fantastických funkcí, ale jednou z částí je, že se stala nejlepší volbou pro více než 300 000 uživatelů. Dokonalý nástroj pomáhá při vytváření úžasných responzivních webových stránek, aniž byste museli kódovat jediný řádek. Navíc díky své schopnosti vytvářet vysoce kreativní a jedinečné online obchody je to ještě hodnotnější.
Aniž bychom zbytečně ztráceli čas, pojďme na výukový program. Tento kurz vás provede celým procesem navrhování stránky produktů. Obrázky vám pomohou získat lepší představu o tom, jak úkol projde procesem.
Krok 1: Vyberte rozložení stránky produktu
Nejprve začneme výběrem rozložení stránky s produkty. Tento výběr vytvoří základní stránku pro náš internetový obchod, kterou později přizpůsobíme podle našich přání. Tento podrobný průvodce vás provede procesem přizpůsobení stránky.
U tohoto amp budeme pokračovat v možnosti Classic Shop. Neexistuje však pro vás žádné omezení. Proces přizpůsobení bude podobný u každého rozložení, které vyberete. Jediným rozdílem by bylo, že základní struktura stránky se bude lišit od ostatních.
Pohybem vpřed k nástroji na přizpůsobení produktu jsme mu dali název levý postranní panel Plná výška.
K dispozici jsou dvě možnosti přizpůsobení stránky produktů. První je třeba provést pomocí UX builderu, zatímco druhou je vytvořit stránku ručně. Pokud vyberete druhou možnost, budete se muset vydat k oficiální dokumentaci a najít krátké kódy. Pokud jste začátečník a toto je vaše první zkušenost s vytvářením online obchodu, doporučuji použít tuto první možnost.
(Volitelné) Krok 2: Vytvořte stránku produktu ručně
Zde je snímek obrazovky s oficiální dokumentací Flatsome. Můžete zadat zkratky slova a vyhledat je.
Jakmile stisknete tlačítko Hledat, na obrazovce se zobrazí seznam zkrácených kódů. Můžete si vybrat zkrácené kódy, které jsou důležité pro stránku produktu. Používání krátkých kódů vyžaduje méně úsilí, ale je nezbytné, abyste měli malé praktické zkušenosti s WordPress a používání krátkých kódů.
Zde je seznam zkrácených kódů, které můžete na webu použít k vytváření stránek.
V tomto amp upravíme rozložení levého postranního panelu v plné výšce; tedy budeme kopírovat kód pro design. Následuje obrázek aplikovaného, ale můžete jej snadno zkopírovat ze struktury.
Začněte vytvářením bloku s názvem. Pokud chcete vyvinout head, musíte kliknout na „Přidat nové“ dostupné v blocích UX umístěných na vašem hlavním panelu.
Blok můžete pojmenovat podle svých představ. Zde v této ex amp le jsme svaz pojmenovali jako 'Rozložení levého bočního panelu v plné výšce'. Dále můžete vidět krátké kódy uvnitř editoru bloků. Jakmile zkopírujete požadované krátké kódy, můžete kliknout na Publikovat.
Po tomto malém kroku budeme na stejné úrovni, kde si můžeme přizpůsobit naši stránku podle našich přání. Nyní přejděte na možnost motivu stránky produktu a stiskněte ikonu vlastního rozložení.
Po dokončení budete nyní moci vytvářet bloky z rozbalovací nabídky Vlastní rozložení produktu.
Vyberte blok, který jsme právě vytvořili. Naším hlavním cílem pro vytvoření tohoto bloku bylo vytvořit z něj stránku produktu. Podle tohoto ex amp le, na celé výšce opustil rozložení sidebar je blok, zatímco u svého konce, bude to, jak jste jmenoval.
Po dokončení stačí stisknout tlačítko Publikovat; uloží nastavení.
Krok 3: Přizpůsobte stránku produktu
Je čas, abychom zahájili úpravy. Nejprve projdeme stránku existujících produktů z rozhraní frontend, které jsme nastavili dříve v krocích.
Je důležité vybrat konkrétní produkt, který potřebujeme nastavit. Měli byste mít úplné podrobnosti, obrázky práce, kterou potřebujeme přizpůsobit. Tímto způsobem se proces stává pohodlnějším pro vizualizaci části stránky, kterou vytvoříte.
Možnost UX builder je viditelná. Stisknutím tlačítka spustíte přizpůsobení.
Po otevření Tvůrce UX můžete z obrázku vidět, že prvky stránky produktu jsou k dispozici v levém bočním panelu stránky produktů.
Levý boční panel je blok, který jsme původně vytvořili. Vytvořili jsme jej pomocí zkrácených kódů převzatých z dokumentace.
Máte možnosti změnit pořadí prvků z levého bočního panelu a změnit nastavení z možnosti prvku. V tomto amp změníme pořadí ceny dostupné v levé nabídce.
Kromě toho vám také umožňuje přeskupit prvky z náhledu tvůrce a nasadit další komponenty na stránku produktu stavitele. V této ukázce byla sekce Záložky produktů a související produkt přeuspořádána jednoduchým přetažením.
S významnou funkcí drag and drop je Flatsome připraven poskytnout vám na vašem webu to, co hledáte. Díky vysoce přizpůsobitelným modulům můžete snadno vytvářet fantastické stránky. Díky funkci drag and drop je život ještě pohodlnější.
Zabalení
V této moderní době je bezpodmínečně nutné mít online podnikání, protože lidé raději zůstávají doma, aby zůstali v bezpečí. Takže začněte budovat svůj první obchod online s Flatsome a okouzlete své zákazníky svou jedinečností a kreativitou. Kromě toho v editoru obsahu není žádný nepořádek kódu, jen několik řádků krátkého kódu. Flatsome je bezpochyby nejlepší téma, na které jsem narazil. Není tedy třeba hledat žádné jiné téma, stačí stisknout tlačítko pro stažení a hned začít budovat svůj vlastní online obchod.
