--- title: "Funktioner til modulopbygget design i en app - App builder til modulopbygget design" description: "Få glæde af den bedste no-code app builder til at skabe et smukt design til din app" canonical_url: "https://dk.goodbarber.com/feature-index/design/" lang: da --- # Modulopbygget design Få glæde af den bedste no-code app builder til at skabe et smukt design til din app - [Generelt design](#generaldesign) - [Forside](#home) - [Header](#header) - [Navigationstilstand](#navigationmode) - [Tilpasning af navigationen](#customnav) - [Menu](#menu) - [Designressourcer](#design_ressources) - [Sektioner](#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 enhed GoodBarber har styr på designet hele vejen fra mobil til computer. Vores designelementer tilpasser sig perfekt til hver skærmstørrelse, så kvaliteten er den samme på alle enheder: smartphone, tablet, bærbar eller stationær. - ### Global Style Tool Styr din apps overordnede stil fra én enkelt menu: farvetema, typografi, handlingsknapper, hover-effekter og andre elementer. Skab dit design, og anvend det på hele din app med ét klik. - ### Håndtering af baggrundsbilleder GoodBarber lader dig integrere billeder i dit design og vise dem i baggrunden. - ### Margener der kan tilpasses Tilpas margenerne i dit projekt: vandret for alle skærme, lodret kun for visningen på mobilskærme. - ### Hover-effekter på tekster Tilføj en hover-effekt på dine tekster: understregning, lysere eller mørkere skriftfarve. - ### Hover-effekter på billeder Tilføj en hover-effekt på dine billeder: zoom ind, zoom ud eller gennemsigtighed. - ### Skift af tema Du kan skifte tema med ét klik og samtidig beholde din navigationstilstand og dit projekts overordnede struktur og indhold. - ### En løsning til hvert formål Mangfoldigheden af skabeloner og bredden og styrken i de tilgængelige tilpasningsmuligheder gør, at du kan skabe en app, der passer præcis til dit formål. - ### Stileditor Styr dine stilarter på globalt niveau for at sikre et sammenhængende design på tværs af appens forskellige visninger. - ### Log over ændringer GoodBarbers backoffice indeholder en log over ændringer, hvor du kan se historikken over alle de ændringer, der er foretaget i dit projekt. - ### Opdatering af designet uden at bygge appen igen Opdateringer af dit projekts design kræver ikke, at du bygger din app igen. Når de er godkendt, træder de automatisk i kraft og bliver synlige for dine brugere uden yderligere handling. - ### Billedbibliotek Gem billeder i dit personlige bibliotek, så du nemt kan finde dem frem igen senere. - ### Selektiv tilpasning af billedstørrelse Billeder tilpasses flere størrelsesforhold, komprimeres og caches for at ramme den bedste kombination af filstørrelse, ydeevne og visningskvalitet. Indlæsningstiderne optimeres, uden at visningskvaliteten sættes over styr. - ### Monokrom effekt Takket være billededitoren i GoodBarbers backoffice kan du lægge en monokrom effekt på dine billeder. - ### Sløringseffekt Tilføj en sløringseffekt på dine billeder med ét klik direkte fra GoodBarbers backoffice takket være den indbyggede billededitor. - ### Zoomeffekt Anvend zoomeffekter, når musen føres hen over billederne, i computerversionen af dit projekt. - ### Assistent til generering af ikon og splash screen GoodBarbers backoffice tilbyder et værktøj, der hjælper dig med at skabe dit app-ikon og din opstartsskærm helt fra bunden. - ### Håndtering af farveovergange Integrér farveovergange i din apps design ved at vælge en fra det fulde bibliotek (som bruger tjenesten [https://uigradients.com](https://dk.goodbarber.com)). Når du har valgt en, genereres og anvendes farveovergangen automatisk på din apps design. - ### Genius Palette Overlad din farvepalet til AI. Med ét klik genererer Genius Palette et sammenhængende, professionelt farvesæt, klar til at blive anvendt på hele dit design. - ### Design System GoodBarber hviler på et formaliseret designsystem: fundamenter, atomer og komponenter plus et bibliotek af færdige layouts. Reglerne gælder som standard for hver side, så et projekt forbliver sammenhængende fra skærm til skærm. - ### Haptisk feedback og animationer Native apps har et sanseligt lag: haptisk feedback under fingeren, flydende overgange fra en liste til dens detaljevisning og bevægelser, der svarer på scrollen. - ### Former på knapper og formularfelter Bestem formen på hver knap i din app, firkantet, afrundet eller rund, sammen med formen, størrelsen og placeringen af etiketten på dine formularfelter. - ### App Walkthrough Guid dine brugere gennem den første start med en interaktiv gennemgang. Vælg hvordan den vises, og gør skærmene levende med Lottie-animationer. ## 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) - ### Modulopbygget forside Forsiden er den første sektion i din app. Den består af widgets og er helt fleksibel. Med det store udvalg af widgets kan du bygge dit projekt op, så din app bliver helt sin egen. - ### Slå til eller fra Du kan vælge at slå forsiden til eller fra i din app. Slår du den fra, afhænger navigationen udelukkende af den navigationstilstand, du vælger. - ### 77 widgets Med widgets har du en enestående frihed til at organisere din apps forside. - ### Indholdswidgets Content apps Gør din apps forside mere levende med widgets, der opdateres automatisk, hver gang der udgives nyt indhold i dit projekt. - ### Navigationswidgets Content apps Giv direkte adgang til de vigtigste sektioner i din app med widgets dedikeret til navigation. Den perfekte måde at lede dine brugere hen til kernen i dit projekt. - ### E-handelswidgets eCommerce apps Skab direkte indgange til dine produkter og kollektioner fra din apps forside med widgetsene til produktlister og kollektionslister - ### Kampagnewidget eCommerce apps Vis en kampagnebesked, så snart brugerne lander på din butiks forside. Du kan fremhæve et produkt, en kollektion eller en liste af kollektioner. Kampagnewidgetten er meget fleksibel og hjælper dig med at øge dit salg. - ### Halvdynamiske widgets Disse widgets lader dig bygge en forside, der opdaterer sig selv, hver gang der udgives nyt indhold, samtidig med at brugeren får en klar struktur at navigere appen efter. - ### Andre widgets Denne kategori samler nyttige widgets som søgning, nyhedsbrev, annoncer, nedtælling og HTML-widgets. - ### Opbygning med træk og slip Det er nemt at arrangere de forskellige widgets på din forside. Du trækker dem bare hen, hvor du vil have dem. - ### Sorteringsmuligheder Få adgang til en lang række muligheder for at styre rækkefølgen af elementerne i dine indholdswidgets: efter dato, popularitet, alfabetisk, tilfældigt og så videre. - ### Antal elementer Antallet af elementer, en widget viser, kan indstilles for hver enkelt widget, så du har maksimal frihed til at organisere din forside. - ### Widgets med egen kode Byg dine egne widgets i HTML, CSS og JavaScript, og placér dem på forsiden ved siden af standardwidgetsene. ## 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 der kan tilpasses NavBaren er et strategisk sted i din app. Derfor har du fuld kontrol over dens design og funktioner. Vælg mellem 3 forskellige højdeformater (Small, Medium, Big) til at vise dit logo, en titel eller en beskrivelse. - ### Ikoner der kan tilpasses Hvert link, du føjer til din NavBar, får tildelt et ikon. Dette ikon kan tilpasses fuldstændigt. - ### Tilføjelse af genveje NavBaren kan vise op til 6 genvejslinks til vigtige sektioner i din app eller til eksterne kilder. - ### Administration af genveje Adgangen til at tilpasse udseendet af dine NavBar-genveje gør, at du kan fastholde en sammenhængende brugeroplevelse i hele din app. - ### Automatisk placering Ud fra antallet af genveje i NavBaren sørger appen automatisk for den bedste placering. - ### Genveje der kan tilpasses Designet af hver NavBar-genvej kan tilpasses. Få adgang til et bibliotek med over 1000 vektorikoner, tilføj dine egne ikoner, og tilpas titlerne på linkene. - ### Effektmuligheder Content apps Anvend effekter med gennemsigtighed, sløring eller skjulning på headeren. Disse diskrete effekter kan give din app det sidste pust af finish og få den til at skille sig ud. - ### Automatisk styring af effekter Effekterne anvendes automatisk på headeren af GoodBarber ud fra den enhed og det styresystem, appen vises på. - ### Header der kan varieres per sektion Der kan opsættes en særlig header og tilhørende NavBar for hver sektion i din app. ## Navigationstilstand+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Navigationstilstande der kan tilpasses Vælg din apps navigationstilstand blandt de foreslåede skabeloner. Hver menu kan tilpasses ned til mindste detalje med et ubegrænset antal kombinationer, så hvert projekt bliver unikt. - ### Swipe En central navigationstilstand til apps med mange sektioner. - ### Little Swipe Tilbyd lodret navigation, hvor hver indgang i din app er illustreret med et ikon. - ### TabBar En klassiker: TabBaren er en navigationstilstand, der giver hurtig adgang til de vigtigste sektioner i din app. - ### Grid Grid viser din apps navigation i fuld skærm, hvor hver indgang er vist med et ikon. - ### Slate Slate viser din apps navigation i fuld skærm, hvor hver indgang er vist med tekst. - ### From scratch Content apps From Scratch-menuen lader dig kode din navigation ved at indsætte din egen HTML-kode. - ### Usynlig Content apps Hvis du ikke ønsker at vise en navigationsmenu i din app, kan du aktivere den usynlige navigationstilstand. - ### Floating TabBar En TabBar løsrevet fra skærmkanten, der svæver over dit indhold. På native apps sidder den i bunden; på webappen vises den som et banner under headeren. ## Tilpasning af navigationen+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, Body & Footer Hver navigationsmenu består af 3 forskellige dele: Header, Body og Footer, som alle kan tilpasses. Det er ikke obligatorisk at vise Header og Footer. - ### Visning af logo Vis dit logo i headeren af din navigationstilstand ved at uploade dit logo eller tilføje tekst direkte. - ### Link til brugerprofilen Tilføj et direkte link til brugerens profil i din navigationstilstand. Redigér tekst, ikon og linkfarve. - ### Tilføjelse af genveje Tilføj genveje i din navigationstilstand, og lad brugerne nemt komme til enhver sektion i din app, til et eksternt link eller endda udføre en handling som at logge ud, sende en sms eller en e-mail. - ### Skillelinjer der kan tilpasses Tilføj skillelinjer i din navigationsmenu, og tilpas deres farve og højde i pixel. - ### Linkområde der kan tilpasses Byg din navigationsmenu ved at tilføje links til sektioner i din app. - ### Copyright Tilføj et copyright-område i dit projekts navigationsmenu. Vælg farve og tekst samt skrifttype og skriftstørrelse. - ### Avancerede designmuligheder GoodBarber giver mulighed for avanceret tilpasning af navigationsmenuens design. Skrifttype, farver, justering, ikon, cellehøjde, tilføjelse af en titel og meget mere. - ### Menuens standardvisning For menuerne Swipe, Little Swipe, Grid og Slate vælger du menuens standardtilstand: altid skjult eller altid vist, når appen starter. ## Menu+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 skabeloner til mellemmenuer GoodBarber tilbyder en Menu-sektion, der giver navigation i flere niveauer i din app. Du kan vælge mellem 10 skabeloner. - ### Et billede til hvert element Vælg en navigation, hvor hver indgang i menuen er et billede i høj opløsning, så designet bliver perfekt uanset hvilken skærmstørrelse din app vises på. - ### Avanceret design Anvend effekter med farveovergange eller sløring på billederne. Justér tekstens placering og valget af logo til dine menuindgange. - ### Automatisk opbygning Ud fra antallet af indgange i din menu sørger GoodBarber automatisk for placeringen, så visningen altid er indbydende. - ### Menu med egen kode Skriv din menu helt fra bunden i HTML, CSS og JavaScript med den indbyggede editor og GoodBarber App API, så navigationen ikke ligner noget andet. ## Designressourcer+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Ikongalleri En samling på mere end 1000 ikoner, skabt specifikt af vores designteam og organiseret i 3 forskellige sæt, er tilgængelig i dit backoffice. - ### Ikoner der kan tilpasses Skab din egen ikonsamling ved at uploade dine egne ikoner eller billeder direkte fra dit projekts backoffice i .png-format, 260 px x 260 px. - ### Professionelle temaer GoodBarbers backoffice rummer 25 professionelle temaer, udarbejdet af vores team af erfarne designere. Inspireret af vores mobile-first-filosofi er de designet til at tilpasse sig perfekt til hver enhed, i tråd med de aktuelle tendenser, og de kan tilpasses fuldt ud. - ### Google Fonts-bibliotek GoodBarber rummer et udvalg på mere end 400 Google Fonts, som kan bruges direkte i backoffice uden at skulle indsætte ekstra kode. - ### Pexels-bibliotek GoodBarber-kunder har adgang til fotobiblioteket Pexels direkte fra backoffice med over 500.000 billeder i høj opløsning. - ### Avanceret billedsøgning Pexels-biblioteket i GoodBarbers backoffice har en avanceret søgefunktion, så du kan sortere billeder efter tema, nøgleord eller farve. - ### Egne skrifttyper Upload dine egne skrifttyper, .woff2 til webappen, .ttf eller .otf til native apps, og find dem i alle skrifttypevælgere i backoffice ved siden af Google Fonts-biblioteket. - ### Google Material Icons Føj Google Material-ikonsættet til din app i stilarterne solid, rounded, contour og two-tone, og brug det overalt hvor der er ikoner, også i navigationsmenuen. ## Sektioner+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 forskellige sektionstyper GoodBarber tilbyder 30 forskellige sektionstyper, som du kan bruge til at bygge dit projekt. - ### Avancerede indstillinger for de oplysninger, der vises For hver sektion vælger du, hvilke oplysninger der skal vises, for eksempel datoen eller forfatteren i en artikelsektion. - ### Tilpasning af værktøjslinjen Content apps For hver sektion vælger du, hvilke handlinger der er tilgængelige i værktøjslinjen: kommentarer, deling, tekststørrelse og bogmærkning af elementet. - ### Adgang til kommentarer Content apps Giv brugerne adgang til kommentarsiden fra hver indholdsvisning. - ### Direkte link til deling på sociale medier Tilføj direkte delingslinks til sociale medier på hver indholdsside. - ### Gradvis indlæsning af siden Intuitive bevægelser lader brugeren hente ekstra indhold frem efter behov, når en sektion besøges. Det giver en hurtigere visning og en bedre brugeroplevelse. - ### Global svævende knap En handlingsknap, der svæver over dit indhold og forbliver tilgængelig i hele appen, med den etiket du vælger. ## Klar til at bygge din app? [Kom gratis i gang](https://dk.goodbarber.com/create/)[Se priser](https://dk.goodbarber.com/pricing/content/)