Elemento è un builder con centinaia di funzionalità e in questa lezione andiamo a vedere come funziona.

Per prima cosa per attivare elemento sulle pagine web, dobbiamo andare su pagine tutte le pagine e aprire la pagina che desideriamo appunto modificare con elemento.

Ad esempio la pagina Contatti.

Possiamo cliccare o sul titolo o direttamente su modifica.

A questo punto, una volta che entriamo nella pagina, possiamo modificarlo in due modi o tramite elemento, appunto, che è il che utilizzeremo in questo corso oppure tramite i classici blocchi di Gutenberg.

Sono dei blocchi nativi di WordPress per editare in modo più semplice e leggero.

Le pagine web hanno meno funzionalità, chiaramente rispetto elemento.

Quindi clicchiamo su modifica con elemento e dopo il caricamento verremo reindirizzati a questa pagina.

Come funziona questo menù che sarà il vostro cruscotto e centro di controllo Quando andrete a modificare qualsiasi cosa con elemento.

Partiamo innanzitutto dalla parte bassa a sinistra.

Cliccando su Impostazioni abbiamo le impostazioni della pagina suddivise per titolo, dove possiamo modificare anche lo stato di questa di questa pagina.

Se è una pagina pubblicata, se è privata, protetta da password, ad esempio se è in attesa di revisione oppure se è una bozza.

Quindi, se ancora non è pronta per essere messa online, possiamo inserire un'immagine in evidenza che è un'immagine che potrebbe comparire quando il link di questa pagina viene condivisa su WhatsApp oppure su Facebook, ad esempio, possiamo decidere di attivare o disabilitare i commenti.

Possiamo nascondere il titolo o mostrarlo.

Io personalmente questa funzionalità la tengo sempre nascosta, perché tendo a inserire dei titoli personalizzati dentro ogni pagina e non lascio che il gamete di di mostri automaticamente e poi possiamo definire il layout della pagina.

Il layout della pagina che cos'è è un'impostazione di elemento che in questo caso funziona con il che è attivo al momento è che utilizzeremo in questo corso ci offre la possibilità di modificare il la della pagina, appunto.

Che cosa significa? Che con la voce predefinito di base questa pagina mostrerà lo schema classico di una pagina web, quindi ad esempio testata quindi con il logo, il menù e in fondo il footer.

Però se noi, ad esempio, avessimo la necessità di creare una landing page senza titolo, quindi fare un focus particolare sul corpo della pagina, possiamo ad esempio utilizzare la funzione elemento Compass dove in automatico viene eliminato, rimosso tutto il contenuto, le del e automaticamente possiamo aggiungere del contenuto e far sì che venga mostrato solo quel tipo di contenuto.

E questo è molto importante nel caso in cui non vogliamo mostrare titoli e come nel caso delle landing page, quindi anche questa è una funzione molto molto interessante.

Poi c'è anche la possibilità di utilizzare le funzioni di base del gameplay, che è praticamente simile alla modalità predefinita, e utilizzare elemento larghezza intera.

Questo significa che tutte le sezioni che andrete a inserire dentro alla vostra singola pagina web saranno estese orizzontalmente.

Quindi anche questa è una funzione molto interessante, a differenza di di terze parti che potrebbero comunque avere dei limiti, non tutti hanno la possibilità di nascondere in modo semplice leader e il footer per creare delle page, quindi in quel caso con tela di terze parti potrebbe essere un problema.

Con elemento invece avete una massima flessibilità, poi, um rimanendo sempre in basso abbiamo il navigatore, il navigatore che cos'è semplicemente una linea guida dei che sono attivi.

L'elemento funziona in questo modo una volta che aggiungiamo un contenitore e sezioni, adesso chiaramente vi faccio so semplicemente vedere degli esempi e aggiungete dei ad esempio un'intestazione e un immagine.

Cliccando sul navigatore si andrà a comporre una sorta di schema, una sorta di albero um che potete utilizzare come controllo delle varie sezioni.

Quindi se avete bisogno di avere un controllo maggiore questo nel caso in cui voi abbiate dei layout con pagine molto lunghe.

Per orientarvi meglio e accedere direttamente a quel tipo di WeChat.

Potete utilizzare il Navigator perché poi vedete, cliccando sul wit di riferimento si vennero indirizzati direttamente a quel preciso elemento.

Questo era semplicemente un un esempio.

Poi ci torneremo nella parte della creazione dei vari layout, sezioni interne e colonne e poi c'è.

La tab della cronologia è una tab di vitale importanza e questo serve Se eliminate un certo tipo contenu- un certo tipo di contenuto e avete bisogno di fare un rollout.

Quindi tornare a una vecchia versione della della vostra pagina.

Potete farlo qui Elemento salvo in automatico le bozze per si andrà a popo mano a mano con il giorno e l'orario e in modo semplice Potete accedere e recuperare il backup di quella pagina.

Se avete eliminato erroneamente un determinato contenuto, poi c'è la modalità responsive lo trovate a questa icona, poi c'è una lezione in cui parleremo di tutta questa parte.

Principalmente si suddivide in versione desktop, che è quella che vedete in prima linea, la versione tablet e la versione mobile.

Come vedete, L'elemento ha un controllo completo su tutto quello che è.

Il layout vi mostra già come sarà visualizzato il vostro sito web nei vari dispositivi.

Quindi questa è una sezione molto molto interessante perché poi vi permetterà anche di creare dei layout con stili differenti per la versione mobile piuttosto che per la versione desktop.

Ora torno alla versione desktop e ovviamente c'è il pulsante aggiorna dove potete anche chiaramente salvare la bozza la pagina se non siete pronti per pubblicarla, aggiornare e poi eventualmente anche pubblicarla.

A questo punto andiamo nella voce dei che si accede cliccando a questa icona con questi quadrati e i sono orga- sono sostanzialmente tutti quegli elementi grafici che potete utilizzare nelle pagine, come ad esempio blocchi di testo, video, immagini, pulsanti, divisori, distanziatori, icone.

Ce ne sono veramente centinaia e chiaramente in base all'obiettivo della vostra pagina li andrete a testare e a provare elemento li organizza già in categorie se sono se ci servono dei per progettare il layout ci sono quelli inclusi in elemento pro, come ad esempio il loop greed.

Um, ci sono quelli generali che riguardano ad esempio, le icone, le gallery, le barre di progressione e i riquadri immagini, quelli che riguardano il sito, come ad esempio aggiungere un logo del sito che viene mostrato in automaticamente, oppure i classici di WordPress, come ad esempio mostrare un meta, una funzione cerca le categorie del blog e quant'altro ce ne sono veramente veramente tanti.

In linea generale, come funzionano queste parti? Allora, per quanto riguarda il layout elemento si comporta in questo modo ogni volta che volete aggiungere una sezione potete partire da un contenitore, quindi con il trascinate all'interno di questa sezione, oppure potete cliccare nel più e in automatico.

L'elemento vi chiederà di selezionare la struttura se volete partire da due colonne.

Se volete partire da quattro colonne ci sono questi, diciamo già preimpostati.

In questo caso, ad esempio, io andrò a scegliere due colonne e una volta che avete inserito due colonne, poi all'interno, potrete andare ad aggiungere tutti i che volete e se avete la necessità di creare più colonne una volta che è stata inserita nel vostro layout con il tasto destro potete addirittura duplicare, praticamente all'infinito tutte le colonne che volete.

Poi per aggiungere è semplicemente um aggiungiamo il ad esempio, magari un widget immagine lo trascinate qua, ad esempio aggiungo un immagine, un di testo e un per mostrare magari un pulsante.

Okay, In questo caso ogni ha un proprio cruscotto di controllo.

Per quanto riguarda la funzionalità e lo stile, ad esempio, ho creato questo ho caricato, ho inserito questo immagine cliccando sull'icona della matita, quindi accede chiaramente all'e di questo determinato.

Posso ovviamente sce- selezionare l'immagine che voglio mostrare.

Ad esempio questa qua seleziona la mia immagine e poi ho delle impostazioni e quindi definire la dimensione dell'immagine se voglio allinearla a sinistra centralmente o a destra, se mostrare una didascalia o anche se aggiungere un determinato link a questo tipo di immagine.

Quindi questo per quanto riguarda l'aspetto del contenuto, come vedete L'elemento li organizza in contenuto stile e avanzato.

Ciascuna di questa di queste funzioni tab varia chiaramente in base al perché Se io adesso andassi a cliccare sulla sull'e del blocco di testo, ovviamente comparirà non l'inserimento dell'immagine, ma chiaramente l'inserimento del blocco di testo.

Torniamo sulla nostra immagine per mostrarvi un po' quello che può essere lo stile, ad esempio nell'immagine potete impostare la larghezza in percentuale potete mostrare la larghezza in pixel a larghezza massima l'altezza, insomma c'è un bel una bella situazione avanzata per personalizzare tutti i potete anche decidere di adattare, magari l'oggetto a tutto il contenitore o al riempimento o alla modalità cover.

Um per quanto riguarda le immagini, ad esempio, in questo caso potete anche decidere un effetto over al passaggio del mouse dei filtri C S s che si applicano applicano al colore.

Potete decidere ad esempio un bordo al all'immagine eh e potete assegnare un determinato colore c'è veramente veramente di tutto e quindi vi invito ogni volta a sperimentare e utilizzare la vostra creatività chiaramente in base a quello che è poi il vostro obiettivo e che sia coerente con il branding e i colori che avete definito.

Eh, quindi questo per quanto riguarda lo stile.

Alla tv avanzato invece, ci sono appunto delle impostazioni avanzate, come ad esempio la possibilità di aggiungere il margine o il rientro, nonché padding utilizzato nel linguaggio di C S s.

Forse magari forse meglio che ve lo faccio mostrare qua clicco su un blocco di testo avanzato.

Come funziona il margine e il rientro.

Il margine è semplicemente lo spazio che si andrà ad applicare, che io vado ad aggiungere al di fuori dell'elemento ad esempio dieci pixel di spazio.

Come vedete, aumentando progressivamente lo spazio sopra a destra, sotto e sinistra viene automaticamente inserito.

Però se io volessi inserire dei margini personalizzati, posso cliccare su questa icona a forma di link e andare a personalizzarli uno ad uno.

Ad esempio, magari vado a impostare quindici a destra e quindici a sinistra, ma sopra venticinque sotto venticinque e questo è il margine.

Invece il rientro come funziona? Il rientro è semplicemente, um il rientro all'interno del del del che ho selezionato il margine va ad applicarsi all'interno del mentre il rientro va ad applicarsi all'interno.

Qui ci sono altre personalizzazioni come la larghezza.

Possiamo decidere se applicare questo box al cento per cento in linea auto sono tutte cose che vedremo poi in modo avanzato nella lezione di elemento avanzato l'allineamento l'ordinamento e la possibilità di applicare uno sfondo un bordo all'intero il c S s personalizzato.

Possiamo definire se ad esempio, mostrare questo sul mobile e non magari sul tablet oppure sul desktop e non sul mobile, quindi ci sono diverse opzioni di personalizzazione e ovviamente riguarda tutto quell'aspetto di editing avanzato.

Quindi questo è come funziona elemento a livello di sezioni, colonne e aggiunta dei poi um l'ultima, cosa che voglio mostrarvi è cliccando su questa voce in alto a sinistra accederete alle impostazioni di elemento della pagina e del sito in generale.

Cliccando su impostazioni del sito si accede a una maschera dove possiamo modificare innanzitutto gli stili del sito a livello globale.

Tutto quello che riguarda il mondo dei font per definirli una volta che chiaramente li avete selezionati e definiti.

E quello che riguarda i colori, quindi colori globali, font globali, tipografia, lo stile dei pulsanti, immagini, i campi del modulo insomma, tutto quello che riguarda l'aspetto dello stile di come verrà mostrato effettivamente nel e questo perché funziona molto bene ed è uno strumento molto potente in elemento perché qui noi possiamo definire lo stile del pulsante a livello di fonte, di colore, di allineamento, di raggio di bordo.

Insomma, tutto quello che riguarda il pulsante lo possiamo definire una volta a livello globale in tutto il sito web.

Questo significa che ogni volta che andremo ad aggiungere un e qui lo abbiamo impostato correttamente a livello grafico.

Non è necessario modificare il colore e il fonte ogni volta.

Quindi quando noi andremo una volta che avremo chiaramente impostato lo stile globale del nostro sito, andiamo ad aggiungere JT che che sia un pulsante, che sia una un blocco di testo un'intestazione o un'immagine in automatico erediterà lo stile che abbiamo impostato all'interno di questa schermata.

Quindi è molto importante e qui vi trovate il controllo di questo cruscotto.

Poi ci torneremo in una lezione dedicata nelle voci Idee invece delle impostazioni abbiamo denominazione del sito dove possiamo inserire il logo del sito web.

Poi andremo a caricare quello che useremo in questo in questo corso il nome del sito e la descrizione del sito.

Poi, tornando indietro, possiamo decidere uno sfondo del sito web, quindi se modificare il colore adesso è bianco e a va benissimo lo street di default però possiamo decidere eventualmente di um modificarlo senza problemi.

Qui fate pure magari le prove che volete.

Poi se volete tornare all'impostazione di default cliccate su questa um freccettina per cancellare e ritornare l'impostazione di default ogni volta che fate delle modifiche in basso, qui a destra avete il tasto aggiorna.

Torniamo indietro e poi ci sono delle impostazioni per quanto riguarda il layout.

Quindi quanto volete che si allarga? L'intera? Um la larghezza del contenuto delle pagine web.

Ad esempio, solitamente lo lascio quasi sempre di default, a meno che non ci siano esigenze specifiche.

E poi ci sono delle impostazioni riguardanti il box.

Quindi come si dovrebbero aprire alcuni elementi a pop-up? Ci sono delle personalizzazioni avanzate per la transizione delle pagine, ovvero quel pre pre caricamento.

Quando saltiamo da una pagina all'altra potremmo magari voler inserire una sorta di animazione, poi anche questo lo vedremo nelle lezioni avanzate e possibilità di inserire un C S S personalizzato che va ad agire in tutto il sito web.

Possiamo inserirlo direttamente qua e poi delle impostazioni aggiuntive, eh? Che richiamano che che vanno alle impostazioni di elemento che abbiamo visto già in una lezione precedente, eh Okay, a questo punto torniamo indietro, quindi clicchiamo sulla X qui non salviamo le modifiche e vediamo le preferenze dell'utente.

Le preferenze dell'utente sono semplicemente delle preferenze che voi andre- andrete ad impostare per migliorare la vostra esperienza d'uso.

Ad esempio, potreste utilizzare la versione scura del oppure la classica versione chiara.

Io nella maggior parte dei casi utilizzo quasi sempre la versione chiara.

Però se siete abituati ad utilizzare la Dark Mod nel vostro smartphone o nelle vostre app o nei vostri browser, chiaramente potete farlo ed è una cosa che gli altri non hanno di base.

Potete definire la larghezza del pannello, quindi quanto è largo il pannello che vi consente di modificare i vari? Potete abilitare l'anteprima responsive l'anteprima della guida dello stile, che è una cosa avanzata che vedremo quando lavoreremo sul Global Stale.

Insomma, delle preferenze che poi torneranno utili al vostro modello di lavoro.

Tornando indietro abbiamo la l'ultima voce che voglio mostrarvi è il team Builder tramite il quale accedete a un pannello di controllo per creare ogni sezione del vostro sito web e questa, a mio avviso, è la cosa probabilmente più importante di elemento.

Come vedete, è organizzato in categorie testata piedi pagina articolo singolo, pagina singola, archivio di ricerca, Errore Quattrocentoquattro e che cosa sono questi? Questi sono dei temete che voi potete andare a personalizzare, a creare da zero per qualsiasi qualsiasi elemento ciascun elemento del vostro sito web e qui all'interno della testata.

Potete andare a creare un leder personalizzata con il vostro design e verrà mostrata in tutto il sito.

Qui andrete a creare un footer del vostro sito che verrà applicato in tutte le pagine in modo personalizzato.

Lo stesso per gli articoli gameplay per le pagine la pagina quattrocentoquattro e quindi quando una pagina viene trovata personalizzata, eh, lo stesso si applica se avete ad esempio un e-commerce su le categorie dei prodotti sulla scheda il layout del prodotto personalizzato.

Qui potete modificare qualsiasi sezione del vostro sito web ed è una delle cose più potenti di elemento.

Poi, nella lezione dedicata, andremo a vedere nel dettaglio tutte queste parti.

Direi che più o meno ci siamo l'unica cosa che non vi ho mostrato è il find è semplicemente una funzione che, um tramite il click potete saltare su una pagina che avete creato in precedenza.

Magari avete creato state creando la pagina contatti, ma volete um andare in modo più rapido alla pagina dei dei servizi digitate servizi, ci cliccate in automatico, verrete indirizzati in modo rapido senza se senza cliccare su esci eseguire dei click, quindi sostanzialmente è una um una via più breve per arrivare a quel contenuto, quindi facendo un breve recap elemento è un builder ma forse dire Page Builder è un po' riduttivo.

È un team builder, ovvero un costruttore di tema che ti accede um, che ti dà la possibilità di accedere alla personalizzazione di qualsiasi porzione del tuo sito web, dalle pagine interne al leader al insomma, tutto quello che riguarda l'aspetto estetico e funzionale del tuo sito web.

Quindi, una volta che avrai compreso questa parte, sei pronto ad iniziare a progettare singolarmente tutte le varie parti del tuo sito web?