Designbygger (24Next)

 

Om designbyggeren

Designbyggereren er et brukervennlige verktøy for å tilpasse designet i nettbutikken din.
Målet er at du enkelt skal kunne bygge et unikt design som passer best for din bedrift og dine produkter. Vi tror det gir mer frihet at du lager egne malvarianter, fremfor at vi tilbyr faste maler.

Designbyggeren er delt inn i fire seksjoner: Topp, Innhold, Bunn og Globale innstillinger.

• Topp og Bunn styrer header og footer, som vises på alle sider i butikken.

• Innhold brukes til forsiden av nettbutikken.

• Globale innstillinger påvirker overordnet design og innstillinger, og er den eneste seksjonen uten blokker.

Alle seksjoner (bortsett fra Globale innstillinger) gir deg muligheten til å legge inn blokker med et stort utvalg innhold. Her anbefaler vi å prøve deg frem for å finne det uttrykket som passer best.
Alle blokker kan enkelt flyttes rundt med drag and drop, slik at du kan bestemme rekkefølgen de vises i.

• Topp
  

  Alt du legger inn og endrer her, påvirker toppen av din nettbutikk.
  Header seksjonen i toppen, er en av de viktigste seksjonene i din nettbutikk, da den blant annet inneholder din hovednavigasjon. Headeren inneholder også ikoner for søk, favoritter, min side og handlekurven.
  Du kan velge blant flere design varianter av header, så gjerne prøv alle sammen for å finne den du liker best. Du har også mulighet til å legge til kampanjelinjer (USP'er) over og under header.

• Innhold
  

  Alt du legger til i innhold legger seg mellom topp og bunn, og vil være den seksjonen som oftest har mest blokker. Her har du mange muligheter for å legge til tekstinnhold, produkter og bildegridder mm. Denne seksjonen gir deg mange muligheter for å bygge en moderne og selgende nettbutikk.

• Bunn
  

  Alt du legger til i bunn legger seg under innhold, og er seksjonen nederst på forsiden som inneholder footeren.
  
  En footer på en nettbutikk er den nederste delen av butikken, som vanligvis inneholder kontaktinformasjon, navigasjonslenker, copyright-informasjon og andre nyttige detaljer. Den er en viktig del av nettsidens design og funksjonalitet, og bidrar til en god brukeropplevelse.
  
  De eneste blokkene du kan legge til i bunnen, sammen med footeren, er Nyhetsbrevspåmelding og kampanjelinje.

• Globale

  Globale innstillinger påvirker innstillinger for hele din butikk, så den skiller seg litt fra de andre seksjonene, som kun påvirker forsiden din. 
  Det er her du finner Malinnstilinger, som gir deg mulighet til å bestemme bildeformat, bredde på innholdet i butikken, fonter, farger osv. 
  I tillegg så har du mulighet til å legge til Sosiale medier lenker, og laste opp partnerlogoer. 

Under er et eksempel på en designbygger med blokker lagt til i alle seksjonene. 

Topp

Headeren er kanskje den viktigste seksjonen i nettbutikken din, ettersom den inneholder hovednavigasjonen.

I headeren finner du også:

• Ikoner med lenker til handlekurv, «Min side» og favoritter

• Logoen din

• Søkefeltet

Vi tilbyr flere varianter av headeren som endrer både design og plassering av elementene. Test de ulike variantene og finn den som passer best for din butikk.

Hovednavigasjonen er alltid koblet til headeren, og plasseringen bestemmes av valgt variant. Du kan derfor ikke endre denne manuelt.

En god hovednavigasjon er avgjørende i en nettbutikk fordi den:

• Forbedrer brukeropplevelsen

• Øker sjansen for salg og konverteringer

• Bidrar til bedre kundetilfredshet

• Hjelper kundene å finne produkter raskt og enkelt

• Gir bedre søkemotoroptimalisering (SEO)

• Øker sannsynligheten for at kundene blir lengre i butikken

I innstillinger for header, kan du selv endre:

• Bakgrunnsfarge på header

• Ikonfarge i header

• Bakgrunnsfarge på hovednavigasjon

• Tekstfarge i hovednavigasjon

• Logo (last opp grafisk fil)

• Tekstlogo (hvis du ikke har grafisk logo)

I toppseksjonen kan du legge til kampanjelinjer, også kalt USP-er (Unique Selling Points).

En kampanjelinje er en horisontal linje som strekker seg i full bredde på nettsiden din. Den brukes til korte og tydelige budskap som fremhever hva som gjør nettbutikken din unik – hvorfor kundene skal velge deg fremfor konkurrentene. Kampanjelinjer plasseres ofte øverst på siden, slik at de blir blant de første elementene kundene ser.

Du kan legge til så mange kampanjelinjer du ønsker, og dra dem dit du vil i toppseksjonen.

Tilpasningsmuligheter:

• Velg bakgrunnsfarge

• Velg tekstfarge

• Bruk teksteditoren for å finpusse innholdet

Innhold
Alt du legger til i innhold legger seg mellom topp og bunn, og vil være den seksjonen som oftest har mest blokker. Denne seksjonen gir deg mange muligheter for å bygge moderne og selgende nettbutikk.

I innhold kan du legge til følgende blokker:

• FAQ - Ofte stilte spørsmål

  Her kan du sette inn en av FAQ-ene du har opprettet i adminpanelet, og samtidig velge bakgrunnsfarge og tekstfarge.

  I Norge brukes vanligvis forkortelsen FAQ, men uttrykket «ofte stilte spørsmål» er også vanlig.

  En FAQ er rett og slett en samling spørsmål og svar som handler om bedriften eller temaer som er relevante for kundene dine.
  Spørsmålene kan for eksempel handle om:

  • Produktene du selger i nettbutikken

  • Tjenestene du tilbyr

  • Frakt og retur

  • Miljøansvar

  • Åpningstider

  Kort sagt kan spørsmålene handle om hva som helst – så lenge de er relevante for målgruppen din.

  Les mer om hvordan du oppretter FAQ'er her.
  
  
  

• Tekstinnhold
  

  Her får du tilgang til en avansert teksteditor med mange muligheter, blant annet:

  • Formatere tekst
    Endre skrifttype, størrelse, farge, samt bruke fet, kursiv, understreket eller gjennomstreket tekst.

  • Legge til lenker
    Sett inn lenker til andre sider i butikken eller til eksterne nettsteder.

  • Sette inn bilder og videoer
    Last opp egne bilder eller legg dem til via URL. Videoer kan enkelt embeddes fra f.eks. YouTube.

  • Lister og tabeller
    Lag punkt- og nummerlister, eller bygg enkle tabeller.

  • Justering og innrykk
    Plasser tekst til venstre, høyre eller midtstilt, og bruk marginnrykk ved behov.

  • Kodevisning
    Bytt til HTML-visning for mer avanserte tilpasninger.

  Denne teksteditoren gjenbrukes over hele butikken, så gjerne bruk litt tid på å sette deg inn i de mange mulighetene du har.
  
  

• Produktslider
  

  Denne blokken gir deg mulighet til å vise produkter fra kategorier, som en karusell/slider. Dra og slipp dem enkelt i den rekkefølgen / posisjonen på forsiden du måtte ønske.
  
  
  
  Du kan ha flere produktslidere på forsiden, så det er ingen problemer med å vise flere kategorier samtidig.
   
  Et lite tips kan være å endre bakgrunn og tekstfarge på disse. Et eksempel kan være å gi f.eks. en  slider med Black Week tilbud, sort bakgrunn og hvit tekst. Bruke fargevalgene du har, for å skape et selgende og profesjonelt design. 
  
  Vi anbefaler at du legger til en tittel som vises over produktsliderne, så det er ingen tvil for dine kunder hva de ser på. Du bestemmer selv hvilken rekkefølge produktene skal vises i, og du kan også vise utsolgte produkter. 
  
  
  
  

• Produktgrid
  

  Denne blokken gir deg mulighet til å vise produkter fra kategorier, som en grid/rutenett.
  Dra og slipp dem enkelt i den rekkefølgen / posisjonen på forsiden du måtte ønske.
  
  
  
  Du kan ha flere produktgrids på forsiden, så det er ingen problemer med å vise flere kategorier samtidig. 
  
  Et lite tips kan være å endre bakgrunn og tekstfarge på disse.
  Et eksempel kan være å gi for eksempel en grid med Julesalg, rød bakgrunn og hvit tekst. 
  
  Vi anbefaler at du legger til en tittel som vises over produktgridene, så det er ingen tvil for dine kunder hva de ser på.
  
  Du bestemmer selv hvilken rekkefølge produktene skal vises i, og du kan også vise utsolgte produkter. 
  
  
  
  
  

• Bildegrid
  

  Denne blokken består av flere bilder plassert i et rutenett, noe som gir et ryddig, oversiktlig og responsivt design.
  
  
  
  Du bestemmer selv hvor mange kolonner gridden skal inneholde. Du kan legge til en tittel som vises over gridden, og du kan lenke bildene enkelt til interne og eksterne sider.
  
  
  
  Ikke glem å gi bildene en bildetekst (Alt tekst) for bedre SEO og brukervennlighet.
  
  
  
  Det er smart å linke bildene i grid til kategorier, produkter, infosider osv. 
  
  En bildegrid kan være en smart løsning, for å enkelt lage et pent og selgende design i din butikk. 

• Nyhetsbrevpåmelding
  

  Statistikk viser at nyhetsbrev har meget god konvertering, så vi har gitt deg muligheter for å fremheve dette for dine kunder. 
  
  
  
  Vi har designet 4 varianter av denne blokken, hvor du enkelt kan legge til egen selgende tekst og bilder (Merk! kan kun bruke bilde å variant 3 og 4). 
  
  Du har egne valg for tekstfarge og bakgrunnsfarge, og du kan selvsagt vise hvor mange påmeldingsblokker du selv måtte ønske på forsiden.
  
  Test ut alle variantene vi har laget, for å finne den som passer deg og ditt design best.
  
  
  

• Bildeslider
  

  En bildeslider er et visuelt element som viser flere bilder i en roterende visning, enten automatisk eller ved at kunden klikker seg gjennom dem. 
  
  
  Den fungerer som en “slideshow” og kan plasseres ved hjelp av dra og slipp, plasseres hvor som helst i innholds seksjonen.
  
  Du kan laste opp så mange bilder som du måtte ønske i bildekarusellen, men vi anbefaler ikke at du bruker for mange. Dette er fordi statistikk viser at de fleste kunder ikke sitter og blar gjennom mange slides i en karusell. Da er det kanskje bedre å bruke flere karuseller spredt utover, noe som du nå får med 24Nettbutikk Next. 
  
  Du har valg for fullbredde, og hvert enkelt bilde kan lenkes til en nettadresse (Url). 
  Det er også ulighhet for å slå av og på piler, prikker (viser antall bilder i en karusell) og bestemme intervallen for bildebytte. 
  Ikke glem å gi bildene en bildetekst (Alt tekst) for bedre SEO og brukervennlighet.
  
  
  
  I tillegg til å vise faste bilder i en karusell, har du også mulighet til legge til innholds slides. Kort forklart er dette bilder hvor man kan skrive egen tekst på toppen av bildet med HTML. Det er mange fordeler med dette, spesielt når det gjelder SEO og Google rating.  Dette er også et godt verktøy for deg som kanskje ikke vet hvordan man legger tekst på et bilde med feks et bilderedigeringsprogram. 
  
  
  
  Valge for å bytte til innholds slidsene får du når du trykker for å redigere et bilde (ha musen over et bilde i listen og trykk på blyanten)  du allerede har lagt til i karusellen.
  
  Det første valget du får her er Tittel.
  Dette blir den store overskriften i toppen av innholdet ditt (i dette tilfellet ytterjakker) .
  Når du skriver inn tittel, så har du valg for farge og størrelse. Plassering velger vi senere. 
  
  
  Neste valg er tekst. Dette er teksten som kommer under tittelen,  men over knappen om du velger å bruke den. Du kan sammeligne denne teksten med ingressen på en produktside. Gi en kort liten forklaring på hva slidens budskap er. Bruk teskt til å utdype tittelen. Du har de samme valegne her, som du har på tittel. 
  
  Knapp er det siste valget man har i innhold. Vi vet at ved å bruke c2a knapper, så øker du konverteringen  butikken din. En godt synlig knapp med gode kontrastfarger, blir et blikkfang som tar kundenes oppmerksomhet. Du har litt flere valg her, blant annet muligheten for  en bakgrunnsfarge og skygge. Uthevet gjør at du får en ramme, med tekst i midten. 
  
  Da er det på tide å bestemme plasseringen av teksten. Dette gjør man under fanen overlay. Valgene her er ganske selvforklarende, og man ser hvordan det blir seende ut mens man holder  på å redigere. Prøve å justere innhold slik at feks teksten ikke legger seg på toppen av produktet du ønkser å vise frem i karusellbildet.  Er teksten feks hvit og modellen har en hvit jakke, så kan dette gjøre teksten mindre lesbar. 
  
  Overlegg  hjelper deg med synligheten av tekst mot bakgrunnen. Er det et rotete bilde med mange farger, så kan det hende at uansett hvilken farge og posisjonering man bruker på tekst og knapp , så blir deler vanskelig å se. Overlegg legger seg mellom innholdet og bildet. Her kan man deretter velge seg en farge, og justere gjennomsiktigheten, for å gjøre innholdet mer synlig.
     
  
  

• Kontaktskjema (Forms)

  Et kontaktskjema lar brukere sende inn informasjon, spørsmål eller henvendelser direkte til deg.
  Skjemaet inneholder som regel felt for navn, e-postadresse, telefonnummer og en meldingsboks. Det fungerer som en effektiv kommunikasjonskanal mellom bedriften og både potensielle og eksisterende kunder.

  For bedrifter er kontaktskjemaet et viktig verktøy for leadsgenerering og kundeservice.
  Det gir besøkende en lavterskel måte å ta kontakt på, samtidig som bedriften får verdifull informasjon som kan brukes i salgs- og markedsføringsarbeid. Et godt utformet kontaktskjema kan både øke konverteringsraten og forbedre brukeropplevelsen.

   Les mer om hvordan du oppretter skjemaer her.

  
  
  

• Bilde med tekst

  Har har du et enkelt verktøy for å kunne sette tekst og bilde ved siden av hverandre, og designe fine og moderne innholdsblokker. 

  
  
  
  Du har flere designvalg, som gjør at du kan lage flere variasjoner av denne blokken. 
  Velg selv om blokken skal gå ut i full bredde, eller følge bredden på resten av innholdet i butikken din. Du kan også enkelt velge om bildet skal være til høyre eller venstre for teksten. 
  
  Teksten endrer du i teksteditoren vi har, og du har mange muligheter for formatering. 
  Anbefaler at du også leker litt med bakgrunnsfargen og tekstfargen, for å lage fine kombinasjoner. 
  
  

 

Bunn

Den nederste delen av nettbutikken din, og inneholder footeren.
Vi tilbyr flere varianter av footer, med ulik plassering av innhold. Utforsk de ulike variantene og mulighetene de gir, slik at du kan velge den som passer best for din butikk.

Statistikk viser at footeren er en av de minst besøkte delene av en nettbutikk. Derfor egner den seg best til generell informasjon, fremfor kampanjer og nyheter. De som går helt ned til footeren gjør det ofte fordi de ser etter opplysninger eller kontaktinformasjon før de eventuelt handler.

Det er vanlig å inkludere:

• Kontaktinformasjon

• Lenker til sosiale medier

• Partnerlogoer

• Generelle kundeservice- og innholdssider

Firmainformasjon hentes automatisk fra firmaopplysningene i admin.

Du kan enkelt opprette så mange sider du ønsker i nettbutikken, og knytte dem til menyer.

• [Les mer om hvordan du oppretter innholdssider her.]

• [Les mer om hvordan du oppretter menyer her.]

Tips: Partnerlogoer og lenker til sosiale medier legges inn under seksjonen Globale innstillinger.

Her er et eksempel på en footer med innholdsmenyer, kontaktinformasjon, partnerlogoer, sosiale medier og en bunndel med faste sider.

   

Bunndel er en linje helt nederst, hvor vi har lagt til  noen faste sider som er pålagt i din butikk, og vår Copyright signatur. 

I innstillinger for footer har du mulighet til å:

• Velge variant
• Legge til menyer, som kan inneholde, sider, produkter, kategorier eller FAQ'er.
• Endre bakgrunnsfarge
• Endre tekstfarge
• Endre farge på bunndel
• Endre tekstfarge på bunndel
  
  

Bunn seksjonen har i tillegg til footer, mulighet for å vise nyhetsbrev og kampanjelinjer blokker.

 

Global

Den eneste seksjonen i designbyggeren som ikke inneholder blokker, er Globale innstillinger.
Her justerer du innstillinger som gjelder for hele butikken, ikke bare forsiden.

Globale innstillinger er delt inn i tre deler: Malinnstillinger, Sosiale medier og Partnerlogoer.

Vi starter med de to siste valgene, før vi til slutt går grundig gjennom alle mulighetene under Malinnstillinger.

• Sosiale medier
  

  Her kan du legge inn lenker til dine sosiale mediekontoer.
  Når du legger til en lenke, vises ikonet automatisk i footeren.
  Dersom vi mangler et sosialt medium du bruker, setter vi pris på om du gir oss beskjed.
  
  

• Partnerlogoer

  Partnerlogoer kan inneholde logoer fra ulike fraktleverandører og betalingstilbydere, som for eksempel PostNord og Klarna. Vi har allerede lastet opp noen standardlogoer du kan bruke, men du kan også enkelt laste opp egne og legge til lenker.

  I tillegg kan du laste opp merker eller pins.
  Har du vunnet en pris (som «Årets nettbutikk»), er autorisert forhandler eller oppfyller spesifikke miljøkrav? Da anbefaler vi at du viser dette frem til kundene dine.

  Du kan ikke selv bestemme plasseringen av partnerlogoene i footeren, men du kan enkelt endre rekkefølgen på dem.

  
  

• Malinnstillinger
  

  Her får du mange muligheter for å endre på innstillinger, som vil påvirke designet på hele din butikk. Dette er instillinger som hjelper deg med å finpusse designet, og finne den looken du leter etter.
  
  Her finner du valg som:
  
  Skrifttype overskrifter
   Velg skrifttypen som skal brukes på alle overskriftsnivåer. Dette avgjør hvordan side- og seksjonstitlene dine vises
  
  Skrifttype brødtekst
  Velg skrifttypen som skal brukes for all vanlig brødtekst (avsnitt, lister, bildetekster og annet ikke-overskriftsinnhold)
  
  Maks bredde på innholdet
  Setter maksimal bredde på innholdsområdet i nettbutikken din. Dette påvirker hvor bredt tekst og bilder kan vises
  
  Produktboksramme
  Bestemmer om produktboksene skal ha en ramme rundt seg.
  
  Passform produktbilder
  Her kan du velge å vise produktbildet i det formatet bildet er lastet opp i ,eller om det skal skaleres slik at det alltid dekker hele elementet
  

  Her er litt mer detaljert forklaring:

  • Bildet blir skalert proporsjonalt (forholdet mellom bredde og høyde beholdes).

  • Det skaleres akkurat nok til å dekke hele elementets bredde og høyde.

  • Dersom bilde og element har ulikt sideforhold, vil deler av bildet bli beskåret (klipt bort) for å fylle hele flaten.

  • Dette gjør at du aldri får "luft" eller tomme områder i bakgrunnen, men du kan miste noe av bildet i kantene.

  Produktbildeformat
  Et bildeformat beskriver forholdet mellom bredden og høyden på et bilde eller en skjerm. Det angis som et forholdstall, f.eks. 1:1, 4:3 eller 16:9. Det sier ingenting om hvor mange piksler bildet har, kun proporsjonen mellom bredde og høyde.
  
  Eksempler på vanlige formater:
  
  1:1 → Kvadratisk bilde (f.eks. 500px x 500px, eller 1080px x 1080px).
  Brukes mye på Instagram og profilbilder.
  4:3 → Mer “klassisk” bildeformat (f.eks. 1200px x 900px). Vanlig i eldre TV-skjermer og noen kameraer.
  16:9 → Rektangulært bilde (f.eks. 1920px x 1080px). Standard for HD-video, YouTube og de fleste skjermer i dag.
  3:2 → Kameraformat som ofte brukes i speilrefleks (f.eks. 3000px x 2000px). Vanlig til stillbilder.
  9:16 → “Omvendt” 16:9, altså vertikalt (f.eks. 1080px x 1920px). Brukes til Snapchat, TikTok, Instagram Stories og Reels.
  
  Hjørneavrunding
  

  Denne innstillingen justerer hvor avrundede hjørnene på elementer i nettbutikken skal være.

  Ønsker du for eksempel avrundede knapper og bilder i stedet for rette, firkantede hjørner, kan du justere dette her.
  
  Call to action farge
  Dette er bakgrunnsfargen på knapper og andre elementer som er trykkbare eller skal ta oppmerksomheten til dine kunder. 
  
  
  
  Call to action tekstfarge
  Dette er tekst på knapper og andre elementer som er trykkbare eller skal ta oppmerksomheten til dine kunder.
  
  Farge overskrifter
  Dette setter en farge på alle overskrifter i butikken, om du ikke selv har satt farge i designbygeren eller i teksteditoren.
  
  Badge bakgrunnsfarge
  Setter bakgrunnsfargen på badge. Dette er et element du kan legge til dine produkter, som vil vise en tekst på produktbildet. Et eksempel på dette kan være Black Friday, Julesalg osv.
  
  
  
  Badge tekstfarge
  Setter tekstfargen på badge. Dette er et element du kan legge til dine produkter, som vil vise en tekst på produktbildet. Et eksempel på dette kan være Black Friday, Julesalg osv.

  
  

  Brødsmuler bakgrunnsfarge
  Setter bakgrunnsfarge på brødsmuler i toppen av en kategori.

  Brødsmuler (breadcrumbs) i en nettbutikk er en navigasjonsfunksjon som viser deg hvor du er på nettstedet og hvordan du kom dit, vanligvis som en lenket sti fra hjemmesiden til den aktuelle siden. Dette gir deg som bruker en enkel måte å holde oversikt og navigere tilbake i nettbutikken, og hjelper søkemotorer med å forstå sidens kontekst.

  
  
  Tekstfarge brødsmuler
  Setter tekstfarge på brødsmuler i toppen av en kategori. 

   

  Oppsummering

  Takk for at du tok deg tid til å lese denne support artikkelen om vår nye design bygger. 
  Husk at dette er første versjon av dette verktøyet, og vi vil jobbe kontinuerlig med å forbedre den.
  
  Nye funksjoner er allerede under utvikling, og vi har mange ideer for forbedringer. 
  
  Har du noen forslag eller ønsker til ny funksjonalitet eller forbedringer av eksisterende valg, ikke nøl med å sende en e-post  om dette til support@24nettbutikk.no eller design@24nettbutikk.no.
  Gjerne merk e-posten med "designbygger".