Categorie
2 Design dell'app 2.2 Menù di navigazione e Home Page Guida lamiaapp.shop Uncategorized

Widget disponibili nella sezione home

Widget disponibili nella sezione Home

La tua home page è la prima pagina visualizzata sulla tua app dopo la schermata di avvio.
In questa pagina, puoi evidenziare automaticamente il contenuto di altre pagine, aggiungere inviti all’azione, inserire link utili e altro.

Costruisci la tua sezione Home con i widget. In questa guida online descriveremo i diversi tipi di widget disponibili per le tue app GoodBarber.

Puoi aggiungere fino a 20 widget sulla tua home page.

1. Widget di contenuto

 
Questo widget mostra il contenuto delle sezioni dell’app nella tua home page.

1. Puoi scegliere di mostrare il contenuto del seguente tipo di sezioni *:
– Sezioni CMS (blog, mappa, video, calendario ecc.)
– Sezioni di contenuti esterni (WordPress, Youtube ecc.)
– Sezione utente

2. Scheda Impostazioni
– Template widget: seleziona il modello del tuo widget
– Intestazione: a seconda del modello scelto, se è disponibile un’intestazione, configurane il titolo, i caratteri, l’allineamento, i colori ecc.
– Area contenuto: a seconda del modello scelto, saranno disponibili diverse opzioni per impostare il colore e il carattere per titoli, informazioni, colore della cella, cercapersone ecc.
– Opzioni della zona di contenuto: consente di impostare le opzioni di ordinamento, il numero di elementi, informazioni ecc.
– Opzioni globali: a seconda del modello scelto, consente di impostare la miniatura predefinita, il margine, l’allineamento del contenuto, l’effetto sulle immagini ecc.

3. Scheda Fonte
Modifica l’origine del widget.

* Per poter impostare un widget di contenuto, devi prima impostare le sezioni che desideri mostrare nel tuo widget.
L’elenco delle fonti nel tuo widget dipende dalle sezioni pubblicate nella tua app.

2. Link widget

 
Questo widget ti consente di:
– Creare link a pagine interne della tua app o link esterni sulla tua home page
– Creare azione dalla tua app (chiama, invia un SMS o e-mail)
– Aprire l’URL di un’app negli store

1. Template widget, selezionare il modello del widget
A seconda del modello, il design dei pulsanti cambia:
Pulsanti di livello 1: modelli Small Slide show e Big Slide show
Pulsanti di livello 2: modelli Visual, Grid, Small Carousel e Big Carousel

2. Link
– Fai clic su “aggiungi un link” per creare il tuo collegamento
– Seleziona il tipo di link (Sezione, Azione, Link esterno, un’applicazione negli Store)
– A seconda del modello, imposta le diverse opzioni: aggiungi un’immagine, titolo e descrizione, icona, un pulsante ecc.

3. Impostazioni generali, a seconda del modello, consente di impostare margini, colore di sfondo del widget, caratteri, pulsante di azione, effetto sulle immagini, ecc.

3. Widget pubblicitario

 
Questo widget mostra gli annunci impostati nel menu monetizzazione *.

1. Seleziona la campagna
2. Seleziona il formato della tua pubblicità
3. Ripetere l’operazione in questo widget per ciascuna piattaforma iOS, Android, PWA (a seconda della tua offerta)

* Per poter impostare un widget pubblicitario, devi prima impostare la tua campagna pubblicitaria interna o esterna.

4. Widget di ricerca

 
Questo widget abilita la funzione di ricerca  sulla tua home page e reindirizza i tuoi utenti al risultato della tua sezione di ricerca *
È possibile aggiungere solo 1 widget di ricerca nella home page.

1. Seleziona la sezione di ricerca per il tuo widget
2. Imposta il design di questo widget: intestazione, area di  contenuto e opzioni globali.

* Per poter impostare un widget di ricerca, devi prima impostare una sezione di ricerca.

5. Widget Social link

 
Questo widget visualizza collegamenti agli account dei social network della tua app: Facebook, Twitter, LinkedIn, YouTube, Dailymotion, Instagram, Pinterest, Flickr, Tumblr, Dribbble e altri.

1. Seleziona il social network a cui desideri creare un collegamento
2. Ripeti l’operazione in questo widget per ciascun social network
3. Imposta l’intestazione e le opzioni globali del widget

6. Widget Newsletter

 
Questo widget ti consente di raccogliere e-mail dai tuoi utenti.

1. Scheda Design
– Imposta l’intestazione, l’area di contenuto e le opzioni globali del widget.
– Imposta un link ai Termini di utilizzo utilizzando il menu a discesa (1)

2. Scheda Iscritti
Fare clic su Esporta dati per esportare l’elenco in un file .csv

3. Vai al menu Impostazioni > Testo app
Cerca GB_WIDGET_NEWSLETTER_TOS_TEXT
Modifica il testo per far sapere ai tuoi utenti finali perché stai raccogliendo la loro e-mail (cosa farai con la loro e-mail) e chiedigli di leggere i termini di utilizzo. (1)
Avviso: non modificare il token [TOS]

(1) Richiesto dal GDPR. Il GDPR si applica a tutte le entità con sede in un paese dell’UE che elaborano dati personali, nonché a tutte le entità in tutto il mondo che elaborano dati personali appartenenti a residenti nell’UE.

7. Widget separatore

 
Questo widget mostra un separatore tra altri widget.

1. Imposta la sua altezza in pixel e il colore del widget
2. Impostare le opzioni globali del widget

8. Widget HTML

 
Questo widget ti consente di visualizzare il tuo codice HTML.

1. Inserisci l’altezza della zona del widget
2. Abilitare o meno lo scorrimento
3. Aggiungi il tuo codice HTML *
4. Fai clic su “Salva

* Il team di supporto tecnico GoodBarber non gestisce la risoluzione dei problemi relativi al codice esterno.
Il team di GoodBarber non esegue il debug di alcun codice che non ha codificato, inclusi i codici di incorporamento o iframe.
Categorie
2 Design dell'app 2.2 Menù di navigazione e Home Page Guida lamiaapp.shop Uncategorized

La home page e i suoi widget

La Home page e i suoi widgets

La tua home page è la prima pagina visualizzata sulla tua app dopo la schermata di avvio.
In questa pagina è possibile evidenziare automaticamente il contenuto di altre pagine, aggiungere call-to-action o inserire link utili.
Costruisci la tua Home con i widget.

Per impostazione predefinita, l’applicazione è precompilata con widget di diversi tipi:
Contenuto: le sezioni del contenuto
Link: un elemento di navigazione che punta su qualsiasi pagina interna o esterna.
Altro: a seconda della tua offerta (PWA o app native) puoi aggiungere widget per visualizzare i tuoi link social, raccogliere e-mail (Newsletter) ecc.

Importante: per poter aggiungere i widget di contenuto sulla tua home page, devi assicurarti di aver prima creato le pagine che desideri visualizzare nel tuo widget. L’elenco dei widget dipende dalle pagine pubblicate nella tua app.

1. Imposta la tua home page

 
1. Vai al menu a tendina sinistro La mia app > Design > Home
La colonna destra mostra l’elenco dei widget della tua home page.
 

2. La lista di widget

 
– Fai clic sul “+” verde per aggiungere un widget tra 2 widget,
– Fai clic sul cestino rosso per eliminare un widget,
– Seleziona le frecce su / giù per spostare i widget trascinandoli,
– Dai un nome al tuo widget per facilitarne la ricerca se ne hai molti,
– Usa il pulsante ON / OFF per nascondere il widget senza eliminarlo,
– Fai clic sul pulsante “Modifica” per impostare i caratteri, i colori, il layout o l’origine del widget.

3. Aggiungi un widget

 
1. Clicca sul pulsante verde “+”
2. Seleziona il tipo di widget che desideri (Contenuto, Link o altro)
3. Imposta il tuo widget

Nota: se aggiungi o rimuovi una sezione, questo aggiungerà / rimuoverà automaticamente il widget nella Home page.
Buono a sapersi: i widget link hanno modelli molto diversi. Il tipo “Lista” offre icone personalizzabili per ogni collegamento, i widget “Banner” offrono presentazioni o caroselli e i widget “Remoti” offrono una griglia.

4. Modificare o configurare un widget

 
1. Clicca su Modifica per configurare un widget dall’elenco dei widget.

A / Widget di contenuto:
Scheda Impostazioni
– Template del widget:puoi scegliere la modalità di presentazione del widget.
– Header:a seconda del template scelto, se è disponibile un header, sarai in grado di configurarne il titolo, i caratteri, l’allineamento, i colori ecc.
– Zona contenuto:a seconda del template scelto, saranno disponibili diverse opzioni per impostare il colore e il carattere per titoli, informazioni, colore della cella, cercapersona ecc.
– Opzioni della zona contenuto: consente di impostare le opzioni di ordinamento, il numero di elementi, informazioni, ecc.
– Opzioni globali: a seconda del template scelto, consente di impostare la miniatura, il margine, l’allineamento del contenuto, l’effetto sulle immagini, ecc.
Scheda Fonte
Modifica la fonte del widget.

B / Widget Link:
– Template del widget: puoi scegliere il modo in cui verrà mostrato il widget.
– Collegamenti: consente di creare i link. Clicca su “aggiungi un link” 
– Impostazioni generali: a seconda del template scelto, consente di impostare i margini, il colore di sfondo del widget, i caratteri, il pulsante della call to action, l’effetto sulle immagini, ecc.
Puoi aggiungere fino a 20 widget nella tua home page.

5. Disattiva la Home page

 
1. Vai al menu La mia app > Contenuto > Sezioni
2. Fai clic sui 3 punti, quindi su “Impostazioni” nella colonna destra del tuo back office
3. Disabilita il pulsante “Visualizza la sezione
Se la Home non viene visualizzata, la prima sezione nell’elenco dei contenuti verrà visualizzata per prima nell’app.
Categorie
2 Design dell'app 2.2 Menù di navigazione e Home Page Guida lamiaapp.shop Uncategorized

Personalizza le icone del tuo menù di navigazione

Personalizza le icone del tuo Menu di Navigazione

Quando si imposta la modalità di navigazione, è possibile mostrare le icone nel menu.
Queste icone possono essere visualizzate negli shortcuts o nella navigazione principale, a seconda del tipo di menu scelto.

Per impostare il tuo menu di navigazione:
1. Fai clic su “Menu di navigazione ” nel menu a tendina sinistro La mia app > Design
2. Fai clic su “Modifica” sotto il menu di navigazione per accedere alle sue impostazioni nella colonna di destra
3. Fare clic sull’icona che si desidera modificare, il blocco si dispiegherá
4. Fai clic su “Modifica l’icona“:
A questo punto, hai varie scelte:

– scegliere tra le 1500 icone di default fornite da GoodBarber nella scheda Collezioni 
oppure
– importare la tua icona/immagine nel back office tramite la scheda Icone personali.

1. Icone di default

 
Diversi set di icone sono disponibili nella scheda della nostra collezione:
Generic Set # 1: sfondo trasparente e logo bianco pieno.
Generic Set # 2: sfondo trasparente, solo con i bordi del logo.
I set generici # 1 e # 2, sono ordinati per tema: base, evento, meteo, ecc.
Generic Set # 3: mix di loghi per diversi tipi di pagina

1. Impostare la dimensione dell’anteprima* (16/32/64) delle icone per avere una visualizzazione migliore.
2. Seleziona l’icona di tua scelta, sostituirà automaticamente l’icona precedente.

*Cambia solo la visualizzazione nell’anteprima, non modifica la dimensione effettiva dell’icona nell’app.

2. Icone personali

 
1. Fare clic sulla scheda “Icona personale
2. Seleziona “Icona
3. Fai clic su “Sfoglia” per caricare la tua icona nel formato giusto*

*I colori e le trame scelti per il design della tua app verranno applicati solo se le tue icone sono conformi ai seguenti requisiti:
– .png
– 260 x 260 pixel

– Immagine completamente bianca (#FFFFFF) – e nessun altro colore, anche per un pixel !!!! –
– Sfondo trasparente


La lista delle icone che hai caricato verrà mostrata di seguito, nell’area Raccolta personale.

3. Immagini personali

 
L’opzione Immagine consente di caricare immagini colorate.
1. Fare clic sulla scheda “Icona personale
2. Seleziona “Immagine
3. Fai clic su “Sfoglia” per caricare la tua icona nel formato giusto*

*Affinché l’icona venga visualizzata in base alle impostazioni di design, è necessario rispettare le seguenti condizioni:
-Formato: PNG
-Dimensioni: 260 px x 260 px


La lista di immagini che hai caricato verrà mostrata sotto, nell’area Raccolta personale.
Categorie
2 Design dell'app 2.2 Menù di navigazione e Home Page Guida lamiaapp.shop Uncategorized

Menù di navigazione

Menu di navigazione

Il Menu di Navigazione consente di visualizzare il menu di navigazione principale dell’app.
Permette ai link di indirizzare l’utente verso il contenuto della tua app e/o azioni.
Quando crei una nuova sezione nella tua app, un collegamento che apre questa pagina viene automaticamente creato nel menu di navigazione.

Per impostare il tuo menu di navigazione:
1. Clicca su “Menu di navigazione ” nel menu a scorrimento di sinistra La mia app > Design

1. Scegli un template

 
1. Clicca su Seleziona sotto il template desiderato per il menu di navigazione nella colonna destra del tuo back office.
Il templare applicato è mostrato in verde.

Scegli tra i diversi menu di navigazione:
Swipe, Little Swipe, Grid, Slate, e From Scratch sono menu a cui l’utente può accedere tramite un pulsante presente nell’header dell’app.
Questo pulsante viene visualizzato nelle pagine di contenuti accessibili dalla modalità di navigazione (a meno che il menu non sia sempre visibile nella  web app o venga visualizzato dopo il lancio, a seconda delle opzioni disponibili)
TabBar  viene visualizzato nella parte inferiore dello schermo nelle app native e come banner nella web app sotto l’intestazione.
Il TabBar viene visualizzato anche nelle pagine di contenuti accessibili dalla modalità di navigazione.
– “No menu” consente di eliminare la modalità di navigazione dall’app
Da zero non è un template, ma ti permette di creare la tua modalità di navigazione personale in HTML

Nota: a seconda della modalità di navigazione scelta, il titolo delle sezioni non deve superare un certo numero di caratteri (o la fine potrebbe essere tagliata):
– Grid : 13 
– Slate : 20 
– Little Swipe : 12 
– Others : 32

2. Crea il menu

 
1. Clicca su Personalizza sotto il tuo template o seleziona un nuovo template.
2. Clicca sull’icona verde “+ Aggiungi un elemento” per aggiungere nuovi elementi* al menu.

*Gli elementi
– Separatore: elemento di design che indica una separazione
– Mostra titolo: permette di mostrare un titolo
– Link: indirizza verso una pagina, link esterno o un’azione
– Shortcuts: gruppo di collegamenti
– Logo: elemento che consente di inserire un titolo o immagine
– Il mio account: elemento che punta alla sezione profilo dell’utente
– Copyright: elemento che consente di visualizzare informazioni statiche


A seconda della modalità di navigazione che sceglierai, i vari elementi possono venire collocati in diverse zone del menu.

Swipe, Little Swipe, Grid, Slate
Queste modalità di navigazione sono suddivisi in 3 zone, contenenti i seguenti elementi:
– Header: utilizzato per dare un titolo alla pagina di navigazione, visualizzare l’account dell’utente, link e shortcut.
– Navigazione principale: la zona principale della modalità di navigazione. Contiene link o separatori.
– Footer: in fondo alla pagina, viene solitamente usato per visualizzare l’account dell’utente, il copyright, link e shortcut

TabBar
Questa modalità di navigazione si suddivide in 2 zone contenenti i seguenti elementi:
– TabBar: consente di aggiungere fino a 5 link
– Menu “Altro”: con più di 5 link nel menu, l’ultima posizione della TabBar viene dedicata al menu “Altro”, che consente l’accesso agli ulteriori collegamenti.

No menu
Questa modalità ti dà la possibilità di non scegliere una modalità di navigazione per la tua app. Ti permette di scegliere la sezione visualizzata quando l’app é aperta.

Da zero
Modello riservato per gli sviluppatori che permette di creare una modalità di navigazione personalizzata in HTML.

3. Link alle tue sezioni nel menu di navigazione

 
1. Vai al menu La mia app > Contenuto > Sezioni
2. Trascina la sezione nella “Navigazione principale” o nel menu sotto “Altre sezioni”

Il menu principale Sezioni – Navigazione principale è l’elenco delle sezioni che vengono visualizzate nel menu di navigazione principale della tua app.
L’ordine delle sezioni è uguale a quello del tuo menu:
– Ordina le sezioni dalle impostazioni del menu di navigazione o dall’elenco delle sezioni trascinandole.

Il menu in basso Altre sezioni – Sezioni utilizzate fuori dalla navigazione è l’elenco delle sezioni restanti, che non compaiono nel menu di navigazione principale dell’app.

4. Crea i link nel menu di navigazione

 
Per creare un collegamento direttamente nella parte Sezioni/ Navigazione principale del tuo menu di navigazione:
1. Vai al menu La mia app > Contenuto > Sezioni
2. Aggiungi una sezione Click-to, che si comporta allo stesso modo di un link.

Per creare un collegamento nel Footer del menu di navigazione:
1. Clicca su “Menu di navigazione ” nel menu a scorrimento di sinistra La mia app > Design
2. Clicca sul template del menu di navigazione
3. Clicca sul link in verde “+ Aggiungi
4. Scegli l’elemento “Link” nel popup che apparirà
Una volta aggiunto il link al tuo menu, clicca su di esso per configurarlo:
Titolo: questo è il testo che appare nel tuo menu
Link: questa è la destinazione a cui punta il tuo link
Metti in evidenza questo link: questa opzione consente di applicare colori e un carattere specifico al collegamento

5. Visualizza le impostazioni

 
Gestisci le opzioni di visualizzazione in ciascuna delle aree del tuo menu di navigazione.
1. Vai al menu La mia app > Contenuto > Menu di navigazione
2. Clicca sulla scheda “Impostazioni
3. Imposta per area (header, navigazione principale e footer):
– Allineamento: posizione verticale e orizzontale degli elementi del menu
– Sfondo generale: un colore o un’immagine
– Immagini/tipi di carattere e colore: visualizza un’immagine di sfondo nell’area, definisce i colori predefiniti degli elementi attivi e inattivi
– Opzioni: a seconda del template, è possibile scegliere di nascondere o visualizzare di default il menu di navigazione.