--- title: "Design modulare: funzionalità per creare un'app - Generatore di app con Design modulare" description: "Crea un bellissimo design per la tua app con il miglior app builder no-code sul mercato" canonical_url: "https://it.goodbarber.com/feature-index/design/" lang: it --- # Design modulare Crea un bel design per la tua app con il miglior app builder no-code sul mercato - [Design generale](#generaldesign) - [Home](#home) - [Header](#header) - [Modalità di navigazione](#navigationmode) - [Navigazione personalizzata](#customnav) - [Menù](#menu) - [Risorse extra per il design](#design_ressources) - [Sezioni](#sections) ## Design generale+ [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) - ### Su misura per ogni dispositivo GoodBarber progetta tutti i suoi design partendo da mobile per arrivare al desktop. I nostri elementi si adattano alla perfezione ad ogni tipo di schermo, per una visualizzazione ottimale su ogni dispositivo smartphone, tablet, laptop o desktop. - ### Gestione Global Style Gestisci lo stile generale del tuo progetto da un unico menù: tema di colori, font, pulsanti, effetti hover e altri elementi. Crea il tuo design e applicalo a tutte le sezioni della tua app in un solo click. - ### Gestione immagini di sfondo GoodBarber ti offre la possibilità di integrare delle immagini nel tuo design e disporle nel background. - ### Margini personalizzabili Personalizza i margini del tuo progetto: orizzontali per tutti i tipi di schermi, verticali solo per mobile. - ### Effetto hover nei testi Aggiungi un effetto hover ai tuoi testi: sottolineando, evidenziando o sfumando il colore del font. - ### Effetto hover per le foto Aggiungi un effetto hover alle tue immagini: zoom in, zoom out, effetto opaco. - ### Cambio di tema Cambia il tema in un clic, mantenendo la modalità di navigazione, l'architettura e il contenuto del tuo progetto. - ### Su misura per qualsiasi utilizzo La diversità di template, così come le opzioni e le possibilità di personalizzazione ti permettono di creare un'app su misura per qualsiasi utilizzo. - ### Style editor Gestisci il tuo stile a livello globale in modo da assicurare un design coerente in tutta l'app. - ### Registro delle modifiche Il back office di GoodBarber include un registro delle modifiche grazie alla quale puoi consultare la cronologia delle modifiche apportate al tuo progetto. - ### Aggiornamento design senza rigenerare l'app Gli aggiornamenti relativi al design della tua app non necessitano una rigenerazione della stessa. Una volta validati, questi saranno automaticamente visibili dagli utenti. - ### Libreria d'immagini Immagazzina delle immagini nella tua libreria personale al fine di potervi accedere in seguito per riutilizzare un determinato item. - ### Ridimensionamento delle immagini selettivo Le immagini vengono ridimensionate, compresse e immagazzinate nella cache in modo da ottenere la migliore combinazione in termini di peso e qualità di visualizzazione. - ### Effetto monocromo Grazie all'editor di immagini integrato nel back office di GoodBarber puoi aggiungere un effetto monocromo su qualsiasi immagine. - ### Effetto sfocato Aggiungi con un semplice clic un effetto sfocato alle tue immagini direttamente dal back office di GoodBarber, grazie all'editor di immagini integrato. - ### Effetto zoom Applica un effetto zoom sulle immagini al passaggio del mouse, nella versione desktop del tuo progetto. - ### Assistente alla generazione di icone e splash screen Il back office di GoodBarber ti offre uno strumento per assisterti nella realizzazione di icone e splash screen per la tua app, partendo da zero. - ### Gestione dei gradienti Utilizza dei gradienti per il design della tua app scegliendo da una ricca libreria (connessa al servizio [https://uigradients.com](https://it.goodbarber.com)). Una volta che è stato scelto, il gradiente viene automaticamente applicato al design del tuo progetto. - ### Genius Palette Affida la tua palette di colori all'IA. Con un solo clic, Genius Palette genera un insieme di colori coerente e professionale, pronto da applicare a tutto il tuo design. - ### Design System GoodBarber poggia su un design system formalizzato: fondamenta, atomi e componenti, più una libreria di layout pronti all'uso. Le regole si applicano per impostazione predefinita a ogni pagina, così il progetto resta coerente da uno schermo all'altro. - ### Feedback aptico e animazioni Le app native portano uno strato sensoriale: feedback aptico sotto il dito, transizioni fluide da una lista al suo dettaglio e un movimento che risponde allo scorrimento. - ### Forma dei pulsanti e dei campi Imposta la forma di tutti i pulsanti della tua app — quadrata, arrotondata o tonda — insieme a forma, dimensione e posizione dell'etichetta dei campi del modulo. - ### App Walkthrough Guida i tuoi utenti al primo avvio con un tutorial interattivo. Scegli come viene mostrato e dai vita agli schermi con animazioni Lottie. ## Home+ [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) - ### Home modulare La Home è la prima sezione della tua app, composta da widget e totalmente modulabile. Grazie alla grande varietà di widget disponibili, la Home ti permetterà di strutturare al meglio il tuo progetto, rendendo la tua app unica. - ### Attivare o disattivare Puoi scegliere di attivare o disattivare la sezione Home della tua app. Disattivandola la navigazione all'interno dell'app avverrà secondo la modalità di navigazione scelta. - ### 77 widget Grazie ai widget a disposizione, hai la possibilità di organizzare la tua Home in modo totalmente flessibile. - ### Widget di contenuto Content apps Rendi dinamica la home della tua app con widget che si aggiornano in modo automatico in presenza di un nuovo contenuto all'interno del tuo progetto. - ### Widgets di navigazione Content apps Offri un accesso diretto alle sezioni più importanti della tua app con widget dedicati alla navigazione. Ideale per guidare l'utente alla scoperta del tuo progetto. - ### Widget eCommerce eCommerce apps Aggiungi collegamenti diretti per i tuoi prodotti e collezioni alla Home page della tua app utilizzando il widget Elenco prodotti e i widget Elenco collezioni. - ### Widget promozionale eCommerce apps Mostra ai tuoi utenti un messaggio promozionale appena arrivano sulla Home del tuo negozio. Puoi evidenziare un prodotto, una collezione, un elenco di collezioni. Il widget promozionale è molto flessibile e ti aiuterà ad aumentare le tue vendite. - ### Widget semi-dinamici Questi widget ti permettono di costruire una home che si aggiorna automaticamente appena un nuovo contenuto viene pubblicato, in modo da avere un'architettura dell'app chiara ed intuitiva per l'utente. - ### Altri widget Questa categoria include al suo interno dei widget utili come ad esempio per effettuare una ricerca, newsletter, pubblicità, conto alla rovescia o HTML. - ### Creazione drag & drop Disponi ed organizza facilmente i widget all'interno della tua home attraverso un sistema di creazione drag & drop. - ### Ordine degli elementi Hai un'ampia gamma di possibilità per quanto riguarda l'ordine di visualizzazione degli elementi nei widget di contenuto: per data, popolarità, ordine alfabetico... - ### Numero di item Il numero di item visualizzabili da un widget è configurabile per ognuno di questi, al fine di garantirti una certa flessibilità nella gestione della home. - ### Widget in codice personalizzato Costruisci i tuoi widget in HTML, CSS e JavaScript e mettili nella home accanto a quelli standard. ## 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 personalizzabile La NavBar è una posizione strategica all'interno della tua app. In questo modo, hai il controllo completo sul suo design e sulle sue funzioni. Scegli tra 3 diversi formati di altezza (Piccolo, Medio, Grande) per visualizzare il tuo logo, un titolo o una descrizione. - ### Icone personalizzabili Ad ogni link aggiunto alla tua NavBar corrisponde un'icona, totalmente personalizzabile. - ### Aggiunta shortcut La NavBar può avere fino a 6 link utilizzabili come shortcut verso le sezioni chiave della tua app o verso link esterni. - ### Gestione shortcut L'accesso alla personalizzazione del look and feel degli shortcut della NavBar ti permette di mantenere una user experience il più coerente possibile con la tua app. - ### Disposizione automatica. In base al numero di shortcut presenti nella NavBar, l'app sceglierà automaticamente la migliore disposizione possibile. - ### Shortcut personalizzabili Il design di ogni shortcut della NavBar è personalizzabile. Accedi alla libreria con più di 1000 icone e personalizza i tuoi link. - ### Effetti di design Content apps Applica effetti di trasparenza, sfocato o a scomparsa sull'header. Questi effetti possono dare alla tua app il tocco finale, mettendoti in risalto rispetto alla concorrenza. - ### Gestione automatica degli effetti L'applicazione degli effetti sull'header è gestita automaticamente da GoodBarber, a seconda del tipo di dispositivo e del sistema operativo. - ### Header personalizzabile per sezione Un'header specifico e la relativa NavBar, possono venir configurate per ogni sezione della tua app. ## Modalità di navigazione+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Modalità di navigazione personalizzabili Scegli la modalità di navigazione della tua app tra i modelli proposti. Ognuno dei menù è personalizzabile fino all'ultimo dettaglio, permettendoti di creare un numero di combinazioni illimitate, rendendo così il tuo progetto unico. - ### Swipe Modalità di navigazione perfetta per le app che possiedono un numero importante di sezioni. - ### Little Swipe Offre una navigazione verticale dove ogni voce dell'app è rappresentata da un'icona. - ### TabBar Mai fuori moda, la TabBar è la modalità di navigazione che offre un rapido accesso alle sezioni più importanti dell'app. - ### Grid La modalità Grid offre una schermata completamente dedicata alla navigazione dell'app, dove ogni entrata è rappresentata da un'icona. - ### Slate La modalità Slate offre una schermata completamente dedicata alla navigazione dell'app, dove ogni entrata è rappresentata da un testo. - ### From Scratch Content apps La modalità "From Scratch" permette di codificare il tuo menù inserendo il tuo codice HTML. - ### Senza menù Content apps Se non desideri avere un menù nella tua app puoi scegliere la modalità di navigazione senza menù. - ### Floating TabBar Una TabBar staccata dal bordo dello schermo, che fluttua sopra i tuoi contenuti. Sulle app native si posiziona in basso; sulla web app appare come banner sotto l'intestazione. ## Navigazione personalizzata+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, Body & Footer Ogni menu di navigazione è stato pensato in 3 parti distinte: Header, Body e Footer, personalizzabili all'infinito. La visualizzazione dell'Header e del Footer non è obbligatoria. - ### Visualizzazione del logo Personalizza l'intestazione (header) della tua modalità di navigazione, caricando un logo o aggiungendo il nome del tuo brand direttamente dal back office. - ### Link al profilo utente Aggiungi un link diretto al profilo utente nel tuo menù. Configura il testo, l'icona e il colore del link. - ### Aggiungere shortcut Aggiungi shortcut al tuo menù e dai la possibilità ai tuoi utenti di accedere facilmente a una qualsiasi sezione dell'app, ad un link esterno o permetti un'azione di log out, d'invio di un sms o di un'e-mail. - ### Separatori personalizzabili Aggiungi dei separatori nel tuo menù, e personalizzane il colore e l'altezza in pixel. - ### Area link personalizzabili Crea il tuo menù aggiungendo link a specifiche sezioni dell'app. - ### Copyright Aggiungi un'area per il copyright nel menù del tuo progetto. Scegli il colore e il testo, così come il tipo di font. - ### Opzioni avanzate di design GoodBarber permette una personalizzazione avanzata del design del menù di navigazione: font, colori, allineamento, icone etc... - ### Visualizzazione del menu di default Per i menù Swipe, Little Swipe, Grid e Slate scegli lo stato del menu di default: sempre nascosto o sempre visibile al lancio dell'app. ## Menù+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 template di menù intermediario GoodBarber offre una sezione Menù che permette di aggiungere una navigazione multilivello alla tua app. Puoi scegliere tra 10 differenti template. - ### Un'immagine per ogni elemento Offri una navigazione dove per elemento del menù è presente un'immagine ad alta risoluzione, in modo da ottenere un design perfetto indipendentemente dalle dimensioni del dispositivo. - ### Design avanzato Applica degli effetti sfumati o sfocati alle immagini. Imposta la posizione del testo e la scelta del logo per ogni elemento del menù. - ### Costruzione automatica In base al numero di entrate nel tuo menù, GoodBarber realizzerà una disposizione automatica al fine di assicurare un certo equilibrio nonché un design il più possibile attrattivo. - ### Menu in codice personalizzato Scrivi il tuo menu da zero in HTML, CSS e JavaScript, con l'editor integrato e la GoodBarber App API, per una navigazione che non somiglia a nessun'altra. ## Risorse extra per il design+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Gallerie di icone Una collezione di più di 1000 icone create dal nostro team di designer e ripartite in 3 set differenti, è sempre a disposizione all'interno del back office. - ### Icone personalizzabili Crea la tua collezione personale di icone, caricando direttamente le tue immagini nel back office in formato .png 260px x 260px - ### Temi professionali Il back office di GoodBarber offre 25 temi professionali ideati dal nostro team di designer. Ispirati alla nostra filosofia 'mobile-first', si adattano perfettamente a ogni tipo di dispositivo, nonché totalmente personalizzabili. - ### Libreria Google Font GoodBarber ti propone un set di oltre 400 Google Font utilizzabili direttamente nel back office, senza dover aggiungere alcun codice embed. - ### Libreria Pexels I clienti GoodBarber possono accedere alla libreria di Pexels integrata nel back office, con oltre 500.000 immagini ad alta risoluzione. - ### Ricerca avanzata delle immagini La libreria di Pexels, presente nel back office di GoodBarber, è dotata di un motore di ricerca avanzato che permette di classificare le immagini per tema, parola chiave o colore. - ### Font personalizzati Carica i tuoi font — .woff2 per la web app, .ttf o .otf per le app native — e ritrovali in ogni selettore di font del back office, accanto alla libreria Google Fonts. - ### Google Material Icons Aggiungi il set di icone Google Material alla tua app, nei suoi stili pieno, arrotondato, contorno e bicolore, e usalo ovunque compaiano icone, menu di navigazione incluso. ## Sezioni+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 tipi di sezioni GoodBarber ti offre 30 diversi tipi di sezioni che puoi utilizzare per costruire il tuo progetto. - ### Impostazioni avanzate delle informazioni da visualizzare Scegli per ogni sezione le informazioni da visualizzare, come ad esempio la data e l'autore in una sezione Articolo. - ### Personalizzazione della toolbar Content apps Per ogni sezione puoi scegliere le azioni che sarà possibile compiere dalla toolbar: commenti, condivisioni, dimensioni del testo... - ### Accesso ai commenti Content apps Permetti ai tuoi utenti di accedere alla pagina dei commenti di qualsiasi tipo di contenuto. - ### Link da condividere sui social network Aggiungi in ogni pagina con contenuti dei link per condividerli direttamente sui social. - ### Caricamento di pagina progressivo Pochi semplici e intuitivi gesti permettono all'utente di visualizzare contenuti extra, su richiesta, mentre consulta una sezione. Questo rende più rapida la navigazione migliorando la user experience. - ### Pulsante flottante globale Un pulsante d'azione che fluttua sopra i tuoi contenuti e resta disponibile in tutta l'app, con l'etichetta che preferisci. ## Pronto a creare la tua app? [Inizia gratis](https://it.goodbarber.com/create/)[Scopri i prezzi](https://it.goodbarber.com/pricing/content/)