Sito web avanzato: personalizzazione degli sfondi degli elementi

Personalizza lo sfondo degli elementi del sito per adattarlo al tema della tua attività con design creativi. Scegli immagini di sfondo dalla galleria fotografica, carica le tue immagini, utilizza sfondi video oppure applica colori e sfumature per dare un tocco unico al tuo sito.

Modifica lo sfondo di un elemento

Segui i passaggi seguenti per accedere all'editor di progettazione e modificare lo sfondo di un elemento.

Passo dopo passo:

1. Fai clic con il pulsante destro del mouse sull'elemento e seleziona Modifica progetto .

   Se ti trovi in ​​modalità flessibile o in Editor 2.0, seleziona Modifica progetto dal menu mobile per aprire il pannello di progettazione.

2. Accedi alla sezione Sfondo .
3. A seconda dell'elemento, seleziona Colore , Immagine o Video.
4. Seleziona lo sfondo desiderato.
5. Per creare uno slider di immagini, seleziona più immagini e fai clic su Fine .
   • Una volta creato lo slider, è possibile impostare le impostazioni di scorrimento, come lo stile di transizione e la velocità di scorrimento, dal menu di progettazione delle righe.
   • Qualsiasi altra opzione relativa all'immagine di sfondo, come Sovrapposizione sfondo, Posizionamento e Stile di visualizzazione, può essere applicata allo slider.
6. Opzionale: se selezioni una singola immagine per lo sfondo, attiva l'opzione "Non ottimizzare questa immagine" per impedirne l'ottimizzazione.

Configurazione delle immagini di sfondo

Dopo aver impostato un'immagine o uno slider, vengono visualizzate ulteriori opzioni di configurazione. Queste impostazioni variano, ma le più comuni includono:

Stili di visualizzazione delle immagini

Queste opzioni controllano come un'immagine si adatta, si ripete o si allunga all'interno di un contenitore:

• Copertura : estende l'immagine per coprire l'intera area. Le proporzioni vengono mantenute, ma alcune parti dell'immagine potrebbero essere tagliate.
• Immagine intera : visualizza l'immagine intera senza ritagliarla. A seconda delle dimensioni del contenitore, potrebbero comparire delle barre attorno all'immagine.
• Tile : ripete l'immagine nelle sue dimensioni originali secondo uno schema per riempire l'area.
• Nessuna ripetizione : visualizza l'immagine completa una sola volta, nelle sue dimensioni originali.

Posizionamento ed effetti

• Tipo di posizionamento dell'immagine: disponibile nell'Editor 2.0 e in modalità flex. Selezionare Predefinito, Statico o Parallasse.
• Posizione : determina dove viene posizionata l'immagine, ad esempio al centro, in alto o in basso. Nell'Editor 2.0 e nella modalità flex, è necessario impostare la posizione per ogni dimensione dello schermo.

Utilizzo di sfondi video

Utilizza sfondi video da YouTube, Vimeo o Dailymotion per aggiungere movimento.

Limitazioni

• Video di sfondo di YouTube: I video di YouTube mostrano il titolo del video e l'utente che lo ha caricato prima dell'inizio del video. Poiché questi elementi non possono essere rimossi senza modifiche manuali al CSS, consigliamo di utilizzare altre fonti video come sfondo.
• Supporto per dispositivi mobili: I video di YouTube non si riproducono automaticamente sui dispositivi iOS. Gli iPhone in modalità risparmio energetico mostreranno un pulsante di riproduzione anziché avviare automaticamente la riproduzione di qualsiasi video.
• Audio: I video di sfondo non riproducono audio. Se è necessario l'audio, utilizzare il widget video.
• Prestazioni: I video consumano più larghezza di banda e possono distrarre gli utenti. Utilizzateli con moderazione e valutate la possibilità di ridurre l'opacità del video per un effetto più discreto.
• Playlist di Dailymotion: Rimuovi i parametri della playlist dall'URL. Utilizza solo il link diretto al video. Ad esempio, usa https://www.dailymotion.com/video/x60ktex invece di un link contenente ?playlist= .

Passo dopo passo: