Okay, facciamo un breve recap di come siamo arrivati all'elaborazione di questo mood board grafico abbiamo visto tutta una parte iniziale di analisi dove andiamo a definire il nostro pubblico e il nostro target.
Abbiamo visto come fare ricerche, analizzare il mercato, analizzare i competitor, quindi farsi un'idea di quello che ruota intorno a noi e abbiamo estrapolato informazioni utili e li abbiamo cuciti su misura su il nostro personal brand.
A quel punto abbiamo creato mood grafico.
Io ho utilizzato cambia nel mio caso, ma voi probabilmente avrete utilizzato Camba o i tool che utilizzate quotidianamente.
Ma l'importante è arrivare a questo mood grafico finale è semplicemente una grafica, un PD F e ed è giunto il momento di trasferire questo mood grafico del tuo sito web all'interno del tuo sito web creato con WordPress ed elemento.
Come funziona? Abbiamo creato precedentemente la pagina Global Style, una semplice pagina bianca al cui interno andremo ad aggiungere gli elementi che utilizzeremo nella maggior parte dei casi nelle nostre pagine web.
Quindi possiamo cliccare sul titolo o direttamente con modifica elemento e una volta che si aprirà la pagina, andremo ad aggiungere i classici.
Quindi modifica con elemento in questa pagina io andrò ad aggiungere quelli che quotidianamente si utilizzano di più.
Se ci pensate bene.
La maggior parte delle pagine web sono costituite da immagini, titoli, intestazioni, paragrafi, pulsanti, elementi di questo tipo che possono avere stili più o meno differenti.
Quindi a questo punto io andrò ad aggiungere un'immagine.
Magari potremmo farlo a due colonne per avere una visione d'insieme un po' più compatta, quindi inserirò un'immagine, poi vado ad aggiungere un intestazione per provare un h uno, un h due e anche un editor di testo.
Magari facciamo uno due h tre, facciamo anche h quattro e ed andrò ad aggiungere anche un pulsante okay ed infine andrò ad aggiungere anche un modulo di contatto perché elemento offre la possibilità di aggiungere anche dei moduli di contatto personalizzati.
Okay, a questo punto aggiorno intanto la pagina.
Come vedete, io ho inserito all'interno di questo global style degli elementi grezzi senza grafica e a questo punto devo andare a inserire trasferire il design che ho definito in questa mood bort all'interno di elemento quindi tutto quello che riguarda lo stile, i colori e i font per prima cosa su cui aggiungo un'immagine di segnaposto dalla che prenderò dalla mia libreria media Esempio questa immagine qua Okay, direi che questo qui va più che bene.
Perfetto! E cliccando su ogni elemento lo andiamo a personalizzare.
Intanto aggiorniamo.
Okay, Cliccando sul tasto anteprima modifiche verrete indirizzati alla pagina per vedere effettivamente come L'utente vedrebbe la pagina web e la lasciamo esattamente in questa posizione per vedere poi a livello globale come si comporta in frontend.
A questo punto all'interno della pagina Global Style non dovete fare nient'altro la dovete lasciare così in modo grezzo.
Che cosa dobbiamo fare? Qual è il secondo passaggio? Dobbiamo andare sulle voci di impostazioni del sito, quindi cliccando in alto a sinistra, impostazioni del sito e andiamo a vedere una ad una queste voci.
La prima voce è quella che riguarda i colori globali e sono i colori che principalmente utilizzeremo all'interno del sito web.
In questo caso io ho elaborato principalmente possiamo dire tre colori con il nero che utilizzerò per tutti i testi, comprese le intestazioni, e quindi vado ad applicare i colori um nel nel global style.
Allora questo come funziona questo sistema allora il i colori globali sono una funzione che vi consentirà di aggiungere le vostre palette di colore anche più di una, quindi in questo caso tch quattro, ma anche più di una, e vi consentiranno di, um aggiungerle in modo più rapido quando create dei design più personalizzati di default voi qui impostate un preset grafico sia per i fondi sia per i colori, ma se volete potete aggiungere anche una board di colori che utilizzate.
Um meno frequentemente però che avete già a portata di mano senza tornare, magari su gamba o su altri tool, trovare il codice del colore e, um caricarlo manualmente di volta in volta.
Quindi in questo caso io andrò ad inserire i miei colori principali che ho salvato qua, quindi andrò a inserire il codice del colore qui andrò ad inserire un blu qui inserisco un nero che utilizzerò per le intestazioni e in risalto andrò ad inserire questo colore qua.
Okay, fatto questo potete aggiornare e come vedete, una volta che avete impostato il vostro set di colori globali, potete aggiungere anche colori personalizzati.
Poi vi farò vedere anche come funziona.
Ad esempio, un elemento che io utilizzo spesso nella progettazione di pagina web è il colore bianco.
Quindi, um, per utilizzare delle sf-, degli sfondi, dei background che potrebbero essere magari una tonalità di grigio chiaro, una tonalità di bianco.
Io in questa fase li aggiungerò per poi riutilizzarli in modo più rapido.
Quindi assegniamo chiaramente un titolo allo stile bianco.
Ovviamente andrò a selezionare il tramite color picca il bianco e andrò ad aggiungere anche grigio chiaro b g per background.
Magari vado ad aggiungere una tonalità di questo tipo.
Okay e vado ad aggiungere anche un altro elemento di background che ho precedentemente inserito nel mio mood board è questo azzurro chiaro che utilizzerò principalmente per le sezioni di di sfondo di di alcune parti.
Quindi incollo il codice colore in questa sezione e aggiorno le mie preferenze.
Come funzionano queste questi colori? Allora, um adesso rientra in una pagina qualsiasi, ma ovviamente questo ve lo ritroverete in qualsiasi pagina che andrete a modificare con elemento.
Ogni volta.
Ogni volta che cliccate su qualsiasi elemento e ad esempio su questa intestazione e andate alla Tav stile vi ritroverete colori del testo e i colori globali finiscono esattamente qua.
Questo che cosa significa? Che se voi avete inserito nella voce dei colori globali tutte le possibilità e le combinazioni di colori che potrebbero tornarvi utile durante la progettazione grafica delle vostre pagine web.
Ogni volta che andrete alla tab stile, ve li ritroverete automaticamente senza aggiungerli di volta in volta manualmente.
Quindi chiaramente questo processo velocizzerà il vostro lavoro.
Ad esempio, se io andassi a segnalare il risalto in automatico viene applicato e questo funziona allo stesso modo per i fonti.
Quindi, come vedete, Elemento ha pensato molto all'ottimizzazione e alla velocità nella rapidità di alcune lavorazioni ed esecuzioni.
E questa è una delle funzionalità molto, molto interessanti e potenti di elemento.
Torniamo nel nostro globale, quindi abbiamo visto come impostare questo setting di colori globali.
La stessa cosa lo possiamo fare per i font.
Io precedentemente ho dec- definito nel mio mood il font over pass di Google.
Qui posso chiaramente fare la stessa cosa.
Posso inserire over pass? Eccolo qua, lo andrò a inserire qui.
A differenza chiaramente del dei colori globali, potete definire gli stili del font, ovviamente a partire dalla dimensione.
Ad esempio sedici pixel.
Potete decidere se utilizzare un grassetto semi grassetto medio un font regolar un font più più sottile, quindi chiaramente sempre in base a quello che voi avete definito e qui lo potete fare per altri quattro valori di default e elemento che suddivide per principale e secondario test in risalto.
E anche qui potete aggiungere uno stile diverso in questo caso, a differenza dei colori, come potrebbe tornarvi utile? Questa funzione? Potrebbe tornarvi utile se in alcune pagine, ad esempio in una determinata landing page, volete utilizzare dei font diversi.
Ad esempio io in questo sito utilizzerò il phon google over pass in tutte le sezioni.
Però magari tra due mesi ho la necessità di creare un landing page per promuovere un determinato servizio dove voglio inserire un font diverso.
Come funziona qui? Io posso andare a caricare un font diverso.
Ad esempio vediamo un po' qua lato che è un font molto utilizzato di Google e e molto diffuso e ogni volta che andrò poi a creare nuove pagine, faccio vedere il funzionamento.
Aggiorno intanto quali siti globali posso andarlo a recuperare in modo più rapido.
Ora aggiorno anche la pagina del global style.
Okay, vado a selezionare un qualsiasi elemento che di default poi erediterà quel tipo di font.
Ma se io ora andassi alla voce stile tipografia? Come vedete, ho il nuovo elemento.
E in automatico eredita quel tipo di fonti.
Io ora non ho assegnato un titolo però font lato aggiorna e quindi, come vedete, anche questo è un processo per velocizzare il vostro lavoro durante la creazione e la gestione del design.
Quindi il principio è lo stesso, sia per quanto riguarda i colori e sia per quanto riguarda i fondi.
Ora torniamo indietro dopo la parte globale, quindi quella sezione che si aggiunge negli stili dei vari andiamo a definire tutta la tipografia e quindi lo stile del nostro temete su tipografia accederete alla visione globale e di come saranno mostrati tutti i caratteri del vostro sito web, a partire dai paragrafi, dai link fino agli h uno, gli h due, gli h tre e così via.
E questo global style che abbiamo precedentemente creato serve proprio a questo.
E adesso lo andiamo a vedere nel dettaglio.
Allora innanzitutto colore del testo io voglio andare ad impostare un colore nero per tutti i testi del mio sito web tipografia abbiamo detto over pass, quindi cerchiamo over pass.
Qui troverete la lista dei fonti di google che sono sincronizzati dentro elemento e vado a definire una dimensione di diciotto pixel, anzi facciamo sedici pixel.
Poi ovviamente lo vedremo anche nel dettaglio.
Come vedete ogni volta che vado a modificare qualcosa in automatico viene aggiornato, poi lo vedremo mano a mano spazzatura paragrafo lo lascio di default.
Voglio andare ad impostare un colore dei link in blu e poi la tipografia del link lo lasciamo sempre over pass a sedici pixel.
Ovviamente anche qui potete impostare il peso.
In questo caso sarà un regolar e tutte le impostazioni avanzate.
Lo stile se volete un obliquo, un corsivo, la decorazione se volete ad esempio aggiungere il sottolineato il sopra allineato l'altezza della riga la spazzatura del carattere lo s- la spazzatura tra le parole.
Quindi qui avete veramente veramente tanta personalizzazione e la stessa cosa lo potete applicare ovviamente alle intestazioni.
Quindi uno Io assegnerò un colore nero e voglio impostare un font over pass che già viene preso in automatico perché l'ho impostato nelle impostazioni globali, ma l'ho imposto anche in questa sezione e vado ad aumentare la dimensione.
Ad esempio voglio che tutti gli uno del mio sito web vengano mostrati a cinquantaquattro pixel nella dimensione, nella Scusate, nella formattazione a in grassetto.
Okay, ora torno un attimo nel global style perché non ho ho ho aggiunto lo stesso la stessa formattazione a queste intestazioni.
Questo che cosa significa? Che, um quando andrete a creare poi le pagine, la pagina dovrà rispettare una tassonomia.
Il titolo principale della pagina sarà un h uno.
Il sottotitolo sarà un h due e se c'è un contenuto al di sotto del sottotitolo sarà un h tre e poi ci sarà il paragrafo e questi elementi chiaramente devono seguire una se una una certa linea logica e linea grafica per modificare questo ogni volta che caricate un'intestazione cliccando sull' editing della modifica avete il tag h t m l io per fare questo test imposte questo come uno e vedete che già il sistema eredita il lo stile che ho applicato questo h due è già configurato, però lo riporto um lo riporto nelle sue impostazioni di default.
Okay, poi questo invece h tre questo h quattro e questo è un classico paragrafo, quindi ci siamo.
Posso aggiornare il mio global style? Um torno su l'anteprima delle modifiche, okay, qui posso fare un refresh della pagina in modo tale da ricaricare anche il contenuto e vedere automaticamente come si comporta.
Ed eccolo qua.
Come vedete, io tornando su tipografia h uno, andando a modificare la dimensione in questo caso ad esempio, il sistema eredita lo stile che io applico quindi visivamente in tempo reale.
Io posso avere un controllo sulla grafica di questo determinato elemento.
Quindi, ad esempio io voglio impostare a cinquantaquattro pixel tutti gli h uno, gli h due sempre di colore nero e sempre di font over pass um di peso.
In questo caso sceglierò un semi grassetto però ovviamente una dimensione più piccola, magari trenta pixel perfetto e la stessa cosa lo potete fare per l'h tre l'h quattro e così via e questo va ad impattare in tutte le parti di stile grafico dei vostri elementi.
Quindi io poi mi prenderò del tempo per configurare uno ad uno, ma il processo di editing è esattamente questo.
Quindi questo per quanto riguarda le intestazioni um l'altra cosa importante è il pulsante, ad esempio.
Quindi questo è tutto quello che riguarda il mondo della tipografia un'altra.
Cosa importante prima di passare ai pulsanti è che quando modificate la tipografia, ad esempio l'h uno quando cliccate su questa icona avete una sorta di controllo.
Cliccando su questa icona, dove di default viene mostrato il desktop, potete passare all' editing di quella determinata sezione del e del fondo nella versione tablet o mobile.
E questo che cosa significa? Che voi potete impostare all'interno di questa schermata l'h uno e quindi tutti i titoli delle pagine nella versione desktop a cinquantaquattro pixel, ma in automatico nella versione mobile a trenta pixel ad esempio.
E questo e questa è un'altra funzione molto molto potente di elemento perché? Perché vi dà un controllo completo sulla gestione della parte responsi del vostro intero sito web sia per il desktop sia per il mobile sia per il tablet e questa cosa la potete già impostare qui.
Quindi quando andrete a impostare tutte le varie i vari stili del vostro sito web h uno impostate prima la versione per desktop, quindi voglio che su tutti eh p CE um l'app desktop il p h uno venga mostrato in cinquantaquattro pix, poi andiamo a impostare il mobile, magari possiamo dargli trentasei pixel e per quanto riguarda il scusate il tablet, mentre per quanto riguarda il mobile trenta pixel li aggiorniamo quindi in automatico ogni volta che poi dopo andrete ad aggiungere questo eh di intestazione h uno, due, tre e così via nelle vostre pagine web non dovete modificare ogni volta lo stile, il font, il colore, eccetera eccetera perché elemento eredita lo stile che voi impostate in questa determinata sezioni, e questa è una delle cose più importanti ed è anche uno degli errori più comuni che vedo fare ogni giorno da da chi utilizza l'elemento, ovvero quello di um applicare lo stile in ogni che si va ad aggiungere invece non c'è bisogno, bisogna semplicemente configurare correttamente tutto questo nelle impostazioni del sito grafico.
Dopodiché il lavoro sarà più snello e rapido, e questo per tutte le altre sezioni, quindi h uno, h, due, tre, eccetera eccetera.
Poi, come ripeto, mi prenderò del tempo per impostare correttamente un'altra.
Cosa importante chiaramente sono le quindi i pulsanti, gli inviti all'azione dei siti web e in questo caso dobbiamo cliccare quindi sullo stile dei pulsanti.
Come al solito possiamo modificare la tipografia, andrò ad inserire il font che ho scelto, quindi over pass um di default possiamo impostare magari a diciotto pixel il la dimensione del font facciamo grassetto settecento ci può stare e poi potete decidere anche una una decorazione tipo una sottolineatura, ma a me personalmente in questo caso non non piace più di tanto e dopodiché, ovviamente anche l'altezza riga la spazzatura del carattere e quant'altro.
Però una cosa molto importante è l'assegnazione del colore, il colore del testo e il tipo di sfondo.
Come tipo di sfondo.
Andrò a definire il colore blu che si apre chiaramente come colore globale che ho già impostato precedentemente.
Quindi ad assegnare il colore blu e come vedete nella pagina Global Style, viene aggiornato automaticamente il colore del testo bianco.
Potete usare quindi sia il colore, il color di elemento o il la classica voce personalizzata dove avete già salvato i colori ed eventualmente aggiungere anche un'ombra o un tipo di bordo.
Ad esempio magari un bordo solido di dodici pixel di colore così ovviamente questo è solo un esempio per farvi vedere la potenzialità che ha questo strumento.
In questo caso io lascerò semplicemente il pulsante di default l'unica, cosa che farò per dare un senso più di leggerezza è quello di modificare il la spazzatura.
Il rientro tra il testo e, um il contorno del bordo quindi fuori um nello spazio blu e e il raggio del bordo.
Allora, per quanto riguarda il raggio del bordo, andrò ad inserire Forse proviamo con dieci e questo va ad agire su i bordi tondeggianti.
Se volete aumentarlo ancora di più.
Basta aumentare, ad esempio trenta e avrete questo tipo di effetto.
Io nel mio caso lo lascerò a um sei pixel.
Okay, diciamo che così ci sta, eh? Per quanto riguarda poi il rientro qui, eh? Posso impostare dei default dieci pixel per tutto quanto.
Poi vado a bloccare gli elementi e a modificarli uno ad uno, ad esempio sopra potrei mettere magari ventici- No, proviamo con venti sopra, venti sotto venti e a destra.
Venticinque.
Proviamo così.
Okay, sicuramente andrei a ridurre un po' sopra.
Proviamo con quindici sotto quindici.
Okay, direi che più o meno ci può stare e ci siamo per fare questo.
Ovviamente voi avete già creato la vostra mood board per quanto riguarda lo stile, quindi se volete seguire con precisione il vostro set in grafico definito precedentemente, dovrete arrivare allo stesso obiettivo.
Quindi sia per quanto riguarda le dimensioni degli spacciatori.
In questo caso la spazzatura è un po' più um leggera e minore, quindi sicuramente andrò a ridurre, magari facendo a venti a destra e a venti a sinistra.
Poi eventualmente lo vado ad aggiustare però questo per farvi capire il funzionamento.
Sui pulsanti potete aggiungere anche il colore al passaggio del mouse.
In questo caso basta cliccare la voce over dove possiamo definire il colore del testo.
In questo caso magari lo farei del colore principale e del colore di sfondo.
In questo caso lo farei l'azzurro chiaro che ho selezionato.
Come vedete in anteprima si vede il eh il passaggio del mouse ed è aggiornato in real time.
Faccio aggiorna, posso anche andare a vederlo in, quindi faccio un refresh della pagina ed eccolo qua il pulsante che ho appena configurato con il mio stile la stessa cosa e questo ovviamente potete farlo anche in altre sezioni.
La stessa cosa può essere applicata anche alle immagini come ho inserito nel mio Global sta cliccando la voce immagini avete la possibilità di modificare lo stile di tutte le immagini che cariche cariche nel vostro sito web? Io personalmente non lo faccio quasi mai, nel senso che se il vostro sito ha la necessità di mostrare le immagini tutte con un determinato bordo di un determinato colore o di un determinato raggio del bordo delle immagini leggermente tondeggianti, potete impostarlo qui.
Però, se così non fosse, a livello globale del sito, vi consiglio di lasciare dei default e magari quelle le modificate di volta in volta, però è per farvi vedere che c'è anche questa incredibile potenzialità.
Ad esempio tipo di bordo qui posso sistemare un bordo solido di due pixel, ad esempio posso impostare un colore, posso anche definire il raggio del bordo, magari voglio impostarlo leggermente tondeggiante a dieci pixel e magari un'opacità all'immagine in questo caso no, non la metterei qua, però magari la potrei mettere all'over una leggera, quindi al passaggio del mouse anche qui potete giocare un po' su quelle che sono le ombre e i filtri c s s e i colori al passaggio del mouse.
Però per farvi vedere che anche sulle immagini potete qui definire lo stile di tutte le immagini del vostro intero sito web l'ultima, cosa che voglio mostrarvi in questo in questa parte è quello che riguarda i campi del modulo, perché Elemento offre la possibilità anche di modificare lo stile um di creare scusate di creare dei forum molto avanzati e ovviamente la funzionalità c'è anche tutta la parte grafica e di design del form e all'interno delle impostazioni del sito.
Potete modificare appunto questi campi, ad esempio i colori dell'etichetta.
Potete decidere se farlo nero di un altro colore anche qui la tipografia.
Io andrò ad inserire over pass.
Um magari anche qui sedici pixel lo farei un regular quattrocento è normale, poi colore del testo, quindi nero, magari il colore in risalto.
Potremmo utilizzarlo come il colore principale del del mio set grafico e il colore di sfondo che non è altro che il colore dei campi.
In questo caso magari posso andare ad inserire un grigio chiaro per dare un effetto un po' più um evidente dei campi.
Posso decidere anche qui un tipo di bordo un'ombra.
Insomma, anche qui ci sono diverse opzioni grafiche.
Ad esempio magari possiamo inserire dieci pixel no, magari facciamolo a sei come precedentemente per i pulsanti.
Quindi, come vedete va agire su i bordi del forum e poi eventualmente anche il rientro per quanto riguarda la dimensione dei campi.
Quindi, come vedete a livello generale, anche qui c'è un bel cruscotto di controllo per modificare lo stile grafico di tutti i form che andrete a creare con elemento.
Okay, questo era tutto quello che riguardava la parte del um dello stile grafico del vostro sito web.
A questo punto, una volta che avete configurato correttamente tutte queste parti potete dare un occhio alla Dezio, denominazione del sito e controllare che sia stato caricato il logo del vostro sito.
Io poi mi prenderò un momento per caricare il logo definitivo che sarà um quello quel questo qua che ho inserito nel mio mood board grafico.
Um che altro Andiamo avanti sullo sfondo del sito se avete necessità di inserire uno sfondo diverso rispettivamente um diverso dal bianco per quanto riguarda le dimensioni del layout, se volete aggiungere delle transizioni per le tra le pagine, quindi se volete che al passaggio tra una pagina e un'altra ci sia un effetto, potete giocare su queste impostazioni qua, eh? Personalmente tendo a utilizzarle in pochi casi perché a volte con l'upload e poi le performance e i tempi di apertura delle pagine potrebbero esserci dei problemi.
Quindi nella maggior parte dei casi tendo a non utilizzare questo tipo di transizioni, però chiaramente è una possibilità che avete e potete chiaramente provare e testare.
Quindi per chiudere questa lezione abbiamo visto come impostare tutto il set grafico dal nostro mood board che abbiamo precedentemente creato e abbiamo visto come trasferirlo dentro gli stili globali di elemento ed è una delle funzionalità più importanti per partire con il design e sfruttarlo e utilizzarlo in modo più rapido.
Quando poi andremo a progettare tutte le pagine e tutte le sezioni del nostro sito web.
Vedi tutto
