Pipfrog AS www.pipfrog.com. Ulkoasun muotoilut



Samankaltaiset tiedostot
Monikielinen verkkokauppa

Tuotteiden hallinnointi

Pikaopas. Pikaoppassa käydään läpi Pipfrogin verkkokauppa-alustan tärkeimmät tekniset ominaisuudet uuden verkkokaupan perustamisessa.

Pipfrog AS Tilausten hallinta

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

Esimerkkinä - ilmainen blogi-julkaisujärjestelmä. WordPress:stä on myös palvelimelle asennettava versio (WordPress.

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

Aloita oman blogisi luominen (järjestelmä lupaa sen tapahtuvan sekunneissa ;-))

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

Ostokorin hintasäännöt

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

Putteri Käyttöliittymä ja ulkoasu

Westiekerho.fi päätoiminnallisuudet

Tekstinkäsittely ja opinnäytetyö I sisällysluettelo ja sivunumerointi. Word 2007

Sivunumerot ja osanvaihdot

helsingintaiteilijaseura.fi WordPress-pikaohjeet

Joomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta.

Esittely. Muistathan, että voit myös käyttää Petsietä aivan normaalina käyttäjänä kasvattajapalveluiden lisäksi. Antoisaa Petsien käyttöä!

Pipfrog AS Markkinoinnin välineet

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

OHJE -LIPPUKUNTASIVUN MUOKKAAMISEEN

1 Yleistä Kooste-objektista Käyttöönotto Kooste-objektin luominen Sisällön lisääminen Kooste objektiin Sivut...

Webmailin käyttöohje. Ohjeen sisältö. Sähköpostin peruskäyttö. Lomavastaajan asettaminen sähköpostiin. Sähköpostin salasanan vaihtaminen

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE

Wordpress- ohje nettisivujen laadintaan

Julkaisujärjestelmän peruskäyttö. Pikaohje

Vehmaan kunta. Wordpress käyttöopas. Betta Digital Oy

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014

Juricon Nettisivu Joomlan käyttöohjeet

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014

Pika-aloitusopas. Sisältö: Projektin luominen Projektin muokkaaminen ja hallinnointi Projektin/arvioinnin tulosten tarkastelu

Facebook-sivun luominen

Tietokannan luominen:

Nebula Kotisivutyökalu Käyttöohje - Kauppamoduuli. 1. Kaupan asetukset... 2

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA

Opintokohteiden muokkaus

Osaamispassin luominen Google Sites palveluun

Yleistä. Suositukset. Rakenne

HAAGA-HELIA ammattikorkeakoulu Ohje 1 (5) Raportin tekeminen

OpasOodi Opintokohteiden muokkaus

Seutudokumenttien pä ivittä misohje

Uuden Moodle-kurssin luominen

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Opintokohteiden muokkaus

1. ASIAKKAAN OHJEET Varauksen tekeminen Käyttäjätunnuksen luominen Varauksen peruminen... 4

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

OHJE EXCEL-MAKRON LUOMISEKSI JA MAKRON KÄYTÖSTÄ

HARJOITUSTYÖ ITKP101 Ronja Saarinen

OpasOodi Opintokohteiden muokkaus

YLÄ JA ALATUNNISTE...

Moodle-alueen muokkaaminen

Tiedostonhallinta. Yleistä

OHJEET HOPSIN TEKEMISEEN KYVYT- PALVELUSSA:

Verkkosivuston hallinnan ohjeet. atflow Oy AtFlow Oy, +358 (0)

Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje

Opintokohteiden muokkaus

Moodlen lohkot. Lohkojen lisääminen: Lohkojen muokkaaminen: Tampereen yliopisto/tietohallinto 2017 Suvi Junes

Seutudokumenttien pä ivittä misohje

Perustietoja Mietoisten kyläportaalista Yhdistyksen ylläpitäjän kirjautuminen Yhdistyksen etusivun muokkaaminen... 2

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

Sivuston tiedotawebsiteguy.com

SALITE.fi -Verkon pääkäyttäjän ohje

24MAGS PIKAOHJE HALLINTAPANEELIN KÄYTTÖÖN

ejuttu ohjeet kuinka sitä käytetään.

Munstadi Wordpress ohjeet

ARVO - verkkomateriaalien arviointiin

1 Yleistä Web-editorista Web-editori -dokumentin luominen Pikatoimintopainikkeet Tallenna... 3

Ohje tekstinkäsittelyharjoitus 10. Pöytäkirja, jossa käytetään ylätunnistetta. Tehtävän aloitus

Hops-ohjaajan ohje Opiskelijan hopsit.

Opintokohteiden muokkaus WebOodissa. Sisällys. Aluksi

EnterQ Johtamisportaali

Pikaohjeita OneNote OPS:in käyttäjille

TEEMA 2 Aineistot. Kirjautuminen Moodleen. Sisältö. Kirjaudut Moodleen sivulta Voit vaihtaa kielen valikosta.

GOOGLE-SIVUSTOJEN KAÄ YTTOÄ OÄ NOTTO

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

1 eportfolio Kyvyt.fi - palvelun käytön aloittaminen

Verkkokaupan ohje. Alkutieto. Scanlase verkkokauppa. Sisäänkirjautuminen

CEM DT-3353 Pihtimittari

Artikkelin lisääminen

FrontPage Näkymät

SeaMonkey pikaopas - 1

KÄYTTÖOHJE. Servia. S solutions

PUTTERI JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN

Discendum Oy

Tero Mononen / Kumppanuuskampus

Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi

Sisältö. Päivitetty viimeksi Sivu 2 / 14

moodle.seamk.fi teknisiä ohjeita

Kurssin asetuksista Kurssin asetukset voidaan muuttaa Kurssin ylläpidon kautta. Moodle ( Mervi Ruotsalainen)

Napsauta Kurssin viikkonäkymä- näkymässä oikeassa yläreunassa sijaitsevaa Muokkaustila päälle -painiketta.

eportfolio ammatillisen kasvun ja oman osaamisen kuvaaminen

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi

Moodle-alueen muokkaaminen

Hittitoimiston Forte-kotisivujen päivitysohje

Transkriptio:

Ulkoasun muotoilut

Ulkoasun muotoilut Oman Pipfrog verkkokauppasi ulkoasun muokkaamiseksti sinun ei välttämättä tarvitse osata HTML -kieltä, ulkoasua voit helposti muuttaa myös ilman tätä taitoa. Ulkoasun muokkauksessa on kaksi aluetta: ulkoasun ja sisällön valinnat. Näistä ensimmäisessä voit määritellä sopivan väripaletin ja toisessa voi muuttaa ja tehdä uusia sivuja verkkokauppaan. Voit käyttää yhtenäistä ulkoasua kaikkissa kauppanäkymissä tai valita erilaisen jokaiselle kauppanäkymälle, kategorialle tai jopa jokaiselle yksittäiselle tuotteelle. Seuraavia ohjeita lukiessasi huomio, että kaikki muutokset on mahdollista tehdä em. tasoilla. Voit muuttaa tasoa hallintapaneelin kauppanäkymä valinnoilla ja tuote- sekä kategoriakohtaisia muutoksia voit muuttaa niiden hallintaosissa. Ulkoasun yleisasetukset Ulkoasun yleisasetuksen muutoksiin valitse Visual -> Ulkoasu, joka jakaantuu seuraaviin osiin: Sisältö - Add short product description in the shopping cart valinta Kyllä lisää kuvauksen Ostoskoriin. Search box enabled, valinnalla Kyllä verkkokaupassa on hakusanaan perustuva etsintä mahdollista. HTLM -head - Kun olet valmis avaamaan verkkokauppasi, muuta valinnaksi Näytä demokappa -ilmoitus EI. Tarvittasessa voit muuttaa myös Meta- ja otsikkotietoja ja URL rivillä näkyvää Head Icon, lisäksi kentässä Satunnaisskriptit voit lisätä muotoilemattoman tekstin, joka näkyy jokaisen sivun ylimpänä tai lisätä muotoillun ylimmän yläosan HTML -kielellä. Tekijänoikeus kenttää voit kirjoitaa omat tietosi oletustekstin tilalle: Pipfrog AS Tuotekuvien vesileimat vesileimoilla voit näyttää tietoja tuotekuvasta kuten tekijäoikeusmerkintöjä, tuotenäytetietoja tai loppuunmyytyjä tuotteita. On mahdolllista luoda vesileimat jokaiselle kolmelle kuvatyypille (isokuva, peruskuva, pikkukuva). Voit myös määrittää vesileimojen paikan suhteellisesti ja läpinäkyvyyden. Sivunumerointi - kun tuottet jakautuva katalogissa usealle sivulle eli niitä on riittävän paljon, niin tässä kohdassa määritelet kuinka monta sivunumeroa näytetään ja mikä on teksti ennen sekä jälkeen sivunumeroinnin. VINKKI! WYSIWYG editori on järjestelmässä oletusarvoisesti päälle- kytkettynä, se voidaan kytkeä pois päältä Järjestelmä -> Asetukset -> Yleiset -> Content Management -> WYSIWYG Options

Mukailtu ulkoasu Kun yleiseasetukset on määritelty, voit ryhtyä määrittämään yksilöllistä ulkoasua omaan verkkokauppaasi. Oletusarvona uuden verkkokaupan luonnissa jäjestelmä käyttää ulkoasun teemana Pipfrog Standard nimistä ulkoasuteemaa. Teemassa on valmiiksi määriteltynä millaisia ulkoasuelementtejä (esim. kulmien terävyys, alavalikoiden muotoilu, rajaviivat jne.) ja väripalettia verkkokaupassa näytetään. Oletusteeman lisäksi saatavilla on kolme muuta ulkoasuteemaa. Miten valita näistä neljästä mahdollisesta teemasta se mitä alat käyttämään? Testaa jokaista teemaa erikseen katsomalla niitä verkkokauppanäkymässä ostajan silmin ja päätä sitten mitä teemaa alat muokkaamaan. Kauppanäkymän Ulkoasuteema vaihdetaan valikosta Visual -> Change Store Template -> valitse kauppanäkymä (jos käytössä on useita kauppanäkymiä) ja valitse ulkoasuteema, lisää tarvittaessa voimassaoloaika tai aloitus/lopetuspäivä -> Tallenna Valitse Järjestelmä -> Asetukset -> Advanced Design -> valitse malli, jota tahdot muokata Ylätunniste sivun yläosan kuvien, logon ja värien asetukset Middle Body Content/ Sisällön keskusta sivun keskiosan kuvien ja värien asetukset Alatunniste sivun alaosan kuvien ja värien asetukset Global Settings koko kauppanäkymää koskevat liittyvät värien, kuvien ja tekstien asetukset, jos ylä-, ala- ja keskiosassa ei ole toisin määritetty Tuotteet kategorioiden ja tuotteiden värien, kuvien ja tekstien asetukset Linkit linkkien värien ja tekstien asetukset System Block/Sisältölohkot värimääritykset Static Page Menu/Staattisten sivujen navigaatio taustan ja linkin värit Tallenna asetukset muutosten jälkeen

Yksittäisiä kategorioiden mukailtuja ulkoasuja voidaan tehdä Katalogi -> Hallinnoi kategorioita -> Mukailtu ulkomuoto välilehti -> valitse Ulkoasu -> Ota käyttöön, valitaan taso jolle muutokset tehdään: Tässä ja kaikissa alakategorioissa ja -tuotteissa Vain tässä kategoriassa ja sen tuotteissa Vain tässä ja kaikissa alakategorioissa Vain tässä kategoriassa Page Layout voidaan valita näytetäänkö kategorian näkymässä: Tyhjä näkyykö vain pelkkä sivun sisältö 1 sarake - näkyykö myös ylä- ja alaosat sekä ylempi navigaatio 2 saraketta ja palkki vasemmalla ja oikealla näkyykö ylä-, ala- ja navigaatio-osien lisäksi sarake joko vasemmalla tai oikealla 3 saraketta näkyykö ylä-, ala- ja navigaatio-osien lisäksi sekä oikealla että vasemmalla sarake Custom Layout Update kentässä voidaan määritellä XML -kielellä sisältöelementteien näkyvyyttä, piilottaa niitä, lisätä niitä tai vaihtaa paikkaa jne. Oppaassa on aikaisemmin kerrottu, että ulkoasu on mahdollista muotoilla erilaiseksi myös tuotekohtaisesti. Yksittäisen tuotteen Mukaillun ulkoasun määrittämiseksi valitse Katalogi -> Hallinnoi tuotteita -> valitse tuote -> Ulkoasu -> valitse Muokattu ulkoasu kohdasta toinen tai muokattu teema, voit myös valita ajankohdan, edellisen kaltaisen XML-elementin. Uutena valintana edelliseen verrattuna on valinta Display product options in Samassa palstassa tuotetietojen kanssa tai Omassa lohkossa tuotetietojen jälkeen, jossa määritellään XML-elementin paikka tuotesivulla.

Staattiset sivut Kun käyttöön on otettu verkkokauppaan sopivat ulkoasut, on aika lisätä materiaalia, jotka eivät ole varsinaisia tuotetietoja. Tällä tarkoitetaan sellaisia tietoja, jota tuotteiden tarkastelussa tai ostoa suorittaessa ei ole välttämätöntä asiakkaalla olla tiedossaan, kuten yrityksen ja yhteistyökumppaneiden esittelyt, yhteystiedot, historia- ja ajankohtaistiedot jne. Sivujen hallinnointi valitaan Sisällönhallintajärjestelmä -> Sivut ->Näkyviin avautuu järjestelmässsä valmiina olevat sivut -> Lisää uusi sivu Jokainen sivu jakaantuu viiteen osaan: Perustiedot - Sivun otsikko, URL Key ja Tila, Kauppanäkymä on silloin käytössä, jos useita kauppanäkymiä on aikaisemmin luotu Sisältö Otsikko ja sisältötiedot sisältö voidaan syöttää tekstieditorin avulla tai HMTL -koodina Mukailtu ulkomuoto jokaisen sivun sommitelmia, ulkoasun teemaa ja XML -elementtiä voidaan muokata erikseen Metatiedot myös staattisille sivuille voidaan antaa erikseen omat Metatiedot hakurobotteja varten Page View Optimization jokaista sivua voidaan Optimoida erikseen hakukoneita varten

Muuttumattomat sisältölohkot Sisältölohkot ovat HTML -kielellä tehtyjä sisältöelementtejä, joita voidaan käyttää myös sivujen ulkoasun muotoilussa. Sisältölohkoja voi sijaita missä tahansa sivun osassa ja ne voivat sisältää melkein mitä tahansa sisältöä kuvia, tekstiä, linkkeja tai muita medialementteja. Pipfrogin järjestelmässsä on valmiina muutamia Staattista sisältölohkoa, joita käsitellään kohdassa Sisällönhallintajärjestelmä -> Muuttumattomat sisältölohkot -> valmiiden tarkistelemiseksi klikkaa nimen päällä ja uuden lisäämiseksi klikkaa Lisää uusi sisältölohko. Sisältölohko - custom_navi, on yläreunan navigaatiolinkit Footer links - sisältää alareunan linkitykset Left Content ja Right Content ovat aluksi passiivisia eli niitä ei näytetä sivuilla, voit aktivoida ja muokata niitä tarpeen mukaan, nämä ovat oikean ja vasemman puoliset sisältölohkot. Custom Navigation valikossa olevat linkit staattisille sivuille Uuden sisältölohkon Tunnisteessa ei saa olla tyhjiä välilyöntejä eikä skandinaavisia tai erikoismerkkejä.

Sisältölohkon sitominen Kategoriaan Sisältölohkon voi sitoa kategoriaan Katalogi -> Hallinnoi kategorioita -> Display Settings -> Display Mode, valitse näytetäänkö sekä sisältölohko ja tuotteet vai pelkästään sisältölohko-> CMS Block,valitse lohko jonka tahdot sitoat -> Is Anchor -> Kyllä -> Available Product Listing Sort by Tallenna kategoria ja Available Product Listing Sort by -> valitse sopiva tai jätä oletusvalinta