Terrò questa introduzione davvero breve.
Ecco di cosa parleremo in questo articolo:
- Cosa sono le immagini di sfondo
- Qual è la cosa con gli sfondi di parallasse?
- Come aggiungere immagini di sfondo al tuo sito WordPress
- Come affrontare le dimensioni dell’immagine in WordPress
Pronto, costante? Andiamo!
Cosa sono le immagini di sfondo?
Le immagini di sfondo sono immagini che vengono applicate allo sfondo di un elemento su un sito Web, in un’e-mail, ecc. Mentre l’immagine dell’eroe è il punto focale principale di un sito web o di un’e-mail, le immagini di sfondo sono più sottili. Supportano altri elementi del sito web, come secondo livello: chiamate all’azione, altre immagini, varie sezioni del sito, ecc.
Diamo un’occhiata ad alcuni esempi di tali immagini di sfondo:
IKEA
Sulla homepage del sito web IKEA, le immagini di sfondo vengono utilizzate per presentare le loro storie ispiratrici. Il titolo e la categoria della storia sono posizionati sopra l’immagine. Viene utilizzata una sovrapposizione gradiente in modo che diminuisca l’opacità dell’immagine reale. Questo approccio aiuta a rendere il testo più visibile, ma crea anche coerenza nel design, quindi nessun colore si distingue più di un altro.
Loving Vincent
Uno dei miei film preferiti, questo.
Immagini di sfondo giacevano dietro una giostra che presenta storie dietro Vincent van Gogh e il film. Le immagini di sfondo sembrano potenziare la storia e fornire forti emozioni.
Lush
Adoro come appare il sito web Lush: colorato e vibrante come i prodotti stessi.
Ora, le immagini di sfondo possono utilizzare modelli o forme, come in questo esempio di pagina di iscrizione alla newsletter. Questi modelli riescono a trasformare qualcosa di potenzialmente noioso, in qualcosa di allegro.
Immagini di sfondo parallasse
Se guardi il sito del British Museum, noterai che ci sono immagini nelle loro pagine, che si trovano sullo sfondo perché il contenuto in primo piano scorre verso il basso. Queste sono immagini di sfondo parallasse.
Parallax scrolling è una di quelle tendenze di web design che riesce ad aggiungere un effetto brillante a un sito web se integrato correttamente.
Puoi anche ottenere un tale effetto in WordPress, ti mostrerò come un po ‘ più tardi.
Come aggiungere immagini di sfondo al tuo sito WordPress
Ci sono tre modi principali per aggiungere immagini di sfondo al tuo sito WordPress. Controlliamoli, va bene?
-
L’aggiunta di immagini di sfondo tramite il vostro tema WordPress Customizer
I temi WordPress più popolari hanno questa opzione disponibile. Ho intenzione di utilizzare il tema Colibri per lo scopo di questo esempio. Altri temi si comportano in modo simile al tema Colibri.
Se il tema scelto non supporta la funzione, passare ai metodi 2 e 3.
Ora, iniziamo dirigendoci verso Aspetto- > Personalizza dal Dashboard di WordPress. A sinistra vedrai le opzioni di modifica del Customizer del tema, mentre a destra c’è un’anteprima dal vivo del tuo sito web.
Il tema consente di inserire immagini di sfondo per:
- Righe
- Colonne
- Blocchi (intere sezioni del sito web come: informazioni su di me, portfolio, team, contatti, ecc.)
- Componenti (intestazioni, caroselli, tabelle dei prezzi, caroselli, ecc.)
Il modo in cui puoi farlo è lo stesso, indipendentemente da dove hai bisogno dell’immagine di sfondo.
Supponiamo che tu voglia aggiungere un’immagine di sfondo al tuo blocco del sito web dei servizi. Inizia selezionando la sezione. A sinistra vedrai le opzioni di modifica in un menu strutturato come di seguito:
- Layout
- Stile
- Avanzate
Vai a Stile – > Tipo di sfondo.
Selezionare “Immagine”. Ora vedrai un’immagine che puoi sostituire con la tua. 
Quando fai clic sull’immagine ti verrà richiesto di visualizzare una schermata in cui puoi selezionare un’immagine dalla galleria multimediale di WordPress oppure puoi caricare un’altra immagine.
Come avrai già notato, puoi persino aggiungere un video come sfondo.
E c’è anche un’opzione di commutazione per l’effetto parallasse!
Ora, c’è un’altra scorciatoia per fare questa modifica dell’immagine di sfondo. Quando selezioni un blocco da destra, vedrai l’icona delle impostazioni. Fare clic su di esso e vedrete alcune opzioni di modifica.
Se selezioni “Cambia sfondo”, verrai indirizzato all’interno di” Stile ” per procedere come descritto sopra.
Questo era tutto gente. Abbastanza facile, giusto?
Ora, se il tema non ha l’opzione immagine di sfondo, c’è un modo per farlo nell’editor predefinito di WordPress.
-
Aggiunta di un’immagine di sfondo utilizzando i blocchi WordPress
Dalla dashboard di WordPress, vai su “Pagine”. Ora, selezionare “modifica” da sotto la pagina desiderata. Vedrai un’interfaccia come mostrato di seguito.
L’editor WordPress predefinito è basato su blocchi, il che significa che ogni sezione del sito Web è composta da blocchi. Questi blocchi sono accessibili da qualsiasi segno ” + ” che vedrai nell’interfaccia. Facciamo clic su quello in alto a sinistra.
Ora, selezionare il blocco “Cover”. Lo vedrai apparire subito sulla tua pagina.
È possibile caricare un’immagine memorizzata localmente sul computer o scegliere tra quelle esistenti nella Libreria multimediale.
Ho selezionato un’immagine dalla Libreria multimediale. Ora posso aggiungere un po ‘ di testo ad esso. Le opzioni di modifica sono piuttosto limitate qui.
Se selezioni la copertina vedrai un menu che appare sopra, dove puoi allineare la tua immagine o duplicare l’intero blocco. È anche possibile salvare il blocco come uno riutilizzabile, per essere utilizzato di nuovo in altri disegni.
Ora, sul lato destro dello schermo, hai alcune opzioni di modifica extra.
All’interno delle impostazioni multimediali, se si attiva l’opzione Sfondo fisso, si attiva l’effetto parallasse.
Quando l’interruttore è spento, è possibile regolare il punto focale.
Questa regolazione del punto focale può essere eseguita anche su base percentuale, tenendo conto della larghezza e dell’altezza.
Successivamente, è possibile aggiungere una sovrapposizione. Puoi scegliere il suo colore e l’opacità.
E, hai finito.
-
Aggiunta di immagini di sfondo tramite plugin WordPress
Qui ci sono alcuni plugin WordPress etichettati come plugin immagine di sfondo. Ho intenzione di giocare un po ‘ con il semplice plugin Immagine di sfondo a schermo intero perché ha il maggior numero di installazioni e le migliori recensioni finora.
Ora, ecco un tutorial su come installare un plugin per WordPress.
Con questo plugin, le immagini verranno automaticamente ridimensionate con il browser, quindi indipendentemente dalle dimensioni del browser, l’immagine riempirà sempre lo schermo.
Tutto quello che devi fare è andare su Aspetto -> Immagine BG a schermo intero. Da qui seleziona la tua immagine.
Quando premi “Salva opzioni”, vedrai che tutte le sezioni del tuo sito, senza sfondo, riceveranno questa immagine come sfondo.
Ora, questo è ciò che sta accadendo nella versione gratuita. È piuttosto semplice e per niente flessibile. Il piano a pagamento viene fornito con opzioni extra come:
- Immagini di sfondo illimitate
- Immagini di sfondo specifiche per post / pagina
- Più immagini con transizioni di dissolvenza sulle pagine
E, abbiamo finito, hai appena scoperto i 3 metodi che puoi usare per aggiungere immagini di sfondo al tuo sito WordPress.
C’è un’altra cosa che voglio che tu sappia prima che possiamo chiamare un giorno.
Dimensioni immagine
Prima di caricare qualsiasi immagine sul tuo sito, fai attenzione alle sue dimensioni. So che guardiamo tutti i megapixel, ma, sul web, c’è un problema. Le immagini ad alta risoluzione possono danneggiare il tuo sito influenzando il tempo di caricamento. A lungo termine, qualsiasi secondo caricamento in più potrebbe perdere i visitatori del sito web e le conversioni. Inoltre, diminuirai significativamente le tue possibilità di classificarti nei motori di ricerca, perché la velocità dell’età è un fattore di classifica importante.
D’altra parte, l’utilizzo di immagini troppo piccole può danneggiare anche l’esperienza utente. Quindi, dobbiamo sbarcare il lunario.
Un modo per farlo è quello di utilizzare applicazioni esterne che possono aiutare a ridimensionare le immagini, garantendo la corretta chiarezza.
Ma in WordPress, puoi farlo facilmente usando un plugin…, come potresti aver già intuito.
Qui, a Colibri, siamo appassionati di Smush. Smush può e comprimerà le immagini senza un calo visibile della qualità.
Nella versione pro, convertirà anche le immagini in WebP, un formato immagine di nuova generazione in grado di comprimere le dimensioni dei file immagine fino al 35%, senza evidenti perdite di qualità.
E questo è un involucro, gente!
Se ti è piaciuto questo articolo e vuoi saperne di più su come progettare un sito web WordPress, assicurati di iscriverti al canale Youtube di Colibri e seguici su Twitter e Facebook!