--- title: "Funksjoner for modulbasert design i en app - App builder for modulbasert design" description: "Nyt den beste kodefrie app builderen og lag et vakkert design til appen din" canonical_url: "https://no.goodbarber.com/feature-index/design/" lang: no --- # Modulbasert design Nyt den beste kodefrie app builderen og lag et vakkert design til appen din - [Generelt design](#generaldesign) - [Forside](#home) - [Header](#header) - [Navigasjonsmåte](#navigationmode) - [Tilpasning av navigasjonen](#customnav) - [Meny](#menu) - [Designressurser](#design_ressources) - [Seksjoner](#sections) ## Generelt design+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4) - ### Tilpasset hver enhet GoodBarber har designet under kontroll hele veien fra mobil til datamaskin. Designelementene våre tilpasser seg perfekt til hver skjermstørrelse, slik at kvaliteten er den samme på alle enheter: smarttelefon, nettbrett, bærbar eller stasjonær maskin. - ### Global Style Tool Styr den samlede stilen i appen din fra én eneste meny: fargetema, typografi, handlingsknapper, hover-effekter og andre elementer. Lag designet ditt, og bruk det på hele appen din med ett klikk. - ### Håndtering av bakgrunnsbilder GoodBarber lar deg integrere bilder i designet ditt og vise dem i bakgrunnen. - ### Marger som kan tilpasses Tilpass margene i prosjektet ditt: vannrette for alle skjermer, loddrette bare for visning på mobilskjermer. - ### Hover-effekter på tekster Legg en hover-effekt på tekstene dine: understreking, lysere eller mørkere skriftfarge. - ### Hover-effekter på bilder Legg en hover-effekt på bildene dine: zoom inn, zoom ut eller gjennomsiktighet. - ### Bytte av tema Du kan bytte tema med ett klikk og samtidig beholde navigasjonsmåten din og prosjektets samlede struktur og innhold. - ### En løsning til hvert formål Mangfoldet av maler og bredden og kraften i tilpasningsvalgene som er tilgjengelige, gjør at du kan lage en app som passer nøyaktig til formålet ditt. - ### Stileditor Styr stilene dine på globalt nivå for å sikre et sammenhengende design på tvers av appens ulike visninger. - ### Endringslogg GoodBarbers backoffice inneholder en endringslogg der du ser historikken over alle endringene som er gjort i prosjektet ditt. - ### Oppdatering av designet uten å bygge appen på nytt Oppdateringer av prosjektets design krever ikke at du bygger appen din på nytt. Når de er godkjent, trer de automatisk i kraft og blir synlige for brukerne dine uten ytterligere handling. - ### Bildebibliotek Lagre bilder i ditt personlige bibliotek, slik at du enkelt finner dem igjen senere. - ### Selektiv endring av bildestørrelse Bilder tilpasses flere størrelsesforhold, komprimeres og mellomlagres for å treffe den beste kombinasjonen av filstørrelse, ytelse og visningskvalitet. Lastetidene optimaliseres uten at visningskvaliteten settes over styr. - ### Monokrom effekt Takket være bildeeditoren i GoodBarbers backoffice kan du legge en monokrom effekt på bildene dine. - ### Uskarphetseffekt Legg en uskarphetseffekt på bildene dine med ett klikk direkte fra GoodBarbers backoffice takket være den innebygde bildeeditoren. - ### Zoomeffekt Bruk zoomeffekter når musen føres over bildene, i datamaskinversjonen av prosjektet ditt. - ### Assistent for generering av ikon og oppstartsskjerm GoodBarbers backoffice tilbyr et verktøy som hjelper deg med å lage appikonet ditt og oppstartsskjermen din helt fra bunnen. - ### Håndtering av fargeoverganger Integrer fargeoverganger i designet i appen din ved å velge en fra hele biblioteket (som bruker tjenesten [https://uigradients.com](https://no.goodbarber.com)). Når du har valgt en, genereres og brukes fargeovergangen automatisk i designet i appen din. - ### Genius Palette Overlat fargepaletten din til AI. Med ett klikk genererer Genius Palette et sammenhengende, profesjonelt fargesett, klart til å tas i bruk i hele designet ditt. - ### Design System GoodBarber hviler på et formalisert designsystem: fundamenter, atomer og komponenter pluss et bibliotek med ferdige oppsett. Reglene gjelder som standard for hver side, slik at et prosjekt forblir sammenhengende fra skjerm til skjerm. - ### Haptisk tilbakemelding og animasjoner Native apper har et sanselig lag: haptisk tilbakemelding under fingeren, flytende overganger fra en liste til detaljvisningen, og bevegelse som svarer på rullingen. - ### Former på knapper og skjemafelt Bestem formen på hver knapp i appen din, firkantet, avrundet eller rund, sammen med formen, størrelsen og plasseringen av etiketten på skjemafeltene dine. - ### App Walkthrough Los brukerne dine gjennom den første oppstarten med en interaktiv gjennomgang. Velg hvordan den vises, og gjør skjermene levende med Lottie-animasjoner. ## Forside+ [https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4](https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4) - ### Modulbasert forside Forsiden er den første seksjonen i appen din. Den består av widgeter og er helt fleksibel. Med det store utvalget av widgeter bygger du prosjektet ditt slik at appen din blir helt sin egen. - ### Slå på eller av Du kan velge å slå forsiden på eller av i appen din. Slår du den av, avhenger navigasjonen utelukkende av navigasjonsmåten du velger. - ### 77 widgeter Med widgeter har du en enestående frihet til å organisere forsiden i appen din. - ### Innholdswidgeter Content apps Gjør forsiden i appen din mer levende med widgeter som oppdateres automatisk hver gang det publiseres nytt innhold i prosjektet ditt. - ### Navigasjonswidgeter Content apps Gi direkte tilgang til de viktigste seksjonene i appen din med widgeter for navigasjon. Den perfekte måten å lede brukeren din til kjernen i prosjektet ditt. - ### Netthandelswidgeter eCommerce apps Lag direkte innganger til produktene og kolleksjonene dine fra forsiden i appen din med widgetene for produktlister og kolleksjonslister - ### Kampanjewidget eCommerce apps Vis en kampanjemelding så snart brukerne kommer til forsiden i butikken din. Du kan løfte fram et produkt, en kolleksjon eller en liste med kolleksjoner. Kampanjewidgeten er svært fleksibel og hjelper deg med å øke salget. - ### Halvdynamiske widgeter Disse widgetene lar deg bygge en forside som oppdaterer seg selv hver gang nytt innhold publiseres, samtidig som brukeren får en tydelig struktur å navigere appen etter. - ### Andre widgeter Denne kategorien samler nyttige widgeter som søk, nyhetsbrev, annonser, nedtelling og HTML-widgeter. - ### Oppbygging med dra og slipp Det er enkelt å ordne de ulike widgetene på forsiden din. Du bare drar dem dit du vil ha dem. - ### Sorteringsvalg Du har et bredt utvalg av måter å styre rekkefølgen på elementene i innholdswidgetene dine: etter dato, popularitet, alfabetisk, tilfeldig og så videre. - ### Antall elementer Antallet elementer en widget viser, kan settes for hver enkelt widget, slik at du har størst mulig frihet til å organisere forsiden din. - ### Widgeter med egen kode Bygg dine egne widgeter i HTML, CSS og JavaScript, og plasser dem på forsiden ved siden av standardwidgetene. ## Header+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4) - ### NavBar som kan tilpasses NavBaren er et strategisk sted i appen din. Derfor har du full kontroll over designet og funksjonene. Velg mellom 3 ulike høydeformater (Small, Medium, Big) for å vise logoen din, en tittel eller en beskrivelse. - ### Ikoner som kan tilpasses Hver lenke du legger til i NavBaren din, får tildelt et ikon. Dette ikonet kan tilpasses fullstendig. - ### Legge til snarveier NavBaren kan vise opptil 6 snarveislenker til viktige seksjoner i appen din eller til eksterne kilder. - ### Administrasjon av snarveier Muligheten til å tilpasse utseendet på NavBar-snarveiene dine gjør at du kan holde brukeropplevelsen sammenhengende i hele appen din. - ### Automatisk plassering Ut fra antallet snarveier i NavBaren sørger appen automatisk for den beste plasseringen. - ### Snarveier som kan tilpasses Designet på hver NavBar-snarvei kan tilpasses. Du får tilgang til et bibliotek med over 1000 vektorikoner, kan legge til egne ikoner og tilpasse titlene på lenkene. - ### Effektvalg Content apps Legg effekter med gjennomsiktighet, uskarphet eller skjuling på headeren. Disse diskré effektene kan gi appen din den siste finpussen og få den til å skille seg ut. - ### Automatisk styring av effekter Effektene legges automatisk på headeren av GoodBarber ut fra enheten og operativsystemet appen vises på. - ### Header som kan varieres per seksjon Det kan settes opp en egen header og tilhørende NavBar for hver seksjon i appen din. ## Navigasjonsmåte+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Navigasjonsmåter som kan tilpasses Velg navigasjonsmåten i appen din blant de foreslåtte malene. Hver meny kan tilpasses ned til minste detalj med et ubegrenset antall kombinasjoner, slik at hvert prosjekt blir unikt. - ### Swipe En sentral navigasjonsmåte for apper med mange seksjoner. - ### Little Swipe Tilby loddrett navigasjon der hver inngang i appen din illustreres med et ikon. - ### TabBar En klassiker: TabBaren er en navigasjonsmåte som gir rask tilgang til de viktigste seksjonene i appen din. - ### Grid Grid viser navigasjonen i appen din i full skjerm, der hver inngang er vist med et ikon. - ### Slate Slate viser navigasjonen i appen din i full skjerm, der hver inngang er vist med tekst. - ### From scratch Content apps From Scratch-menyen lar deg kode navigasjonen din ved å sette inn din egen HTML-kode. - ### Usynlig Content apps Hvis du ikke ønsker å vise en navigasjonsmeny i appen din, kan du slå på den usynlige navigasjonsmåten. - ### Floating TabBar En TabBar løsrevet fra skjermkanten, svevende over innholdet ditt. På native apper sitter den nederst; i webappen vises den som et banner under headeren. ## Tilpasning av navigasjonen+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, Body & Footer Hver navigasjonsmeny består av 3 ulike deler: Header, Body og Footer, som alle kan tilpasses. Det er ikke obligatorisk å vise Header og Footer. - ### Visning av logo Vis logoen din i headeren til navigasjonsmåten din ved å laste opp logoen eller legge til tekst direkte. - ### Lenke til brukerprofilen Legg til en direkte lenke til brukerens profil i navigasjonsmåten din. Rediger tekst, ikon og lenkefarge. - ### Legge til snarveier Legg til snarveier i navigasjonsmåten din, og la brukerne enkelt komme til enhver seksjon i appen din, til en ekstern lenke eller til og med utføre en handling som å logge ut eller sende en SMS eller en e-post. - ### Skillelinjer som kan tilpasses Legg til skillelinjer i navigasjonsmenyen din, og tilpass fargen og høyden deres i piksler. - ### Lenkeområde som kan tilpasses Bygg navigasjonsmenyen din ved å legge til lenker til seksjoner i appen din. - ### Opphavsrett Legg til et opphavsrettsområde i prosjektets navigasjonsmeny. Velg farge og tekst samt skrifttype og skriftstørrelse. - ### Avanserte designvalg GoodBarber gir mulighet for avansert tilpasning av navigasjonsmenyens design. Skrifttype, farger, justering, ikon, cellehøyde, tillegg av en tittel og mye mer. - ### Menyens standardvisning For menyene Swipe, Little Swipe, Grid og Slate velger du menyens standardtilstand: alltid skjult eller alltid vist når appen starter. ## Meny+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 maler for mellommenyer GoodBarber tilbyr en Meny-seksjon som gir navigasjon i flere nivåer i appen din. Du kan velge blant 10 maler. - ### Et bilde til hvert element Velg en navigasjon der hver inngang i menyen er et bilde i høy oppløsning, slik at designet blir perfekt uansett hvilken skjermstørrelse appen din vises på. - ### Avansert design Legg effekter med fargeovergang eller uskarphet på bildene. Juster tekstens plassering og logovalget for menyinngangene dine. - ### Automatisk oppbygging Ut fra antallet innganger i menyen din sørger GoodBarber automatisk for plasseringen, slik at visningen alltid er innbydende. - ### Meny med egen kode Skriv menyen din helt fra bunnen i HTML, CSS og JavaScript med den innebygde editoren og GoodBarber App API, slik at navigasjonen ikke ligner noe annet. ## Designressurser+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Ikongalleri En samling på mer enn 1000 ikoner, laget spesielt av designteamet vårt og organisert i 3 ulike sett, er tilgjengelig i backofficet ditt. - ### Ikoner som kan tilpasses Lag din egen ikonsamling ved å laste opp dine egne ikoner eller bilder direkte fra prosjektets backoffice i .png-format, 260 px x 260 px. - ### Profesjonelle temaer GoodBarbers backoffice rommer 25 profesjonelle temaer laget av vårt team av erfarne designere. Inspirert av mobile first-filosofien vår er de utformet for å tilpasse seg perfekt til hver enhet, i tråd med dagens trender, og de kan tilpasses fullt ut. - ### Google Fonts-bibliotek GoodBarber rommer et utvalg på mer enn 400 Google Fonts som kan brukes direkte i backofficet uten å måtte sette inn ekstra kode. - ### Pexels-bibliotek GoodBarber-kunder har tilgang til fotobiblioteket Pexels direkte fra backofficet, med over 500 000 bilder i høy oppløsning. - ### Avansert bildesøk Pexels-biblioteket i GoodBarbers backoffice har en avansert søkefunksjon, slik at du kan sortere bilder etter tema, nøkkelord eller farge. - ### Egne skrifttyper Last opp dine egne skrifttyper, .woff2 for webappen og .ttf eller .otf for native apper, og finn dem igjen i alle skriftvelgerne i backofficet ved siden av Google Fonts-biblioteket. - ### Google Material Icons Legg Google Material-ikonsettet til appen din i stilene solid, rounded, contour og two-tone, og bruk det overalt der det er ikoner, også i navigasjonsmenyen. ## Seksjoner+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 ulike seksjonstyper GoodBarber tilbyr 30 ulike seksjonstyper som du kan bruke til å bygge prosjektet ditt. - ### Avanserte innstillinger for opplysningene som vises For hver seksjon velger du hvilke opplysninger som skal vises, for eksempel datoen eller forfatteren i en artikkelseksjon. - ### Tilpasning av verktøylinjen Content apps For hver seksjon velger du hvilke handlinger som er tilgjengelige i verktøylinjen: kommentarer, deling, tekststørrelse og bokmerking av elementet. - ### Tilgang til kommentarer Content apps Gi brukerne tilgang til kommentarsiden fra hver innholdsvisning. - ### Direkte lenke for deling i sosiale medier Legg til direkte delingslenker til sosiale medier på hver innholdsside. - ### Gradvis lasting av siden Intuitive bevegelser lar brukeren hente fram ekstra innhold ved behov når en seksjon besøkes. Det gir raskere visning og bedre brukeropplevelse. - ### Global svevende knapp En handlingsknapp som svever over innholdet ditt og forblir tilgjengelig i hele appen, med etiketten du velger. ## Klar til å bygge appen din? [Kom i gang gratis](https://no.goodbarber.com/create/)[Se priser](https://no.goodbarber.com/pricing/content/)