--- title: "Funktioner för modulbaserad design i en app - App builder för modulbaserad design" description: "Njut av den bästa kodfria app buildern och skapa en vacker design till din app" canonical_url: "https://se.goodbarber.com/feature-index/design/" lang: sv --- # Modulbaserad design Njut av den bästa kodfria app buildern och skapa en vacker design till din app - [Allmän design](#generaldesign) - [Startsida](#home) - [Header](#header) - [Navigeringssätt](#navigationmode) - [Anpassning av navigeringen](#customnav) - [Meny](#menu) - [Designresurser](#design_ressources) - [Sektioner](#sections) ## Allmän 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) - ### Anpassad till varje enhet GoodBarber har designen under kontroll hela vägen från mobil till dator. Våra designelement anpassar sig perfekt till varje skärmstorlek, så att kvaliteten är densamma på alla enheter: smartphone, surfplatta, bärbar eller stationär dator. - ### Global Style Tool Styr hela stilen i din app från en enda meny: färgtema, typografi, åtgärdsknappar, hover-effekter och andra element. Skapa din design och använd den i hela din app med ett klick. - ### Hantering av bakgrundsbilder GoodBarber låter dig integrera bilder i din design och visa dem i bakgrunden. - ### Marginaler som går att anpassa Anpassa marginalerna i ditt projekt: vågräta för alla skärmar, lodräta bara för visning på mobilskärmar. - ### Hover-effekter på texter Lägg en hover-effekt på dina texter: understrykning, ljusare eller mörkare textfärg. - ### Hover-effekter på bilder Lägg en hover-effekt på dina bilder: zooma in, zooma ut eller genomskinlighet. - ### Byte av tema Du kan byta tema med ett klick och samtidigt behålla ditt navigeringssätt och projektets övergripande struktur och innehåll. - ### En lösning för varje syfte Mångfalden av mallar och bredden och kraften i de anpassningsalternativ som finns gör att du kan skapa en app som passar exakt ditt syfte. - ### Stileditor Styr dina stilar på global nivå för att säkra en sammanhängande design i appens olika vyer. - ### Ändringslogg GoodBarbers backoffice innehåller en ändringslogg där du ser historiken över alla ändringar som gjorts i ditt projekt. - ### Uppdatering av designen utan att bygga om appen Uppdateringar av projektets design kräver inte att du bygger om din app. När de är godkända träder de automatiskt i kraft och blir synliga för dina användare utan ytterligare åtgärd. - ### Bildbibliotek Spara bilder i ditt personliga bibliotek, så att du enkelt hittar dem igen senare. - ### Selektiv ändring av bildstorlek Bilder anpassas till flera storleksförhållanden, komprimeras och cachas för att träffa den bästa kombinationen av filstorlek, prestanda och visningskvalitet. Laddningstiderna optimeras utan att visningskvaliteten offras. - ### Monokrom effekt Tack vare bildeditorn i GoodBarbers backoffice kan du lägga en monokrom effekt på dina bilder. - ### Oskärpeeffekt Lägg en oskärpeeffekt på dina bilder med ett klick direkt från GoodBarbers backoffice tack vare den inbyggda bildeditorn. - ### Zoomeffekt Använd zoomeffekter när musen förs över bilderna, i datorversionen av ditt projekt. - ### Assistent för att skapa ikon och startskärm GoodBarbers backoffice erbjuder ett verktyg som hjälper dig att skapa din appikon och din startskärm helt från grunden. - ### Hantering av färgövergångar Integrera färgövergångar i designen i din app genom att välja en ur hela biblioteket (som använder tjänsten [https://uigradients.com](https://se.goodbarber.com)). När du har valt en skapas och tillämpas färgövergången automatiskt i designen i din app. - ### Genius Palette Överlåt din färgpalett till AI. Med ett klick skapar Genius Palette en sammanhängande, professionell färguppsättning, redo att användas i hela din design. - ### Design System GoodBarber vilar på ett formaliserat designsystem: grunder, atomer och komponenter plus ett bibliotek med färdiga layouter. Reglerna gäller som standard för varje sida, så att ett projekt förblir sammanhängande från vy till vy. - ### Haptisk återkoppling och animationer Native appar har ett sinnligt lager: haptisk återkoppling under fingret, mjuka övergångar från en lista till dess detaljvy, och rörelse som svarar på rullningen. - ### Former på knappar och formulärfält Bestäm formen på varje knapp i din app, fyrkantig, rundad eller rund, tillsammans med formen, storleken och etikettens placering på dina formulärfält. - ### App Walkthrough Guida dina användare genom den första starten med en interaktiv genomgång. Välj hur den visas, och gör skärmarna levande med Lottie-animationer. ## Startsida+ [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) - ### Modulbaserad startsida Startsidan är den första sektionen i din app. Den består av widgetar och är helt flexibel. Med det stora utbudet av widgetar bygger du ditt projekt så att din app blir helt sin egen. - ### Slå på eller av Du kan välja att slå på eller av startsidan i din app. Slår du av den beror navigeringen enbart på det navigeringssätt du väljer. - ### 77 widgetar Med widgetar har du en enastående frihet att organisera startsidan i din app. - ### Innehållswidgetar Content apps Gör startsidan i din app mer levande med widgetar som uppdateras automatiskt varje gång nytt innehåll publiceras i ditt projekt. - ### Navigeringswidgetar Content apps Ge direkt tillgång till de viktigaste sektionerna i din app med widgetar för navigering. Det perfekta sättet att leda din användare till kärnan i ditt projekt. - ### E-handelswidgetar eCommerce apps Skapa direkta ingångar till dina produkter och kollektioner från startsidan i din app med widgetarna för produktlistor och kollektionslistor - ### Kampanjwidget eCommerce apps Visa ett kampanjmeddelande så snart användarna kommer till startsidan i din butik. Du kan lyfta fram en produkt, en kollektion eller en lista med kollektioner. Kampanjwidgeten är mycket flexibel och hjälper dig att öka försäljningen. - ### Halvdynamiska widgetar Dessa widgetar låter dig bygga en startsida som uppdaterar sig själv varje gång nytt innehåll publiceras, samtidigt som användaren får en tydlig struktur att navigera appen efter. - ### Andra widgetar Den här kategorin samlar användbara widgetar som sökning, nyhetsbrev, annonser, nedräkning och HTML-widgetar. - ### Uppbyggnad med dra och släpp Det är enkelt att ordna de olika widgetarna på din startsida. Du drar dem bara dit du vill ha dem. - ### Sorteringsalternativ Du har ett brett urval av sätt att styra ordningen på elementen i dina innehållswidgetar: efter datum, popularitet, alfabetiskt, slumpmässigt och så vidare. - ### Antal element Antalet element en widget visar kan ställas in för varje enskild widget, så att du har största möjliga frihet att organisera din startsida. - ### Widgetar med egen kod Bygg dina egna widgetar i HTML, CSS och JavaScript, och placera dem på startsidan bredvid standardwidgetarna. ## 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 går att anpassa NavBaren är en strategisk plats i din app. Därför har du full kontroll över dess design och funktioner. Välj mellan 3 olika höjdformat (Small, Medium, Big) för att visa din logotyp, en rubrik eller en beskrivning. - ### Ikoner som går att anpassa Varje länk du lägger till i din NavBar får en ikon. Den här ikonen går att anpassa fullständigt. - ### Lägga till genvägar NavBaren kan visa upp till 6 genvägslänkar till viktiga sektioner i din app eller till externa källor. - ### Hantering av genvägar Möjligheten att anpassa utseendet på dina NavBar-genvägar gör att du kan hålla användarupplevelsen sammanhängande i hela din app. - ### Automatisk placering Utifrån antalet genvägar i NavBaren sköter appen automatiskt den bästa placeringen. - ### Genvägar som går att anpassa Designen på varje NavBar-genväg går att anpassa. Du får tillgång till ett bibliotek med över 1000 vektorikoner, kan lägga till egna ikoner och anpassa rubrikerna på länkarna. - ### Effektalternativ Content apps Lägg effekter med genomskinlighet, oskärpa eller döljning på headern. Dessa diskreta effekter kan ge din app den sista finslipningen och få den att sticka ut. - ### Automatisk styrning av effekter Effekterna läggs automatiskt på headern av GoodBarber utifrån enheten och operativsystemet appen visas på. - ### Header som kan varieras per sektion Det går att sätta upp en egen header och tillhörande NavBar för varje sektion i din app. ## Navigeringssätt+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Navigeringssätt som går att anpassa Välj navigeringssättet i din app bland de föreslagna mallarna. Varje meny går att anpassa in i minsta detalj med ett obegränsat antal kombinationer, så att varje projekt blir unikt. - ### Swipe Ett centralt navigeringssätt för appar med många sektioner. - ### Little Swipe Erbjud lodrät navigering där varje ingång i din app illustreras med en ikon. - ### TabBar En klassiker: TabBaren är ett navigeringssätt som ger snabb tillgång till de viktigaste sektionerna i din app. - ### Grid Grid visar navigeringen i din app i helskärm, där varje ingång visas med en ikon. - ### Slate Slate visar navigeringen i din app i helskärm, där varje ingång visas med text. - ### From scratch Content apps From Scratch-menyn låter dig koda din navigering genom att lägga in din egen HTML-kod. - ### Osynlig Content apps Om du inte vill visa en navigeringsmeny i din app kan du slå på det osynliga navigeringssättet. - ### Floating TabBar En TabBar lösgjord från skärmkanten, svävande över ditt innehåll. På native appar sitter den längst ner; i webbappen visas den som en banner under headern. ## Anpassning av navigeringen+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, Body & Footer Varje navigeringsmeny består av 3 olika delar: Header, Body och Footer, som alla går att anpassa. Det är inte obligatoriskt att visa Header och Footer. - ### Visning av logotyp Visa din logotyp i headern till ditt navigeringssätt genom att ladda upp logotypen eller lägga till text direkt. - ### Länk till användarprofilen Lägg till en direktlänk till användarens profil i ditt navigeringssätt. Redigera text, ikon och länkfärg. - ### Lägga till genvägar Lägg till genvägar i ditt navigeringssätt och låt användarna enkelt nå vilken sektion som helst i din app, en extern länk eller till och med utföra en åtgärd som att logga ut eller skicka ett SMS eller ett e-postmeddelande. - ### Avdelare som går att anpassa Lägg till avdelare i din navigeringsmeny och anpassa deras färg och höjd i pixlar. - ### Länkområde som går att anpassa Bygg din navigeringsmeny genom att lägga till länkar till sektioner i din app. - ### Upphovsrätt Lägg till ett upphovsrättsområde i projektets navigeringsmeny. Välj färg och text samt teckensnitt och teckenstorlek. - ### Avancerade designalternativ GoodBarber ger möjlighet till avancerad anpassning av navigeringsmenyns design. Teckensnitt, färger, justering, ikon, cellhöjd, tillägg av en rubrik och mycket mer. - ### Menyns standardvisning För menyerna Swipe, Little Swipe, Grid och Slate väljer du menyns standardläge: alltid dold eller alltid visad när appen startar. ## Meny+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 mallar för mellanmenyer GoodBarber erbjuder en Meny-sektion som ger navigering i flera nivåer i din app. Du kan välja bland 10 mallar. - ### En bild till varje element Välj en navigering där varje ingång i menyn är en högupplöst bild, så att designen blir perfekt oavsett vilken skärmstorlek din app visas på. - ### Avancerad design Lägg effekter med färgövergång eller oskärpa på bilderna. Justera textens placering och logotypvalet för dina menyingångar. - ### Automatisk uppbyggnad Utifrån antalet ingångar i din meny sköter GoodBarber placeringen automatiskt, så att visningen alltid är inbjudande. - ### Meny med egen kod Skriv din meny helt från grunden i HTML, CSS och JavaScript med den inbyggda editorn och GoodBarber App API, så att navigeringen inte liknar något annat. ## Designresurser+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Ikongalleri En samling med mer än 1000 ikoner, skapade särskilt av vårt designteam och organiserade i 3 olika uppsättningar, finns i ditt backoffice. - ### Ikoner som går att anpassa Skapa din egen ikonsamling genom att ladda upp dina egna ikoner eller bilder direkt från projektets backoffice i .png-format, 260 px x 260 px. - ### Professionella teman GoodBarbers backoffice rymmer 25 professionella teman framtagna av vårt team av erfarna designers. Inspirerade av vår mobile first-filosofi är de utformade för att anpassa sig perfekt till varje enhet, i linje med dagens trender, och de går att anpassa fullt ut. - ### Google Fonts-bibliotek GoodBarber rymmer ett urval på mer än 400 Google Fonts som kan användas direkt i backofficet utan att lägga in extra kod. - ### Pexels-bibliotek GoodBarbers kunder har tillgång till fotobiblioteket Pexels direkt från backofficet, med över 500 000 högupplösta bilder. - ### Avancerad bildsökning Pexels-biblioteket i GoodBarbers backoffice har en avancerad sökfunktion, så att du kan sortera bilder efter tema, nyckelord eller färg. - ### Egna teckensnitt Ladda upp dina egna teckensnitt, .woff2 för webbappen och .ttf eller .otf för native appar, och hitta dem i alla teckensnittsväljare i backofficet bredvid Google Fonts-biblioteket. - ### Google Material Icons Lägg till Google Material-ikonuppsättningen i din app i stilarna solid, rounded, contour och two-tone, och använd den överallt där det finns ikoner, även i navigeringsmenyn. ## Sektioner+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 olika sektionstyper GoodBarber erbjuder 30 olika sektionstyper som du kan använda för att bygga ditt projekt. - ### Avancerade inställningar för uppgifterna som visas För varje sektion väljer du vilka uppgifter som ska visas, till exempel datumet eller författaren i en artikelsektion. - ### Anpassning av verktygsfältet Content apps För varje sektion väljer du vilka åtgärder som är tillgängliga i verktygsfältet: kommentarer, delning, textstorlek och bokmärkning av elementet. - ### Tillgång till kommentarer Content apps Ge användarna tillgång till kommentarssidan från varje innehållsvy. - ### Direktlänk för delning i sociala medier Lägg till direkta delningslänkar till sociala medier på varje innehållssida. - ### Gradvis laddning av sidan Intuitiva gester låter användaren hämta fram extra innehåll vid behov när en sektion besöks. Det ger snabbare visning och bättre användarupplevelse. - ### Global svävande knapp En åtgärdsknapp som svävar över ditt innehåll och förblir tillgänglig i hela appen, med den etikett du väljer. ## Redo att bygga din app? [Kom igång gratis](https://se.goodbarber.com/create/)[Se priser](https://se.goodbarber.com/pricing/content/)