Volajte zdarma Volajte zdarma Konzultácie zadarmo - Rezervujte si miesto včas Zľava 60% E-shop v inom jazyku
Slovensky Česky Polski English

Ako správne prevádzkovať e-shop alebo vytvorte si originálnu grafiku IV. diel

Máte chuť vytvoriť si vlastnú grafiku podľa svojich predstáv? Máte nápad a chceli by ste ho premietnuť do vzhľadu vášho internetového obchodu? V tomto už štvrtom diele seriálu vám krok za krokom poradíme ako správne postupovať pri tvorbe vlastného grafického dizajnu s ohľadom na technické možnosti systému FastCentrik.

Možnosti grafického dizajnu systému FastCentrik

Grafický dizajn FastCentriku je vytvorený pomocou CSS štýlov, ktoré sú už nastavené ako defaultné čiže východiskové z hľadiska zobrazovania grafiky. Toto preddefinované nastavenie však do istej miery obmedzuje používateľa e-shop systému FastCentrik, pretože si môže zvoliť len farbu písma, boxíkov alebo pozadia na základe ponuky v administrácii e-shopu. Variant "prednastaveného" internetového obchodu je vhodný pre živnostníkov a malé firmy, ktoré chcú obchodovať ihneď, prevádzkovať e-shop bez rizík a finančného zaťaženia. Preto je systém FastCentrik vytvorený tak, aby užívateľ zvládol jeho prevádzku ľahko, rýchlo, bez ťažkostí a finančného zaťaženia, čo sa prejavuje do istej miery v obmedzených možnostiach nastavenia grafického dizajnu.

Ako možno vytvoriť vlastnú grafiku

Ak chcete využívať FastCentrik a mať pritom originálnu grafiku podľa svojich predstáv, môžete sa pustiť do práce. Princíp grafického spracovania spočíva v úpravách CSS štýlov. Prevádzkovatelia e-shopu FastCentrik majú prístup k pôvodným CSS štýlom, ktoré však nemôžu upravovať. Preto je potrebné vytvoriť si svoj vlastný originálny CSS štýl, uložiť ho do adresára FILES (pomocou FTP prístupu) a pripojiť (nalinkovat) svoj vlastný štýl k pôvodnému CSS štýlu najlepšie v pätičke internetového obchodu. Ak chcete pôvodný text nahradiť obrázkami, je potrebné ich tiež uložiť napríklad do adresára FILES/IMG (opäť pomocou FTP prístupu). Počas procesu tvorby vlastného CSS štýlu by mal prevádzkovateľ dodržiavať pravidlá týkajúce sa jeho veľkosti.

Ako správne nalinkovať vlastný štýl

Otvorte si administráciu vášho e-shopu a do päty vložte odkaz na vlastný štýl, ktorý pred tým uložíte cez FTP prístup na server (v našom prípade do adresára Files). Nalinkovaný odkaz má nasledovnú podobu: <link rel="stylesheet" type="text/css" href="/files/mystyle.css" media="screen">

Čoho je dobré sa vyvarovať počas vykonávania úprav CSS štýlov

V súvislosti so správnou veľkosťou stránok je potrebné byť obozretný pri vykonávaní zmien v CSS súbore. Stáva sa, že prevádzkovateľ internetového obchodu upravuje CSS štýly tak, že skopíruje celý zdrojový CSS súbor a niektoré pôvodné nadefinovanie štýlov nahradí novými. To však so sebou prináša problém.

Ukázka nesprávného provádění změn v CSS souboru
Ukážka nesprávneho vykonávania zmien v CSS súbore

Ako správne vykonať úpravu štýlov v CSS súbore

Počas tvorby vlastnej grafiky pomocou CSS štýlov nekopírujte obsah pôvodného CSS súboru, ale vytvorte nový CSS súbor, ktorý bude obsahovať len konkrétne úpravy štýlov. Výsledná veľkosť dátového súboru bude oveľa menšia, vďaka čomu bude dochádzať k rýchlejšiemu načítania stránky, čo je dôležité z hľadiska zobrazovania vášho e-shopu na popredných pozíciách vo vyhľadávačoch.

Ukázka správného provedení změn v CSS souboru
Ukážka správneho vykonania zmien v CSS súbore

Ako upraviť pôvodný CSS štýl

Možnosť úpravy pôvodného CSS štýlu si ukážeme na príklade internetového vyhľadávača Firefox a jedného z jeho plug-inov. Nainštalujte si plug-in Web Developer Toolbar, ktorý si môžete stiahnuť na nasledujúcej adrese: https://addons.mozilla.org/cs/firefox/addon/60, kliknite vo vyhľadávači na zložku „CSS“ a potom na „zobraziť CSS štýly“.

Teraz si ukážeme, ako sa dá upraviť pôvodný modul Napíšte nám“ a dosiahnuť novú podobu tohto modulu pomocou CSS štýlov.

Praktický príklad úpravy CSS štýlov

Všetko si ukážeme na jednoduchom príklade, keď zmeníme formu grafického dizajnu modulu "Napíšte nám":

1/ Všimnite si ukážku grafického spracovania modulu e-shopu Nábytek-moderní.cz, ktorý nepoužíva vlastnú grafiku.


Ukážka pôvodnej grafiky modulu "Napíšte nám" e-shopu Nábytek-moderní.cz

CSS štýl tohto grafického dizajnu je pôvodný a vyzerá takto:

.sendM {
background:url("/img/CZE/title_sendM.png?cs=F2E09BFFFFFFF4F3F2AA7534AA75342F3942FFE8A5") no-repeat scroll 0 0 transparent;
}

2/ Naopak k zmene grafického dizajnu došlo v internetovom obchode Spodní prádlo Valentýna.cz


Ukážka vlastného grafického dizajnu modulu "Napíšte nám" e-shopu so spodnou bielizňou Spodní prádlo Valentýna.cz

CSS štýl tohto grafického dizajnu je upravený a vyzerá takto:

.sendM {
background:url("/files/writeus.png") no-repeat scroll 0 0 transparent !important;
}

Ukázka originálního grafického designu e-shopu Pěkné-šperky.cz
Ukážka originálneho grafického dizajnu e-shopu Pěkné-šperky.cz

Samozrejme je možné vykonať úpravu grafiky na mnohých ďalších miestach e-shopu (background stránky, font a veľkosť písma, grafická podoba košíka atď.). Všetko záleží na šikovnosti grafika, ktorý vám štýly pripraví. Ak máte vlastný nápad, ale neviete si grafiku upraviť sami, môžete využiť možnosť nechať si grafický dizajn upraviť našou spoločnosťou NetDirect, s. r. o.

Na záver uvádzame niekoľko ukážok, z ktorých je zrejmé, kam až môže grafik prí úprave zájsť a ako môže zmeniť celkový ráz vášho e-shopu, ktorý sa bude úplne odlišovať od šablónovitého riešenia.

Ukázka originální grafiky internetového obchodu 69Slam.cz
Ukážka originálnej grafiky internetového obchodu 69Slam.cz

Čítajte aj ostatné diely seriálu Ako správne prevádzkovať e-shop:

I. diel: Ako správne prevádzkovať e-shop alebo Na veľkosti stránok záleží!
II. diel: Ako správne prevádzkovať e-shop alebo SEO - optimalizácia stránok pre vyhľadávače
III.diel: Ako správne prevádzkovať e-shop alebo Umenie linkbuildingu

 

tlačiť stránkuodoslať na e-mailObjednať E-shop

Chatujte zde! Chatujte zde!