Passo 1

Accedere al "pannello di controllo" del tema

Il primo passo da fare per iniziare ad usare il tema, è proprio quello di settarlo a seconda delle tue esigenze. 

Per fare ciò, inizia creando una pagina, la homepage, se vuoi ma andrà bene anche una semplice "Pagina blank"

• Clicca su Marketing -> Website -> Website pages e in alto a destra trovi il pulsante arancio "Create page"
• Cliccalo e crea una website page, seleziona il dominio e da un nome (il nome interno non il title della pagina) alla tua pagina
• Se non ti trovi nella cartella del tema acquistato, in prossimità del nome del tema, clicca sulla freccetta di destra e poi su "Change theme" e scegli il tuo tema
• Ora scegli dal tema acquistato il template che desideri utilizzare per creare la tua pagina e clicca su Select template in alto a destra (pulsante arancio). Nel nostro esempio useremo una "Website page" semplicemente.
• Nella colonna di sinstra ci sono 3 tabs. Clicca sul tab "Design" e poi "Edit theme settings" 

Congratulazioni sei entrato nel "pannello di controllo" del tuo tema ed ora puoi iniziare a settarlo come desideri.

Puoi vedere le diverse modalità di veduta cliccando in alto al centro "View on" ma questo non cambierà la creazione della pagina "sottostante" a cui stavi lavorando perché è solo una preview

Passo 2

Settare i colori e i font

Global colors

Clicca sulla freccetta a destra di Global colors e vedrai il menu per cambiare il colore primario e quello secondario

Il Primary colorè usato per il "paragrafo" mentre il Secondary color è usato per le intestazioni: H1, H2, ecc 

Clicca sul pallino colorato corrispondente e scegli il colore che desideri

Global fonts

Clicca sulla freccetta a destra di Global fonts e vedrai il menu per cambiare il font primario e quello secondario

Il Font primario è usato per il "paragrafo" mentre il secondario per le intestazioni: H1, H2, ecc

Clicca sul selettore del font e scegli il font che desideri. E' possibile usare solo "web fonts" come, Arial, Georgia, ecc o i Google fonts.
Per poter utilizzare dei propri font, vedremo in seguito come fare.

Passo 3

Settare il layout

Layout -> Layout settings 

Clicca sulla freccetta a destra di Layout settings e cambia la misura della sezione (Container max width) in base alle tue esigenze; di default è settata a  1200px 

Cambia la misura del padding verticale (sopra e sotto) della sezione in base alle tue esigenze; di default è settata a  80px 

Cambia la misura del padding orizzontale (sinistra e destra) della sezione in base alle tue esigenze; di default è settata a  20px 

I colori del body e della sezione

Clicca sul pallino colorato corrispondente al "Body background color" e scegli il colore che desideri dare al body

Clicca sul pallino colorato corrispondente al "Section background color" e scegli il colore che desideri dare alla sezione 

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 4

Settare la header

Website header -> Header settings 

Clicca sulla freccetta a destra di Header settings e cambia:

• la misura della header (Header max width) in base alle tue esigenze; di default è settata a  1200px 
• Cambia la misura massima del logo  in base alle tue esigenze; di default è settata a  180px 
• Clicca sul pallino colorato corrispondente al "Header background color" e scegli il colore che desideri dare alla header
• Cliccando su "Sticky header" si attiva la funzionalità fissa dell'intestazione che rimane in cima alla pagina durante lo scorrimento.
• Cliccando su "Topbar" si attiva una riga di contenuto immediatamente sopra l'intestazione. Il contenuto può essere modificato all'interno del modulo globale dell'intestazione

Settare il menu

• Clicca sulla freccetta a destra di Menu e entri nei settings del menu
• Su Menu position, scegliere la posizione del menu, in alto (predefinito) o a sinistra come menu hamburger
• Puoi cambiare il font, il colore, la variante (semibold, bold, regular, ecc) e la misura del tuo menu
• Su Text transform puoi cambiare la tipologia: Maiuscolo (default), minuscolo o con iniziale maiuscola
• Su Hover and active color, cambi il colore in  hover del menu e contemporaneamente il colore di sfondo del menu mobile

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 5

Settare il blog

Blog -> Blog settings 

• "Enable structured data", cliccato di default, aggiunge i dati strutturati sia al singolo post che al listing dando così maggiore visibilità nella rete. I dati strutturati, si sa, sono molto apprezzati da Google :-) Se non li volete, deselezionate il checkbox
• "Enable banner ADV", cliccato di default, attiva una sezione terminale di advertising sia al listing che al singolo post.
  E' possibile cambiare tutti i contenuti di questa sezione ma di questo ne abbiamo parlato qui. Se non volete questo banner, deselezionate il checkbox
• "Blog max width" è la misura del container della sezione del blog; di default è settata su 1100px, un po' più stretta della sezione per migliorare la lettura dell'articolo.
• "Blog hero image" è l'immagine di background nel listing degli articoli. Potete cambiarla a vostro piacere che abbia almeno 1200px di lunghezza (width) e 16:9 di aspect ratio, circa 560px di altezza (height). Considerate comunque che si tratta di una background image che si adatterà al dispositivo in uso
• "Post per riga" è il numero di articoli per riga utilizzato nel tipo 1 di elencazione di articoli. Questo tema ha 2 tipologie sia di elencazione di post che di post singolo
  in questo caso avrete notato che c'è l'icona "i" delle informazioni per dare alcune note; in questo caso vi ricordiamo di regolare il numero di post visibili per pagina impostandolo con multipli del numero scelto nell'impostazione del blog. Per esempio, se avete scelto di visualizzare 3 articoli per riga, dovete impostare il numero di articoli per pagina a 6, 9, 12, 15, ecc. articoli per pagina.
• Font blog: abbiamo dato un "Lora" al font del paragrafo dell'articolo perché secondo alcuni studi è il font che migliora l'esperienza di lettura nell'utente. Puoi comunque cambiare il font, la misura, il colore e la variante del font per il singolo post
• Blog button background color, text e border color, sono i colori dei pulsanti del listing del blog, e dei tag evidenziati sopra al Blog hero

Portfolio

• Clicca sulla piccola freccia a destra di Portfolio ed entra nelle impostazioni del portfolio, un elenco "speciale" (e singolo post) che di solito è usato per i casi di studio dei clienti.
• Su Font portfolio listing scegliete il font, il colore, la dimensione e la variante del font usato nel portfolio listing
• Su Height post card cambi l'altezza dell'immagine nell'elenco del portfolio; di default 500px
• Puoi cambiare il colore dell'hover sul testo dell'elenco del portfolio cliccando sulla bolla di colore sotto "Portfolio hover color

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 6

Settare i caratteri - TYPOGRAPHY

Typography -> Typography settings 

Clicca sulla freccetta a destra di Typography settings per:

• cambiare il colore dell'evidenziazione del testo (Highlighted text color) cliccando sul pallino colorato; di default è arancio #ff6000
• Puoi cambiare le caratteristiche di ogni intestazione e del paragrafo che, come vedrai, avranno già "settato" le caratteristiche di colore (global colors) e di font (global fonts)
  Puoi cambiare anche le varianti: regular, semibold, bold, ecc e per ogni tipologia puoi anche cambiare la spaziatura dell'interlinea (line height) 
• cambiare il colore del link nel testo; di default azzurro #0270E0
• cambiare il colore di hover e focus nel testo; di default grigio #707070

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 7

Settare il pulsante - BUTTONS

Buttons -> Buttons settings 

Clicca sulla freccetta a destra di Buttons settings per:

• cambiare il colore di background del pulsante; di default verde scuro #EB661B
• cambiare il colore di testo del pulsante; di default bianco #FFFFFF
• cambiare il padding verticale (Button vertical padding) (spaziatura sopra e sotto) del pulsante: di default è di 8px
• cambiare il padding orizzontale (Button horizontal padding) (spaziatura sinistra e destra) del pulsante: di default è di 20px
• cambiare la misura del bordo del pulsante (Button border size); di default è di 3px
• cambiare il colore del bordo del pulsante (Button border color); di default è nero #000000
• cambiare il colore di background in hover del pulsante; di default nero #000000
• cambiare il colore di testo del pulsante in hover; di default bianco #FFFFFF

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 8

Settare il modulo - FORM

Form -> Form settings 

Clicca sulla freccetta a destra di Form settings per cambiare il font utilizzato nei moduli.

Cambia la larghezza massima (default: 500px) del form

Ricordo che se vuoi vedere istantaneamente i cambiamenti che fai, puoi scegliere di visualizzare una pagina specifica cliccando in alto al centro View on e scegliendo la pagina corrispondente; ad esempio se scegli una landing page, puoi vedere sicuramente un modulo e vedere i cambiamenti che fai sui settings del modulo istantaneamente.

Form -> Form button 

Clicca sulla freccetta a destra di Form button per cambiare le caratteristiche del pulsante del modulo:

• cambiare il colore di background del pulsante; di default grigio #EB661B
• cambiare il colore di testo del pulsante; di default bianco #FFFFFF
• cambiare il colore del bordo del pulsante (Button border color); di default è bianco #ffffff
• cambiare il colore di background in hover del pulsante; di default nero #000000
• cambiare il colore di testo del pulsante in hover; di default bianco #FFFFFF
• cambiare il colore del bordo del pulsante in hover  (Hover border color); di default è bianco #ffffff
• cambiare il colore di background attivo del pulsante; di default grigio #444444
• cambiare l'altezza del pulsante: di default è 45px
• cambiare lo stile del bordo: di default è solid
• cambiare la smussatura degli angoli del pulsante: di default è a zero 0px

Form -> Label, input and description color 

Clicca sulla freccetta a destra di Label, input and description color per cambiare le caratteristiche di etichetta, campo di input e descrizione del modulo:

• Form label: puoi cambiare tipologia di carattere, misura, colore e variante
• Input color: cambi il colore di testo nei campi di input: di default #33475b
• Input background color: cambi il colore di background nei campi di input: di default è bianco #ffffff
• Input border radius: cambi la smussatura degli angoli del campo di input: di default è 0px
• Input height: cambi l'altezza del campo di input
• GDPR color: cambi il colore del testo GDPR (Aggiungi informazioni di avviso e consenso al tuo modulo); di default è bianco #1e2b33
• GDPR font size: cambi la misura del font utilizzato ; di default è 13px
• Description color: cambi il colore del testo aggiuntivo, se dovesse esserci; di default è #7c98b6
• Placeholder color: cambi il colore di placeholder (il testo di esempio evidenziato nel campo di input); di default è #bfbfbf

Form -> Error color 

Clicca sulla freccetta a destra di Error color per cambiare:

• Error label color: cambi il colore dell'etichetta evidenziata in caso di errori: di default è #f2545b
• Error border color: cambi il colore del bordo nel campo con errori : di default è #c87872
• Error focus color: cambi il colore di focus nel campo con errori : di default è #b9554d

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 9

Settare la tabella - TABLE

Table -> Table header

Clicca sulla freccetta a destra di Table header per cambiare:

• Header background color: cambiare il colore di fondo della header della tabella; di default è nero #1e1e1e Si tratta del selettore "THEAD" di gruppo e del selettore "TH" di cella nelle tabelle
• Header font color: cambiare il colore del testo nella header di tabella; di default è bianco #ffffff
• Alignment header: cambiare l'allineamento del testo nella header di tabella; di default è center
• Caption background color: cambiare il colore di background del caption di tabella; di default è nero #1e1e1e
• Caption font color: cambiare il colore del font del caption di tabella; di default è rosso #CC0201

Table -> Table colors

Clicca sulla freccetta a destra di Table color per cambiare:

• Font color: cambiare colore del font della tabella; di default è nero #1e1e1e
• Background color: cambiare il colore di fondo della tabella; di default è bianco #ffffff

Table -> Table border

Clicca sulla freccetta a destra di Table border per cambiare:

• cambiare la smussatura degli angoli della tabella: di default è a zero 0px
• cambiare il colore del bordo della tabella; di default è nero #1e1e1e
• cambiare lo stile del bordo: di default è solid
• cambiare la misura del bordo: di default è 1px

Table -> Table padding

Clicca sulla freccetta a destra di Table padding per cambiare:

• cambiare il padding (sopra e sotto)  della cella della tabella (TD); di default è 10px
• cambiare il padding (sinistra e destra)  della cella della tabella (TD); di default è 10px

Table -> Table footer

Clicca sulla freccetta a destra di Table footer per cambiare:

• Footer background color: cambiare il colore di fondo del footer della tabella; di default è nero #1e1e1e Si tratta del selettore "TFOOT" di gruppo nelle tabelle, 
• Footer font color: cambiare il colore del testo nel footer di tabella; di default è bianco #ffffff
• Alignment footer: cambiare l'allineamento del testo nel footer di tabella; di default è center

Fatto ciò, clicca su Theme settings (in alto a sinistra) per tornare ad altri settings del tema

Passo 10

Settare il footer

Footer -> Footer settings 

Clicca sulla piccola freccia a destra di Footer settings per cambiare:

• cambia la larghezza massima del piè di pagina secondo le tue esigenze; di default è impostata a 1200px
• Colonna in footer: puoi scegliere da 2 a 4 colonne, di default: 4. Ogni colonna ha 3 tipi di scelta: paragrafo di testo, menu o link a reti sociali
• Cambiare il tipo di colonne 
• Attiva o disattiva la visualizzazione del logo nel footer: il logo sarà visibile solo se la prima colonna è impostata come paragrafo
• Cambia la dimensione massima del logo nel piè di pagina secondo le tue esigenze; di default è impostata a 150px 
• Attiva o disattiva la visualizzazione dell'input di ricerca nel footer
• Clicca sul pallino colorato corrispondente al "Footer background color" e scegli il colore che desideri dare al colore di fondo del footer
• Clicca sul pallino colorato corrispondente al "Footer text color" e scegli il colore che desideri dare al testo del footer
• Clicca sul pallino colorato corrispondente al "Footer link color" e scegli il colore che desideri dare al link del  footer
• Clicca sul pallino colorato corrispondente al "Footer copy background color" e scegli il colore che desideri dare al colore di fondo della riga di copyright del  footer (usato per le landing page mentre per le website page è una section con dnd area)
• Clicca sul pallino colorato corrispondente al "Footer copy text color" e scegli il colore che desideri dare al testo della riga di copyright del  footer
• Selezionando "Back to top" attivi l'elemento cliccabile, posizionato in basso a destra - default) che ti riporta in alto della pagina
• Back to top background color: cambi il colore di fondo dell'elemento "back to top"; default è nero #000000
• Back to top icon color: cambi il colore dell'icona dell'elemento "back to top": default è bianco #ffffff

Finito con le impostazioni del tema clicca sul pulsante arancione in alto a destra "Publish to X assets" dove X è il numero di pagine che il sistema "sente" attive, per applicare le impostazioni al sito.