Immagini

Le immagini sono una parte importante della maggior parte dei siti web. Aiutano i tuoi visitatori a interagire con le tue pagine e a comprendere meglio il messaggio del tuo sito. In Sitely, hai molti modi per utilizzare e aggiungere contenuti visivi alle tue pagine. L'opzione più immediata è semplicemente trascinare un'immagine dal tuo computer direttamente sull'area di lavoro di Sitely. Questa verrà posizionata come un elemento immagine e di solito apparirà in questo modo:

L'immagine, nella maggior parte dei casi, verrà posizionata nelle sue dimensioni e proporzioni originali. Per regolare la dimensione dell'immagine mantenendo le sue proporzioni, tieni premuto il tasto shift mentre trascini una maniglia d'angolo. Puoi anche cambiare le dimensioni dell'immagine trascinando una delle maniglie di ridimensionamento senza tenere premuto il tasto shift. Questa azione aumenterà la dimensione del riquadro immagine mantenendo l'immagine all'interno del suo confine. Questo si chiama fare in modo che l'immagine si 'Adatti' e può essere visto nel pannello stili.

Nell'esempio sopra, è stata selezionata la casella di controllo 'Estendi', così come l'opzione per 'Adattare' l'immagine. Questa sezione del pannello stili ti informa anche se le tue immagini saranno adatte per la visualizzazione su dispositivi ad alta risoluzione. Nella maggior parte dei casi, qualsiasi immagine di meno di 2x dovrebbe essere evitata se desideri mantenere un aspetto di alta qualità per il tuo sito. L'altra opzione 'Estendi' è 'Riempi'. Selezionando questa opzione, l'immagine verrà ingrandita proporzionalmente fino a riempire completamente il riquadro.

L'opzione riempi effettuerà effettivamente un ritaglio dell'immagine; in questo esempio, la parte superiore e inferiore dell'immagine è ritagliata. Di default, l'immagine ritagliata sarà centrata all'interno del riquadro immagine. Tuttavia, puoi cambiare il punto focale dell'immagine utilizzando le icone di posizionamento nel pannello stili. Lì puoi scegliere di visualizzare la parte superiore, centrale o inferiore della tua immagine nel riquadro. Se questa fosse un'immagine orizzontale posizionata in un riquadro verticale, potresti impostare il riquadro immagine per visualizzare la parte sinistra, centrale o destra dell'immagine.

Impostare lo stile delle Immagini

Puoi utilizzare le opzioni di stile nel pannello stili per aggiungere bordi, angoli arrotondati, ombre, opacità o filtri alle tue immagini. Ecco alcuni esempi delle opzioni disponibili.

Arrotondamento

+ Bordo

Arrotondamento

+ Ombra

Arrotondamento Completo

Arrotondamento + Bordo + Filtro in Scala di Grigi

Aggiungere Immagini con l'Elemento Immagine

L'elemento immagine è uno strumento fantastico quando inizi a impostare il design della tua pagina web. Posiziona efficacemente un segnaposto immagine sull'area di lavoro che puoi in seguito riempire con un'immagine a tua scelta. Quando viene posizionato per la prima volta sull'area di lavoro, appare in questo modo.

Quando sei pronto per aggiungere immagini, seleziona semplicemente il segnaposto e aggiungi la tua immagine dal pannello stili.

Cliccando il pulsante 'Aggiungi...' potrai sfogliare le immagini sul tuo computer. Hai anche altre fonti di immagini tra cui scegliere. Cliccando sul selettore 'Bitmap (PNG, JPEG, GIF)' verranno rivelate le fonti disponibili.

Vettoriale (SVG)

Questi sono tipicamente elementi grafici puri come loghi, icone o illustrazioni. Vengono creati in applicazioni di grafica vettoriale e di solito hanno una dimensione di file molto piccola. Sono buoni per il lavoro di design web perché possono essere scalati a qualsiasi dimensione mantenendo la loro nitidezza. Hanno anche il vantaggio di poter essere colorati direttamente in Sitely utilizzando l'opzione sovrapposizione colore nel pannello stili. Ecco un esempio di un logo SVG nella sua forma monocromatica di base e come apparirà con una sovrapposizione di colore applicata.

Alcuni SVG saranno già stati creati con diversi colori. Possono essere utilizzati così come sono e manterranno tutti i vantaggi del formato SVG. Tuttavia, utilizzando l'opzione di sovrapposizione colore si rimuoverà la caratteristica multicolore dell'SVG. Ecco un esempio:

Live Photo

Sitely supporta le combinazioni ibride foto-video che gli iPhone possono catturare. Inserendo sia il file immagine che il file video esportato da Foto, puoi creare una pagina che consente ai visitatori del tuo sito di vedere e interagire con la Live Photo. Puoi ottenere i file fissi e video per una Live Photo sincronizzando le tue foto con Foto su Mac e poi selezionando la foto e utilizzando il comando File -> Esporta originale non modificato.

Immagine Stock

Questa opzione ti offre accesso rapido a tre delle librerie di immagini stock più popolari su Internet - Pixabay, Unsplash e Pexels. Basta premere il pulsante 'Seleziona', scegliere la tua piattaforma e iniziare la ricerca dell'immagine perfetta.

Nota Importante: Anche se le immagini stock di queste piattaforme saranno generalmente disponibili per l'uso con termini di licenza molto liberali e senza costi, l'accesso alle librerie tramite l'interfaccia di Sitely non implica che le immagini possano essere utilizzate senza restrizioni in ogni situazione - in particolare le immagini che possono contenere volti di persone reali o marchi. Ti consigliamo di controllare i termini di licenza specifici di qualsiasi immagine tu utilizzi sul sito della piattaforma pertinente.

Instagram

Questa opzione ti consente di aggiungere un feed Instagram alla tua pagina. Essenzialmente, il tuo sito web preleverà le immagini dal tuo feed, eliminando la necessità di aggiornare il tuo sito quando le immagini nel tuo feed cambiano. Dovrai autorizzare Sitely ad accedere al tuo feed tramite le opzioni di impostazione prima di poter utilizzare questa funzionalità.

Dal percorso di rete

Questa opzione ti consente di aggiungere immagini ospitate su un server remoto inserendo l'URL dell'immagine nel pannello stili. Questo è spesso chiamato 'Hot-linking' e dovrebbe essere utilizzato solo se sei il proprietario del sito a cui stai collegando, o hai il permesso del proprietario del sito.

Opzioni di Stile

Queste sono tutte elencate nel pannello stili. Selezionando le caselle di controllo di stilizzazione verranno rivelate impostazioni aggiuntive per ciascuna opzione. Inoltre, potrai allegare qualsiasi azione Al Clic di Sitely alle tue immagini, così come effetti di animazione di scorrimento o una tantum.

Altre Opzioni di Posizionamento delle Immagini

ILe immagini possono essere applicate ad altri elementi della tua pagina Sitely. Ad esempio, puoi riempire un riquadro standard con un'immagine. Sebbene questo possa sembrare identico all'aggiunta di un riquadro immagine alla pagina, questa opzione ti offre alcune funzionalità aggiuntive non disponibili con un elemento immagine standard. La prima cosa che noterai sono alcune opzioni di stilizzazione aggiuntive nel pannello stili.

Posizione fissa

Questa opzione invia la tua immagine dietro la tua pagina web, lasciando il riquadro originale come una sorta di finestra attraverso cui puoi vedere l'immagine dietro. L'immagine stessa rimarrà fissa, mentre il riquadro scorrerà sopra di essa man mano che la pagina scorre, rivelando diverse parti dell'immagine.

Sfocatura

Qui puoi aggiungere sfocatura alla tua immagine, che è un modo semplice per creare uno sfondo colorato per qualcosa come un'intestazione del sito. Ecco un esempio di un'immagine sfocata sovrapposta a un riquadro di testo.

Filtri di Sfondo

Queste opzioni ti consentono di creare effetti interessanti, in particolare per le immagini a cui potresti applicare effetti di scorrimento. Questi filtri non cambiano l'immagine di per sé, ma cambiano lo sfondo dietro l'immagine. Ciò significa che l'immagine deve essere parzialmente trasparente o contenere un'area trasparente (come in un'immagine PNG) affinché gli effetti siano visibili. Per comprendere come funziona, è stato applicato un filtro di sfocatura all'immagine 'Occhio' qui sotto. Man mano che questa pagina scorre, l'immagine potrebbe muoversi verso l'alto e iniziare a sovrapporsi al contenuto sopra di essa. Quando si sovrappone, il contenuto dietro l'immagine si sfoca come illustrato. Ci sono diversi effetti da provare, quindi sperimenta tutti per capire come funziona ciascuno.

Sovrapposizione

Questa è un'opzione per chi ha un po' di conoscenza degli effetti di sovrapposizione. Questi sono spesso utilizzati nelle arti grafiche per creare effetti interessanti. Per far funzionare la sovrapposizione, devono esserci almeno due elementi, uno posizionato sopra l'altro. L'effetto di sovrapposizione viene quindi applicato all'elemento superiore. L'opzione scelta unirà i due elementi per creare un effetto. In questo esempio, un riquadro rosso è stato sovrapposto a un'immagine utilizzando il 'Colore brucia'.

Text over a Blurred Image

Stessa immagine in sfondi diversi

In situazioni in cui hai diversi riquadri su una pagina e desideri che mostrino la stessa immagine di sfondo, puoi semplicemente aggiungere la stessa immagine come sfondo per ciascun riquadro e impostare l'opzione 'Posizione fissa'. Questo imposterà l'immagine di sfondo per tutti i riquadri sulla pagina fino a quando non verrà incontrata una nuova immagine di sfondo. Questo consente di creare elementi di pagina interessanti, come nell'esempio qui sotto.

In questo esempio, sono stati aggiunti due ampi riquadri alla pagina, ciascuno con un effetto di spostamento dello sfondo applicato. La stessa immagine di sfondo è stata applicata a entrambi i riquadri e l'opzione "Posizione fissa" è stata selezionata.

L'opzione di spostamento dello sfondo oscura una parte dell'immagine di sfondo, consentendo di aggiungere altro contenuto nella porzione oscurata della pagina. Questa opzione è disponibile su qualsiasi riquadro a piena larghezza aggiunto alla pagina. L'opzione appare così.

Sfondo dei Blocchi di Layout

Riquadri larghi e blocchi di layout, inclusi griglie di immagini/video e griglie di layout, possono avere immagini impostate come loro sfondi. Questi elementi si estendono per tutta la larghezza del browser e possono creare elementi di pagina a tutta larghezza con un effetto forte per il tuo sito web. Questa funzionalità è comunemente utilizzata per creare una sezione hero del sito web, come nell'illustrazione qui sotto.

Aggiungi immagini ai blocchi di layout e ai riquadri larghi nella sezione di sfondo del pannello stili. Ti verranno presentate le stesse scelte dei riquadri immagine standard, più alcune opzioni di riempimento aggiuntive come gradienti e pattern.

Le immagini utilizzate come sfondi sono particolarmente efficaci quando utilizzate con l'opzione 'Posizione fissa' - creando un effetto parallax in cui la pagina web scorre sopra l'immagine.

Pulsanti immagine

Le immagini possono essere aggiunte anche ai pulsanti come sfondi selezionando il pulsante nell'area di lavoro e poi selezionando 'immagine' dalle opzioni di riempimento dello sfondo nel pannello stili. Sarai in grado di aggiungere immagini diverse per ciascuno stato del pulsante per creare un'interazione utente quando si passa il mouse o si clicca su un pulsante. Un modo comune per utilizzare questa funzionalità è utilizzare variazioni della stessa immagine per gli stati normale e di passaggio. Ad esempio, puoi avere l'immagine dello stato normale a colori e l'immagine dello stato di passaggio in versione monocromatica. Questo è come abbiamo creato il pulsante illustrato qui.

Un modo più conveniente per creare pulsanti immagine potrebbe essere posizionare un'immagine sull'area di lavoro, quindi fare clic destro sull'immagine e selezionare 'Converti in Pulsante' dal menu contestuale.

Button

Modifica degli sfondi delle immagini

Se posizioni un'immagine sull'area di lavoro che ha uno sfondo e un primo piano chiaramente definiti, Sitely può tentare di modificare o addirittura rimuovere lo sfondo per te con un solo clic. Rimuovere lo sfondo trasformerà l'immagine in un PNG trasparente, consentendoti di posizionarla su un altro sfondo a tua scelta. Ecco un esempio di come funziona questa funzionalità.

Con l'immagine originale selezionata, seleziona la casella di modifica dello sfondo nel pannello stili. Scegli l'opzione per rimuovere lo sfondo. Il risultato sarà un'immagine trasparente come puoi vedere qui. Puoi anche far sì che Sitely ritagli automaticamente l'immagine per il primo piano.

Altri effetti di sfondo possono essere aggiunti con la stessa opzione - basta selezionare l'effetto desiderato dall'elenco a discesa. Ecco alcuni esempi delle varie opzioni disponibili.

Immagine Originale

Sfondo Bokeh

Sfondo a Colore Solido

Sfuocatura del Primo Piano

Gestione delle pagine

Mappe