Om LifeVision CMS. Enklere og mer profesjonelt enn dette blir det ikke!

Transkript

1

2 Om LifeVision CMS Med LifeVisions brukervennlige og intuitive drag and drop CMS løsning er du ett steg inn i fremtiden. Det er ikke lenger nødvendig å kunne programmere og kode for å bygge mobilsider. Vi har gjort utviklingen og designet til din mobile landingsside for deg, du trenger kun å finne frem materialet du trenger for å bygge videre på dette. Enklere og mer profesjonelt enn dette blir det ikke! Med LifeVision sin unike CMS løsning kan du på lage flotte bildegallerier, legge inn logo, bilder, video, kart, nyheter og mye mer. 2

3 Innhold Om LifeVision CMS...2 Logg inn...5 Husk å lagre arbeidet ditt...6 Gjør det til en rutine å slette nettleserdata...7 Legge inn logo...8 Gjøre en kampanje/landingsside midlertidig inaktiv.9 Opprette menypunkt Endre et menypunkt Lage flere menypunkter Appearance- gjør endringer i tekst, knapper og bakgrunn Alle funksjoner Legge inn tekst og bilder Endre tekst Lage lenker i tekstfeltet Bytte rekkefølge på knapper, tekst, bilder mm Social internet Opprette tabell Firmabilde og adresse Bildegalleri Smart Parser for Nyheter Skjema/Form Valgmuligheter i Form Textbox: Textarea: Radiobutton: Checkbox: Flip switch: Selectbox: Datepicker: Find nearest Extensions Format Tips Bilder og størrelser Noen design eksempler

4 Logo Bakgrunnsbilde Knapper Bildekarusell Knappe ikoner

5 Logg inn Når du ønsker å gjøre endringer i din landingsside for mobil, klikker du først på linken til CMS løsningen og skriver inn Login og Password som du har fått tilsendt på mail. 5

6 Husk å lagre arbeidet ditt Det er viktig å lagre ofte. På den måten unngår du å miste arbeid du har gjort. CMSet er følsomt og om man treffer feil med for eksempel et bilde i en bildeholder kommer du ut av siden du jobber på og alt arbeid som ikke er lagret går tapt. Lag deg derfor en god vane med å lagre ofte. 6

7 Gjør det til en rutine å slette nettleserdata Da unngår du at browseren «henger» og at du ikke får gjort endringer du ønsker. Dersom du gjør daglige endringer i cms et kan du gjerne gjøre dette en gang hver dag. 7

8 Legge inn logo Det første vi skal gjøre er å legge inn en logo. Klikk på fanen Edit header i venstre menyen (langt ned). Trekk inn logoen fra mappen der den ligger på vår datamaskin til merket område for logo. Vi kan legge inn en link ved å klikke på logoen for redigering. Trykk på knappen add link og trekk ut et område som du ønsker å legge linken over. Deretter skriver du telefonnummret inn, evt en facebook adresse. 8

9 Gjøre en kampanje midlertidig inaktiv Det er fullt mulig å skjule en landingsside eller en kampanje for brukerne uten å slette mappen i CMSet. Gå først til Settings, som ligger i venstremenyen rett under Appearance. Når Active er merket (huket av) er landingssiden/kampanjen synlig for alle. Når Active står tom er landingssiden/kampanjen skjult, men fortsatt tilgjengelig i CMSet. Det er altså mulig å vise en landingsside/kampanje i en periode for så å skjule den en periode til du igjen ønsker å kjøre kampanjen på ny. 9

10 Opprette menypunkt Vi skal nå opprette vårt første menypunkt. Dette gjør vi ved å trykke på pluss tegnet ved siden av Home. Dermed får vi opp en dialogboks. Her fyller vi ut Tittel på menypunktet. Under Buttonsettings velger vi hvilken type knapp vi ønsker. Fargen på pilen i knappen kan endres ved å klikke på pilen og skrive inn en fargekode. Velg hvilket ikon du ønsker å bruke på knappen din ved å markere et ikon. Du kan endre farge på ikonene ved å velge en farge fra nedtrekkslisten som heter Page Icon. Eventuelt kan du trekke inn et ikon fra pc n din, der du har disse lagret. Trekk det inn og slipp det i den markerte ruten, der det står Drop your icon here. Velg deretter Done for å refreshe previewet som vises i den store mobilen. Det gjør du etter hver endring i CMS. Husk at ingenting blir lagret før du trykker på next knappen. 10

11 Endre et menypunkt Ønsker du å endre et menypunkt klikker du to ganger i venstre øvre hjørnet av menyknappen du har laget. Du må stå på enten Home eller (hvis det er et undermenypunkt) menypunktet over undermenypunktet for å finne knappen din. Dialogboksen vil da åpne seg og du kan utføre endringene du ønsker, for eksempel trekke inn et nytt ikon i boksen Drop your icon here, endre tekst på knappen, ikonfarge under Page icon, knappetype under Button settings. Klikk Ok og Done. For å lagre endringer, klikk den store Next knappen. 11

12 Lage flere menypunkter Ønsker du å lage flere menypunkter, er det bare å trykke på +tegnet ved siden av Home. Du må da opprette en knapp på samme måte som nevnt tidligere. Hvis du ønsker et submenypunkt, trykker du på +tegnet ved siden av menypunktet du vil ha en eller flere sider under. For hver side du ønsker å opprette, trykk på +tegnet og lag en ny knapp. Fyll ut title, velg knappetype i button settings og velg et ikon ved å markere det eller trekk inn et ikon du har klart og som ligger lagret lokalt på din pc. Slipp i så fall ditt ikon i ruten «drop your icon here». 12

13 Appearance- gjør endringer i tekst, knapper og bakgrunn Du kan endre fargen på knappene ved å gå i Appearance og velge Button style. Her endrer du både farge på knappen i fargevelgeren og farge på teksten. Du kan endre knappefonten under Appearance og Body text, men husk at du da samtidig endrer teksten på hele mobilsiden. Alle funksjoner: Backgroundcolor: Endre Bakgrunnsfarge Title Text color: Endre farge på Tittel på mobilsiden «Velkommen til vårt firma!» Buttons style: Endre bakgrunnsfarge og tekstfarge og vertikal avstand mellom knapper Background image: Legge inn bakgrunnsbilde Body text color: Endre farge på all tekst Text area color: Endre tekst layout i artikler Border color: Endre farge på kantlinje i artikler Header Background: Endre bakgrunnsfarge i logoområdet Text area type: Endre tekstfarge 13

14 Legge inn tekst og bilder Det er enkelt å legge inn tekst og bilder. Gå først til fanen Text/Photo. Trekk inn en bildeholder eller en tekstholder og slipp den i merket område «Drop it here». Vi kan ha et, to eller tre bilder ved siden av hverandre og så mange vi ønsker under hverandre. Trekk bildet inn fra der du har lagret det på pc en din, for eksempel fra mappen «My pictures». Slipp bildet når teksten endrer seg fra Kopiering til Flytting. Trykk done og next for hver gang du gjør en endring. Du vil da se at preview av mobilsiden (i den store, svarte mobiltelefonen) blir oppdatert. Vi kan velge mellom ulike oppsett for teksten også og tekstholderne gir en tydelig indikasjon på hvordan dette kommer til å se ut. Trekk ut tekstholderen og slipp den der hvor det står drop it here. 14

15 Endre tekst Marker teksten og du får opp valg for å midtstille, venstrejustere eller høyrejustere tekst sette tekst uthevet, kursiv eller understreket velge font (teksttype) og size (tekststørrelse) legge inn nummererte lister eller punktlister 15

16 Lage lenker i tekstfeltet Ved å sette et # tegn før og etter url blir teksten til en lenke. Vise url som lenke: # Vise url som tekstlenke «klikk her»: #Klikk her * Vise telefonnummer som lenke med Click2Call: # # Vise telefonnummer som tekstlenke «Ring oss» med Click2Call: #Ring oss* # Vise epost som lenke med Click2Mail: #mads@lifevision.no# Vise link til underside: #Link tekst*undersidenavn# Vise link til kart med Click2Map: #Link tekst**gateadresse, postnummer sted, land# 16

17 Bytte rekkefølge på knapper, tekst, bilder mm Det er svært enkelt å bytte rekkefølge på teksten, bilder og alle andre funksjoner i CMSet. Det er bare å trekke i tekstholderen og slippe den der du ønsker. Det dukker opp flere alternativer hvor det står drop it here. 17

18 Social internet Under denne fanen finner du flere valg. For eksempel kan du trekke inn en youtube video. For å få denne riktig inn, må du først gå på Finn videoen du vil legge inn og kopier URL en som kommer frem når du trykker på Del linken (evt Share) under videoen. Lim denne inn i Url feltet som dukker opp når du trekker en youtube video holder inn på siden du jobber i. På samme måte kan du legge inn en vimeo video, husk å kopiere linken fra Share inn i Url feltet i CMSet. Du kan og trekke inn en Facebook Like knapp. Den enkelte side vil da bli «likt» når brukerne trykker på denne på sin mobil. Om du ønsker kan du legge inn en link til Wikipedia. I det du trekker ut ikonet for Wikipedia, blir du bedt om å fylle ut en URL til Wikipedia siden og skrive en tekst, for eksempel Les mer. Dette blir da synlig som en knapp for mobilbrukeren, som viser brukeren ut av mobilsiden din og inn på Wikipedia, som blir en ekstern link her. Har du en hjemmeside på Twitter kan du også legge inn en link her. Dette blir en knapp på samme måte som for Wikipedia. Det samme gjelder for Linkedin. 18

19 Opprette tabell Du kan opprette en tabell ved å trekke ut en tabell under fanen Info. En dialogboks kalt Table settings åpner seg og du kan her fylle ut Table Title (navn på tabellen). Velg deretter antall rader og kolonner ved å klikke på pluss tegnet for dette. Du kan velge bakgrunnsfarge for toppfeltet (headercolor) og resten av tabellen (bodycolor). Enten kan du skrive inn en farge, for eksempel svart i den lille tekst firkanten under fargevelgeren eller du kan velge en ferdig farge ved å klikke på en av rutene med farge. På samme måte kan du velge tekstfarge for toppfeltet ved å klikke på Header text color eller tekstfarge for resten av tabellen ved å klikke på Body text color. 19

20 Firmabilde og adresse Ønsker du å ha et bilde av firmaet ditt med litt kontaktinformasjon, kan du trekke ut boksen som heter Location info fra fanen Info. Her kan du legge inn et bilde fra pc n din der bildet ligger lagret og slippe det i merket område kalt drop image here. Fyll ut overskrift i headline og ellers de andre feltene for adresse, epost og eventuelt Facebook adressen til firmaet ditt. I button caption fyller du ut hva du ønsker skal stå på knappen din. Denne knappen leder til adressen til firmaet ditt og kan for eksempel åpne et kart om du ønsker det. Du kan velge farge på knappen i button color og endre farge på overskriften i headline color. 20

21 Bildegalleri For å opprette et bildegalleri på mobilsiden din, velger du fanen Content. Her trekker du ut et imagegallery. Deretter går du til mappen der du har lagret bilder du ønsker å presentere i et bildegalleri og trekker disse en og en eller merk flere og trekk inn samtidig i ruten der det står dropp image here. Pass på at du ikke slipper bildet/bildene inn i ruten før det står «flytting» og ikke «kopiering». Husk å lagre ofte, så du ikke mister arbeidet ditt om du slipper et bilde for tidlig. Du kan legge link på hvert bilde du har i bildegalleriet ved å merke bildet og skrive inn ønsket tekst i «Image text» tekstruten som ligger plassert rett under bildene i bildegalleriet. Samtidig som du har merket bildet ditt, kan du legge til en link på bildet. Velg en side fra nedtrekkslisten «Mobile page link». Her får du opp alle menypunktene du har laget på mobilsiden din. Brukeren vil da bli sendt til siden du velger for hvert bilde når vedkommende trykker på et bilde i bildegalleriet. 21

22 Det er mulig å endre bakgrunnsfarge på teksten i bildegalleriet. Det gjør du i Text color. Det er også mulig å endre tekstfargen. Dette gjør du ved å velge bakgrunnsfarge i Backgroundcolor. Dobbelklikk på fargen ved siden av «Background color» og velg en farge eller skriv inn en fargekode i den lille ruten for eksempel grå: På samme måte klikker du på boksen ved siden av Text color for å velge tekstfarge og velger en farge eller skriver inn fargekoden i den lille ruten. 22

23 Smart Parser for Nyheter Med Smart parser kan du vise nyheter som stadig oppdateres på mobilen din. Smart Parser er ment å brukes spesifikt for nyheter. Trekk ut Smart parser på den siden du ønsker å ha det. Lim inn URL til nyheter i feltet for URL. Skriv eventuelt Les mer i Read more caption. Huk av for å vise bilder og velg om du vil vise bildene til venstre for, høyre for eller over nyhetssakene. I width velger du størrelse på bildet. Klikk på Load og velg nyhetene som skal vises ved å markere de med fargen som oppstår når du beveger musen rundt nyhetene. Så snart riktig område er markert klikker du på ok. Velg User webversion hvis du ikke ønsker å ha med les mer detaljer i nyhetssaken. Velg Use Mobile formatted version hvis du vil vise les mer detaljene inne på mobilsiden din. På denne måten velger du om du vil ha et steg videre i nyhetsdetaljer eller ikke. 23

24 Skjema/Form For å opprette et skjema, gå til Features og trekk ut en Form og slipp den der du ønsker å plassere skjemaet. Fyll ut navn på skjema i Form name. Fyll ut Form header, dette er synlig overskrift på skjemaet. Text after submit er den beskjeden brukeren får så snart vedkommende har fylt ut og sendt inn skjemaet. I feltet Send data to fyller du ut eposten skjemaene skal sendes inn til. Hvis du ønsker å sende skjemaene til flere eposter, sett komma mellom epostene i dette feltet. Du bestemmer selv hvor mange funksjoner skjemaet skal inneholde. Klikk på +tegnet til høyre for Textbox. Du får da opp en dialogboks som må fylles ut. Fyll ut Etternavn (dette er navnet på kolonnen som opprettes i databasen) med for eksempel «Navn». Fyll ut Caption med Etternavn. Dette blir synlig feltnavn i skjemaet. Velg Text i Type. Type beskriver om dette er en tekst, et tall, et nummer, en epost, telefonnummer eller Kortnummer. Etter at du har fylt ut feltene og trykket ok, kan du velge å huke av for stjerne. Feltet blir da «påkrevet», dvs at skjemaet ikke blir sendt inn før feltet er fylt ut. 24

25 Valgmuligheter i Form Textbox: Brukes til Tekst (eksempel Navn), Nummer, Epost, Telefonnummer, Kortnummer Textarea: Brukes til beskjed, brukeren kan skrive inn en fritekstmelding Radiobutton: Brukes til for eksempel å velge kjønn, mann eller kvinne. Fyll ut Name Kjønn, Caption Kjønn, klikk på Add Item. Skriv inn Caption Mann, Value Mann og deretter klikk ok Klikk igjen Add Item Skriv inn Caption Kvinne, Value kvinne og deretter klikk ok Checkbox: Brukes til å huke av for noe, for eksempel: Jeg aksepterer betingelsene. Fyll ut Name: Aksept Caption: Jeg aksepterer betingelsene Klikk Ok Flip switch: Kan brukes på samme måte som Checkbox, for eksempel Jeg vil benytte meg av åpningstilbudet. Fyll ut Name: Åpningstilbud Caption: Jeg vil benytte meg av åpningstilbudet Fyll ut On med Ja Fyll ut Off med Nei Klikk Ok Selectbox: Kan brukes til å velge by, for eksempel Oslo, Bergen, Alta, Elverum. Fyll ut Name: Byliste, 25

26 Caption: Velg by, Default Text: Velg by.. klikk på Add Item. Fyll ut Caption: Bergen Value: Bergen og deretter klikk ok Caption er det feltet som vises i listen på mobilen. Value vises ikke. Klikk igjen Add Item Fyll ut Caption Elverum, Value Elverum og deretter klikk ok Fortsett til du har fått inn alle byer Datepicker: Brukes til å skrive inn dagens dato eller en annen dato. Fyll ut Name: Dato Caption: Dagens Dato Velg Current date for å vise dagens dato Du kan også huke av på Custom Date og enten fylle inn en dato, or eksempel eller la feltet stå tomt. I preview klikk på datoknappen, velg en dato og trykk done. 26

27 Find nearest Denne funksjonen brukes for å vise nærmeste forhandler og laster inn bilder fra Google Maps. Fyll inn Button caption: Finn nærmeste kontor Click2Call caption: Ring oss Click2 caption: Epost Show on map caption: Finn oss på kart Opening hours caption: Åpningstider Klikk på Add Office location Her kan du enten fylle inn informasjon manuelt Eller laste opp et excel ark med følgende felter (utfylt) Street address, ZipCode City, Name, Phone number, , Opening hours info 27

28 Extensions Link til Extensions ligger i venstremenyen nederst i cms et. Her kan du velge å gjøre spesielle tilpasninger for mobilsiden din ved å legge til Html, CSS og javascript. Du kan laste opp ferdige script/stilark eller skrive de inn manuelt. 28

29 Format Når du gjør endringer i din mobile landingsside er det viktig å ta hensyn til størrelser og format. Det er aldri å anbefale å overlesse mobilsiden med altfor mye tung og unødvendig grafikk, bilder og videoer. Dette kan skape treghet og flukt fra mobilsiden. Anbefalte format - Bildeformat: Alltid JPEG format på vanlige bilder. Bilder som er transparante (delvis gjennomsiktige, for eksempel en knapp) i PNG format. - Logo: 640x160px - Bredde bilder: 640px 29

30 Tips Bilder og størrelser Noen design eksempler Wdwwf 30

31 Logo Logo må alltid være 640px bred og opptil 160px høy Om en benytter transparente elementer (skygge etc), lagres logo i PNG, ellers i JPEG 31

32 Bakgrunnsbilde Om bakgrunnsbilde benyttes, må dette være 320x468px i JPEG format. Ved mange detaljer så må det være 640x960px 32

33 Knapper En kan benytte 2 knappetyper o o Knappene som finnes i LifeVision CMS Designe egne knapper og benytte image maps (640px brede) 33

34 Bildekarusell For bildekarusell bør bildene være 640px brede En bør alltid velge «Image size: Large» 34

35 Knappe ikoner En kan benytte egne designede ikoner på knapper istedenfor å velge de som finnes som standard i LifeVision CMS. Størrelsen på disse bør ikke være mindre en 60x60px 35