Hozzon létre egyéni WooCommerce termékoldalt Flatsome témával

Flatesome téma

A Flatsome egy erőteljes WordPress téma, amelyet e-kereskedelmi webhelyekhez terveztek, és WooCommerce integrációval rendelkezik.

Ez az egyik legnépszerűbb WooCommerce téma a ThemeForest-en. Ennek az oktatóanyagnak az írásakor több mint 174 500 eladás volt, és a több mint 6600 vélemény alapján elképesztő, 4,8 csillagos értékelést kapott.

A Flatsome-ot elsősorban a kezdők és a technológiában nem jártas felhasználók szem előtt tartásával tervezték.

Ez nagyszerű azoknak, akik szeretnének elkezdeni egy online vállalkozást, de nem tudják, hogyan kell kódolni, vagy nem rendelkeznek elegendő költségvetéssel egy professzionális kódoló alkalmazására. A Flatsome segítségével egyszerű és intuitív eszközökkel professzionális megjelenésű webhelyet hozhat létre.

Most a Flatsome rengeteg fantasztikus funkcióval és funkcióval érkezik. Annak bemutatására, hogy mi érhető el és hogyan működik, van egy gyors bemutatónk, amely bemutatja, hogyan hozhat létre WooCommerce termékoldalt a Flatsome használatával.

Tehát minden további nélkül kezdjük:

Tartalomjegyzék:

A Flatsome, a WooCommerce és a WordPress közötti különbség

Ahogy üdvözöljük új olvasóinkat, meg kell adnunk néhány szükséges információt, hogy minden olvasónk ugyanazon az oldalon legyen. Itt megvitatjuk mindhárom terminológia különbségét, amelyeket ebben a cikkben fogunk használni.

Kezdjük a WordPress-szel. Ez egy olyan platform, ahol különféle témákat és plugin telepíthet webhelye létrehozásához. Több ezer plugin és téma áll rendelkezésre egyéb feladatok elvégzésére az Ön igényei szerint.

A WooCommerce egy olyan plugin , amelyet a WordPress-re telepítünk, és amely lehetővé teszi, hogy különféle funkciókat adjon hozzá webhelyünkhöz. Ennek a plugin a telepítésével weboldalunkat és online áruházunkat további funkciókkal tudjuk ellátni, mint például bevásárlókosár, fizetési feldolgozás, termékkezelés stb.

Végül, de minden bizonnyal az egyik legkritikusabb elem a weboldalunk megjelenése. A Flatsome egy olyan téma, amely lehetővé teszi, hogy weboldalunk perspektíváját a vágyainknak megfelelően alakítsuk. Például, ha cége logója narancssárga, akkor érdemes tükröznie webhelye színét. Ez az, amit a Flatsome nyújthat Önnek.

Hozzon létre egy WooCommerce termékoldalt a Flatsome témával

Mivel minden olvasónk ismeri a WordPress-t, a WoCommerce-et és a Flatsome-ot, itt az ideje, hogy továbblépjünk termékoldalunk testreszabásához a Flatsome témához tartozó fantasztikus UX-készítővel. Ez egy drag and drop funkció, amely rendkívül megkönnyíti a tervező életét.

Szinte mindenki vásárolt már az interneten, valószínűleg az elmúlt hónapok nehéz időszakai miatt. Az otthon maradás volt a legbiztonságosabb megoldás mindannyiunk számára. Ez az oka annak, hogy minden olvasónk egyetért abban, hogy egy online áruház sokkal bonyolultabb, mint egy hagyományos weboldal.

A WooCommerce és a Flatsome segítségével azonban ez a feladat rendkívül egyszerűvé vált. Le kell ülnie és meg kell terveznie, hogyan fog kinézni a webhelye, és ennyi. A WooCommerce készséggel segít Önnek az építői lehetőségekben. A fogd és vidd funkcióval néhány perc alatt létrehozhat egy teljes körűen működő online áruházat.

A WooCommerce és a Flatsome teljesen új életre keltheti az online áruházzal kapcsolatos elképzeléseit. Webhelyének modern és szép megjelenésűnek kell lennie, hogy vonzza az ügyfeleket. Ezért a Flatsome a legjobb megoldás minden problémájára, ezért töltse le innen, és kezdjük is.

A Flatsome fantasztikus funkciókkal rendelkezik, de ennek egyik része az, hogy több mint 300 000 felhasználó kedvencévé vált. Egy tökéletes eszköz segít néhány roppant reszponzív webhely létrehozásában anélkül, hogy egyetlen sort kellene kódolnia. Ezenkívül az a képessége, hogy rendkívül kreatív és egyedi online áruházakat hoz létre, még méltóbbá teszi.

Tehát további időveszteség nélkül folytassuk az oktatóanyagot. Ez az oktatóanyag végigvezeti a termékoldal tervezésének teljes folyamatán. A képek segítségével jobb képet kaphat arról, hogy a feladat hogyan fog végighaladni a folyamaton.

1. lépés: Válassza ki a termékoldal elrendezését

Először a termékek oldalának elrendezésének kiválasztásával kezdjük. Ez a válogatás létrehozza webáruházunk alapoldalát, amit a későbbiekben kívánságaink szerint alakítunk ki. Ez a lépésenkénti útmutató végigvezeti az oldal testreszabásának folyamatán.

Ebben a amp a Classic Shop opcióval folytatjuk. Önre azonban nincs korlátozás. A testreszabási folyamat minden kiválasztott elrendezésnél hasonló lesz. Az egyetlen különbség az lenne, hogy az oldal alapvető szerkezete eltér a többitől.

Továbblépve a termék-testreszabóhoz, a teljes magasságú bal oldalsáv nevet adtuk neki.

A termékek oldalának testreszabására két lehetőség áll rendelkezésre. Az elsőt az UX-készítővel kell elvégezni, a másikat pedig az oldal manuális elkészítése. Ha a második lehetőséget választja, akkor a hivatalos dokumentációhoz kell mennie, és meg kell keresnie a rövid kódokat. Ha Ön kezdő, és ez az első tapasztalata az online áruház építésében, azt javaslom, hogy válassza ezt az első lehetőséget.

(Opcionális) 2. lépés: Készítsen termékoldalt manuálisan

Itt van egy képernyőkép a Flatsome hivatalos dokumentációs oldaláról. Beírhatja a rövid kódok szót, és megkeresheti őket.

Miután megnyomta a keresést, megjelenik a rövid kódok listája a képernyőn. Kiválaszthatja azokat a rövid kódokat, amelyek fontosak a termékoldal számára. A rövid kódok használata kevesebb erőfeszítést igényel, de elengedhetetlen, hogy rendelkezzen egy kis gyakorlati tapasztalattal a WordPress és a rövid kódok használatában.

Itt található a rövid kódok listája, amelyeket a webhelyen oldalak létrehozásához használhat.

Ebben amp testre szabjuk a teljes magasságú bal oldalsáv elrendezését; így a terv kódját másoljuk. Az alábbiakban az alkalmazott képe látható, de könnyen kimásolható a szerkezetből.

Kezdje el egy blokk létrehozását címmel. Ha fejet szeretne fejleszteni, kattintson az „Új hozzáadása” gombra, amely elérhető a műszerfalon elhelyezett UX blokkok alatt.

A blokkot kívánsága szerint nevezheti el. Ebben a amp az uniót a "Teljes magasságú bal oldalsáv elrendezésnek" neveztük el. Ezután láthatja a rövid kódokat a blokkszerkesztőben. Miután befejezte a kívánt rövid kódok másolását, megnyomhatja a közzététel gombot.

Egyenértékűek leszünk ez után az egy kis lépés után, ahol a vágyainknak megfelelően testreszabhatjuk oldalunkat. Most lépjen a termékoldal-téma opcióhoz, és nyomja meg az egyéni elrendezés ikont.

Ha elkészült, most már blokkokat hozhat létre az Egyéni termékelrendezés legördülő menüből.

Válassza ki az általunk most létrehozott blokkot. A blokk létrehozásával a fő célunk az volt, hogy termékoldalt hozzunk létre belőle. E amp szerint a teljes magasságú bal oldalsáv elrendezés a blokk, míg a végén az lesz, ahogyan elnevezted.

Ha elkészült, csak nyomja meg a Közzététel gombot; elmenti a beállításokat.

3. lépés: A termékoldal testreszabása

Itt az ideje, hogy elkezdjük a testreszabást. Először a meglévő termékek oldalon navigálunk a kezelőfelületről, amelyet korábban beállítottunk a lépésekben.

Fontos, hogy egy adott terméket válasszon, amelyet be kell állítanunk. Teljes részletekkel, képekkel kell rendelkeznie a munkáról, amelyeket testre kell szabnunk. Így a folyamat kényelmesebbé válik a létrehozandó oldalszakasz megjelenítéséhez.

Az UX builder opció látható. Csak nyomja meg a gombot a testreszabás elindításához.

Az UX-készítő megnyitása után a képen látható, hogy a termékoldal elemei elérhetők a termékoldal bal oldali paneljén.

A bal oldali panel az a blokk, amelyet eredetileg létrehoztunk. A dokumentációból vett rövid kódok segítségével készítettük el.

Lehetősége van átrendezni az elemeket a bal oldali panelen, és módosítani a beállításokat az elem opcióból. Ebben a amp a bal oldali menüben elérhető árat fogjuk átrendezni.

Ezenkívül lehetővé teszi az elemek átrendezését az építő előnézetéből, és további összetevőket helyezhet el az építő termékoldalán. Ebben a bemutatóban a Termékek lapok szakasza és a Kapcsolódó termék egy egyszerű húzással átrendeződött.

A jelentős drag and drop funkcióval a Flatsome készen áll arra, hogy azt nyújtsa Önnek, amit keres a webhelyén. A nagymértékben testreszabható modulokkal könnyedén készíthet fantasztikus oldalakat. A drag and drop funkció még kényelmesebbé teszi az életet.

Becsomagolás

Ebben a modern korban elengedhetetlen egy online vállalkozás, mert az emberek inkább otthon maradnak, hogy biztonságban maradjanak. Kezdje el tehát vállalkozása első online áruházának felépítését a Flatsome segítségével, és varázsolja el vásárlóit egyediségével és kreativitásával. Ráadásul a tartalomszerkesztőben nincs kódzavar, csak néhány rövid kódsor. A Flatsome kétségtelenül a legjobb téma, amivel találkoztam. Így nem kell más témát keresni, csak nyomja meg a letöltés gombot, és azonnal kezdje el testreszabott online áruházának felépítését.

Holderkhu

élőben:.cid.e495888558d5265f

Legutóbbi hozzászólások

A fejlécek és láblécek használata az Elementorral

A webhely fejlécei és láblécei alapvető elemek. A legtöbb esetben a fejléc navigációt biztosít…

2022. január 6

WordPress téma összehasonlítás: Astra vs OceanWP

A két legnépszerűbb WordPress téma a piacon az Astra és az OceanWP. Szakmai…

2022. január 2

A WordPress hírtéma összehasonlítása: Újság vs. Astra

Egy kiváló hírwebhely létrehozásához nem szükséges webtervezővé válni. Mi…

2021. október 25

Hozzon létre egy hírekkel kapcsolatos webhelyet Újság témával

A Newspaper téma az egyik legjelentősebb WordPress téma, amelyet a tagDiv, egy…

2021. október 18

Hogyan építsünk fel e-kereskedelmet az Avada WooCommerce builder segítségével

Amikor egy online áruház létrehozásáról van szó, a WooCommerce a legjobb beépülő plugin . Azt…

2021. október 4

A ragadós fejléc és a görgetőeffektusok használata az Elementorral

A fejléc általában az első dolog, amit az ember meglát, amikor felkeresi a webhelyét,…

2021. szeptember 21