Dopo aver creato il layout della tua homepage.

Con elemento puoi passare alla creazione delle pagine interne, come ad esempio il chi sono i servizi, il portfoglio, i contatti e quant'altro.

In questa sezione andremo a creare una pagina che sono personalizzata sfruttando i blocchi e le sezioni che abbiamo già creato nella nostra homepage.

Ti mostrerò anche come riutilizzare in modo più rapido delle sezioni che hai già creato e definito in altre pagine.

Entriamo subito nel dettaglio, torniamo in bacheca, quindi torniamo su pagine tutte le pagine e andiamo ad aprire la pagina Chi sono, dove andremo a inserire delle informazioni per presentarci chi sono.

Quindi modifica modifica con elemento e iniziamo a sviluppare il nostro layout.

Allora diciamo che una volta che impostate un action in un modo, più o meno, andrete a utilizzare sempre lo stesso format.

In questo sito web io utilizzerò sempre questo format, quindi con un'intestazione con un titolo e un sottotitolo, una eventuale a sinistra e un'immagine a destra.

Quindi in questo caso riprodurrà la stessa cosa.

Che cosa succede? Che se avete già impostato una sezione che va bene a livello di design e l'avete già testata, potete utilizzare una delle funzioni più potenti di elemento per copiare e incollare interi layout.

E ora vi mostro come noi siamo um sono rientrato nell'homepage che abbiamo creato nella lezione precedente e se io andassi a cliccare nell'intero contenitore tasto destro copia posso incollare l'intera sezione direttamente in un'altra pagina.

Ora mi sposto sulla pagina che sono tasto destro incolla e un click sono in grado di riportare le stesse impostazioni di design e questa è un'operazione che nel tempo ti farà risparmiare tantissimo, tantissimo lavoro e quindi ti consiglio sicuramente di utilizzarla ed è semplicemente una via più breve per riportare lo stesso layout che magari hai già già preparato nel dettaglio e questo puoi usarlo per qualsiasi sezione o contenitore.

In questo caso noi andremo a lavorare sulla base di questo.

Prima di tutto vado a eliminare il titolo Chi sono quindi Impostazioni? Nasco il titolo Sì e vado a eliminare un po' di elementi.

Ad esempio qui lascerò solamente il contattami modificandolo per in formazioni.

Magari potremmo anche inserire un'icona, se vogliamo icona della mail per dare anche un senso um di movimento diverso.

Potremmo sì, in questo caso direi che va più che bene inserirla prima.

Okay.

Um, il box delle recensioni.

Magari potremmo toglierlo qua nella okay e di qua anziché il video andrò ad inserire una semplice immagine.

Volendo anche qui potete riportare un video diverso chiaramente da quello che metterete in homepage.

Però io in questo caso vado ad inserire la mia foto quadrata e non il video in questo in questo caso andiamo a modificare il titolo chi sono? E poi un sottotitolo dove magari potete anche sviluppare su due colonne io adesso semplicemente andrò ad allungare il testo, però per farvi capire che in questa parte io inserirei semplicemente un titolo, un sottotitolo, una l'immagine di chi siete per presentarvi poi così invitate l'utente anche a o a compiere un'azione direttamente nel contatto per informazioni a o a scrollare verso il basso e a scoprire altre informazioni.

Okay um aggiorno intanto la pagina, poi voglio inserire il box delle collaborazioni e anche questo se vi ricordate bene nell'homepage l'abbiamo inserito, quindi vado a riprendere l'intero jt copia e incolla.

Ovviamente posso anche poi andare a modificare il titolo collaboro con ad esempio poi andiamo a aggiungere un altro un'altra sezione, in questo caso una colonna intera dove andrò a inserire un'immagine sulla destra e poi una che rimanda a scoprire i servizi tanto selezioniamo l'immagine della galleria dei miei media, ad esempio questa immagine qua.

Okay, potete ovviamente anche modificare le classiche composta di stile.

E qui va già più che bene l'impostazione di default che ho già inserito nel sette e qui andrò ad inserire un titolo.

Facciamo così duplica un paragrafo, un piccolo paragrafo di testo e una col tuo axon pulsante.

Vado un po' a personalizzarla.

Di cosa mi occupo ogni giorno.

Okay, questo lo impostiamo come h uno poi qui ovviamente va benissimo.

Poi un sottotitolo che stia su una riga o su due linee il paragrafo un testo che descrive in modo più approfondito di che cosa mi occupo ogni giorno.

Eventualmente potreste inserire un elenco, una lista di icone, ad esempio un elenco puntato.

Potete utilizzare il jet lista icone che ingloba all'interno tante possibilità potete modificare l'icona e quant'altro.

Vi invito chiaramente anche questo a um personalizzarlo e attestarlo e poi una in questo caso, visto che mi sto presentando, sto dicendo chi sono, con chi collaboro e di che cosa mi occupo.

Invito anche a scoprire i miei servizi, quindi scopri di miei servizi e ovviamente poi il link rimanderà alla pagina um dove sono presenti tutti i servizi? Possiamo chiudere? Intanto aggiorno le modifiche.

Possiamo chiudere la pagina chi sono eventualmente con una bella action perché è importante comunque chiudere una pagina con una nuova personalizzata pagina per pagina? Chiaramente in questo caso andrò a inserirla di un colore, un po' più deciso, ovvero questo blu che ho utilizzato nel mio preset e andiamo subito a crearla.

Semplicemente vado a creare una nuova sezione di tipo orizzontale a pieno schermo.

Vado subito ad aggiungere un colore nello stile classico principale okay e vado ad aggiungere prima un titolo, poi un sottotitolo magari e poi un bel pulsante che in questo caso vi farò vedere poi come modificare nei suoi colori, perché in questo caso essendo blu non si vede molto bene, quindi devo chiaramente modificare i suoi colori.

Okay, questo lo possiamo portare come h due va bene centralmente a questo invece h tre mi raccomando, quando inserite queste intestazioni cercate di avere una sorta di gerarchia logica nei tag t m l che usate in una pagina non ci possono essere più h uno l'h uno è riferito al titolo della pagina, quindi può essere presente solo una volta nella maggior parte dei casi in alto.

In questo caso questo è un uno chi sono? In questo caso invece ho inserito un h due e un h tre e così via non sarebbe potuto, cioè potete inserirlo chiaramente un h due ripetuto però non è una buona pratica di h t m l soprattutto non è un'ottima pratica per il posizionamento a seo sui motori di ricerca um qui vado a modificare il colore in bianco, sia per questo sia per questo okay, andiamo a modificare preventivo.

Ovviamente potete farlo anche un po' più grande forse potremmo un po' giocare sulla dimensione in questo caso, visto che c'è un bello spazio blu e sotto magari potremmo scrivere su misura okay e poi la quindi la intanto posizioniamo al centro posso ovviamente definire il link di destinazione in questo caso la selezione, la pagina contatti però vado a magari facciamolo medio quindi un po' più grande vado a impostare un design diverso, una cosa interessante che potrebbe potrei mettere qua nella libreria una ma un'icona magari una freccia per dare un senso.

Un po' più di movimento diciamo poggiala dopo okay, perfetto e andiamo a modificare i colori.

Come vi dicevo, andiamo su stile del pulsante tipografia.

Direi che va bene.

Al massimo ci torniamo dopo.

Se non ci soddisfa, Ma andiamo a modificare il colore, allora colore del testo.

Lo farei nero, mentre il tipo di sfondo lo farei bianco.

E al passaggio del mouse possiamo inserire eventualmente un colore.

Un colore diverso.

Proviamo un attimo con colore del testo azzurro.

Potrebbe starci anche azzurro.

Sì, perché no? Tanto aggiorno le modifiche ed eventualmente potrei aumentare un po' la dimensione del font per dare maggiore evidenza.

E potrei lavorare un po' nello stile del pulsante.

A livello di rientro portiamo tutto a zero e ricostruiamo ricostruiamo da zero.

Poi vi farò vedere anche come riutilizzare queste sezioni chiaramente salvandole come personalizzati.

Allora a destra proviamo trenta.

Forse è troppo, però poi vedremo eventualmente come aggiustarlo.

Okay.

No, in realtà secondo me ci sta.

Ci sta più che bene.

L'unica.

Cosa? Aumenterei un po' di rientro qua nello spazio blu.

Quindi rientro.

Siamo in percentuale? Magari in questo caso, così viene adattato in base al browser.

Proviamo con un tre percento.

Proviamo ad aumentarlo progressivamente.

Okay.

Sì, diamogli respiro.

Okay, Così mi piace.

Mi piace tanto, eh? Tanto salvo le modifiche, potremmo dare quel tocco in più a questa sezione inserendo un'icona un'icona che richiama la turati e in questo caso possiamo usare icon che aggiunge una semplice icona anche qui solita cosa possiamo inserire una libreria un'icona già presente in libreria di elemento o un s v g personalizzata che scaleremo che possiamo scaricare nei siti di terze parti? Libreria icona andiamo ad aggiungere magari lì, classica icona di um di là mail sì, aperta così ci piace.

Okay, possiamo eventualmente aggiungere anche un link a questa icona l'unica cosa che farò è cambiare il colore in bianco e la sua dimensione la voglio fare un po' più grande così ottanta pixel Perfetto.

Aggiorna.

Andiamo a vedere il quindi clicchiamo su anteprima delle modifiche.

Apriamo la pagina chi sono che ho appena prodotto.

Okay, qui sicuramente lavorerei un po' sugli spazi ed eventualmente sulla formazione del testo e centrare un po' questi elementi Questo va bene qui più o meno ci siamo e la mi piace molto.

Okay, quindi andiamo un po' ad aggiustare i dettagli prima o poi di avere la pubblicazione definitiva.

Partiamo.

Innanzitutto Dall'alto.

Quindi siamo qua.

Possiamo provare con un allineamento centrale e magari andare a lavorare sulla formazione di questo testo.

La dimensione del titolo h uno chi sono va più che bene a questo punto l'h due invece che ha il sottotitolo potremmo lavorare sull'altezza della riga eventualmente aumentandola un po' dandogli un po' di respiro ed eventualmente puoi andare anche a capo quindi chiaramente io qua ho inserito un testo um subito dopo il punto però potremmo anche andar a capo per allungare un po' la sezione ovviamente dipende anche quel anche quello che andrete a scrivere okay poi la la sezione relativa al carosello abbiamo già messo cinquanta pixel sopra ma usiamo un po' di più con settanta pixel tanto lo spazio bianco non fa mai male, specialmente nella versione desktop, mentre qua è un po' collassata la sezione è un po' troppo appiccicata e compressa, quindi sicuramente qui vado ad aggiungere un po' di margine sopra proviamo anche qui con cinquanta magari diamo lo stesso margine che abbiamo dato sopra e sotto alla sezione precedente settanta settanta okay, diciamo che più o meno va più che bene l'unica cosa se vedete questa colonna di destra ha poco margine tra tra tra questi due elementi diciamo e potete farlo in questo modo nel contenitore riga potete aumentarlo da Scusate cancello questo elemento potete aumentarlo qua dalla colonna e in modo progressivo, ad esempio venti pixel.

Oppure potete semplicemente entrare in questa in questo contenitore, andare su avanzato e inserire un margine a destra.

Però diciamo che e il il fine è praticamente identico.

Io per comodità visto che c'è questa nuova future su elemento che ti consente di impostarlo qui e nei gap sicuramente forse si fa prima aggiorno la pagina e vado a vedere a livello globale il risultato finale.

Aggiorniamo Okay, diciamo che intanto ho centrato tutto questo elemento con il giustifica della colonna e il risultato mi sembra molto, molto migliore rispetto a prima.

Poi qui ho dato molto respiro.

La presentazione dei servizi mi piace anche qui potrei pensare di allineare, quindi andiamo ancora nel dettaglio della colonna del contenitore e giustifica il contenuto centrato e giustifica in base alla foto vediamo in se la modifica è avvenuta correttamente ed eccolo qua col tuo action che va ai servizi e col tuo action contattami per un preventivo.

A questo punto noi abbiamo delle possibilità per riutilizzare questa questa action possiamo come avete visto prima possiamo copiare questa sezione, quindi copia dell'intera sezione incollarla da un'altra parte.

Oppure possiamo eventualmente utilizzare anche questo um questa intera sezione come salvarla? Come temete Che cosa significa? Significa che potete salvare come base questo elemento ed utilizzarlo velocemente in altre sezioni.

Quindi anche questa è un'ulteriore potenzialità enorme di elemento.

Per concludere quindi facendo un breve recap e abbiamo creato la pagina Chi sono che è una pagina che dovrebbe presentare chi siete, Qual è il vostro background? Con chi collaborate? Qual è la vostra storia? Qual è il vostro percorso di studi? Um, quali sono i partner o le agenzie? Magari con cui lavorate un breve estratto dei servizi e ovviamente non può mancare una giusta.