Cum să adăugați cu ușurință efectul Parallax pe site-ul dvs. WordPress

Come aggiungere facilmente l’effetto parallasse al tuo sito WordPress

⌛ Reading Time: 5 minutes

Puoi chiamarlo ingannevole, puoi chiamarlo piacere per gli occhi, ma l’effetto di parallasse nel web design è qui per restare. È un elemento che darà al tuo sito il fattore “WOW”. Mentre l’effetto è in circolazione da un po ‘di tempo e ci sono molti siti che lo hanno implementato nel loro design, è comunque bello.

Se sei pronto per unirti al movimento e aggiungere l’effetto al tuo sito WordPress, resta sintonizzato.

Cos’è la parallasse?

Per coloro che non hanno familiarità con il termine, il dizionario definisce la parola “parallasse” come “l’effetto per cui la posizione o la direzione di un oggetto sembra differire se visto da posizioni diverse.

Nel mondo della progettazione di siti Web, la parallasse è una tecnica in cui le immagini di sfondo si muovono a una velocità diversa, solitamente più lenta delle immagini in primo piano. Lo scopo è creare un’illusione di profondità (finto effetto 3D) in un ambiente 2D.

L’applicazione del parallasse esiste dagli anni ’80 nel mondo dei giochi, ma i web designer hanno appena iniziato a incorporare ampiamente l’effetto nel 2011 utilizzando HTML5 e CSS3.

Primo percorso: temi WordPress

Se sei un utente WordPress, il modo più semplice per avere l’effetto di parallasse sul tuo sito è usare un tema WordPress con l’effetto incorporato. Cambia il tema e il gioco è fatto.

Ci sono tantissimi temi WP pronti per la parallasse là fuori, sia gratuiti che a pagamento. Una rapida ricerca su Google e nel repository dei temi WordPress ti darà più opzioni che potrai mai gestire.

Se vuoi testare alcuni dei temi, ecco alcuni esempi di essi appena estratti dal repository. Poiché è impossibile testare e confrontare tutti i temi disponibili pronti per la parallasse e mostrarti solo il meglio, questi sono stati scelti esclusivamente in base alla soggettività del mio gusto visivo personale.

1. Cornice parallasse

2. Marvy

parallasse-mte-marvy

3. SimpleShift

parallasse-mte-simple-shift

4. Eleganto

parallasse-mte-eleganto

5. Integrante

parallasse-mte-integrale

6. Zelo

parallasse-mte-zelo

7. Ginepro

parallasse-mte-ginepro

8. E non dimenticare l’ultimo tema ufficiale di WordPress, Twenty Seventeen, supporta anche un’intestazione di parallasse.

parallasse-mte-ventisette

Questi temi di solito hanno uno o pochi segnaposto specifici per l’effetto di parallasse e tutto ciò che devi fare è caricare l’immagine di sfondo in quelle posizioni. Ma questa semplicità è anche uno svantaggio perché hai poco spazio per improvvisare.

Ogni tema è diverso, ma di solito puoi personalizzare l’immagine di parallasse di sfondo tramite il menu “Aspetto -> Personalizza” e scegliere il menu specifico in base alle impostazioni del tema.

parallax-mte-personalizza-cronus

Secondo percorso: plugin di WordPress

Se vuoi applicare l’effetto alle aree di tua scelta, devi usare i plugin. Sebbene il numero non sia grande quanto quello dei temi, ci sono ancora molti plugin di parallasse di WordPress che puoi provare. Eccone alcuni dal repository dei plugin: Parallax Scroll, Facile scorrimento parallasse di WordPress, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider, e Aesop Story Engine.

La maggior parte di questi plugin ti consentirà di creare elementi di parallasse e inserirli in post, pagine o qualsiasi altra area supportata utilizzando shortcode. Ce ne sono anche alcuni che creano gli elementi direttamente nel punto in cui vuoi che appaia la parallasse.

In Parallax Scroll, ad esempio, puoi creare una nuova parallasse simile alla creazione di un nuovo post. Anche l’interfaccia di modifica è simile. Per aggiungere l’immagine di sfondo parallasse, usa l’opzione “Imposta immagine in primo piano”. Il titolo e il contenuto del post sono opzionali.

parallasse-mte-aggiungi-parallasse

Ci sono molte opzioni con cui puoi armeggiare sotto la casella del contenuto, ma sono anche opzionali.

parallax-mte-scroll-options

Dopo aver premuto il pulsante “Pubblica”, otterrai uno shortcode. Inserisci questo shortcode in qualsiasi posizione supportata (post, pagine, widget, ecc.) E avrai l’effetto di parallasse.

parallax-mte-shortcode

Nota che anche se puoi regolare molte cose nelle opzioni, il risultato finale della parallasse dipenderà fortemente dai temi che usi. Se il tema supporta l’intera larghezza, l’elemento di parallasse può apparire nella sua gloria a tutta larghezza. In caso contrario, puoi accettare ciò che la vita ti ha dato a braccia aperte, oppure potresti provare a farti strada nel tuo aspetto preferito usando CSS e JavaScript.

Un piccolo trucco da aggiungere al tuo arsenale: nessuno ha detto che non potresti combinare il tema e il plugin. Anche l’utilizzo di più plug-in è legale. Potresti, ad esempio, usare Twenty Seventeen per il tuo tema e installare Aesop Story Engine più Parallax Scroll come spezia extra per la tua ricetta web.

Ora puoi intraprendere un viaggio di parallasse e stupire i tuoi visitatori lungo la strada.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

[pt_view id="5aa2753we7"]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *