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.
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, tutto Temi WordPress non offre un effetto di parallasse integrato e potresti non voler utilizzare un generatore di pagine visivo solo per un 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.
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 " Stretch'.
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.
Metodo 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.
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.
.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.
Ecco ! Ora puoi aggiungere l'effetto di parallasse al tuo sito Web WordPress.
Scopri anche alcuni temi e plugin premium per WordPress
Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione 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.
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 WordPress Plugin che ti permette di presentare il tuo profilo LinkedIn sul tuo blog. Funziona anche per i blog con più autori. Aggiunge i pulsanti Segui e Condividi ai tuoi post, pagine o widget di WordPress.
È 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 WordPress Plugin piattaforma unica, che ti consente di caricare video su YouTube dal tuo sito Web e incorporare facilmente video, playlist e canali di YouTube sul tuo sito Web.
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.
Download | Demo | Web hosting
Risorse raccomandate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
- Come correggere l'errore "Impossibile scrivere su disco" su WordPress
- Come diventare un blogger di successo e fare soldi con WordPress
- Come pubblicare i vostri articoli via e-mail su WordPress
- Come diventare un blogger di successo e fare soldi con WordPress
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.
...
