Vai al contenuto principale

Come aggiungere un effetto di parallasse su qualsiasi tema WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Recentemente uno dei nostri lettori ci ha chiesto come aggiungere l'effetto di parallasse a qualsiasi tema WordPress?

L'effetto Parallax è una tendenza popolare in questi giorni sul Web in cui un'immagine di sfondo scorre più lentamente rispetto al contenuto in primo piano.

In questo tutorial, ti mostreremo come aggiungere facilmente l'effetto di parallasse a qualsiasi tema WordPress.

Ma, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Ma torniamo al perché siamo qui.

Come aggiungere l'effetto parallasse a qualsiasi tema wordpress e1567702269161

Cos'è un effetto di parallasse?

L'effetto Parallax è una moderna tecnica di web design in cui l'elemento di sfondo scorre più lentamente rispetto al contenuto in primo piano. Questo effetto aggiunge profondità alle immagini di sfondo e le rende interattive.

Scopri la nostra 25 Temi WordPress con parallasse per creare un sito web

L'effetto Parallax può essere utilizzato su le pagine di destinazione, pagine di vendita o la home page di un sito web aziendale. È un ottimo modo per evidenziare diverse sezioni su una lunga pagina.

molti temi WordPress premium hanno un effetto di parallasse incorporato nella loro homepage. Puoi anche usare l'effetto parallasse con la maggior parte dei plugin WordPress creazione visiva di pagine.

Tuttavia, non tutti i temi WordPress hanno un effetto di parallasse incorporato e potresti non voler utilizzare un costruttore visivo di pagine solo per l'effetto di parallasse.

Diamo un'occhiata a come aggiungere facilmente l'effetto di parallasse a qualsiasi tema WordPress.

Metodo 1: aggiungi l'effetto parallasse a qualsiasi tema WordPress utilizzando un plug-in

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

La prima cosa che devi fare è installare e attivare il plugin Sfondi WordPress avanzati. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo aver attivato il plug-in, è necessario modificare la pagina in cui si desidera aggiungere l'effetto di parallasse. Noterai il nuovo pulsante "Sfondi WordPress avanzati»Sulla barra degli strumenti dell'editor visivo.

Aggiungi uno sfondo wordpress avanzato

Facendo clic su di esso si aprirà una finestra pop-up in cui è possibile modificare le varie impostazioni di sfondo che si desidera aggiungere.

Prima di tutto, devi selezionare un'immagine come sfondo e quindi selezionare l'opzione " Allungare'.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Sfondo della finestra wordpress avanzato

Quindi devi fare clic sul pulsante Seleziona immagine Per scaricare o selezionare un'immagine che si desidera utilizzare. Assicurati di utilizzare un'immagine di grandi dimensioni, altrimenti sembrerà pixelata.

Successivamente, devi attivare l'effetto Parallasse Scegliendo un tipo di effetto di parallasse. Sono disponibili numerosi stili con cui puoi sperimentare. L'effetto di parallasse più comune utilizzato è lo scorrimento.

Fare clic sul pulsante inserire per continuare.

Il plugin aggiungerà un shortcode sul vostro Editor Publishing. Sarà simile a questo:

[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "scroll" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mouse_parallax = "true" awb_mouse_parallax = "true" awb_mouse_parallax = "true" qui [/ nk_awb]

Sostituisci " questo contenuto Con i tuoi contenuti, quindi salva la tua pagina.

Puoi visitare il tuo sito Web per vederlo in azione.

Effetto parallasse su wordpressMetodo 2: aggiungi l'effetto "Parallax" a qualsiasi tema WordPress con CSS

Questo metodo richiede la conoscenza di "HTML / CSS" e del funzionamento dei temi e dei plugin di WordPress.

Innanzitutto, devi caricare nella tua libreria multimediale di WordPress, l'immagine che desideri utilizzare per l'effetto di parallasse visitando il " media> Aggiungi nuovo '.

Vai oltre scoprendo Come organizzare i media sul tuo blog WordPress

Dopo aver caricato l'immagine, è necessario copiare l'URL dell'immagine modificando l'immagine nella libreria multimediale di WordPress.

Copia l'URL dell'immagine su wordpress

Quindi è necessario aggiungere il seguente codice HTML nella pagina in cui si desidera visualizzare l'effetto di parallasse. Puoi anche aggiungere questo codice HTML al tuo file Tema di WordPress o tema di tuo figlio.

div class = "parallasse"> Il tuo contenuto qui ...

Quindi è necessario aggiungere il seguente codice CSS personalizzato al tema WordPress.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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

Ricorda di sostituire l'URL dell'immagine di sfondo con la tua immagine.

Ora puoi salvare le modifiche e visitare il tuo sito Web.

Esempio di effetto di parallasse di Wordpress

Ecco ! Ora puoi aggiungere l'effetto di parallasse al tuo sito Web WordPress.

Scopri anche alcuni temi e plugin premium per WordPress  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Donazione WooCommerce

Accetta tramite questa estensione donazioni sul tuo sito Web WooCommerce con importi specificati dai clienti. Ciò consentirà loro di dare quanto vogliono. Ogni donazione può essere presentata come un normale prodotto di WooCommerce


Plugin per donazioni Woocommerce

Se il cliente salta la pagina del carrello o va direttamente alla cassa senza effettuare una donazione, verrà visualizzato un collegamento sopra la pagina di pagamento in modo che possa donare.

Ogni passaggio dell'utilizzo di WooCommerce Donation è spiegato in una documentazione con screenshot. Basta attivare il plugin e troverai il campo "Aggiungi donazione" sul carrello.

Download | Demo Web hosting

2. LinkedIn Altro

LinkedIn Plus è un plug-in di WordPress che ti consente di presentare il tuo profilo LinkedIn sul tuo blog. Funziona anche con blog multi-autore. Aggiunge pulsanti Segui e Condividi a pubblicazioni, pagine o widget di WordPress.Linkedin più il plugin wordpress di LinkedIn

È un ottimo modo per aggiungere tutte le funzionalità di LinkedIn al tuo blog e convalidare il tuo marchio con i consumatori. Ti dà la possibilità di personalizzarne l'aspetto, configurare le impostazioni e attivare altre opzioni avanzate per promuovere il tuo profilo a potenziali reclutatori o datori di lavoro. 

Download | Demo | Web hosting

3. YouTuber

YouTubeR è un plug-in WordPress unico, che ti consente di caricare video di YouTube dal tuo sito web e di incorporare facilmente video, playlist e canali di YouTube nel tuo sito web.

Youtuber plugin wordpress per youtube

Con questo plugin, hai la possibilità di creare gallerie video eccezionali sul tuo sito web.

Le sue altre caratteristiche sono: la possibilità di caricare facilmente video su YouTube dal tuo sito Web WordPress, integrazione semplici video, playlist e canali YouTube per il tuo sito Web, supporto per Visual Composer, il scorrimento infinito nelle playlist, eccellente memorizzazione nella cache, layout reattivo, documentazione dettagliata e altro.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Questo è tutto! Speriamo sia stato di grande aiuto. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

E se hai suggerimenti o osservazioni, lasciali nella nostra sezione commentaires.

... 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
6 azioni
quota3
Tweet
Enregistrer3