Video

Aggiungere video alla tua pagina web è davvero semplice grazie all'elemento Video, che si occupa di tutto il lavoro pesante. Basta aggiungere l'elemento all'area di lavoro, oppure trascinare un file video MP4/mov direttamente nell'area di lavoro. Una volta posizionato, apparirà come un segnaposto video.

Se hai trascinato un video nell'area di lavoro, vedrai un lettore video, completo della sua immagine di copertura. A quel punto, tutto ciò che devi fare è stilizzare l'interfaccia del lettore e posizionarla/dimensionarla in base alle esigenze della tua pagina web.

Con l'opzione segnaposto, dovrai aggiungere un file sorgente al segnaposto per farlo apparire come un lettore video. Puoi fare questo dal pannello di stile di Sitely, che ti è già familiare.

Hai diverse opzioni di sorgenti video tra cui scegliere. Queste sono tutte presentate attraverso le opzioni a discesa nel pannello di stile. Le opzioni di Youtube e Vimeo ti permettono di incorporare video provenienti da queste popolari piattaforme di streaming. Tutto ciò che devi fare è inserire l'URL o l'ID del video che desideri visualizzare. Se scegli l'opzione "Dal Disco", potrai selezionare un file video dal tuo disco. Se selezioni l'opzione "Da Posizione di Rete", potrai inserire l'URL di un file video ospitato su un server di terze parti.

Dopo, dovrai decidere dove desideri archiviare il tuo file video. Con le opzioni di streaming, non devi fare questa scelta: il video rimarrà sul server e verrà trasmesso alla tua pagina web. Tuttavia, se stai aggiungendo un video dal tuo disco locale, hai l'opzione di lasciare il video nella sua posizione attuale sul disco, oppure di incorporarlo nel file di progetto di Sitely. Potresti volerlo incorporare nel progetto se intendi continuare a lavorare sulla tua pagina web su un computer diverso in futuro, o se c'è la possibilità che il tuo file video venga spostato in un'altra posizione sul disco. L'incorporamento garantirà che il file sia sempre accessibile al progetto, ma aumenterà un po' il peso del tuo file di progetto Sitely.

L'opzione Immagine di Copertura ti consente di selezionare una scena dal tuo video da utilizzare come immagine di copertura. Se preferisci utilizzare un'immagine completamente personalizzata, hai l'opzione di aggiungerne una più in basso nel pannello di stile.

La sezione Opzioni del pannello di stile è dove decidi come deve essere riprodotto il tuo video e come l'interfaccia del lettore deve apparire ai visitatori del tuo sito.

L'opzione "Avvio Automatico" permetterà al tuo video di iniziare a essere riprodotto non appena viene caricato nella pagina. Tuttavia, se imposti questa opzione, tieni presente che il video verrà riprodotto senza audio (sarà automaticamente silenziato). L'opzione "Loop" farà in modo che il video venga ripetuto, così non smetterà mai di essere riprodotto: quando raggiunge la fine, ricomincerà da capo. L'opzione "Riproduci Durante Scorrimento" riprodurrà il video mentre la pagina viene scorsa dall'utente: è una sorta di opzione "scrubber" video che avanza il video man mano che la pagina viene scorsa.

Selezionando la casella "Controlli del Lettore" otterrai la massima flessibilità su come stilizzare il tuo lettore video. L'opzione "Sull Video" crea un lettore video familiare con tutti i controlli chiaramente visibili all'interno dell'interfaccia del lettore. Puoi selezionare quali elementi dell'interfaccia di controllo sono visibili agli utenti, così come scegliere un colore di accento da utilizzare. L'altra opzione che hai è di utilizzare l'opzione "Integrato nel Browser". Questo lascia al browser dell'utente il compito di stilizzare l'interfaccia video. In questa sezione puoi anche aggiungere un'immagine di copertura personalizzata, se desideri utilizzarne una.

Il passo successivo è decidere come vuoi incorporare il tuo video. Le opzioni sono:

Incorporamento Diretto: questo incorpora il video nella sua dimensione attuale direttamente nella pagina web. Il video può essere riprodotto nella pagina semplicemente attivando i controlli video.

Immagine Fissa + Incorporamento: questo crea un'immagine fissa nella pagina, con il video che viene caricato e attivato solo con un clic del mouse. Questo può migliorare il tempo di caricamento iniziale della pagina, ma l'avvio del video potrebbe essere ritardato.

Immagine Fissa + Incorporamento in Lightbox: questo è simile a Immagine Fissa + Incorporamento, eccetto che il lettore video si aprirà in una lightbox quando l'immagine fissa viene cliccata.

Opzioni di Disposizione

Nella scheda Disposizione a destra dell'interfaccia, c'è un'altra opzione che ti consente di utilizzare il video in modo più creativo. Ad esempio, puoi impostare un video per essere a Larghezza Completa della Pagina. Questa opzione fa sì che il video si estenda per tutta la larghezza della finestra del browser. È un'ottima opzione per creare intestazioni video e sezioni hero per le tue pagine.

Ecco come appare un video a tutta larghezza come intestazione sulla pagina. Fondamentalmente, il video assume l'aspetto di un elemento di sfondo per un riquadro ampio. Quando utilizzato in questo modo, il video non avrà alcun controllo - è progettato per riprodursi automaticamente e in loop, pertanto sarà disattivato se contiene una traccia audio. Il video stesso occuperà l'intera larghezza del browser, mentre la sua altezza sarà determinata da come dimensioni il riquadro nell'area di lavoro. Il video non si distorcerà mai - piuttosto, verrà ritagliato nella parte superiore e inferiore per visualizzare solo la porzione visibile del riquadro.

Impostare un Video come Sfondo di Pagina

In alcune situazioni, potresti voler aggiungere un video come elemento di sfondo per l'intera pagina. Sitely raggiunge questo obiettivo tramite la scheda Pagina a destra dell'interfaccia. Basta scorrere verso il basso nella sezione sfondo della scheda Pagina e scegliere video come contenuto di sfondo - avrai le stesse opzioni per scegliere un file video di origine.

Cose da ricordare riguardo ai video di sfondo.

Mantieni le dimensioni dei file piccole - scegli video adatti al loop e rimuovi eventuali tracce audio. Idealmente, i video di sfondo dovrebbero essere inferiori a 10 MB.

Potrebbe non essere consigliabile utilizzare servizi di streaming per fornire contenuti di sfondo - in particolare se il servizio è incline a fornire pubblicità insieme al tuo video. Per la maggior parte dei video di sfondo, è meglio ospitare il tuo video sul tuo server - utilizza le opzioni ‘Da Disco’ o ‘Posizione di Rete’.

Comprendere come l'opzione di sfondo visualizza il video.

Quando aggiungi un video come elemento di sfondo, esso viene posizionato sulla pagina a piena larghezza del browser - la sua altezza è impostata in proporzione al rapporto d'aspetto del video. Quindi, la dimensione effettiva del video sulla pagina varierà in base alla larghezza della finestra del browser del visitatore. Man mano che la pagina scorre, il video scorrerà anche, proprio come altri elementi della pagina.

Se desideri che il tuo video rimanga in posizione a piena altezza e larghezza del browser, seleziona l'opzione Posizione fissa. Questo coprirà la finestra del browser disponibile con il contenuto video e lo fisserà in posizione. Il contenuto della pagina si muoverà sopra il video mentre la pagina viene scorsa.

Creare Elementi Animati con Clip Video

A volte, potrebbe esserci la necessità di incorporare piccoli elementi animati in un sito web, specialmente quando le opzioni di animazione esistenti di Sitely non soddisfano le esigenze. Questo è particolarmente vero per elementi come annunci animati compatti o intestazioni d'impatto, comunemente trovati in tutto il web e nei social media. Sebbene Sitely non sia progettato come un'applicazione di editing video, offre un elemento video versatile che si integra senza problemi nelle pagine web.

A differenza di alcuni altri costruttori di siti web, Sitely offre libertà dai rapporti d'aspetto standard dei video quando integri un lettore nella tua pagina web. L'elemento video si adatta senza sforzo al rapporto d'aspetto del video che contiene. Pertanto, se puoi creare elementi video, Sitely eccelle nella loro gestione.

Considera il seguente esempio: immagina un'intestazione con una parola che cambia dinamicamente nel mezzo. Per ottenere questo effetto, abbiamo utilizzato un'applicazione di editing video, come la gratuita e consigliata CapCut. Fondamentalmente, abbiamo impostato un'area di lavoro abbastanza spaziosa da accogliere la dimensione del testo previsto per il nostro titolo. Dopo aver aggiunto e stilizzato il testo, insieme a transizioni animate, abbiamo generato un piccolo video MP4. Questo video è stato poi compresso utilizzando Handbrake per ottimizzarlo per il web.

In Sitely, abbiamo costruito il titolo utilizzando testo standard e integrato senza problemi il piccolo video. Il risultato finale è visivamente coinvolgente e dinamico

Creiamo grandi siti web

con Sitely

Combinando elementi standard di Sitely come testo, riquadri, icone e video, puoi facilmente aggiungere un po' di movimento extra alla tua pagina. Ecco un altro esempio.

Guarda
qui

E che dire delle storie di Instagram ecc? Possono essere aggiunti alla vostra pagina web per creare un'esperienza più coinvolgente per i visitatori del sito.

In tutti gli esempi sopra, i video non hanno traccia audio, quindi sono stati impostati per la riproduzione automatica e in loop. Se intendi utilizzare clip video in questo modo, ecco alcune regole generali. Mantieni le dimensioni dei file piccole. Usa l'opzione ‘Da Disco’ - chiaramente questi tipi di clip non sono adatti per la distribuzione tramite siti di condivisione video. Possono, ovviamente, essere impostati per essere forniti da una posizione di rete se hai i tuoi video ospitati sul tuo server web. Infine, non esagerare con questa tecnica - un eccesso può infastidire i visitatori del tuo sito, quindi assicurati di avere uno scopo per aggiungere questo ulteriore strato di animazione.

Gestione delle pagine

Mappe