Una volta che hai definito tutti gli elementi all'interno del tuo wireframe che dovranno apparire nella tua homepage, è giunto il momento di costruire la pagina attraverso elemento.

Prima di iniziare, assicurati di avere a portata di mano il wireframe che hai precedentemente creato con un un'app online o direttamente su carta, come nel mio caso e anche il mood board grafico.

Questo ti servirà per avere la linea guida e i colori sempre a portata di mano, per non andare, diciamo fuori rotta rispetto a quello che hai già definito inizialmente.

Questo ti servirà per avere un controllo e non andare ad inserire colori diversi, sezioni diverse rispetto a quello che hai già definito sulla base del tuo target e del tuo pubblico.

Entriamo subito nel concreto, quindi andiamo in pagine tutte le pagine e andiamo nella nostra homepage e a modificarla tramite elemento, quindi homepage modifica con elemento.

Partiamo quindi da una da un foglio bianco sostanzialmente e andiamo ad aggiungere vari elementi.

Allora la prima sezione L'aero section di copertina è costituita da Un'intera, sezione al cui interno ci sono due contenitori, uno che occupa il cinquanta percento a sinistra e uno che occupa il cinquanta percento a destra, quindi vado ad aggiungere con l'icona più una colonna di questo tipo, eh scusate, al cinquanta per cento okay, al cui interno andrò ad inserire il in questo caso la prima, il primo partendo da sinistra è un titolo e un sottotitolo, due pulsanti per poi un box per le recensioni dove inserirò uno screen um un'immagine in in p n g che mostrerà una grafica legata al social prof e poi un video.

Okay, quindi prima cosa da inserire, ovviamente il intestazione per mostrare un titolo e un sottotitolo, quindi due intestazioni e due pulsanti in questo modo pulsante uno, pulsante due.

Poi andrò a inserire anche il l'immagine.

Intanto posizioniamo magari il l'immagine.

Eccola qua e poi a destra andiamo ad inserire il nostro video.

Ovviamente questa è tutta una fase primordiale, quindi voglio mostrarvi proprio il processo dall'inizio alla fine fino poi all'aggiustamento alla formazione.

Allora partiamo da sinistra.

Quindi il titolo Vado ad inserire un titolo di esempio lenza marketing.

Questo sarà il titolo e poi vado ad aggiungere un sottotitolo il tuo shop online.

Okay, ho inserito questi due titoli di esempio nel primo caso questo qua, essendo il titolo della pagina, andrò ad assegnare un tag h t m l h uno e come vedete in automatico elemento andrà a sovrascrivere l'impostazione di global sette grafica dei phone se volete potete anche modificarlo e io vi farò vedere poi successivamente come modificherò il sottotitolo però se la vostra formata è già corretta, lasciatela pure così come al solito qui potete fare le solite modifiche, quindi cliccando sull'intestazione stile colore del testo, tipografia, tratto ombra, modalità di fusione, le solite cose di elemento dove c'è veramente veramente tanto da poter modificare um okay a questo punto l'h due va bene in questo caso come sottotitolo l'unica, cosa che farò è ridurre un po' la dimensione e anche il lo stile.

Questo potrebbe andare bene a ventotto, ma il chiaramente va bene, ma il peso lo porterò in regola sicuramente un po' più um gerarchicamente leggero e leggibile sicuramente come design.

Okay, una cosa um che farò subito come vedete qui c'è il titolo della pagina di riferimento l'andrò a nascondere perché di solito nella maggior parte dei casi, a meno che a meno che non si tratti di un articolo di blog o di un'altra sezione particolare potete tranquillamente disabilitare il titolo perché lo andrete a personalizzare con il design e i t elemento.

Per fare questo dobbiamo cliccare nella voce Impostazioni a sinistra nascondi titolo sì in automatico viene eliminato.

Ora aggiorno la pagina e andiamo a lavorare sul resto.

A questo punto torniamo nel nostro wireframe.

Come vedete, ho inserito due pulsanti C T a uno e C T a due.

Poi andrò chiaramente a persona anche il il titolo dei pulsanti.

In questo caso c'è una funzione.

Come vedete, trascinando gli elementi elemento dispone gli elementi appunto, in modo um allineato a sinistra.

Però se io volessi allinearli uno a fianco all'altro quindi online posso farlo attraverso una funzione nelle impostazioni avanzate.

E come si fa allora innanzitutto devo aggiungere una nuova um una nuova sezione, una nuova colonna per fare questo andiamo nei e aggiungo un contenitore qui sotto all'interno di questa sezione Vado a impostare la direzione in orizzontale e vado a trascinare questi due pulsanti prima uno e poi l'altro Okay.

Questi pulsanti, come vedete, sono già stati allineati perché ho già impostato una direzione.

Però mi raccomando, assicuratevi che anche nelle impostazioni avanzate del pulsante, quindi cliccando sulla matita modifica pulsante avanzato la larghezza si è impostata in in linea sia per il primo pulsante che per il secondo pulsante.

Questo farà sì che tutto quanto si mostri bene anche nella versione della pagina, quindi anche questo il like come vedete il pulsante è perfettamente allineato.

Uno a fianco all'altro.

Intanto aggiorno le modifiche, dopodiché vado ad inserire una immagine che ho creato con gamba per mostrare delle delle recensioni di riprova sociale.

In questo caso ho creato uno s una un s v g.

Vediamo cerco di caricarla, vediamo se funziona l S V G come immagine, oppure la caricherò come icona o con se come semplice P N G.

Okay, perfetto.

Possiamo ovviamente anche, um eliminare l'allineamento centrato per alli- allinearlo a sinistra.

Diciamo che il risultato mi piace molto e ovviamente qui voi potrete andare a creare una grafica custom in base a quello che volete mostrare.

Potete fare le stelline di colore verde, potete aggiungere Luigi, dite chiaramente in base alle vostre preferenze e dopodiché andrò a personalizzare la sezione del video.

Allora, per quanto riguarda il video, se andiamo a cliccare nell' editing del wet, possiamo ovviamente collegare un link di YouTube in questo caso io poi dopo collegherò un link che ho all'interno del mio canale youtube possiamo finire se deve essere riprodotto auto- automaticamente silenzioso, ciclico se vogliamo i controlli del lettore.

Ma la cosa più importante a livello grafico, a mio avviso, è quella di inserire un'immagine sovrapposta e quello che andrò a fare è semplicemente un'immagine che si va a sovrapporre a quella che è l'anteprima di youtube ho preparato già un'immagine in formato quadrato con campa e l'andiamo a posizionare aspettiamo il caricamento okay a questo punto possiamo anche se vogliamo cambiare l'icona in questo caso a me va benissimo l'icona di default e per quanto riguarda lo stile possiamo definire se mostrare il classico formato sedici noni di youtube, il quattro terzi oppure anche il formato quadrato.

In questo caso io siccome ho già creato un'immagine nel formato quadrato, vado chiaramente a impostarla uno su uno.

Okay, aggiorno intanto le modifiche e andiamo a vedere un po' il intanto faccio un sh che ancora non l'abbiamo fatto per vedere quello che stiamo creando in anteprima direi che il risultato è già molto buono quello che possiamo fare eventualmente è allineare questi contenuti centralmente però chiaramente vedete un po' se è un'opzione che vi piace oppure no personalmente a me.

Io preferisco tutto on the top, quindi in alto a sinistra.

Però quello che potete fare eventualmente è giocare un po' tra la spazzatura ed è quello che magari faremo tra qualche istante.

Potremmo riportarlo alla il suo allineamento di default in alto e magari andare a giocare un po' con le spazzature per aumentare le spazzature.

Io se vi ricordate qui ho inserito una un contenitore, quindi clicchiamo sul contenitore e vado ad aggiungere semplicemente un margine sopra e sotto, quindi una spazzatura.

Selezioniamo quindi il contenitore avanzato e per quanto riguarda i margini andrò ad inserire magari dieci sopra e dieci sotto.

Magari possiamo anche aumentarlo un po' dodici pixel dodici pixel Okay, aggiorno la pagina.

Andiamo a vedere la nostra home.

Okay, sicuramente respira molto di più la sezione.

Ora quello che farò se vedete qui c'è un po' di spazio sulla sinistra è perché quando ho creato il pulsante personalizzato ho inserito dei margini.

Quindi semplicemente andrò a lavorare un po' sulle spazzature.

Quindi andiamo innanzitutto in questa colonna e clicchiamo sul pulsante specifico che vogliamo modificare e andiamo nel rientro.

Scusate, non rientro.

Questo lo riportiamo nel suo valore di default la Tav avanzato per andare a inserire dei margini tutti a zero, sia per questo, sia per questo.

Okay, aggiorno le modifiche.

Dopodiché andiamo anche a farlo nel rientro della colonna.

Lo impostiamo a zero.

Okay, però vado ad aumentarlo sopra di di dieci e sotto di dieci, okay, quindi è perfettamente allineato.

Poi ovviamente andrò anche a modificare qua il anzi, facciamolo subito.

Così allora servizi qui voglio indirizzare il mio visitatore alla pagina servizi, mentre in questo caso alla pagina contattami.

Perfetto.

Aggiorna la pagina.

Andiamo a vedere in che cosa succede.

Okay, molto, molto bene.

L'unica cosa che farò ora è aumentare un po' di margine dell'intera sezione.

Quindi clicco sull un'intersezione avanzato.

Vado a disabilitare i margini sopra.

Magari diamo un po' di respiro da leader sia sopra che sotto.

Se volete potete farlo anche in percentuale.

Chiaramente poi il sistema lo adatterà in base a alla percentuale della dimensione, del del browser e della dimensione del device.

Okay, poi un'altra, cosa che vorrei provare a fare nelle impostazioni del video avanzato proviamo ad inserire un po' di bordo.

Vediamo un po' Sì, un bordo leggermente tondeggiante.

Questo perché richiamo un po'.

Lo stile dei pulsanti che ho già creato, che di base avevo messo sei pixel di di bordo, diciamo.

Magari potremmo farlo a otto, in questo caso del video.

Sì, sicuramente è una sezione che è un po' più morbida e tondeggiante.

Okay, torniamo nel nostro aggiorniamo la pagina.

Quindi abbiamo aumentato lo spazio sopra, come vedete.

Okay.

E abbiamo inserito questo bordo tondeggiante, quindi diciamo come prima versione, diciamo va più che bene.

Ora torniamo nel nostro wireframe qui.

Io ho inserito dei loghi partner, quindi dobbiamo semplicemente inserire un widget che mostri delle immagini Potete inserire come carosello oppure come griglia.

In questo caso, io ho scelto un carosello, quindi mi sposto leggermente sotto e vado ad inserire un um, una riga intera al cui interno andrò a inserire chiamato carosello di immagini.

E ovviamente anche una intestazione per assegnare un titolo.

Eliminiamo un attimo questo.

Okay, allora l'intestazione.

Le portiamo al centro, la cambiamo la direzione.

Okay, Perfetto.

E poi? Quindi abbiamo detto il carosello carosello di immagini a cui andrò ad aggiungere dei loghi dentro il mio sito web.

Potete caricare immagini semplici in p N g S V G J PG, come chiaramente preferite.

Nel frattempo che eseguo l'upload potrei considerare alcune cose a livello grafico.

Come vedete le sezioni sono sviluppate tutte per orizzontale per evidenziare tra una sezione e l'altra potremmo anche assegnare dei colori diversi, ad esempio la hero action che abbiamo appena creato.

Potremmo inserirla di colore mhm di un colore diverso, quindi un colore netto, un colore deciso o uno sfondo leggero per differenziarla da dal resto.

In questo caso io andrò ad inserire uno sfondo leggero azzurro per l'ice action e i partner le lascerò con il classico sfondo bianco per esaltare meglio i loghi che sto caricando.

Ecco qua il caricamento è stato completato.

Intanto inseriamo la gallery e vado subito a modificare il il colore di sfondo di questa sezione.

Quindi prendiamo l'intera sezione stile tipo di sfondo e vado a sezionare il colore che ho già salvato nei set.

Ed eccolo qua sicuramente lavorerei.

Lavorerei a questo punto, visto che ho aggiunto un colore nel pudding.

Quindi un rientro farei in questo modo aggiungerei sopra magari un quaranta pixel sotto allo stesso modo.

Poi ai lati sicuramente andrebbe andrebbe bene anche di default.

Vediamo un attimo, facciamo un refresh.

Okay, molto, molto interessante.

A questo punto forse toglierei il margine sopra potremmo portarlo tutto a zero zero zero, visto che non è più bianco, ma è azzurro.

Sicuramente non ha più senso avere quello spazio bianco in alto.

Aggiorniamo la pagina.

Okay, ci siamo.

Perfetto.

A questo punto andiamo a lavorare.

Quindi la reception la copertina è stata definita.

Andiamo a lavorare su questa parte di carosello.

Andiamo a vedere quello che ci consente di fare questo qui.

Abbiamo detto che il titolo sarà ho lavorato per quindi lo vado a modificare per E in questo caso, essendo un sottotitolo della pagina, va benissimo.

H due.

Ora andiamo a modificare il del carosello.

Potremmo definire la dimensione delle immagini come piene.

Se avete già inserito delle immagini della della dimensione originale.

Poi, per quanto riguarda le slide da visualizzare, potremmo uno, due, tre, quattro cinque.

Ne ho inseriti uno, due, tre, quattro, cinque, sei.

Quindi potremmo magari inserirne quattro di default e poi scorrono con il carosello.

Okay.

E possiamo decidere se utilizzare S frecce e punti.

In questo caso preferisco delle frecce, quindi solamente delle frecce ai lati va benissimo lo stile di default nelle opzioni aggiuntive.

Autoplay Mettiamo.

No, preferisco farla scrollare.

All'utente velocità dell'animazione, magari portiamola un po' più veloce a settecento.

Potete provare anche da qui.

Il carosello.

La direzione va benissimo da sinistra verso destra.

Okay, il logo di Learn lo dovrò chiaramente.

Ridimensionare è più grande rispetto al resto.

Andiamo un attimo a vedere la tab dello stile.

Posizione delle frecce esterne.

Preferisco il posizionamento esterno, ma chiaramente questa è una vostra preferenza.

Per quanto riguarda il colore, assegnerò vediamo un colore di un colore nero classico.

Okay, Per quanto riguarda l'immagine l'allineamento centrato alle frecce e più o meno direi che ci siamo.

Aggiorniamo la pagina e andiamo a vedere in che cosa abbiamo prodotto.

Okay, eccola qua.

Il nostro carosello.

Direi molto, molto interessante.

Anche molto snello e veloce e e più o meno ci siamo l'unica.

Cosa? Aggiungerei sicuramente un po' di pudding di margine sopra sotto nella sezione bianca.

Quindi andiamo nell'intera sezione avanzato Pixel.

Proviamo con trenta sopra e trenta sotto, sempre per dare un po' di respiro.

All'intera sezione.

Okay.

A questo punto siamo arrivati alla Tav dei servizi che potremmo fare di colore blu, se vogliamo, per dare un po' di vivacità alla nostra sezione.

Oppure magari di un colore chiaro per differenziarla dalla sezione bianca.

Andiamo subito a crearla.

Quindi abbiamo visto che questa sezione è costituita da c'è, una un contenitore all'interno del quale ci sarà un titolo e poi tre colonne interne.

Quindi aggiungiamo un in questo caso, eh piena larghezza.

Dove andiamo ad inserire un'intestazione.

Va bene.

H due e qui ci scriviamo.

Cosa posso fare per la tua attività? Okay, lo andrò ad allineare al centro e poi sotto andrò ad aggiungere tre colonne, se non sbaglio sì, tre colonne al cui interno andrò a inserire i vari.

Allora um qui magari potremmo intanto aumentare un po' il margine sopra potremmo farlo venti, venti sotto aggiorna le modifiche e andiamo ad aggiungere questi elementi.

Questi elementi possono essere aggiunti in vari modi elemento a tanti che vi consiglio di testare nel corso del tempo.

Uno tra tutti, ad esempio, potrebbe essere il Image box riquadro immagine che si comporta in questo modo Vi faccio vedere questo vi faccio vedere anche l'iphone x che io personalmente utilizzo molto, ma volendo si può si può creare una sezione customizzata anche pezzo dopo pezzo.

Ad esempio, il box in questione funziona in questo modo.

Come vedete è costituito da un'immagine da un titolo, da un sottotitolo ed eventualmente anche un link.

Come funziona? Funziona in questo modo aggiungete prima di tutto l'immagine del servizio di riferimento.

Ora inserirò delle semplici magini di segnaposto, il titolo, la descrizione, ovviamente ed eventualmente il link che poi porterà al singolo servizio chiaramente nella tv dello stile.

Ovviamente potete modificare tante cose come la posizione dell'immagine l'allineamento dei vari testi di tutto quanto quindi anche questo potrebbe essere un buon punto di partenza immagine.

Potete ovviamente modificare qui la spazzatura, la larghezza dell'immagine in questo caso cento per cento va bene l'unica cosa che cambierei oltre a un po' la spazzatura a ridurla sì, è la dimensione del titolo e del sottotitolo perché in questo caso lo andrei ad aumentare un pochetto.

Tutte queste modifiche le troviamo nella tab del contenuto contenuto, titolo e descrizione titolo tipografia va benissimo il font che ho già scelto.

Ovviamente non andrò a cambiare l'unica cosa che andrò a fare è ad aumentare un po' la dimensione no, siamo sullo spazio, proviamo con il peso intanto magari prenderne un po' di settecento okay.

E la descrizione dove sicuramente la farei un po' più piccola forse ho quattordici pixel o quindici pixel facciamo un attimo il refresh perché non elemento non mi sta modificando.

La aggiorno, faccio il refresh della pagina.

Queste cose potrebbero capitare ogni tanto, specialmente quando ci sono degli aggiornamenti importanti di elemento all'ultima versione qualcosa potrebbe incastrarsi tra virgolette.

In questo caso fate il refresh della pagina e vedete se riparte tutto quanto, quindi torniamo su.

In questo caso c'era un problema con l'editing del titolo.

Torniamo qua, vediamo un attimo No, in realtà qui prende semplicemente lo spazio.

Okay, tanto lo riportiamo di default questa spazzatura del titolo tipografia okay, sicuramente c'è un problema temporaneo sull' editing del titolo.

Poi magari ci torneremo però intanto era per mostrarvi come modificare il il titolo poi un'altra alternativa per inserire dei box servizi in questo caso è quella del riquadro icona dove al posto dell'immagine a differenza del precedente, potete digitare e trovare qualsiasi tipo di icona, ad esempio inserirla um modificare lo stile, ad esempio con una cornice intorno, oppure con un cerchio pieno um ed eventualmente poi modificare i colori.

Anche qui titolo e descrizione potete collegare un link e chiaramente poi l'allineamento di tutti gli elementi.

Questo io lo utilizzo molto sia per i servizi, ma anche quando devo presentare magari i vantaggi dei valori di un'azienda, quindi consentono comunque di organizzare molto bene e dare quella semplicità di lettura in più.

Um, come dicevo anche qui la possibilità di modificare il colore dell'icona del contenuto e quant'altro.

Vediamo qua se il titolo funziona sì, qua in realtà il titolo funziona, quindi probabilmente bisogna controllare se c'è qualche aggiornamento di elemento su questa sezione.

Però a grandi linee, tornando un attimo nel nostro wireframe abbiamo visto che questi box si possono tranquillamente replicare.

Quindi che cosa farò ora? Utilizzerò questa funzione come avete appena visto per clonare le le intere colonne, perché una delle cose più potenti ce ne sono tante delle metro, come abbiamo già visto nel corso, è quella di clonare qualsiasi cosa, dai singoli alle intere sezioni, ma anche ai singoli contenitori.

In questo caso se voi avete creato già una colonna che è operativa e funziona, avete già definito il design, potete tranquillamente cliccare sul tasto destro e um sul contenitore e cliccare su duplica.

In questo caso la colonna erano tre colonne potete eliminare l'ultima, quindi con tasto destro e in automatico vengono mostrate.

In questo caso erano quattro quattro colonne okay, magari mettiamone quattro giusto per vediamo un attimo con il duplica.

Intanto, salvo questo qua, lo possiamo eliminare.

Okay, aggiorna.

E per farvi vedere, Insomma, che potete mostrare i servizi in queste due modalità.

Ovviamente, se volete potete ricreare questo design anche in modo personalizzato.

Quindi, ad esempio, magari adesso vi faccio vedere velocemente questo esempio e poi andremo più rapidi nelle altre sezioni.

Però se io volessi riprodurre questo design um parto da questa base, magari Okay, potrei farlo anche con i singoli widget.

Ad esempio.

Prima di tutto, che cosa c'è in questo sezione immagine? Quindi vado a inserire un'immagine.

La inseriamo così, okay? Poi viene mostrata chiaramente andrete a modificare la dimensione, poi che cosa c'è? C'è un titolo, quindi andrete andrete ad aggiungere una intestazione, poi c'è un piccolo paragrafo di testo e poi c'è un pulsante.

Eventualmente però potete aggiungere anche il link sia sull'immagine, oppure anche eventualmente sulla intestazione, eh? Chiaramente dipende sempre, anche in questo caso, dal tipo di design che volete aggiungere.

Quindi in questa fase avete visto che potete creare il vostro um la vostra card, in questo caso il vostro design come preferite.

Ci sono dei preset e dei che vi aiutano a velocizzare la cosa e dei che, um, vi consentono di creare tutto da zero pezzo dopo pezzo.

Okay, ho ripristinato intanto lo stile di default del titolo del Una cosa interessante che voglio mostrarvi è la possibilità di copiare.

Abbiamo visto che si possono copiare e incollare e anche duplicare, quindi eh, ma un'altra funzionalità interessante è quella di copiare e incollare lo stile.

Che cosa succede se io, ad esempio, andassi a selezionare con il tasto destro questo chiamato riquadro immagine? Se io andassi a cliccare copia, posso incollare in un altro l'intero stile con la funzione incolla stile ora non capisco per quale motivo non venga incollato.

Provo a fare il refresh della pagina, sì, ah, eccolo qua.

Sta tornando e probabilmente era un bug momentaneo di elemento però in realtà funziona.

Ora ho aggiornato la pagina, vado a vedere anche in front end e per mostrarvi che questa è un'altra operazione molto veloce per, um modificare i campi di elemento.

In questo caso di questo wedge aggiorna nuovamente la pagina, poi andiamo avanti.

Okay, probabilmente comparirà successivamente.

Intanto l'importante è che aggiorniamo le modifiche con quello che abbiamo prodotto e andiamo avanti con la nostra pagina qui c'è un che parla di opinioni, quindi anche in questo caso potremmo inserire un carosello.

Però abbiamo già inserito un carosello homepage qui sopra.

Andiamo ad inserire invece qui una semplice griglia.

Allora vediamo un po' potremmo inserire, magari vediamo un po' una allora innanzitutto andiamo a inserire un un titolo, quindi un'intestazione chiamata parlano di me, quindi vado ad aggiungere il titolo okay? E poi una colonna potremmo fare potremmo partire così da due colonne e poi svilupparlo a tre.

Okay.

E allora a questo punto um qui dentro voglio mostrarvi come creare in custom questa sezione um parlano di me, quindi dobbiamo descrivere le recensioni, quindi ci sarà il nome della di chi ha scritto la recensione, eventualmente una sua immagine e ovviamente delle stelline e il testo di quello che ha scritto.

Allora, per fare questo torniamo quindi in nella modifica homepage andiamo ad aggiungere c'è, un chiamato stelle dentro l'elemento molto, molto interessante che vi consente di definire alcuni parametri, come ad esempio la scala di valutazione, se volete inserire ad esempio quattro virgola cinque o quattro su cinque stelle.

Insomma, molta, molta personalizzazione.

In questo caso utilizzerò questo lo vado a centrare e poi sotto vado a inserire i dettagli.

In questo caso inserirò un blocco di testo esattamente qui sotto stile.

Vado a ridurlo perché in questo caso per una recensione potremmo sicuramente tenerlo più piccolo.

Okay quattordici va bene centrato e poi sotto andrò ad aggiungere un piccolo box intestazione per scrivere il nome mario rossi ed eventualmente potete aggiungere anche altri campi quanti sono mario rossi titolare fondatore dell'azienda x y z in questo caso h due lo vado a modificare in h quattro per rimpicciolirlo.

Proviamo anche magari un h cinque sicuramente okay, direi che va più che bene.

Intanto aggiorna le modifiche e andiamo a lavorare su questo vediamo un attimo in quello che stiamo producendo okay, quello che manca eventualmente potrebbe essere anche l'immagine.

Se avete la possibilità di inserire l'immagine del dell'autore della recensione potreste inserirla qui in alto.

Vi mostro velocemente come fare è semplicemente un immagine lo posizionate al di sopra.

In questo caso andate a selezionare l'immagine di un utente.

Ad esempio questa foto di di esempio per quanto riguarda la dimensione dell'immagine e qui potete tranquillamente lasciarla di default come large, perché poi andremo a modificare le impostazioni di stile allora in impostazione di stile.

Una cosa molto interessante per modificare le um le dimensioni della foto e dargli un altro stile nel raggio del bordo.

Se andate ad inserire un valore ampio, potete andare a aumenta a creare delle foto um circolari, in questo caso solo con immagini quadrate.

Però ora io s- velocemente, prenderò questa foto, lo faccio live insieme a voi, la andrò a ritagliare in modo modalità uno su uno quadrato e l'andrò ad inserire.

Eccola qua caricherò un'immagine quadrata.

Quindi l'immagine che avevo caricato era si sviluppava per verticale.

Quindi questa impostazione non era non è consentita.

Ora ho ricaricato l'immagine, quindi trecentoquattordici formato quadrato E come vedete una volta che sulla tab stile avete impostato un raggio superiore a um duecento Va bene, duecento.

Mettete duecentocinquanta per sicurezza in automatico vi crea la versione circolare e tondeggiante dell'immagine, ovviamente.

Ora la andrò un po' a rimpicciolire con pixel che mi sembra un po' troppo grande e direi che più o meno sessantadue pixel è un valore ottimale.

Okay, una cosa um un'altra cosa che potete considerare è eventualmente la spazzatura tra i intanto andiamo ad aggiornare tutto quanto.

Okay, possiamo andare a modificare lo spazio tra i interni ad un determinato contenitore cliccando sull'intera sull'intera colonna alla voce layout avete queste due voci gap colonna e gap riga su gap colonna di default elemento imposta aventi la spazzatura però se voi volete ridurla potete chiaramente modificarla.

In questo caso, ad esempio dieci potrebbe essere un gap interessante oppure magari anche meno no, direi che dieci va più che bene.

Okay aggiorna a questo punto abbiamo creato il nostro box recensioni se il design che avete creato vi soddisfa, andate tranquillamente a duplicare l'intera colonna, eliminate quelli che non vi servono e siete praticamente a posto.

Poi andremo a a modificare chiaramente anche le le spazzature e la formattazione.

Anzi facciamolo subito.

Allora qua abbiamo inserito una buona spazzatura, poi qua invece sicuramente dobbiamo un po' aumentarla quindi avanzato vado ad inserire del margine sopra di trenta pixel e sotto di trenta pixel lo farò anche qui sopra trenta sotto trenta e anche qui sopra a trenta e sotto trenta.

Okay, aggiorno le modifiche e andiamo a creare l'ultimo blocco e un ultimo blocco è una sezione dove mostrerò una semplice immagine al centro e ai lati.

Andrò ad inserire degli elementi che richiamano la possibilità di scoprire nuovi contenuti su dei canali specifici Instagram, Facebook piuttosto che TikTok.

Quindi torniamo in fondo, okay? E andiamo a creare un layout di questo tipo.

Allora prima di tutto possiamo clonare anche un titolo così vi mostro come lo farei io quotidianamente.

Quindi cloni il titolo abbiamo detto di scrivere ogni giorno un contenuto nuovo.

Okay? E come abbiamo detto, un layout di questo tipo al cui interno devo inserire un'immagine ai lati degli elementi con dei pulsanti che richiamano una.

Quindi al centro andremo ad inserire un immagine che io ho già preparato.

È chiaramente un'immagine di esempio um per questo test um potrebbe essere anche un'idea quella di inserire una schermata di un uno smartphone, magari che richiama l'attenzione dei canali social media o un'anteprima del canale YouTube ad esempio.

E inseriamo in questo caso dei chiamati box che abbiamo visto anche prima riquadro icona, riquadro icona andiamo a inserire il primo e andiamo a lavorare su questo stile.

Dopodiché una volta che è pronto, andiamo a clonarlo, senza quindi poi ricrearlo da zero.

Quindi innanzitutto andiamo a selezionare l'icona.

Qui mettiamo l'icona di facciamo YouTube, scriviamo youtube e sotto magari anche un piccolo sottotitolo ogni giorno un video nuovo.

Okay, qui andremo poi a inserire il link del canale di YouTube.

Poi alla voce dello stile andiamo a vedere un po' gli allineamenti.

Potrebbe essere interessante svilupparlo in questo modo.

Chiaramente anche qui, in base alla vostra preferenza, io proverò a svilupparlo in questo modo.

Ma allora facciamo così allineato a sinistra.

Va bene.

L'allineamento verticale per la colonna.

Va bene.

L'allineamento a sinistra di tutto il widget.

Direi che ci può stare l'icona.

Vado a inserire un colore o un colore di riferimento del social o anche il mio colore che ho già definito nel prese.

Ma andrò ad aumentare la dimensione.

Magari potremmo farlo cinquanta pixel.

Okay, la spaziatura Diciamo che dodici pixel può andare bene e andiamo anche qui a modificare il titolo.

Diciamo un ventiquattro per il titolo e per il sottotitolo magari quattordici pixel c'è anche la spazzatura che potete configurare tra Magari qui vanno bene due punti, giusto? Due punti.

La spazzatura tra titolo e sottotitolo.

E più o meno Diciamo che ci siamo.

Forse ridurrei un pochetto la l'icona, magari a quaranta.

Facciamola.

Quarantadue.

Okay, aggiorno.

E quindi questo diciamo che è pronto.

Che cosa farò? Farò un duplica quindi sia da questo lato e anche da questo altro lato.

Okay, poi questi elementi possono addirittura subito giustificarli centralmente rispetto all'immagine e posso farlo in tanti modi.

Potrei anche aggiungere anche un margine alla colonna sopra e sotto in automatico viene posizionato al centro, però elemento ha questa funzionalità molto, molto potente l'unica cosa che farò sarà quella di aggiungere uno spazio qui per distanziarli un po' e anche qui posso farlo in due modi potrei di aggiungere un chiamato divisore di questo tipo, ma potrei anche se voglio mettere un pudding su sotto a questo e qui un padding sopra è praticamente lo stesso risultato.

Però ora che ci penso è interessante e anche carino a mio avviso inserire un padding un divisore scusate di questo tipo dove chiaramente andrò a modificare magari il colore e lo metterò del mio grigio chiaro che ho già definito cno anche questo e lo porto di qua aggiorna la pagina l'ultima cosa che possiamo fare eventualmente aggiungere una action no, perché c'è già qui.

Quindi questo poi andrà diciamolo velocemente instagram vediamo l'icona di instagram instagram okay poi qua mettiamo l'icona di tik tok e poi qua mettiamo l'icona di facebook ovviamente potete inserire anche qui delle icone S V G.

Se volete, io sto utilizzando le icone di default di elemento che a mio avviso sono molto, molto interessanti.

Però che cosa può succedere? Può succedere che altri siti potrebbero avere delle icone simili alle vostre.

Se volete inserire delle icone personalizzate S V G.

Ci sono tanti siti andate su Google, effettuate una ricerca, ad esempio Free s V G Icon, e ci sono vari siti, ad esempio S V G Ripo, che io utilizzo ogni tanto per scovare delle recensioni delle delle icone in S V G, dove sono anche gratuite.

Quindi sicuramente potete trovare delle icone, un po' più particolari e un po' diverse.

Okay, a questo punto aggiorniamo la pagina e andiamo a vedere in quello che abbiamo prodotto.

A questo punto abbiamo inserito tutte le in tutte le sezioni, quindi dobbiamo solo poi lavorare un po' sulla parte delle spazzature eventuali.

Allora Quindi questa è la reception, poi le um i le collaborazioni.

Quindi ho lavorato per i servizi, parlano di me e ogni giorno un contenuto nuovo che richiama il canale social media.

Quindi ai post nuovi quotidiani.

Okay, che cosa possiamo fare allora? abbiamo detto che possiamo.

Allora innanzitutto questo questo lo lascerei bianco l'unica.

Cosa che farei in questo caso è aumentare ancora un po' il margine sopra da trenta a cinquanta.

Sempre per dare respiro.

Non abbiate paura di dare respiro alle sezioni sotto al titolo.

Un margine di eh? Magari facciamo quindici.

Non centocinquanta, ma quindici.

Okay.

E poi cosa posso fare per la tua attività? Potremmo eventualmente farlo di un colore, un po' più leggero o eventualmente anche di questo colore.

Forse potrebbe essere un po' acceso.

Però potrebbe essere anche interessante in questo caso.

Poi andrò a cambiare anche il colore del titolo.

Proviamo con il blu acceso cui avevamo inserito un margine.

Possiamo riportarlo tranquillamente a zero.

Okay, sia qui che qui E quello che farò.

Semplicemente andrò a lavorare con il rientro.

Quindi il pudding.

Vi ricordo che il margine è la spazzatura al di fuori dell'elemento, mentre il rientro è all'interno dell'elemento chiamato appunto rientro.

Quindi selezioniamo la colonna.

Rientro.

Possiamo provare con trenta Come vedete la spazzatura.

Okay, ci può stare.

E poi lo faccio lo stesso per il sottostante.

Magari proviamo con quaranta.

Um l'unica Cosa? Sotto? Magari aumenterei un po' di più per dare un po' più di respiro.

Quello che farò è andare a modificare chiaramente il colore di questa intestazione stile bianco.

Altrimenti non sarebbe leggibile.

E poi anche di qua.

Quindi nel contenuto colore dell'intestazione bianco e colore della descrizione bianco.

Okay, a questo punto posso fare copia incolla stile incolla, stile e incolla stile voilà.

Okay, aggiorna.

Come vedete già la homepage sta prendendo forma.

Ci sono delle sezioni.

Abbiamo inserito delle spazzature.

Le sezioni respirano rispetto a prima, eh? Sta prendendo una forma sicuramente migliore.

Um okay.

L'ultima parte la lascerei sì, così bianca.

Però andrei ad aggiungere eventualmente ancora un po' di spazio.

Proviamo con ottanta ed eventualmente un leggero divisore.

Magari questo qua potrei ovviamente andare ad aggiungere un nuovo divisore trascinandolo qui all'interno.

Però, come avete visto, se decidete di sfruttare al massimo elemento, prendete questo jet, cliccate su duplica e lo trascinate dove volete poi mostrarlo.

Ed eccolo qua.

Una volta che lo trascinate, il di misure può essere anche ridimensionato a livello di larghezza.

Ad esempio in questo caso io voglio semplicemente inserirlo per un quaranta percento.

Non che sia un'intera larghezza e poi lo vado a centrare.

Eccolo qua aggiorna e ora andiamo a vedere in il risultato finale okay, faccio il refresh della pagina, questa sezione l'aero abbiamo rispettato e inserito tutto quello che avevamo definito.

Poi abbiamo inserito un carosello per i partner qui il logo, chiaramente un po' più grande il logo di Learn andrò sicuramente a ridimensionarlo come come questi loghi i servizi che rimandano alla rimanderanno poi chiaramente alla, al singolo, alla pagina del singolo servizio delle recensioni sviluppate in questo modo ed infine ogni giorno un contenuto nuovo, quindi un un che richiama la possibilità di scoprire nuovi contenuti nei principali canali social media.

Quindi abbiamo visto in questa lezione come creare una homepage completamente personalizzata con elemento e andiamo avanti poi con il resto delle altre pagine.