Nel tempo, anche il sito web più elegante può diventare un pò monotono. L’equilibrio ideale è mantenere le cose visivamente interessanti, senza evitare un restilyng completo. L’utilizzo di un effetto parallasse può aggiungere molto all’estetica del tuo sito web.
Può risaltare i tuoi elementi visivi e spezzare anche i tuoi contenuti di testo. Potresti anche notare che i visitatori rimangono sul tuo sito un pò più a lungo a causa del maggiore coinvolgimento.
In questa guida parleremo di cos’è l’effetto di parallasse e di alcune cose da tenere a mente quando lo si aggiunge al proprio sito. Quindi ti guideremo attraverso come aggiungere questa funzionalità moderna con o senza l’utilizzo di un plugin.
Iniziamo!
Cos’è l’effetto parallasse (o parallax)?
L’effetto parallax, o scroll parallasse, è quando lo sfondo si muove più lentamente del contenuto del primo piano mentre un utente scorre una pagina web. Questo contrasto di velocità crea un’illusione di profondità e movimento.
I web designer spesso usano l’effetto su home page, pagine di destinazione o qualsiasi luogo in cui sono presenti sezioni che potrebbero essere suddivise. Può essere particolarmente vantaggioso sui siti web di una pagina, poiché la novità può incoraggiare gli utenti a continuare a scorrere il contenuto.
Considerazioni sull’aggiunta di un effetto parallasse
Lo scroll parallasse può aggiungere molto al tuo sito WordPress, ma se eseguito in modo errato, può peggiorare l’esperienza utente (UX). L’accessibilità può senza dubbio essere influenzata da questa funzione, in quanto può rendere difficile la lettura.
Quando crei un effetto di parallasse, ti consigliamo di scegliere attentamente l’immagine di sfondo.
Seleziona Temi WordPress Parallax
Un modo per ottenere questo effetto di tendenza è selezionare un tema WordPress dotato di una funzione web parallax. Sono disponibili una varietà di temi che ti consentiranno di aggiungere lo scorrimento della parallasse in modo rapido e semplice:
- Create : questo tema include diversi modelli che incorporano un effetto di parallasse. È anche una buona scelta per la creazione di un sito di e-commerce.
- Divi : Divi è un popolare tema WordPress e page builder. Questo tema ha molte demo di nicchia con scorrimento parallasse integrato se preferisci importare contenuti demo.
- Stockholm: Stockholm è un tema flessibile che viene fornito in bundle con una selezione di plugin premium. Potresti dare un’occhiata a questo tema se stai creando un portfolio online, poiché la sua semplicità mantiene l’attenzione sui tuoi contenuti.
Ovviamente ci sono molti altri temi tra cui scegliere. Tuttavia, questi forniscono molto per cominciare e sono perfetti anche in altre aree.
Come aggiungere l’effetto parallax al tuo sito WordPress (con e senza plugin)
Anche se il tuo tema non ha parallax integrato, puoi comunque aggiungerlo al tuo sito. Ti mostreremo come farlo con o senza un plugin e analizzeremo i passaggi di entrambi i metodi.
Utilizzo dei plugin Parallax di WordPress
L’utilizzo di un plugin per aggiungere lo scorrimento parallasse è piuttosto semplice. Installi un Plugin, configuri le impostazioni e il gioco è fatto. Esaminiamo questi passaggi in modo più dettagliato.
1. Scarica un plugin Parallax
Esistono alcuni plugin che possono aggiungere lo scorrimento parallasse, ma consigliamo di utilizzare Advanced WordPress Backgrounds (AWB). Questo è un plugin parallasse gratuito per WordPress che ti consente di utilizzare immagini o video per i tuoi sfondi:
Per scaricare il plugin , vai su Plugin> Aggiungi nuovo e cerca “Advanced WordPress Backgrounds” come faresti per qualsiasi altro plugin.
Una volta attivato, puoi passare alla creazione effettiva del tuo sfondo parallasse.
2. Seleziona un’immagine
Vai al post o alla pagina in cui desideri che appaia l’effetto parallasse. AWB ha il proprio blocco, che utilizzerai per selezionare la tua immagine e posizionare l’effetto sulla pagina:
Nel menu Blocco, seleziona l’immagine o il video che desideri utilizzare come sfondo dalla libreria multimediale di WordPress. È inoltre possibile utilizzare un colore solido come sfondo se un’immagine non è appropriata per l’applicazione.
3. Abilita e seleziona il tipo di effetto parallasse
Mentre sei nel menu Blocco, troverai le opzioni per il comportamento dell’effetto:
Qui, puoi scegliere di modificare la scala e l’opacità dell’immagine di sfondo mentre l’utente scorre, piuttosto che un effetto di parallasse più tradizionale. Questo ti dà un maggiore controllo su come viene visualizzato l’effetto sul tuo sito web.
Infine, puoi scegliere di disattivare l’opzione parallasse per i dispositivi mobili.
4. Attiva o disattiva la funzione Mouse parallax
L’attivazione del mouse parallax aggiungerà un effetto che può essere controllato spostando il mouse, piuttosto che scorrendo. Come con altre versioni di questo effetto, puoi regolare le dimensioni e la velocità, che determinano la durata e l’intensità dell’effetto:
Se hai un sito web a una pagina, potresti sfruttare questa funzione. Il parallasse del mouse può creare alcuni affascinanti effetti visivi con un pò di sperimentazione.
Aggiunta di un effetto parallasse a WordPress utilizzando CSS
Se preferisci non utilizzare un plugin, puoi aggiungere l’effetto parallasse usando CSS. Caricherai la tua immagine di sfondo, quindi aggiungerai un pò di codice al tuo sito. Ecco come portare a termine il lavoro!
1. Carica l’immagine nella tua libreria multimediale di WordPress
Dalla dashboard di WordPress, fai clic su Media> Aggiungi nuovo . Questo ti porterà alla pagina Carica nuovi media:
Fai clic sul pulsante Seleziona file e trova l’immagine che desideri utilizzare per lo sfondo sul tuo computer. Quindi, fai clic su Apri e attendi il completamento del caricamento.
Una volta caricata l’immagine, individuala nella libreria multimediale accedendo a Media> Libreria dalla dashboard di WordPress. Una volta trovata la tua immagine, fai clic su di essa e trova l’ URL del file nella finestra che si apre:
Fai clic sul pulsante Copia URL per copiare il collegamento.
2. Aggiungi HTML nella pagina / post
Successivamente, aggiungerai il seguente codice HTML nella pagina o nel post in cui desideri che appaia l’effetto parallasse. Se utilizzi l’Editor a blocchi, puoi aggiungere questo codice utilizzando un blocco HTML personalizzato. Tuttavia, può anche essere inserito nell’Editor di testo per gli utenti dell’Editor classico:
<div class="parallax"> <div class="parallax-content"> Il tuo contenuto qui </div> </div>
Ti consigliamo di sostituire il testo segnaposto “Il tuo contenuto qui” con qualsiasi contenuto desideri e salvare il tuo lavoro.
Tuttavia, non vedrai ancora molto sul front-end poiché abbiamo ancora un altro passaggio: aggiungere il codice CSS al tuo tema.
3. Aggiungi CSS al tuo tema
Infine, aggiungerai alcuni CSS personalizzati al tuo tema utilizzando l’editor dei temi o l’editor CSS integrato: non importa quale opzione scegli.
Aggiungi il seguente codice CSS al tuo tema, sostituendo l’URL dell’immagine di sfondo con quello che hai copiato in precedenza:
.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;
}
Assicurati di salvare le modifiche, quindi controlla il front-end. Ora dovresti essere in grado di vedere il tuo effetto parallasse in azione, il tutto senza plugin!
Conclusione
L’utilizzo di un effetto di parallasse è un modo efficace per coinvolgere i tuoi utenti. Sia che lo utilizzi per suddividere la copia su una pagina di vendita o per trasformare il tuo sito web di una pagina in un’esperienza coinvolgente, il parallax è una tendenza che potrebbe valere il tuo tempo.
In questo post, abbiamo esaminato cos’è l’effetto di parallax e alcune cose a cui pensare prima di includerlo nel tuo sito. Quindi ti abbiamo mostrato alcuni modi per implementare l’effetto di scorrimento sul tuo sito web WordPress.
Buon lavoro!
