Ulkoasun suunnitteleminen

Esittely › Käyttöohjeet › Ulkoasun suunnitteleminen

Verkkokaupan ulkoasun suunnitteleminen tapahtuu muokkaamalla ulkoasupohjan CSS-tyylejä, lisäämällä ulkoasuun omia HTML-elementtejä ja CSS-tyylejä sekä lisäämällä ulkoasuun omia kuvia. Ulkoasun suunnitteleminen ei edellytä ohjelmointitaitoja eikä välisovittimen opettelemista. Verkkokauppias voi suunnitella ulkoasun itse tai tilata työn miltä tahansa yritykseltä.

Ulkoasupohjan muokkaaminen

Ulkoasupohjan muokkaaminen tapahtuu verkkokaupan hallintaliittymässä muokkaamalla ulkoasupohjan CSS-tyylejä.

Omien HTML-elementtien lisääminen

Ulkoasupohjaan voidaan lisätä omaa HTML-elementtejä. Esimerkiksi verkkokaupan logon ja maksubannerin lisääminen tapahtuu tällä tavalla.

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "HTML5".
• Syötä nimeksi mitä tahansa.
• Valitse Sivu-kohdasta "[ei merkitystä]".
• Valitse Sijainti-kohdasta haluamasi upotuspiste.
• Lisää Koodi-kohtaan HTML-elementtejä.
• Klikkaa Tallenna-painiketta.

Omien CSS-tyylien lisääminen

Omille HTML-elementeille voidaan lisätä omia CSS-tyylejä.

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "CSS3".
• Syötä nimeksi mitä tahansa.
• Valitse Sivu-kohdasta "[ei merkitystä]".
• Lisää Koodi-kohtaan CSS-tyylejä.
• Klikkaa Tallenna-painiketta.

Omien kuvien lisääminen

Omissa HTML-elementeissä ja CSS-tyyleissä olevat kuvat voidaan ladata (upload) kotisivutilaan verkkokaupan hallintaliittymän kautta.

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "Kuva".
• Syötä nimeksi mitä tahansa.
• Klikkaa Kuva-kohdassa olevaa sinistä kuvaketta.
• Valitse kuvatiedosto omalta tietokoneeltasi.
• Klikkaa Tallenna-painiketta.

Esimerkkejä

• Verkkokaupan logon vaihto
• Otsikkojen fonttien tyylit
• Painikkeiden värin vaihto
• Hello world! -tekstin lisääminen etusivulle
• Facebook-painikkeen lisääminen

Ulkoasun säilyminen

Verkkokaupan ulkoasu säilyy ohjelmiston päivityksen yhteydessä, koska ulkoasu on tallennettu tietokantaan ja kuvat on tallennettu kotisivutilassa oleviin kuvakansioihin.

Katso myös

• Ulkoasupohjat
• Koodausohjeet