Senza una buona header, il tuo visitatore probabilmente si troverà un po' disorientato In queste lezioni.

Vediamo insieme come creare un leader efficace per la versione desktop, tablet e mobile Abbiamo disegnato in una fase precedente il nostro wireframe.

Come vedete questa porzione è la testata del sito dove appunto dobbiamo andare.

A inserire gli elementi principali e più importanti sarà quello l'elemento che il navigatore utilizzerà per orientarsi a navigare tra le varie pagine del sito web.

Che cosa dovrebbe includere un leader di successo? Sicuramente il vostro logo e potete decidere se inserirlo a sinistra a destra o centralmente.

Potete inserire le voci di menù tutte orizzontali um centrali rispetto al logo.

Insomma, ci sono vari varie possibilità per farla e anche questo varia in base alle vostre preferenze, il vostro stile e anche magari a quello che avete visto in giro quando avete dato un occhio ai concorrenti.

In linea generale, quindi, oltre al logo che dovrà includere anche eventualmente qualche colore che richiama appunto il vostro personal branding, sicuramente include le voci di menu principali del vostro sito web.

Qui dobbiamo fare un po' di precisazioni perché, um non vanno inserite tutte le voci del vostro sito web chiaramente non tutte le pagine che avete creato, ma solo quelle che sono fondamentali al vostro utente durante la navigazione.

Nel nostro caso siamo dei consulenti dei social media marketing, andremo a inserire le voci essenziali.

Quindi chi sono? Servizi, contatti e una che manda alla scoperta dei una scusate che manda alla alla richiesta di un preventivo di contatto e aggiungeremo anche la voce poi legata ai progetti di portfoglio.

Però se siete una grande azienda oppure avete molti più contenuti da mostrare, potete organizzare sempre il menù orizzontalmente e magari estenderlo con dei menù a tendina.

Quindi chiaramente va un po' organizzata in linea generale serve a dare una architettura, una mappatura ecco dei contenuti, anche perché, posizionando in un certo modo le voci di menu, Google li posizionerà anche in un modo rispetto alla posizione che gli assegnate.

Quindi chiaramente se io um all'interno del mio menù vado ad inserire la voce servizio consulenza social come prima voce, probabilmente google gli attri- gli attribuirà un valore alto e lo posizionerà meglio rispetto ad un'altra pagina, quindi anche queste cose sono da tenere in considerazione.

In linea generale dovremmo stare sulle quattro cinque massimo sei voci ovviamente vi renderete conto poi in fase di progettazione e di design um se ci stanno tutte, se dovete ridurre il la dimensione del fondo, quindi son tutte cose che poi vedremo nel campo quando andremo a lavorare nel leader di elemento l'ultima, cosa che ho inserito appunto in questa leader è una quindi un invito all'azione ben evidente rispetto alle altre voci di menù, perché voglio che l'utente compia quella determinata azione um sforzandosi il meno possibile, quindi andrò ad inserire un colore più acceso per far sì che sia più evidente durante la navigazione.

Entriamo subito in elemento e andiamo a vedere come si crea una header.

Allora abbiamo visto che per costruire le sezioni di elemento c'è il team builder, ovvero si accede dai, quindi andiamo sul team builder e andiamo ad aggiungere una nuova testata testata.

Clicchiamo sul più come al solito elemento lo caricherà dei preset di Eder, quindi dei temete che sono già pre ricostruiti, da cui possiamo partire come base.

Nel nostro caso non ci interessano perché vogliamo creare tutto da zero, quindi chiudiamo tranquillamente questa opzione e andiamo a creare la nostra testata l'iter del sito.

Nel nostro caso è costituita da tre colonne, una colonna, prima colonna, seconda colonna, Terza colonna.

Nella prima colonna andremo a inserire il logo nella seconda colonna, il menù del sito e nella terza colonna un pulsante.

Quindi andiamo a sviluppare.

Clicchiamo sul tasto più e andiamo appunto ad aggiungere.

Possiamo provare così magari perfetto tre colonne.

Ovviamente, se avete la um se volete ridurre le dimensioni delle colonne, una volta che le inserite cliccando sul layout c'è in percentuale la larghezza.

Quindi in questo caso, come vede, adesso è un venticinque per cento, ma se volete, potete tranquillamente modificarla attraverso questo cruscotto di controllo.

A questo punto abbiamo quindi creato la sezione Abbiamo inserito dei contenitori all'interno di questa sezione Andiamo ad inserire i elemento.

Ha un chiamato logo sito che mostra in automatico il logo che abbiamo caricato nelle impostazioni del sito generale, quindi non c'è bisogno che lo ricarichiamo di volta in volta, ma elemento lo pesca in automatico, quindi semplicemente lo trasciniamo.

Dove vogliamo mostrarlo.

Aspettiamo il caricamento e il logo viene mostrato in automatico.

A questo punto possiamo decidere la dimensione del logo.

In questo caso io deciderò di mostrarlo nella sua larghezza originale perché va già più che bene.

Eventualmente lavorerò un po' sullo stile potete modificare anche il link, quindi se volete rei indirizzarlo da un'altra parte cosa che si utilizza pochissimo.

Solitamente il logo del sito reindirizza l'homepage, quindi in questo caso in automatico elemento pesca il r l del sito che significa che reindirizzerà in homepage.

Quindi diciamo che in linea generale va più che bene così ovviamente potete anche modificare l'allineamento se volete quello che farò magari è eventualmente modificare la larghezza e potete modificarla sia in percentuale che in pixel.

Ci sono anche altri parametri che vi invito a testare, ma io nella maggior parte dei casi utilizzo o percentuale o pixel, come vedete potete modificarlo direttamente da questo pannello.

Io magari lo porterò, proviamo a duecento pixel, poi eventualmente lo andremo ad aggiornare.

Poi potete modificare il raggio del bordo e quant'altro tutte cose che in questa fase non ci interessano perché andremo a sviluppare leader per come l'abbiamo già um pensata e disegnata nel wireframe.

Poi in questa sezione voglio andare ad inserire il menù.

Torniamo quindi nella voce dei e cerchiamo menù.

Come vedete torno un attimo indietro per ogni sezione e temete che state creando elemento in modo intelligente, vi propone già quello che potrebbe interessarvi legato a quella determinata sezione.

Infatti, se vedete in questo caso compare in automatico logo, sito WordPress menù modulo di ricerca che sono tutti elementi che nella maggior parte dei casi devono essere presenti in un leader.

Però, se volete volete anche cercare per parola chiave menù, quindi WordPress menù lo inseriamo qua, aspettiamo il caricamento e la prima cosa che potete fare è definire che tipo di menù visualizzare noi precedentemente abbiamo creato un menù chiamato menù principale e lo andiamo a selezionare.

Potete decidere se svilupparlo orizzontalmente verticalmente un menù a discesa.

In questo caso io scelgo il classico menù orizzontale e voglio che sia allineato centralmente.

Potete definire un indicatore quando um passate con il mouse, ad esempio allineamento sotto potete utilizzare uno sfondo.

Insomma, ci sono delle personalizzazioni grafiche che poi avrete modo di testare personalmente in questo progetto metterò nessun indicatore, quindi non metterò nulla, ma andrò eventualmente a cambiare il lover al passaggio del mouse.

Indicatore sotto menù significa inserire una icona nel caso in cui ci sia un menù a tendina.

In questo caso non abbiamo un menu a tendina, quindi possiamo lasciarlo anche di default.

Potete decidere se inserire a larghezza piena il menù discesa nel menù tendina del mobile.

Quindi lasciatelo pure sì, poi vedremo anche come si comporta nella versione mobile e come crearlo e l'allineamento del testo a lato.

L'icona hamburger lo vedremo dopo nella versione mobile e più o meno qui ci siamo.

La cosa importante è andare a modificare lo stile, dove possiamo modificare appunto i colori e lo stile del font.

Tipografia viene installata in automatico il design e scusate il font che abbiamo inserito nell'impostazione globale, quindi va già più che bene.

Però io andrò ad inserire una versione um grassetto probabilmente.

Ecco sì, settecento oppure facciamo seicento okay di colore nero, quindi andrò a modificare il colore del testo in automatico.

L'elemento conosce che è un eleme-.

Un elemento in evidenza è un link e attribuisce il colore blu perché lo abbiamo precedentemente impostato in questo modo.

Poi possiamo decidere la spazzatura orizzontale, se volete.

Tra gli elementi questo è utile.

Se avete molte voci in questo caso potrebbe andare bene.

Dodici pixel magari.

Anzi facciamo quindici, poi dopo andremo a ridurre questa sezione.

Allora quindici pixel perfetto spazzatura verticale e la spazzatura eventualmente tra le voci a cinque Okay.

Poi meno discesa riguarda tutto il menù tendina.

In questo caso non ci interessa, ma se lo avete potete anche qui.

Modificare tutte le due impostazioni grafiche senza due strati serve per definire il Se avete l'hamburger menù nella versione desktop ora, um volevo inserire l'over.

Quindi al passaggio del mouse torniamo sul menù principale, quindi tipografia normale quando è attiva e visibile over il colore del testo mettiamolo blu, come vedete in automatico viene aggiornato e poi quando la voce è attiva, quindi significa che quando effettivamente sto navigando una pagina, ad esempio, sono nella pagina contatti.

Il link dei contatti verrà evidenziato in blu e in questo caso lo metterò a punto di colore blu.

Perfetto.

Okay, a questo punto andiamo ad aggiungere anche il pulsante a lato a destra, quindi torniamo nei e trasciniamo, anzi, facciamo un cerca pulsante.

Lo trasciniamo in questa determinata sezione e come vedete in automatico eredita già lo stile.

In questo caso lo chiamerò, contattami contatti e magari vado ad aggiungere anche una icona Qui.

Ovviamente potete inserire il link di destinazione e io lo collegherò alla pagina contatti digitando il nome della pagina automatico elemento troverà la pagina se chiaramente esiste e poi potete tranquillamente selezionarla in modo rapido.

Um, potete definire l'allineamento in questo caso io lo me sì.

Mettiamolo centrale e un'icona come vi dicevo.

Quindi clicca potete caricare un S V G, quindi potete andare online um ed effettuare una ricerca su siti che propongono ico n s v g personalizzate oppure, se trovate qualcosa che vi piace, all'interno della libreria di elemento, ad esempio una freccia classica, potete tranquillamente sfruttare direttamente questa funzione.

La posizione dell'icona la mettiamo dopo e anche la spazzatura.

Andiamo un po' ad aumentare così Okay, a questo punto, come vedete è un po' mhm non organizzata e non formattata in modo corretto leader del sito.

Quindi vado un po' a lavorare sulle spazzature.

Innanzitutto questa colonna questo contenitore possiamo farlo più piccolo in modo tale da poter poi allargare questa sezione.

Quindi vado a selezionare l'intera colonna e la vado a chiaramente a diminuire.

Magari possiamo portarla tranquillamente a un quindici percento mentre questa colonna qua possiamo anche aumentarla.

Diamo un po' al sessanta percento perfetto, poi entrando nel dettaglio del contenitore.

Ad esempio, se io andassi a selezionare l'intero contenitore um, dove ho inserito il menù? Ci sono varie impostazioni le vediamo un po' um, in questa fase potete innanzitutto definire l'altezza minima dell'intera sezione nella maggior parte dei casi in questo caso specifico va più che bene l'altezza di default poi potete decidere la direzione, quindi se punta centralmente orizzontalmente o anche invertire le colonne.

Ma va più che bene di default in questo caso e poi potete definire come giustificare il contenuto all'inizio centralmente alla fine in questo caso direi che centralmente è un'ottima soluzione la stessa cosa la farò poi anche per questa cosa, anzi facciamolo subito.

Giustifica il con centralmente sostanzialmente l'elemento che cosa fa con questa funzione? Va a centrare tutto il contenuto che c'è dentro quel determinato contenitore in modo tale da avere tutti gli gli gli elementi allineati.

Quindi lo faccio per questo e lo faccio anche per il logo perfetto.

Okay e vediamo velocemente altre impostazioni.

Potete inserire un gap, quindi uno spazio tra le colonne in pixel tipo in questo caso venti dalla colonna, venti nella riga e poi delle opzioni aggiuntive.

Potete definire ad esempio che tipo di tag h t m l è questo tipo di box se è un v, se è una nave, se è un link nella maggior parte dei casi va più che bene il valore che è che che è stato impostato come predefinito.

Diciamo che più o meno ci siamo a livello di leader.

Poi dopo andremo a vedere le nd chiaramente come si comporta.

Che cosa facciamo? Facciamo il pubblica della nostra header? Allora quindi una volta che avete creato la vostra testata, siete pronti per pubblicarla? Semplicemente il tasto è questo qui in basso pubblica come al solito elemento vi chiederà dove vuoi valorizzare il gamete e dovete aggiungere una condizione.

Ovviamente io voglio mostrare questa header in tutto il sito web.

Apro una piccola parentesi un'altra potenzialità enorme di elemento è quella di poter creare delle header delle testate personalizzate anche per pagine specifiche.

Perché ad esempio, supponiamo che io volessi creare una landing page dove in alcuni casi non è presente il menù.

Ma se io volessi inserire un menù particolare con solo due o tre voci, posso creare un menù personalizzato con elemento, una header personalizzato con elemento e mostrarla solo direttamente all'interno di quella pagina web.

Quindi, come vedete, è molto molto flessibile questa funzione.

In questo caso scelgo tutto il sito salva e chiudi, aggiorniamo e andiamo a vedere in il nostro risultato iniziale quello che abbiamo prodotto.

Torno un attimo in homepage.

Eccoci qua e questo è il risultato.

Come vedete, diciamo che come release iniziale può anche andare bene.

Ci sarà un po' da lavorare forse sulla dimensione di questi elementi un allineare sicuramente qualcosa qui nel pulsante lavorare un po' sulle dimensioni e quindi sulla formattazione andiamo un po' a lavorare nel dettaglio però a grandi linee diciamo che ci siamo.

Allora a questo punto torniamo.

Una volta che abbiamo pubblicato l'ide, torniamo sempre nell' editing della della testata e andiamo appunto a aggiustare un po'.

Alcuni dettagli parto dalla dal menù.

Clicco quindi il wordpress menù che ho precedentemente inserito e vado ad aumentare un po' la dimensione proviamo con venti, sicuramente venti è un po' troppo.

Volevo fare un po' più grande.

Diciotto ci può stare.

Okay poi il pulsante sicuramente dopo andrò a ridurre.

Andrò ad eliminare la global page che non ci serve e anche la contatti perché è già presente in questa in questa ora vado a modificare un po', il pulsante stile.

Allora voglio ridurre un po' la dimensione del font, magari a quindici potremmo farlo eventualmente maiuscolo.

Lasciamolo predefinito senza problemi.

Magari il default mi pare che sia a diciotto.

Facciamolo a sedici.

Okay.

E un po' la spazzatura, um, ovvero il rientro qui in basso.

Vado a inserire dieci di default, poi blocco gli elementi e vado ad aumentare un po' il margine sopra.

Magari possiamo fare sedici sotto sedici e poi un po' a destra vediamo un po'.

Apriamo con venti e anche venti a sinistra.

Okay, forse ridurre.

Ridurrei un po' il margine sotto vediamo un po' dodici.

Okay.

No, eccolo qua.

Aggiorno e vado a vedere in front end.

Eventualmente qui potete anche modificare i colori.

Come avete visto.

Questo è è il set di default di elemento, ma se volete modificarlo con altri colori potete farlo.

Ovviamente il consiglio che vi do è di essere sempre coerenti col vostro col vostro mood board che avete creato grafico.

Ma se ad esempio state creando una landing page, volete creare un menù diverso con colore diverso? Potete farlo? Avete visto che un elemento molto, molto semplice.

Okay, abbiamo sistemato anche il pulsante.

Ci siamo a questo punto, quindi la nostra iader è diciamo quasi operativa per essere pronta all'uso.

E quello che farò è Tornerò, um, nel menù di navigazione che ho creato ad eliminare la pagina contatti e la pagina Global ST in modo tale da rendermi conto come realmente sta venendo il mio il mio set.

Allora torniamo in bacheca.

Quindi nel nostro pannello di WordPress aspetto menù, vado a selezionare il menu principale e vado a eliminare Global Style.

Clicchiamo su questa freccia.

Rimuovi, diciamo anche rimuove dalla pagina contatti e salva menù.

Quindi eliminiamo le voci che non ci servono.

Faccio aggiorna.

Okay.

Okay.

Come vedete, si è un po' ridotta la la dimensione della sezione.

Quindi sicuramente andrò un po' a riposizionare, quindi torno nella mia modifica di Eder.

Qui faccio un refresh, così prende in automatico le modifiche che ho appena fatto.

Okay, allora, come vedete, io avevo formattato centralmente gli elementi.

Però potremmo inserirlo a destra.

Mi sembra un po' più coerente.

E quello che potremmo fare eventualmente forse vediamo un po' aggiungere, forse no.

Venti pixel è un po' troppo, quindi no, rimarrei su diciotto.

Forse aumenterei questo e lo sì, portiamolo.

Portiamolo anche questo a diciotto ed eventualmente aumenterei un po' a destra.

Ventidue i due pixel.

Direi che ci può stare.

Okay, aggiorna c'è il refresh della pagina e si dovrebbe allineare tutto quanto a destra.

Okay, perfetto.

Diciamo che ci siamo.

Ovviamente anche questo dipende dalla dal vostro stile grafico.

Però come prima fase iniziale, direi che ci siamo e il risultato ci piace.

A questo punto abbiamo creato un leader per la versione desktop.

Che cosa succede? Che se noi andiamo nel nostro cruscotto di controllo torniamo nell' editing della testata e attiviamo la modalità e scelgo mobile per tre.

Come vedete, è tutto un po', eh? Poco formattato il logo in alto il menù sotto la un po' messa qui casualmente.

Ovviamente questa non è un'ottima pratica di web design, lo stesso per il per la versione mobile.

Quindi bisogna lavorare su queste parti sia per la versione desktop e sia per la versione mobile.

Che cosa ti consente di fare elemento allora elemento, come ho già ripetuto più volte, è strapotente a livello di.

Ma la cosa più importante e potente, a mio avviso appunto, è quella di creare per template si intendono qualsiasi tipo di per leader, per il, per la sezione degli articoli interni e quant'altro.

Ma la cosa interessante è che ti consente di gestire anche in modo separato sezione per sezione.

Quindi noi che cosa andremo a fare adesso? Allora chiudiamo intanto questo parametro.

Partiamo da questa base.

Allora innanzitutto una un una.

Una funzione veloce di elemento è quella del copia incolla.

Ve lo faccio vedere qui, ma magari lo utilizzeremo probabilmente anche in altre lezioni.

Ad esempio selezionando con il tasto destro sul un qualsiasi vi si attiveranno una serie di voci, ad esempio duplica e vi duplica l'elemento.

Potete trascinarlo dove volete anche da altre parti, oppure eventualmente anche coppia e poi incollarlo da un'altra parte.

E questo lo potete fare per qualsiasi tipo di elemento, contenitore e sezione.

Quindi è quello che andrò a fare adesso.

Allora io adesso andrò a clonare l'intera leader che ho creato.

Eccola qua.

E poi gli andrò ad assegnare delle condizioni.

Allora, elemento nel nelle impostazioni avanzate ci consente di decidere se mostrare o nascondere questa sezione in determinati device.

Io a questo punto voglio che questa IDE, quella che ho appena creato, venga mostrata solo nella versione XP.

Quindi seleziono l'intera sezione che ho creato.

Vado su avanzato e a questo punto vado ad assegnare delle regole.

Dirò nascondi su tablet verticale, nascondi su mobile per tre aggiorna la pagina e da questo momento questa Eder verrà mostrata solo nella versione desktop e non nella versione mobile, mentre questa Eder, la seconda che ho clonato, andrò a fare la stessa cosa, ma con condizioni inverse avanzato.

Gli dirò nascondi su desktop mentre mostra su tablet e mobile per tre.

Io adesso creerò un leader per il desktop come ho appena fatto.

E un leader per il mobile, però chiaramente potete anche personalizzarle una per la versione tablet e in questo caso cercherò di trovare un giusto compromesso tra il mobile e il tablet.

Però come vedete potete fare la stessa cosa.

Aggiorno la mia pagina web.

Okay, quindi partiamo dal presupposto che il leader per la versione desktop è a posto, quindi è stata configurata correttamente per andare a modificare l'editing della modalità responsabile.

Attiviamo il nostro cruscotto mobile tre e andiamo a lavorare sulla base di questa.

A questo punto, una volta che siamo qui dentro, noi siamo partiti da un clone.

Come avete visto, però se volete potete anche ricostruire tutto interamente da zero.

Io in questo caso per realizzare un leader compatta e utilizzabile in termini di user experience andrò a lavorare su questi elementi, perché comunque sono dei semplici contenitori orizzontali e andrò un po' a organizzarli nel migliore del mondo.

Allora, la prima cosa che farò è andare a spostare questo contenitore in alto, perché voglio inserire la Turati quassù.

Posizionata poi il logo.

Invece lo andrò ad inserire a sinistra e il menù a destra per fare questo io posso creare.

Posso clonare direttamente questa colonna e andarli a definire una larghezza.

Vediamo un po'.

Proviamo con duecentocinquanta.

Proviamo con duecento.

Oppure magari anche in percentuale.

Facciamola direttamente in percentuale.

Così siamo più precisi.

E anche questa colonna percentuale al cinquanta percento.

Come vedete, vengono perfettamente allineate a questo punto.

Che cosa? Farò Il logo.

Lo sposterò all'interno di questa colonna.

Questo non ci serve tasto destro.

Potete eliminarlo.

Okay, um, adesso poi dopo andremo chiaramente anche a lavorare anche sulle dimensioni dei vari elementi.

E questa sezione qua In realtà possiamo ancora ridurla un po'.

Perché potremmo ridurla ad un trenta per cento e decidere que questo va bene centralmente.

Okay.

E andiamo a lavorare un po' sulle dimensioni.

Allora, una volta questo l'abbiamo portato al trenta percento.

Quindi questo era al cinquanta.

Diciamo che portandolo al settanta dovremmo riuscire ad avere un risultato migliore.

Eccolo qua.

Quindi abbiamo impostato a sinistra il logo e a destra il menù.

Clicchiamo sul logo e andiamo un po' a modificare le dimensioni della larghezza.

Allora, inizialmente nella versione desktop lo avevamo impostato a duecento pixel.

Proviamo con centocinquanta, magari aumentiamola anche un po' a cento centosettanta.

Direi che può andare bene.

Okay.

Poi per quanto riguarda il menù, cliccando sull' editing della la classica matita potete accedere alle classiche modifiche di contenuto e di stile di base.

Noi vogliamo inserire, vogliamo mostrare sempre lo stesso menù, però se volete potete anche mostrare un menù o addirittura un menù diverso per la versione mobile e lo potete selezionare direttamente da questa sezione.

Potete anche simulare l'apertura, come vedete in questo caso molto interessante um andiamo a vedere un po' quelle che sono le personalizzazioni grafiche.

Allora, una volta che aprite il menù, potete decidere questo va bene qua alla voce um della larghezza piena.

Questo significa che il menù si aprirà a Full Weed oppure è compatto come in questo caso.

Ovviamente vi consiglio larghezza piena, altrimenti non si vedrebbe correttamente l'allineamento del testo.

Potete decidere se metterlo centralmente o a sinistra e decidere che tipo di pulsante due strati volete inserire qui Va più che bene il pulsante hamburger menù.

La cosa interessante è che potete anche modificarlo se volete l'hamburger menù attraverso questa icona.

E anche qui potete caricare o un S V G personalizzata oppure della libreria icona utilizzare altri elementi In questo caso, vediamo queste bars dovrebbero essere uguali, mi sembra.

No, sono leggermente diverse.

Okay, sceglierò queste queste barre e potete decidere chiaramente anche l'allineamento.

In questo caso forse centra centralmente va più che bene.

Okay, Intanto aggiorno le modifiche e andiamo a vedere poi le parti dello stile di questo menù.

Allora tipografia, tipografia Va più che bene quella di default, perché voglio comunque rispecchiare la tipografia che ho inserito nella versione desktop.

Quello che voglio fare è modificare questa icona, il colore dell'icona.

E per fare questo troviamo la tap pulsante a due strati.

Possiamo definire, ad esempio, il colore dello sfondo.

Come vedete, in questo caso io andrò ad assegnarle.

Vediamo un attimo.

No, un leggero colore azzurro chiaro E il colore dell'icona invece forse no.

Forse il blu mi sembra un po' troppo acceso.

Lo facciamo nero.

Okay, perfetto.

Come vedete al click si apre in questo modo e anche questi colori si possono presentare quindi al passaggio del mouse lo potete fare qua um, potete farlo sempre nel non menù discesa, ma menù principale, ovvero over, potete decidere di che colore è la voce attiva, di che colore è il passaggio del mouse e quando è normale.

Vediamo un attimo, proviamo anche qua.

Okay.

Nella tab menu principale potete inserire potete modificare le le opzioni di passaggio del mouse e il colore di quando è attiva la voce, mentre nella voce meno discesa.

In questo caso, essendo un vero e proprio menù a tendina, potete definire lo stile di queste di questo menù a tendina, come ad esempio il background al passaggio del mouse.

Anche ad esempio lo sfondo.

Sì, in questo caso lo lascerei di default va più che bene bianco, però magari al lover potremmo inserirlo di colore azzurro.

Okay, sì.

E il colore del font di colore bianco al passaggio del no? Okay, va più che bene.

A questo punto, una volta che avete configurato questi, potete aggiornare e salvare però l'ultima, cosa che voglio mostrarvi è andare a ridimensionare un po' questo pulsante che come vedete ho messo nella parte iniziale, ma voi se volete potete metterlo qui a fianco.

Potete metterlo sotto chiaramente in base a come volete costruire la vostra IDE mobile.

Quindi clicchiamo sul stile.

Andiamo su tipografia.

Innanzitutto vado un po' a ridurre il font.

La dimensione probabilmente.

Magari proviamo a quattordici e qui ho intenzione di farlo giustificato in questo modo.

Però magari potremmo anche eventualmente cambiare la.

Allora, vediamo un po' Um contatti La modifichiamo in richiedi un preventivo.

Magari andiamo ad aggiungere su stile qualche pixel.

Undici troppo piccolo.

Okay, diciamo che il quattordici può quattordici pixel.

Okay, eccolo qua.

Aggiorniamo la pagina E come vedete, nella versione mobile abbiamo creato un menù completamente personalizzato che si attiva solo in questa versione.

E la stessa cosa la potete fare anche per la versione del tablet.

Quindi, come vedete, um ora adesso andremo a vedere in il comportamento del del sito web nella versione desktop e mobile.

Però, come vedete, con elemento avete il controllo su ogni tipo di sezione, specialmente quando si tratta di andare a modificare le sezioni dei device mobile.

Quindi anche qui avete pieno controllo.

Adesso io vado un attimo in homepage faccio il refresh della pagina.

Okay, questa è leader per il desktop, quindi va più che bene.

Ora riduco il browser velocemente.

Come vedete, questo è leader per il mobile molto, molto interessante e molto, molto compatta.

Ovviamente potete testare questi queste porzioni queste sezioni dal vostro smartphone.

Ci sono delle app online per simulare il comportamento della versione mobile, oppure ci sono delle estensioni di Chrome? Um per vedere il sito web da vari dispositivi potete simulare ad esempio il sito web da un iPhone dodici o un iPhone quattordici, quindi anche in base a varie dimensioni differenti device però diciamo che in linea generale era per farvi vedere questa lezione come elemento agisce su i vari elementi in questo caso del leader e specialmente nell'aver quando si tratta di modificare e creare delle versioni diverse per dispositivi mobile.

Quindi questa era la lezione dove abbiamo visto come creare un iter per desktop mobile e anche tablet in modo completamente separato, perché avere delle sezioni diverse in base al dispositivo è molto, molto importante.

Oggi sappiamo benissimo che il il mobile è uno dei fattori di ranking più importanti.

Il numero di accessi di persone avviene sempre in percentuale maggiore da dispositivi mobili e quindi è una parte che devi assolutamente personalizzare nel dettaglio