Nå til dags kan hvem som helst lage en egen nettside, nettbutikk, eller blogg.
Det finnes uendelig med annonser og reklame rundt nettløsninger, men man finner sjeldent en informativ presentasjon av hvordan det hele henger sammen.
Her har du en fullstendig guide som tar deg fra domene til nettbutikk med WordPress i bunn.
Er du forstsatt i tvil, når det gjelder valg av nettløsning, da bør du lese denne artikklen: Pagebuildere, og hvorfor de bør unngås
Trykk på lenkene for å hoppe direkte til tema.
For å kunne lage en egen nettside, trenger vi en adresse å lagre nettsiden på, denne adressen kalles for et domene. Ditt domene kan du bestemme helt selv, så fremt det er ingen andre som eier det.
Hvis du ikke er helt sikker på hva ditt domene skal være, har du noen gode retningslinjer.
Skal man lage en nettbutikk som selger varer til flere land enn Norge, anbefaler vi at du gjør en sjekk rundt noen internasjonale domener i tillegg.
Man kan enkelt sette opp en «redirect» som gjør at innkommende trafikk med utenlandsk ip-adresse, vil få en engelsk versjon av nettsiden.
For å få en oversikt om firmanavn, domenenavn, og om merkevaren er ledig, eller lite benyttet, liker vi å bruke navnesok.no som verktøy.
Nå som man har funnet ett domene som er ledig, må man kjøpe det. Man har nå rettigheter på denne nettadressen, og ingen andre kan bruke samme navn på sin nettadresse.
Om man skal lagre ting på denne adressen, for eksempel informasjonen som står på en nettside, må man kjøpe lagringsplass. Kjøper man et webhotell, vil man leie lagringsplass hos noen andre, her kan det være lurt å gjøre en liten undersøkelse over hvem du vil leie lagringsplass fra.
Vi anbefaler selvfølgelig at du bruker oss i Sircon, da vi er et 100% norskeid selskap, med gratis support, gratis SSL, WordPress, og faste priser.
Hos oss kommer WordPress og SSL-sertifikat ferdig installert, du trenger derfor ikke å tenke på å anskaffe dette.
Serverne våre driftes også på 100% fornybar energi, og under norsk personvern. Alle kundene våre bidrar derfor til at nettsider kan være et produkt av naturen, og ikke fossile brennstoff.
Før du forbinder ett domenenavn med din fremtidige nettside, er det viktig at du blir fornøyd her.
Skriv inn ønsket domenenavn, og trykk enter, eller forstørrelsesglasset til høyre.
Resultatet av søket, viser om domenet er ledig eller ikke. Om det ikke er ledig, må man prøve et annet.
Når du har funnet et domene du er fornøyd med, trykker du «registrer»
Som du ser her, er det ingen differanse på kvaliteten av det du får, vi skiller produktene våre kun på lagringsplass. Pakken «Starter» er derfor ikke dårligere enn «Pro», det er bare plass til mindre på nettsiden din, eller eventuelt i e-posten din. Skal du ha nettbutikk, bør du minimum velge «mini». Om du bare ønsker å komme igang, velger du selvfølgelig «starter». Her kan man alltids oppgradere lagringsplassen sin senere, og kun betale mellomlegget.
WordPress er det mest brukte publiseringsverktøyet i verden. Fordelen med dette, er at det er et hav av gratis tilleggstjenester og instruksjonsvideoer. Det er også noe som vil bli kontinuerlig oppdatert, og holde eksepsjonell standard i lang tid fremover. Vi anbefaler at du også velger Sircon Swift her, som er vårt egenutviklede tema designet for Gutenberg. Dette gjør nettsiden enklere å redigere, raskere, og optimalisert for alle enheter på nett.
NB: Leser du denne guiden kun for lærdommens skyld, vil vi påpeke at Sircon Swift ikke er nødvendig å ha installert for å kunne dra nytte av denne guiden.
Etter du har sett over bestillingen din, klikker du videre på «gå til kassen», du vil nå få varsel om å logge inn, eller bli kunde.
Om du ikke er kunde allerede, kan du enkelt registrere deg her
I kassen må du godta våre vilkår og betingelser, samt Norids regelverk for .no domener, hvis domenet du bestiller ender på .no
Du kan også legge til kommentarer eller eventuelle rabattkoder. Minner om at prisen du ser her, er for et helt år, totalt.
Når du er klar for å bestille, klikker du «Bekreft ordre»
Etter at bestillingen er bekreftet, kan du se oversikten over din bestilling via «bestillinger» på «min side»
NB! hvis du har bestilt et domene som slutter på .no, må man signere en egenerklæring på Norid sine hjemmesider, dette finner du her:
Du vil nå få en nettside på ditt webhotell, med både WordPress, SSL, og Sircon Swift ferdig installert.
Man mottar innlogging til WordPress via eposten du registrerte deg med, og videre instruksjoner for ditt nettsted.
For å logge inn i WordPress skriver du enkelt domenet ditt inn i nettleseren, etterfulgt av /wp-admin.
Eksempel: mittdomene1.no/wp-admin
Før man går igang med å lage produkter til nettbutikken, engasjerende innhold på bloggen, eller informative sider på nettsiden, er det viktig å vite hva man driver med.
Under dette steget vil du lære de viktigste punktene for redigering av ditt nettsted. Jo mer du kunnskap du henter herifra, jo enkelere blir det å lage en god nettbutikk, eller nettside.
Nå som du har fått innlogging til WordPress, og alt er blitt ferdig installert vil nettsiden din være tilnærmet lik denne:
Vi vil også forklare noen standariserte begrep her.
Header er en spalte i toppen på nettsiden din, denne kan du legge til bilder, logo, firmanavn og mye annet på. Man kan bestemme hvilke sider av nettsiden headeren skal vises på. Akkurat nå, er det kun menyen og logo som ligger i toppen.
Page, eller «side» på norsk, er selve «innmaten» på nettsiden din. Man må lage en side for hver enkelt kategori inne på nettsiden, slik at man faktisk kommer til informasjon, ved å trykke på knappene.
Footer er også en spalte, lik «header». Her er det populært å ha bedriftsinformasjon, en ekstra navigasjonsmeny o.l. Det er selvfølgelig helt opp til hver enkelt. Footer vil automatisk øke i høyde, ettersom informasjon legges til her.
WordPress har mange funksjoner, og mange menyvalg. Man kan fort bli litt rådvill når de kommer til å gjøre endringer på nettsiden sin, vi skal derfor ta deg gjennom de viktigste menyvalgene for selve designet, og utformingen av nettsiden.
Posts – Dette er innlegg på nettsiden din, det er meget aktuelt om du har en blogg, og vil formidle budskap til kunder, eller potensielle kunder ganske regelmessig. Her kan man lage bloggkategorier for ekstra struktur og oversikt.
Pages – Dette er som sagt sidene på nettsiden din. her kan man lage sider som «blogg», «kontakt oss», «forside», «nettbutikk» osv. Skal man f.eks lage et kontaktskjema, lager man først siden «kontakt oss» og legger inn skjema deretter.
Appearance – Dette vil bli ditt viktigste menyvalg etter pages, her finner du en rekke underkategorier, som virkelig setter struktur på nettsiden din. Det bestemmer også hvor ting plasseres.
Themes – Her finner du wordpresstema, og ser at du har Sircon Swift. Et tema lager et «layout» av nettsiden din.
Customize – trykker man her, vil man få opp en ny redigeringsmeny, denne skal vi ta for oss siden.
Widgets – En widget kan man kalle en «tillegsfunksjon» trykker du deg inn her, og klikker på «right sidebar» så vil du se de funksjonene som er lagt til her. Disse kan man bare dra ut og inn av spalten, ønsker du ikke søkefunksjon, dra den bort.
Menus – Her finner du menyer som du lager på nettsiden din. Akkurat nå finner man bare hovedmeny her, men man kan lage flere menyer via «create a new menu», og bestemme hva som skal være en del av menyen via «add menu items»
For å lage en undermeny, at «sider» og «galleri» vises under «kontakt oss» drar du de bare litt til høyre, det blir da et «sub item». (se illustrasjon ned til høyre)
Theme templates – Her finner du Ferdigredigerte maler, om du har en viss anelse om hvordan nettsiden din skal se ut, kan disse malene spare deg en del tid.
Theme settings – Her finner du settings for å endre farger, størrelse, og skrifttype på temaet ditt. vi anbefaler at man gjør seg litt kjent med denne menyen.
Plugins – Plugins er noe som gjør WordPress ganske unik, og sikkert mye av grunnen til at så mange velger nettop dette publiseringsverktøyet. En enkel forklaring er vel å kalle det «programmer» for nettsiden din. Man kan f.eks laste ned Woocommerce, som er det mest populære «programmet» for nettbutikk. Dette skal vi gjøre senere.
Man kan også laste ned «Yoast SEO», som er et program som hjelper deg å skrive på måten Google ønsker at du skal skrive innholdet ditt. Blir man god på å skrive innlegg med Yoast, vil man bli mer synlig i Googlesøk.
Under skal vi ta en titt på «customization menu».
Denne menyen vil hovedsaklig hjelpe deg med følgende:
For å komme til customization menyen trykker du på «apperance», deretter «customize». Du vil nå se en forhåndsvisning av nettsiden din, samt menyen under.
Site identity– Her bestemmer du tittel på nettsiden din, dette bør være firmanavn. Man finner også «tagline» som da kan være en beskrivende undertittel, eller motto til bedriften, eller bloggen. Man legger også til logo i dette feltet.
Colors – Ganske selvforklarende, men her kan du enkelt endre profilfargene på nettsiden din. En effektiv måte for å danne et helt nytt utseende.
Header – Velg bakgrunnsfarge på meny og menypunkter. Legg til en ekstra tag-line for sosiale media ikon med lenker. Bestemmer skrifttype i header.
Content – Bestemmer farger, skrifttype og bredde på selve nettsiden og teksten.
Footer – Farge på footer, logo, og undertekst.
Menus – Viser menyene dine, og menylokasjonen.
Widgets – Dette tema har kun en widget, dette er footer. Her kan bestemme hva footeren skal inneholde av blokker og tekst.
Homepage settings – Definer om nettsiden din skal være statisk, eller vise dine siste innlegg på forsiden. Du bestemmer også hvilken side som er forside og innleggsside.
Additional CSS – Dette menyfeltet er for å legge til ekstra kode, direkte i tema vårt. CSS regnes som en av de letteste programmeringsspråkene, om det i hele tatt regnes som et. Med css kan man gjøre alle endringene over, manuelt med kode, noe som naturligvis vil ta en del lengre tid.
Nå som du har fått en bedre forståelse av WordPress, og hvordan selve redigeringsverktøyene fungerer, skal vi starte med å lage grunnleggende design av nettsiden.
Her skal vi bestemme farger, logo og forsidebilde. I denne instruksjonen kommer vi til å finne bilder via pixabay.com, som er en nettside hvor du kan finne bilder og logoer uten copyright.
Man starter med å gå inn på customization menyen.
Deretter går vi til site identity.
Her skriver vi inn tittelen på nettsiden vår «Ditt firma AS».
Gå så videre til «change logo»
Der laster vi inn en .png-fil av logoen vår.
Vi endrer også site icon til en .png-fil.
En png-fil fremhever motivet på bilde, og gir en transparent bakgrunn. logoen vil derfor tilpasse seg alle bakgrunner.
På illustrasjonen til høyre kan du se hvilke endringer dette gjør på nettsiden, og i nettleseren din.
NB: trykk alltid på publish i det du endrer noe, det er veldig kjedelig å må gjøre det samme på nytt igjen, fordi du glemte å lagre.
Vi skal nå endre widgeten footer, dette gjør at en nettside ser mer profesjonell ut. den får da en start, og en nede på hver enkelt side.
Trykk add a widget, og legg til widgetene beskrevet under.
Text – Endre tittel til firmanavnet ditt, skriv nytting kontaktinfo i tekstfeltet.
Pages – Endre tittel til «navigasjon» og sort by Page ID. Du kan endre id på sidene dine senere, og vil da automatisk endre rekkefølgen på disse.
Image – Legg til logoen din, og under «link to» legger du til forsiden din sin URL. Ved å gjøre dette kan man alltid havne tilbake på forsiden ved å klikke på logoen, noe som er kjekt for de som besøker nettstedet.
For å rokkere på plasseringen av disse widgetene kan du dra boksene over hverandre med muspekeren.
Nå skal du over i WordPress kontrollpanel, her skal man kvitte seg med unødige sider, og lage nye.
Du går til Pages > all pages. Når du holder muspekeren over en av sidene, vil du få opp en liten meny.
Det er unødvendig å slette sider, så vi trykker bare «quick edit» på de sidene vi vil endre navnet på.
I quick edit kan du endre både tittel og slug. Slug er hva som skal komme etter domenenavnet ditt i nettadressen.
Ser du på bilde til høyre, så ville nettadressen her vært «mittdomene1.no/dameklaer» men tittelen i menyen vil være «Klær til henne».
Du kan nå endre alle sidene dine til det du ønsker at de skal hete, husk selvfølgelig å trykke «update» slik at det blir lagret.
Skal du lage en ny side, trykker du bare på «Add new» i toppen av oversikten. Du kommer nå til en blank side, her skriver du inn tittelen, trykker publish, og går tilbake via det svarte ikonet med en W i seg.
Nå som du har laget en rekke sider, som du ønsker å ha på nettsiden din, skal vi strukturere menyen.
For å komme til redigeringsmenyen. WordPress kontrollpanel > appearance > menus.
Husk å trykk «save» etter du er ferdig med dette.
Akkurat nå er både «klær til han» og «klær til henne» en egen side, det betyr at man kommer til en egen side, om man trykker på dette i menyen.
Vi vil ikke at kunder skal komme til en egen side med «klær til han/henne», men heller få opp en meny når muspekeren holdes over disse i menyen.
For å gjøre dette, må vi lage custom links.
Lag en custom link, istede for en side. Dette gjør du ved å skrive hva linken skal hete, og setter en # i URL-feltet, da vi ikke skal linke til noe.
Deretter legger du til sidene som skal vises i undermenyen. Fjern sidene «klær til han/henne», eller gå til pages og rediger navnene til «alle produkter dame / herre». Plasser custom links øverst, slik vi har gjort her. Plasser «alle produkter» under custom links, som et sub item.
Husk å trykke «save menu»
Menyen din skal nå se slik ut:
Det å lære seg redigering av sidene dine er helt essensielt for å kunne drive en effektiv nettbutikk, eller nettside generelt.
En godt utarbeidet nettbutikk er enkel å finne fram på for forbrukeren.
Selve innmaten på sidene dine, består av forskjellige blokker.
Blokkene kan stå alene, eller over hverandre, eksempelvis en knapp over et bilde.
Gå til Pages > forside.
For å få siden din til å se slik ut, følger du retningslinjene under. Dette er kun et forslag på hvordan forsiden din kan se ut. Her har vi hentet inspirasjon fra populære, og vellykkede nettbutikker.
Blokk-menyen vist på bildet til høyre, vil komme opp på hver eneste blokk.
Hvordan blokker kan redigeres varierer fra hvilken blokk du har valgt, enten det er en knapp, en overskrift osv.
På bildet ser du valg av stiler, farger, og hvis man blar nedover, vil man kunne se størrelser, rammer, på knappen.
Her må man bare gjøre seg kjent med tiden, da det finnes differanser fra hver blokk, og utallige blokker.
For å legge til en lenke, eller destinasjon på knappen din må man trykke på selve knappen, du vil da få opp en meny som omhandler dette elementet spesifikt.
Finn urlen du vil benytte som destinasjon, lim den inn i feltet som kommer opp ved å trykke på (-), deretter trykk enter.
Knappen vil nå føre kunden over til denne lenken, du kan også trykke på slideren «open in new tab» om du ønsker at kundene skal bli på siden de er på, men få opp en ny side med denne destinasjonen.
Det finnes flere valg og differeanser i denne menyen, og vi anbefaler at du gjør deg kjent med dette, på samme måte som blokk-menyen.
Husk å trykke «publish», eller «save» i høyre hjørne. Du kan også trykke «preview» for å se hvordan nettsiden din ser ut for innkommende trafikk.
NB: Vi anbefaler at du gjør deg kjent med dette på egenhånd, at du prøver og feiler litt, vi har nå vist deg noe av det grunnleggende. Som du sikkert la merke til, kan man legge inn gallerier, overskrifter, kalender, og mye annet under «browse all». Dette blir opp til deg å finne ut av videre i denne guiden.
Ble du ikke fornøyd med hvordan bildene ble presentert på siden din, anbefaler vi at du leser En liten guide på bildeformater.
Du skal nå ha de grunnleggende kunnskapene til å kunne lage nye sider, legge de til i menyen, og å legge til informasjon på disse sidene.
Prøv deg frem, og få en mestringsfølelse rundt din egen nettside.
Legg til nye sider med kontaktinfo, eller annet innhold.
Om du lurer på hvordan man lager kontaktskjema, nyhetsbrev o.l kan du finne god informasjon om dette her : fremtidig link til nettsideguides.
Bla videre nedover for å lære hvordan man setter opp en nettbutikk.
Wocommerce er WordPress sitt beste alternativ når det kommer til å lage en nettbutikk. Som plugin er den en av de mest installerte. Du kan se både rangering og tilbakemeldinger på hver eneste plugin, å lese dette kan være veldig nyttig om du er i tvil om en spesifik plugin er noe for deg, og din nettside.
For å lage en nettbutikk trenger vi å installere en plugin. For å installere plugins, går du til WordPress kontrollpanel > plugins > add new.
Her søker du opp «Woocommerce», og trykker install now. Etter at Woocommerce er installert går du til Plugins > installed plugins, og trykker «activate» på Woocommerce.
Se under for beskrivende bilder.
Det kan hende at du må laste inn siden din på nytt, for å gjøre dette kan du holde inn CTRL, Shift, og R. Etter at siden din er lastet inn på nytt, skal du se «Woocommerce» og «produkter» i ditt WordPress kontrollpanel.
Klikk deg inn på både Woocommerce og produkter, og gjør deg litt kjent her. Om det kommer opp en registreringsside for å fullføre din wordpress, kan du gjøre klikke deg igjennom denne. Vi anbefaler uansett at du ikke installerer de ulike pluginsene de anbefaler deg å laste ned, spesielt ikke Jetpack. Du kan uansett laste ned hvilke plugins du vil ved en senere anledning.
Les hvorfor du ikke bør installere Jetpaack her
Gå til categories, under products i WordPress kontrollpanel.
Under «Add new category» skriver vi «skjorter» i både name og slug.
Gi kategorien en kort beskrivelse, og trykk «add new category».
Du vil nå se at skjorter er kommet opp til høyre for hva illustrasjonen her viser.
Da dette er gjort, trykker du på «add new» under «all products», som du ser på bildet til høyre.
Når du er inne på siden for å lage et nytt produkt, vil det komme en del pop-ups fra Woocommerce. Les gjerne igjennom disse, de forklarer mulighetene for å spesifisere produkter meget godt.
Vi viser deg videre hvordan man legger til produkter i produktkategoriene, hvordan man legger til pris, og hvordan man legger til bilde på produktet sitt.
Legg til produktnavn, og en beskrivelse av produktet i første Tekstboks.
Bestem pris, og eventuelt rabbatert pris. Merk: her kan du legge til om produktet er på salg, eller eventuelt hvilken dato den skal være rabattert, via .
videre skal vi gjøre følgende, og trykke publish.
Legg til minimum fire produkter, i samme produktkategori, før du går videre til neste steg.
Du går til den aktuelle siden, der du ønsker at produktene fra netbutikken, under riktig produktkategori skal vises, og trykker rediger.
Trykk på plusstegnet, deretter «browse all». På menyen til venstre blar du deg ned til Woocommerce, og trykker «products by category».
Som du sikkert ser, er det mange valgmuligheter her, disse oppfordrer vi deg til å bli bedre kjent med. Du kan for eksempel sortere produkter etter tags, som for eksempel merkenavn, dette kan også gjøre din nettbutikk mer attraktiv for kunder som er opptatt av merkevarer.
Videre trykker du på at du ønsker at produktkategorien «skjorter» skal vises her, så bestemmer du hvordan disse produktene skal fremstilles på siden din. Se bilde under.
Du kan nå trykke Publish, eller preview, og se hvordan nettsiden din ser ut så langt.
Du skal nå kunne lage flere produkter og produktkategorier, og begynne å forme en skikkelig nettbutikk.
Hvis du klikker deg videre på produktene dine, og prøver å utføre en betaling, så ser du at det ikke fungerer.
Grunnen til dette, er fordi du ikke har lagt til en betalingsløsning enda. Vi anbefaler derfor at du leser guide for oppsett av stripe til din nettbutikk.
Etter at du har gjort dette, kan kundene din betale med visa, mastercard, og vipps. Du vil få pengene direkte inn på ønsket konto.
Det korte svaret er via å øve, og gjøre seg kjent med systemet.
Denne guiden gjør deg selvfølgelig ikke til en profesjonell webdesigner, men du får en veldig god start for å opprettholde nettstedet ditt.
WordPress er verdens mest brukte CMS, hele 35% av alle verdens nettsider er bygget på WordPress, en meget stor andel nettbutikker er også derfor bygget med Woocommerce.
De andre publiseringsverktøyene på markedet, drar også ofte inspirasjon fra WordPress, da det er markedsdominant og en gjennomtenkt løsning.
Tiden du bruker på å bli bedre med WordPress som verktøy vil derfor aldri være bortkastet.
Utfordring – lag fungerende lenker fra knappene på forsiden, og til ønskede sider på nettsiden, eller landingssider. Fullfør din nettbutikk.