Categorie
2 Design dell'app 2.3 Design delle sezioni Guida lamiaapp.shop Uncategorized

Nascondi la sfumatura sulle immagini

Nascondi la sfumatura sulle immagini

Questo tutorial funziona per qualsiasi pagina CMS, ti mostreremo come fare prendendo come esempio la pagina Mappa.

Nella pagina della mappa, per impostazione predefinita, viene applicato un effetto sfumato alle immagini.
È possibile nascondere questo gradiente.

Per fare ciò, è necessario prima attivare l’add-on Accesso API dallo store add-on.

Questa opzione è gratuita con l’abbonamento Full e può essere acquistata per ulteriori €4/mese con i piani Standard.

1 – Apri il menu a comparsa alla sinistra del tuo back office
2 – Clicca su “Add-On
3 – Clicca su “Catalogo” nel menu Add-On
4 – Scorri in basso fino alla fine della pagina
5 – Scegli l’add-on Accesso API
6 – Clicca su “Altre informazioni
7 – Clicca il bottone verde “+” per attivarlo

L’add-on Accesso API è attivato e la scheda JSON viene visualizzata in alto a destra nella colonna destra del tuo back office.

1. Aggiungi la dicitura “hideGradient=1”

 

1- Vai al menu a scorrimento di sinistra La mia app> Design> Sezioni
2- Clicca sulla sezione mappa nella colonna a destra
3- Seleziona la scheda JSON
4 – Cerca l’oggetto “detail
5 – Clicca sul segno +  affianco a “detail
In basso verranno mostrati i suoi contenuti
6 – Clicca su “Add property“* alla fine della lista sotto l’oggetto “detail”
7- Inserisci la proprietà hideGradient
8- Clicca “Ok
9- Aggiungi il valore 1 accanto alla proprietà hideGradient, sotto l’oggetto “detail”
10- Clicca su “Salva” in fondo alla pagina

* Il collegamento viene visualizzato se si sposta il mouse nella parte inferiore dell’elenco “detail”.
Viene visualizzata una finestra pop-up.

2. Aggiorna le modifiche Json

 

1 – Apri il menu a scorrimento di sinistra nel tuo back office
2 – Clicca su Pubblica > Aggiorna
3 – Clicca su “Changelog” nel menu Aggiorna
4 – Clicca sul pulsante verde “Aggiorna” dalla scheda Impostazioni

Appena l’app verrà riavviata, l’effetto sfumatura sarà sparito.

Attenzione:
Se scegli di nascondere la sfumatura nella tua pagina CMS Mappa, la distanza sul punto della mappa sará meno visibile.

Categorie
2 Design dell'app 2.3 Design delle sezioni Guida lamiaapp.shop Uncategorized

Personalizza i font

1. Disponibilità dei font in GoodBarber

 
È possibile selezionare i font visualizzati nell’app da un elenco di font nativi e font Google per molte parti della tua app.

Importante:
– Non tutti gli elementi di design offrono la possibilità di selezionare un nuovo font
– Non è possibile importare il proprio font direttamente nel back office

Ad esempio, nel menu di navigazione, la possibilità di personalizzare il font dipende dal template utilizzato:
TabBar: puoi personalizzare i font solo per il menu “Altro”
Swipe, Little Swipe, Grid, Slate: puoi personalizzare i font nella navigazione principale

2. Configura un nuovo font

 
Ci sono 2 modi per selezionare i font per la tua app:
1. Dal menu Stile globale, che gestisce i caratteri generali della tua app, leggi questo aiuto online per ulteriori dettagli
2. Da specifiche impostazioni di design di una parte della tua app, come il menu di navigazione, Header, Widget della Home, design della sezione ecc.
– Apri le impostazioni di design dell’elemento che stai configurando
– Seleziona dal menu a comparsa il carattere quando l’opzione è disponibile:
– Seleziona la dimensione quando l’opzione è disponibile per piattaforme (a seconda dell’elemento):
– Seleziona la caratura del font quando l’opzione è disponibile (a seconda dell’elemento):
 
Categorie
2 Design dell'app 2.3 Design delle sezioni Guida lamiaapp.shop Uncategorized

Design delle categorie delle sezioni

Design delle categorie delle sezioni

1. Filtra o aggiungi categorie alla tua sezione
2. Vai al menu La mia app > Design> Sezioni
3. Clicca  su “Modifica lo stile” nella colonna destra accanto alla sezione da modificare
4. Clicca su “Categorie
5. Il template è chiaramente identificato da un’icona verde
6. Sfoglia i vari template usando le frecce per selezionarne uno nuovo
7. Imposta colori, caratteri, sfondo e opzioni.
Template Drop Down
Mostrerà la lista delle categorie in cima all’app in formato menu a tendina.
Template Pager 
 Mostrerà le categorie in formato dot e l’utente dovrà scorrere lateralmente per accedervi.
Attenzione: Le frecce che visualizzi nell’anteprima del back office, non saranno visibili nel telefono oppure nella versione iPad dell’app, dovrai solamente scorrere le pagine.
Template Circle Band
Mostrerà in automatico il display di tutte le categorie in un formato rettangolare per default.
 L’utente può scorrere lateralmente per caricare più categorie.
Nota: un template potrebbe non essere disponibile con la configurazione corrente.

Alcuni template di categorie sono disponibili solo con determinati Menu di Navigazione.
Se il template di categorie non è disponibile, puoi sceglierne un altro o passare a un Menu di Navigazione diverso.
 
 
Categorie
2 Design dell'app 2.3 Design delle sezioni Guida lamiaapp.shop Uncategorized

Copia il design di una sezione in un’altra sezione

Copia il design di una sezione in un’altra sezione

Questa funzione ti consente di copiare il design di una sezione in un’altra sezione dello stesso tipo, senza dover ricreare lo stesso design da capo:
– Copia tutte le impostazioni del design dalla pagina della sezione originale nelle nuove sezioni: font, colori, template, opzioni di visualizzazione, anteprima di default ecc…
– È disponibile solo per le sezioni dello stesso tipo. Ad esempio, non puoi copiare il design di una sezione Mappe in una sezione Articoli. La funzione viene mostrata nelle impostazioni del design della sezione solo se hai almeno 2 sezioni dello stesso tipo (2 sezioni Articoli, 2 sezioni Couponing ecc.).
 

1. Copia il design di una sezione

 
1. Vai sul menu La mia app > Design > Design sezioni
2. Dalla lista delle tue sezioni, clicca sulla nuova sezione (quella in cui vuoi applicare il design di un’altra sezione già esistente nella tua app)
3. Seleziona la pagina della sezione che vuoi impostare 
Nell’esempio qui sotto abbiamo impostato la pagina “Elenco di articoli”
 
4. Clicca sull’icona con l’ingranaggio in alto a destra
5. Seleziona dalla lista di sezioni dello stesso tipo quella da cui vuoi copiare il design:

 
6. Clicca su “Continua” per applicare il design della sezione selezionata allo step 1.5 nella nuova sezione

 

2. Attenzione

 
– Il design della sezione selezionata allo step 1.5 verrà applicato alla tua sezione sostituendo le impostazioni precedenti.
Non è possibile annullare l’azione, a meno che tu non abbia creato un back up del design precedentemente.

– Questa funzione copierà solo il design della pagina selezionata allo step 1.3.
Se desideri copiare il design di una sezione A in tutte le pagine di una sezione B, dovrai ripetere l’operazione per ogni pagina (elenco, dettaglio ecc…).
Categorie
2 Design dell'app 2.3 Design delle sezioni Guida lamiaapp.shop Uncategorized

Design delle sezioni

Design delle tue sezioni

Per impostazione predefinita, la tua app ha uno stile globale applicato a tutte le sezioni dell’app.

Per modificare colori, caratteri, sfondi, formati, ecc. di ogni elemento della tua applicazione:
1. Vai al menu La mia app > Design > Sezioni che ti mostrerà l’interezza delle tue sezioni sulla colonna di destra
2. Fai clic su “Modifica lo stile” nella colonna destra accanto alla sezione da modificare

1. Design sezione contenuto

 
Attenzione: le configurazioni disponibili variano a seconda del tipo di sezione che stai modificando.
In questo tutorial abbiamo usato una sezione CMS Articolo come esempio.

È possibile configurare 2 parti della sezione:
– Lista degli articoli (visualizzazione lista della pagina)
– Pagina dell’articolo stessa (pagina dettagliata)
1. Fai clic su “Modifica lisya articoli” o “Modifica articolo
2. Configura le diverse opzioni disponibili dettagliate di seguito:

TEMPLATE
– Il tuo template è identificato chiaramente con un’icona verde
– Sfoglia i diversi template usando le frecce per selezionarne uno nuovo
CONTENUTO
– Imposta il colore di sfondo, i colori dei caratteri e del testo, l’allineamento del contenuto ecc. della tua sezione
– Modifica il testo e i token che verranno visualizzati nelle impostazioni Info nella lista delle pagine, ad esempio
– Visualizza l’autore, riepilogo quando l’opzione è disponibile
BARRA STRUMENTI
– seleziona le azioni che vuoi autorizzare nella barra strumenti del tuo articolo, i colori delle icone, ecc…

NAVIGAZIONE
– Modifica le impostazioni di design del Pager*

THUMBNAIL
– Aggiungi un thumbnail predefinito da visualizzare nella lista delle pagine quando non ce n’è una nel tuo articolo

*opzione non disponibile su tutti i template
CODICE HTML*
– Modifica i token e il testo: cancella, ad esempio, la data e le informazioni sull’autore:
Elimina la piccola parte del codice corrispondente a questa informazione.
*Non disponibile quando si utilizza il template 4 per la pagina dettagliata.

2. Design sezione Menu

 
Se utilizzi un sistema di navigazione multilivello nella tua app, per configurare il design della sezione Menu:
1. Vai al menu La mia app > Design > Sezioni
2. Fai clic su “Modifica lo stile” accanto alla sezione del menu
3. Fai clic su “Modifica menu
4. Seleziona il template della sezione menu
5. Usa le impostazioni disponibili per configurare il design (immagini di sfondo, effetti, caratteri, colori, icone, ecc.)

3. Header specifico

 
Modifica il design dell’header per una sezione specifica*.
1. Vai al menu La mia app > Design > Sezioni
2. Fai clic su “Modifica lo stile” accanto alla sezione
3. Fai clic su “Header
4. Fai clic su “Modifica l’header di questa sezione
*La configurazione delle impostazioni funziona come nell’header generale.
Per tornare alle impostazioni predefinite e applicare il design dell’header generale:
1. Vai al menu La mia app > Design > Sezioni
2. Fai clic su “Modifica lo stile” accanto alla sezione
3. Fai clic su “Header
4. Fai clic sull’icona dell’ingranaggio nelle impostazioni di questo header specifico
5. Fai clic su “Torna all’header predefinito