Una delle cose che potrebbero tornarti utile durante la fase di progettazione delle tue pagine web e in particolare quando vuoi differenziare una sezione rispetto ad un'altra, potrebbe tornarti utile utilizzare delle sezioni di background.

In queste sezioni vediamo insieme tutto quello che riguarda la sezione di background delle possibilità che ti consente di fare elemento.

Allora, innanzitutto adesso io andrò ad ad aggiungere una semplice ho creato una pagina demo per mostrarti l'esempio, ma andrò ad aggiungere una semplice pagina con una colonna al cui interno andrò ad inserire una intestazione semplice, un normale paragrafo di testo e un semplice pulsante.

Poi dopo chiaramente ti mostrerò il suo funzionamento.

Lo vado a centrare.

Intanto eccolo qua e come funziona la sezione background di elemento funziona in questo modo.

Innanzitutto bisogna selezionare nell'intera sezione nell'intero contenitore, ma in linea generale può essere applicata anche singolarmente alle singole colonne.

Vi faccio subito un esempio, poi entriamo nel dettaglio se io andassi a creare due colonne, quindi due contenitori posso applicare la il background sia l'intera sezione, ma anche singolarmente alla singola colonna appunto.

Quindi non è un limite chiaramente il fatto di poterlo applicare all'intera sezione potete applicarlo sia all'intera sezione sia alle singole colonne, ma anche ad alcuni singoli, come ad esempio un blocco di testo.

Però il funzionamento in linea generale è lo stesso.

Adesso io vado a eliminare, lo applicherò all'intera sezione, quindi clicchiamo sull'intero contenitore e andiamo alla voce um dello stile alla voce dello stile possiamo selezionare varie um varie cose tra cui classico gradiente video o slash.

Andiamo per ordine selezioniamo uno sfondo classico lo sfondo classico è il classico colore che andiamo ad applicare in background, ad esempio magari un colore in risalto oppure un un gradiente adesso.

In questo caso io per semplicità vi inserirò un testo o scusate un colore di background, un grigio chiaro per farvi vedere la sua funzionalità ma um il funzionamento in generale è sempre lo stesso, quindi questo per quanto riguarda l'applicazione di uno stile classico.

Ovviamente poi voi andrete a personalizzarlo con il colore che desiderate, dopodiché c'è il gradiente e che il gradiente ovviamente è una sfumatura che va da un lato rispetto ad un altro e qui ci sono varie personalizzazioni che potete eseguire.

Innanzitutto potete decidere il colore di partenza io adesso se quelli che ho inserito nel mio preset giusto per farvi vedere una prova e potete decidere la posizione.

Come vedete la posizione e la percentuale della porzione che deve occupare il il colore, sia per il colore primario sia per il colore secondario.

Potete decidere se è un tipo di gradiente lineare o radiale lineare.

Chiaramente parte da un punto verso un altro radiale, invece si sviluppa dal centro verso l'esterno.

Ovviamente potete anche definire l'angolatura qui.

Ovviamente è una cosa che è di vostra preferenza e vi deve vi deve piacere.

Deve essere chiaramente coerente al design del vostro sito web, però è per farvi vedere che c'è anche questa possibilità e questo diciamo riguarda il mondo dei gradienti un'altra.

Cosa interessante è la possibilità chiaramente di caricare un video.

Spostandoci alla tab dei video possiamo caricare il video in um diverse modalità possiamo come c'è scritto qua nella nel campo di elemento possiamo inserire un link di video youtube oppure un link di un video m p quattro che abbiamo precedentemente caricato nei media nel nostro sito wordpress.

Nel caso in cui noi volessimo inserire un video m p quattro, chiaramente dovremmo avere a disposizione il file m p quattro.

Lo andiamo a caricare all'interno dei media di WordPress.

Quindi in questa sezione e una volta che l'abbiamo caricato, andiamo semplicemente a copiare il link.

Quindi l'u r l adesso in questo caso un'immagine è una fabbrica che ho caricato.

Però per il video sarà la stessa cosa, quindi dovete andare a cliccare su copia u r l negli appunti che sarà il link di quel determinato file m p quattro e lo andate ad incollare all'interno di questa sezione oppure se il vostro video è ospitato su youtube semplicemente potete andare ad inserire un link di youtube in questo caso io adesso farò una ricerca veramente veloce youtube video background vediamo un po' quello che ci propone oggi YouTube okay? Ad esempio posso prendere questo video che è un video che si può utilizzare senza copyright dove vado a copiarmi il link e lo vado ad inserire nella mia sezione di background.

Faccio il refresh per vedere se effettivamente funziona si sta caricando come vedete l'app del video è in caricamento ed eccolo qua.

Questo è il video di background che ho selezionato da YouTube, quindi sostanzialmente qui avete due possibilità potete inserire o il link del file M P quattro che avete caricato nei media del vostro sito web.

Elemento vi consiglia questa impostazione per migliorare le performance, altrimenti potete anche inserire un link di YouTube.

In quel caso potrebbe essere un po' più lento nel caricamento.

Come avete visto C'è stato un leggero upload, eh? Però chiaramente è una possibilità che sta a voi scegliere.

Um pote- ci sono delle impostazioni come in ogni um di elemento.

Ad esempio potete scegliere i secondi di inizio il secondo di fine se riprodurlo in loop.

Se bloccarlo disabilitarlo in mobile e potete utilizzare un'immagine fissa nel caso in cui non si riproduca automaticamente il video, quindi ci sono varie impostazioni.

Diciamo che quindi questo riguarda la sfera del video background l'altra.

Cosa interessante è quello dello show.

Lo slide show semplicemente è una sorta di carosello che si va ad applicare all'interno di una sezione di sfondo di elemento un po' come se fosse una slide, ma non viene applicata in primo piano in primo livello, ma è in background.

Quindi voi chiaramente in questo caso io ho inserito un um semplice intestazione con del testo e un e una posso tranquillamente inserire un uno slash, un carosello, uno slider automatico che si va ad applicare automaticamente nel background per farlo è molto semplice basta trascinare gli elementi e definire le immagini che volete mostrare, inserire all'interno del vostro e dopodiché potete andare ad impostare varie cose, come ad esempio se si deve riprodurre come ciclo infinito in loop la durata in mille secondi.

La transizione a me personalmente il fade piace tanto, ma magari potreste scegliere un um verso sinistra o verso destra.

La durata della transizione La dimensione dello sfondo l'immagine deve essere ripetuta, deve occupare tutta la porzione del vostro schermo e dell'intero contenitore.

Insomma, varie impostazioni che anche qui vi invito a valutare e vedere bene nel dettaglio.

Um poi l'ultima, cosa che voglio mostrarvi è la possibilità di inserire una sorta di overlay nelle immagini di background.

Ora togliamo la lo Slasho, torniamo nella voce classica e prendiamo in esame uno dei probabilmente metodi più utilizzati nelle sezioni di background, ovvero l'immagine di sfondo con del testo sopra.

Innanzitutto vado a colorare di bianco il l'intestazione per farvi vedere meglio l'esempio qui magari faccio il pulsante di colore bianco il colore del testo nero.

Okay, giusto per farvi vedere meglio l'esempio che sto per configurare.

E allora? Quindi torniamo sulle l'intero contenitore stile normale.

Tolgo tranquillamente il il background colore che ho impostato precedentemente e vado ad inserire un'immagine.

A questo punto io andrò a selezionare l'immagine di sfondo che voglio applicare.

Aspettiamo il caricamento.

Eccola qua però che cosa succede? Succede che in alcuni casi se l'immagine ad esempio magari è molto chiara e il testo non si legge.

Dobbiamo intervenire in qualche modo perché il testo potrebbe essere poco leggibile.

A quel punto possiamo intervenire e applicare un sull'immagine, quindi andare ad applicare una sorta di ombra, una maschera leggera sull'immagine di un colore che andremo noi adf per esaltare e portare il testo in primo piano.

Come si fa? Ovviamente qua ci sono le le varie impostazioni per definire la posizione dell'immagine che vi invito poi a vedere queste sono classiche di di elemento in base a vostre preferenze.

Ma quello che voglio mostrarvi è come inserire un overlay alla voce di overlay espandendo tutto quanto potete decidere il tipo di sfondo clicchiamo su classico, andiamo a definire un colore in questo caso magari lo metto nero e poi potete definire la por- la percentuale dell'opacità in questo caso chiaramente come vedete, portandola al quasi al cento per cento a uno a uno l'immagine non si vede più chiaramente dipende molto dal tipo di immagine che andrete ad inserire in questo caso, magari potrebbe andare più che bene uno intorno al zero virgola due di Diciamo che in questo caso il testo è già molto più evidente e e qui ovviamente potete cambiare anche il il colore.

Chiaramente in molti casi si utilizza una tonalità scura per esaltare il testo, ma voi potreste utilizzare anche altri colori in base al vostro obiettivo di esigenza.

Se volete, anche in questo caso potete addirittura oltre ad inserire un di un colore singolo inserire un gradiente, quindi una sfumatura che va da un lato verso un altro.

Quindi questa è un'altra grandissima potenzialità che ci offre elemento.

Quindi per fare un breve recap abbiamo visto in questa lezione come applicare vari sfondi alle intere sezioni di elemento.

Ma vi ripeto, possono essere applicate anche ai singoli contenitori e in alcuni casi anche a singoli.

Quindi vi invito a sperimentare um le possibilità che ci offre l'elemento sono classico sfondo colore, quindi una sezione con un colore di sfondo e il testo sopra un'immagine di background con un overlay per saltare il testo un gradiente, quindi una sfumatura da un colore che va da un verso rispetto un'altra parte un video background, quindi un impatto, un po' più emozionale e qui possiamo richiamare un link di un video youtube o un file M P quattro che abbiamo caricato nei media di WordPress ed infine do quindi una serie di immagini che automaticamente vengono mostrate da elemento.