Come aggiungere un effetto parallasse a qualsiasi tema WordPress

L'effetto parallasse è una tendenza del web design in cui un'immagine di sfondo scorre più lentamente del contenuto in primo piano. Questo crea l'illusione di profondità e movimento, creando un'esperienza utente più interattiva sul tuo sito web.

Secondo noi, l'uso di un effetto parallasse è un ottimo modo per catturare l'attenzione dei visitatori. Attira le persone e le incoraggia a rimanere più a lungo, il che può aumentare l'engagement. Abbiamo scoperto che non solo conferisce al tuo sito un aspetto elegante e professionale, ma può anche portare a conversioni più elevate.

In questo articolo, ti mostreremo come aggiungere facilmente un effetto parallasse a qualsiasi tema WordPress. Esploreremo vari metodi, tra cui l'uso di plugin e codice personalizzato, per fornirti opzioni flessibili.

Cos'è un effetto parallasse?

L'effetto parallasse è una tecnica moderna di web design in cui lo sfondo scorre più lentamente del contenuto in primo piano. Questo effetto aggiunge profondità alle immagini di sfondo e le rende più interattive.

L'effetto parallasse può essere utilizzato su landing page, contenuti lunghi, pagine di vendita o sulla homepage di un sito web aziendale.

Può evidenziare diverse sezioni su una pagina lunga, migliorare l'attrattiva visiva generale del sito, aumentare l'engagement degli utenti e essere uno strumento straordinario per trasmettere un messaggio o raccontare una storia sul tuo blog.

Molti temi WordPress premium includono un effetto parallasse integrato nella loro homepage. Puoi utilizzare questo effetto anche nella maggior parte dei plugin per page builder WordPress.

Tuttavia, non tutti i temi hanno questa funzionalità e potresti non voler utilizzare un page builder per creare layout di pagina personalizzati solo per un effetto parallasse.

Detto questo, vediamo come aggiungere facilmente un effetto di sfondo parallasse a qualsiasi tema WordPress. Tratteremo un paio di metodi diversi e puoi utilizzare i collegamenti rapidi qui sotto per passare a quello che desideri utilizzare:

• Metodo 1: Aggiungere l'effetto parallasse al tema WordPress utilizzando un plugin
• Metodo 2: Aggiungere l'effetto parallasse al tema WordPress con CSS
• Bonus: Aggiungere un video di YouTube come sfondo a schermo intero in WordPress

Metodo 1: Aggiungere l'effetto parallasse al tema WordPress utilizzando un plugin

Questo metodo non richiede l'aggiunta di alcun codice al tuo tema WordPress. È facile e consigliato per la maggior parte degli utenti.

Innanzitutto, devi installare e attivare il plugin Advanced WordPress Backgrounds. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, visita la pagina Impostazioni » AWB dalla dashboard di WordPress. Qui, puoi selezionare le caselle per i browser o i dispositivi su cui non desideri visualizzare l'effetto parallasse.

Ad esempio, se non vuoi mostrare l'effetto parallasse agli utenti su dispositivi mobili, puoi selezionare quella casella.

Dopodiché, fai clic sul pulsante ‘Salva modifiche’ per memorizzare le tue impostazioni.

Successivamente, apri una pagina o un post a tua scelta nell'editor a blocchi di Gutenberg.

Una volta lì, fai clic sul pulsante ‘+’ per aggiungere un blocco nell'angolo in alto a sinistra dello schermo per aprire il menu dei blocchi.

Da qui, devi trovare e aggiungere il blocco Sfondo (AWB) al post.

Ora apri il pannello dei blocchi sul lato destro dello schermo e passa alla scheda ‘Immagine’ se desideri aggiungere un'immagine come sfondo parallasse.

Dopodiché, fai clic sul pulsante ‘Seleziona immagine’ per avviare la libreria multimediale. Puoi anche fare clic sul pulsante ‘Usa immagine in evidenza’ per aggiungere automaticamente l'immagine in evidenza come sfondo.

Puoi persino aggiungere un colore di sfondo o un video per l'effetto passando a tali schede.

Dopo aver aggiunto un'immagine, puoi regolarne il punto focale dal pannello dei blocchi e configurare le dimensioni dello sfondo. Tuttavia, si consiglia di lasciare le dimensioni dello sfondo su ‘Copri’.

Successivamente, puoi usare lo slider per cambiare l'opacità dell'immagine.

Una volta fatto ciò, scorri verso il basso fino alla scheda 'Parallax' ed espandila.

Da qui, puoi scegliere il tuo tipo di parallax dal menu a discesa. Una volta scelta un'opzione, le modifiche verranno applicate automaticamente nell'editor di blocchi dove potrai testarle.

Nel nostro esempio, stiamo usando 'Opacità + Scroll'.

Dopo aver aggiunto l'effetto, fai clic sul pulsante '+' nel blocco AWB per aprire il menu dei blocchi.

Ora puoi aggiungere un paragrafo, un'immagine, un video, una citazione o qualsiasi altro blocco desideri. Questo blocco verrà quindi visualizzato con l'effetto parallax.

Infine, fai clic sul pulsante 'Aggiorna' o 'Pubblica' in alto per salvare le tue impostazioni.

Ora, puoi visitare il tuo sito WordPress per vedere l'effetto parallax in azione.

Metodo 2: Aggiungere l'effetto parallasse al tema WordPress con CSS

Se desideri utilizzare una singola immagine come sfondo parallax in tutto il tuo sito web, allora questo metodo fa per te.

Innanzitutto, dovrai caricare l'immagine che desideri utilizzare nella tua libreria multimediale di WordPress visitando la pagina Media » Aggiungi nuovo file multimediale.

Dopo averlo fatto, devi copiare l'URL dell'immagine facendo clic su di essa e aprendo la finestra 'Dettagli allegato'.

Una volta fatto ciò, devi aggiungere codice CSS personalizzato ai file del tuo tema. Tuttavia, il più piccolo errore durante la digitazione del codice può compromettere il tuo sito e renderlo inaccessibile.

Ecco perché consigliamo di utilizzare WPCode. È il miglior plugin per snippet di codice WordPress sul mercato che rende super sicuro e facile aggiungere codice personalizzato, incluso CSS.

Innanzitutto, devi installare e attivare il plugin WPCode. Per istruzioni dettagliate, consulta la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, visita la pagina Code Snippets » + Add Snippet dalla dashboard di WordPress e fai clic sul pulsante ‘Use Snippet’ sotto l'opzione ‘Add Your Custom Code (New Snippet)’.

Questo ti porterà alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare aggiungendo un titolo per il tuo codice personalizzato.

Successivamente, scegli l'opzione ‘Snippet CSS’ dal menu a discesa Tipo di codice sulla destra.

Successivamente, aggiungi il seguente codice CSS personalizzato nella casella ‘Anteprima codice’:

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Una volta fatto ciò, assicurati di sostituire l'URL di esempio nella riga background-image: url del codice con l'URL della tua immagine.

Questa immagine verrà utilizzata come sfondo dell'effetto parallax in tutto il tuo sito web.

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento Automatico’.

Lo snippet verrà eseguito automaticamente sul tuo sito web una volta che aggiungi del codice HTML.

Infine, scorri di nuovo verso l'alto della pagina e imposta l'interruttore ‘Inattivo’ su ‘Attivo’.

Quindi, fai clic sul pulsante ‘Save Snippet’ per salvare le tue impostazioni.

Ora è il momento di aprire il post o pagina di WordPress in cui desideri aggiungere l'effetto parallax.

Una volta lì, fai clic sull'icona dei tre punti nell'angolo in alto a destra dello schermo per aprire un menu. Successivamente, seleziona la modalità ‘Editor di codice’.

Ora, devi aggiungere il seguente codice HTML nell'editor di codice con il contenuto per l'effetto parallax nel mezzo:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Puoi quindi tornare facilmente all'editor visuale a blocchi facendo clic sul link ‘Esci dall'editor di codice’ in alto.

Dopodiché, aggiungi il resto del contenuto per la pagina o il post nell'editor visuale a blocchi.

Infine, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per salvare le tue impostazioni.

Ora, visita semplicemente il tuo blog WordPress per vedere l'effetto parallasse in azione.

Bonus: Aggiungere un video di YouTube come sfondo a schermo intero in WordPress

Oltre all'effetto parallasse, puoi anche aggiungere un video di YouTube come sfondo a schermo intero in WordPress.

Questo può offrire un'esperienza immersiva ai tuoi utenti e aumentare l'attrattiva visiva del tuo sito WordPress. Un video di YouTube a schermo intero come sfondo può evocare emozioni e creare un legame più profondo con il tuo pubblico.

Ad esempio, se stai ospitando un concorso sul tuo sito web, puoi utilizzare un video di YouTube in background per rendere la pagina più emozionante e incoraggiare gli utenti a partecipare al concorso.

Allo stesso modo, se hai un'organizzazione di beneficenza senza scopo di lucro, puoi utilizzare sfondi video per mostrare l'impatto della tua organizzazione, la sua missione e le storie degli individui o delle comunità che servi. Potresti persino mostrare storie di successo nello sfondo video a schermo intero.

Per maggiori dettagli, puoi consultare il nostro tutorial su come aggiungere un video di YouTube come sfondo a schermo intero in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente un effetto parallax a qualsiasi tema WordPress. Potresti anche voler consultare la nostra guida per principianti su come aggiungere lo scorrimento infinito al tuo sito WordPress e il nostro elenco delle migliori alternative a Canva per la grafica del sito web.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.