Jak správně provozovat e-shop aneb vytvořte si originální grafiku IV. díl

Možnosti grafického designu systému FastCentrik

Grafický design FastCentriku je vytvořen pomocí CSS stylů, které jsou již nastaveny jako defaultní neboli výchozí z hlediska zobrazování grafiky. Toto předdefinované nastavení však do jisté míry omezuje uživatele e-shop systému FastCentrik, neboť si může zvolit pouze barvu písma, boxíků nebo pozadí na základě nabídky v administraci e-shopu. Varianta „přednastaveného“ internetového obchodu je vhodná pro živnostníky a malé firmy, které chtějí obchodovat ihned, provozovat e-shop bez rizik a finančního zatížení. Proto je systém FastCentrik vytvořen tak, aby uživatel zvládl jeho provoz snadno, rychle, bez potíží a finančního zatížení, což se projevuje do jisté míry v omezených možnostech nastavení grafického designu.

Jak lze vytvořit vlastní grafiku

Chcete-li využívat FastCentrik a mít přitom originální grafiku dle svých představ, můžete se pustit do práce. Princip grafického zpracování spočívá v úpravách CSS stylů. Provozovatelé e-shopu FastCentrik mají přístup k původním CSS stylům, které však nemohou upravovat. Proto je zapotřebí vytvořit si svůj vlastní originální CSS styl, uložit jej do adresáře FILES (pomocí FTP přístupu) a připojit (nalinkovat) svůj vlastní styl k původnímu CSS stylu nejlépe v patičce internetového obchodu. Pokud chcete původní text nahradit obrázky, taktéž je potřeba uložit je například do adresáře FILES/IMG (opět pomocí FTP přístupu). Během procesu tvorby vlastního CSS stylu by měl provozovatel dodržovat pravidla týkající se jeho velikosti.

Jak správně nalinkovat vlastní styl

Otevřete si administraci vašeho e-shopu a do zápatí vložte odkaz na vlastní styl, který před tím uložíte přes FTP přístup na server (v našem případě do adresáře Files). Nalinkování odkazu má následující podobu: <link rel="stylesheet" type="text/css" href="/files/mystyle.css" media="screen">

Čeho je dobré se vyvarovat během provádění úprav CSS stylů

V souvislosti se správnou velikostí stránek je potřeba být obezřetný při provádění změn v CSS souboru. Stává se, že provozovatel internetového obchodu upravuje CSS styly tak, že zkopíruje celý zdrojový CSS soubor a některá původní nadefinování stylů nahradí novými. To však s sebou přináší problém.

Ukázka nesprávného provádění změn v CSS souboru

Jak správně provést úpravu stylů v CSS souboru

Během tvorby vlastní grafiky pomocí CSS stylů, nekopírujte obsah původního CSS souboru, ale vytvořte nový CSS soubor, který bude obsahovat pouze konkrétní úpravy stylů. Výsledná velikost datového souboru bude mnohem menší, díky čemuž bude docházet i k rychlejšímu načítání stránky, což je důležité z hlediska zobrazování vašeho e-shopu na předních pozicích ve vyhledávačích.

Ukázka správného provedení změn v CSS souboru

Jak upravit původní CSS styl

Možnost úpravy původního CSS stylu si ukážeme na příkladu internetového vyhledávače Firefox a jednoho z jeho plug-inů. Nainstalujte si plug-in Web Developer Toolbar, který si můžete stáhnout na následující adrese: https://addons.mozilla.org/cs/firefox/addon/60, klikněte ve vyhledávači na složku „CSS“ a poté na „zobrazit CSS styly“.

Nyní si ukážeme, jak lze upravit původní modul „Napište nám“ a dosáhnout nové podoby tohoto modulu pomocí CSS stylů.

Praktický příklad úpravy CSS stylů

Vše si ukážeme na jednoduchém příkladu, kdy změníme podobu grafického designu modulu "Napište nám":

1/ Všimněte si ukázky grafického zpracování modulu e-shopu Nábytek-moderní.cz který nepoužívá vlastní grafiku.

Ukázka původní grafiky modulu "Napište nám" e-shopu Nábytek-moderní.cz

CSS styl tohoto grafického designu je původní a vypadá takto:

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

2/ Naopak ke změně grafického designu došlo u internetového obchodu Spodní prádlo Valentýna.cz

Ukázka vlastního grafického designu modulu "Napište nám" e-shopu se spodním prádlem Spodní prádlo Valentýna.cz

CSS styl tohoto grafického designu je upravený a vypadá 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

Samozřejmě je možné provést úpravu grafiky na mnoha dalších místech e-shopu (background stránky, font a velikost písma, grafickou podobu košíku atd. ). Vše záleží na šikovnosti grafika, který vám styly připraví. Máte-li vlastní nápad, ale neumíte si grafiku upravit sami, můžete využít možnosti nechat si grafický design upravit naší společností NetDirect.s.r.o.

Na závěr uvádíme několik ukázek, z nichž je patrné, kam až může grafik pří úpravě zajít a jak může pozměnit celkový ráz vašeho e-shopu, kerý se bude naprosto odlišovat od šablonovitého řešení.

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

tisknout stránkuodeslat na e-mailObjednat E-shop