Flatsome je výkonné téma WordPress navržené pro webové stránky elektronického obchodu a přichází s integrací WooCommerce.
Je to jedno z nejpopulárnějších témat WooCommerce na ThemeForest. V době psaní tohoto návodu to bylo přes 174 500 prodejů a úžasné 4,8hvě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 uživatele, kteří nejsou technicky zdatní.
To je skvělé pro lidi, kteří chtějí začít s online podnikáním, ale nevědí, jak kódovat, nebo mají rozpočet na najmutí profesionálního kodéra. S Flatsome budete moci vytvořit profesionálně vypadající web pomocí jednoduchých a intuitivních nástrojů.
Nyní je Flatsome nabitý 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 stránku produktu WooCommerce pomocí Flatsome.
Takže bez dalších okolků začneme:
Obsah:
Když vítáme naše nové čtenáře, musíme vložit 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 WordPressem. Je to platforma, na kterou instalujete různá témata a plugin pro vytvoření vašeho webu. K dispozici jsou tisíce plugin a témat pro splnění dalších úkolů podle vašich požadavků.
WooCommerce je plugin který instalujeme na WordPress a který vám umožňuje přidávat různé funkce na náš web. S instalací tohoto plugin můžeme naše webové stránky a internetový obchod vytvořit 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 vzhled našeho webu. 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é, budete chtít, aby se barva vašeho webu odrážela. To je to, co vám Flatsome může poskytnout.
Vzhledem k tomu, že všichni naši čtenáři mají znalosti o WordPress, WoCommerce a Flatsome, je čas, abychom postoupili k přizpůsobení naší produktové stránky pomocí fantastického UX builderu, který přichází s tématem Flatsome. Je to funkce drag and drop, která designérovi extrémně usnadňuje život.
Téměř každý nakupoval online, pravděpodobně kvůli náročným obdobím, kterým jsme v posledních několika měsících čelili. Zůstat doma bylo pro nás všechny nejbezpečnějším řešením. To je důvod, proč všichni naši čtenáři budou souhlasit s tím, že internetový obchod je mnohem složitější než standardní web.
S pomocí WooCommerce a Flatsome se však tento úkol stal extrémně snadným. Musíte si sednout a naplánovat, jak bude váš web vypadat, a to je vše. WooCommerce vám pomůže s možnostmi tvůrců. Můžete si vytvořit plnohodnotný fungující internetový obchod během několika minut pomocí drag and drop.
S WooCommerce a Flatsome budete moci dát svým nápadům na provozování internetového obchodu zcela nový život. Váš web musí mít moderní a krásný vzhled, aby dokázal zaujmout zákazníky. Flatsome proto nejlepším řešením pro všechny vaše problémy, takže si jej stáhněte odtud a můžeme začít.
Flatsome má některé fantastické funkce, ale jednou z částí je, že se stal nejlepší volbou více než 300 000 uživatelů. Špičkový 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 ještě hodnotnější.
Takže, aniž bychom ztráceli další čas, pojďme na tutoriál. Tento tutoriál vás provede celým procesem návrhu stránky produktů. Obrázky vám pomohou získat lepší představu o tom, jak bude úkol probíhat.
Nejprve začneme výběrem rozvržení stránky produktů. Tento výběr vytvoří základní stránku našeho internetového obchodu, kterou si později upravíme dle našich přání. Tento podrobný průvodce vás provede procesem přizpůsobení stránky.
Pro tento amp budeme pokračovat s možností klasického obchodu. Neplatí pro vás však žádné omezení. Proces přizpůsobení bude podobný pro každé rozvržení, které vyberete. Jediný rozdíl by byl, že základní struktura stránky se bude lišit od ostatních.
Přesuneme-li se k personalizátoru produktu, pojmenovali jsme jej Levý postranní panel s plnou výškou.
Pro přizpůsobení stránky produktů jsou k dispozici dvě možnosti. První je třeba provést pomocí UX builderu, zatímco druhý je vytvořit stránku ručně. Pokud zvolíte druhou možnost, budete muset zamířit do oficiální dokumentace a najít zkratky. Pokud jste začátečník a je to vaše první zkušenost s budováním internetového obchodu, doporučuji zvolit tuto první možnost.
Zde je snímek obrazovky oficiální dokumentační stránky Flatsome. Můžete zadat slovo shortcodes a vyhledat je.
Po stisknutí tlačítka Hledat se na obrazovce zobrazí seznam krátkých kódů. Můžete si vybrat krátké 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 trochu praktických zkušeností s WordPress a používáním krátkých kódů.
Zde je seznam krátkých kódů, které můžete na webu použít k vytvoření stránek.
V tomto amp přizpůsobíme rozvržení levého bočního panelu v plné výšce; proto zkopírujeme kód pro návrh. Následuje obrázek aplikovaného, ale můžete jej snadno zkopírovat ze struktury.
Začněte vytvářet blok s názvem. Pokud chcete vyvíjet hlavu, musíte kliknout na „Přidat nový“ dostupné pod UX bloky umístěnými na vašem dashboardu.
Blok si můžete pojmenovat podle svých představ. Zde v tomto amp jsme spojení pojmenovali jako „Rozvrž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 dokončíte kopírování požadovaných krátkých kódů, můžete stisknout 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 klepněte na ikonu vlastního rozvržení.
Po dokončení budete nyní moci vytvářet bloky z rozevíracího seznamu Custom Product Layout.
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 amp je rozložení levého postranního panelu Plná výška blokem, zatímco na vašem konci to bude tak, jak jste pojmenovali.
Po dokončení stačí stisknout tlačítko Publikovat; uloží se nastavení.
Je čas, abychom začali s přizpůsobením. Nejprve projdeme existující stránku produktů z frontendu, který jsme nastavili dříve v krocích.
Je důležité, abyste vybrali konkrétní produkt, který potřebujeme nastavit. Měli byste mít kompletní detaily, obrázky práce, kterou potřebujeme upravit. Tímto způsobem se proces stane pohodlnějším pro vizualizaci části stránky, kterou vytvoříte.
Možnost UX builder je viditelná. Stačí stisknout tlačítko pro zahájení přizpůsobení.
Po otevření UX builderu můžete z obrázku vidět, že prvky stránky produktu jsou dostupné na levém postranním panelu vaší stránky produktů.
Levý boční panel je blok, který jsme původně vytvořili. Vytvořili jsme jej pomocí krátký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 nabídce vlevo.
Navíc vám také umožňuje přeskupit prvky z náhledu stavitele a umístit další komponenty na stránku produktu stavitele. V této ukázce byly sekce záložky Produkty a související produkt přeuspořádány pouhým přetažením.
Díky významné funkci drag and drop je Flatsome připraven poskytnout vám to, co na svém webu hledáte. S vysoce přizpůsobitelnými moduly můžete snadno vytvořit fantastické stránky. Funkce drag and drop dělá život ještě pohodlnějším.
V této moderní době je nezbytné mít online obchod, protože lidé raději zůstávají doma, aby zůstali v bezpečí. Začněte tedy budovat svůj první internetový obchod s Flatsome a okouzlete své zákazníky jeho jedinečností a kreativitou. Navíc v editoru obsahu není žádný nepořádek v kódu, jen pár řádků krátkého kódu. Flatsome je bezpochyby nejlepší téma, se kterým jsem se setkal. Není tedy třeba se rozhlížet po žádném jiném motivu, stačí stisknout pro stažení a ihned začít budovat svůj přizpůsobený internetový obchod.
Záhlaví a zápatí webu jsou základními prvky. Ve většině případů záhlaví poskytuje navigaci…
Dvě z nejpopulárnějších témat WordPress na trhu jsou Astra a OceanWP. Profesionální…
Vytvoření vynikajícího zpravodajského webu nevyžaduje, abyste se stali webdesignérem. My…
Téma Noviny je jedním z nejvýznamnějších témat WordPress navržených tagDiv, a…
Pokud jde o nastavení internetového obchodu, WooCommerce je plugin . To…
Záhlaví je obecně první věc, kterou člověk uvidí, když navštíví váš web,…