{"id":366966,"date":"2023-01-30T10:41:00","date_gmt":"2023-01-30T07:41:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366966"},"modified":"2023-01-30T10:44:52","modified_gmt":"2023-01-30T07:44:52","slug":"come-aggiungere-leffetto-di-parallasse-elementor-in-modo-facile-e-veloce","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-aggiungere-leffetto-di-parallasse-elementor-in-modo-facile-e-veloce\/","title":{"rendered":"Come aggiungere l’effetto di parallasse Elementor in modo facile e veloce"},"content":{"rendered":"\n

L’effetto parallasse si vede spesso sui siti web che coltivano l’estetica contemporanea. Aggiunge un’impressione di profondit\u00e0 e dinamismo e mette in risalto l’atmosfera moderna del sito web<\/strong>. Esiste un’ampia variet\u00e0 di temi WordPress dotati di effetti di parallasse, ma hai anche sempre la possibilit\u00e0 di creare un effetto di parallasse da solo. Numerosi siti utilizzano l’effetto di scorrimento della parallasse<\/a> come potente strumento di coinvolgimento degli utenti e narrazione.<\/p>\n

In questo articolo, ti mostreremo come aggiungere l’effetto di parallasse al tuo sito Web utilizzando il generatore di pagine Elementor. Elementor \u00e8 l’unico generatore di pagine dotato di un’opzione di parallasse Elementor integrata<\/strong>. Tutti gli altri builder richiedono l’uso di un qualche tipo di plugin o strumento. Prima di continuare, assicuriamoci di capire qual \u00e8 esattamente l’effetto di parallasse. In questo articolo leggerai di:<\/p>\n

Qual \u00e8 l’effetto di parallasse?<\/h2>\n

L’effetto di parallasse si ottiene quando gli elementi sullo sfondo e gli elementi in primo piano si muovono a un ritmo diverso quando l’utente scorre<\/strong>. Pi\u00f9 precisamente, gli elementi di sfondo sono impostati per muoversi pi\u00f9 lentamente degli elementi in primo piano ed \u00e8 cos\u00ec che si crea un’illusione di profondit\u00e0.<\/p>\n<\/p>\n

Come trovare l’opzione dell’effetto di parallasse di Elementor<\/h2>\n

Il generatore di pagine di Elementor ha semplificato l’aggiunta di un effetto di parallasse consentendo di assegnare uno sfondo di parallasse a una determinata riga o colonna<\/strong>. Sopra puoi vedere un esempio dell’effetto di parallasse creato da Elementor.<\/p>\n

Puoi applicare un effetto di parallasse di Elementor su una riga che non contiene informazioni<\/strong>, solo per fungere da immagine in movimento, per rendere la pagina pi\u00f9 attraente oppure puoi applicarlo su una riga che contiene alcune informazioni, dove l’immagine di parallasse sar\u00e0 dietro il informazioni<\/strong>.<\/p>\n

\u00c8 anche possibile aggiungere un effetto di parallasse all’intera sezione o alla colonna contenuta nella sezione.<\/p>\n

Puoi trovare l’opzione Parallasse facendo clic sulla piccola icona che ricorda un libro aperto e si trova nell’angolo in alto a sinistra della colonna che abbiamo selezionato per aggiungere il parallasse<\/strong>. Se vuoi aggiungere parallasse all’intera sezione e non alla colonna, la stessa opzione si trova anche in una scheda blu che appare al centro della riga quando ci passi sopra<\/strong>. Per accedere all’opzione di parallasse scegli l’opzione Modifica colonna o Modifica sezione. Nel nostro caso, stiamo modificando la colonna.<\/p>\n

\"Come<\/a><\/p>\n

Facendo clic sulla colonna Modifica si apre un menu a sinistra con tre schede principali. Per cominciare, scegli la scheda Stile .<\/strong> Fare clic sull’opzione Tipo di sfondo<\/strong> e verr\u00e0 visualizzato il campo per l’aggiunta di un’immagine<\/strong>. Puoi aggiungere un’immagine dalla tua Libreria multimediale o caricare un nuovo file.<\/p>\n

\"Come<\/a><\/p>\n

Dopo aver scelto l’immagine per la sezione di parallasse, puoi procedere con la regolazione delle impostazioni dell’immagine<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Nelle impostazioni dell’allegato scegli l’opzione Fissa<\/strong>, perch\u00e9 abbiamo bisogno che l’immagine si comporti in modo fisso mentre scorriamo, se scegliamo Scorri qui, l’immagine si sposter\u00e0 con lo sfondo.<\/p>\n

\"Come<\/a><\/p>\n

Le impostazioni della posizione dell’immagine offrono molta scelta<\/strong>. Puoi scegliere di impostare l’immagine al centro della sezione, in alto a destra, in alto a sinistra, ecc \u2013 la cosa buona \u00e8 che vedi subito l’anteprima della posizione dell’immagine che rende pi\u00f9 facile la decisione.<\/p>\n

\"Come<\/a><\/p>\n

L’ opzione Ripeti che segue viene utilizzata principalmente quando l’immagine \u00e8 in realt\u00e0 un motivo che deve essere ripetuto<\/strong> o nei casi in cui l’immagine \u00e8 troppo piccola. Nel nostro caso, l’immagine ha le dimensioni giuste, quindi scegliamo l’opzione predefinita. Per l’effetto parallasse, \u00e8 meglio avere una dimensione dell’immagine di 1920 pixel: in questo modo l’immagine occuper\u00e0 la larghezza dell’intera sezione<\/strong>. Ma, nel caso in cui la dimensione della tua immagine non sia ottimale, puoi sempre regolarla utilizzando le impostazioni Dimensioni<\/strong>. Questi offrono diverse opzioni tra cui le impostazioni personalizzate che ti consentono di impostare le dimensioni da solo utilizzando un dispositivo di scorrimento. L’anteprima di ogni modifica che apporti \u00e8 immediatamente disponibile sulla destra in modo da poter provare ciascuna delle opzioni per vedere quale si adatta meglio.<\/p>\n

\"Come<\/a><\/p>\n

Dopo aver regolato tutte queste impostazioni, puoi passare al menu Sovrapposizione sfondo<\/strong>. Quando lo apri, noterai che tutte le opzioni sono le stesse del menu precedente, ma con alcune impostazioni pi\u00f9 interessanti. Questi sono Opacit\u00e0, Filtri CSS e Modalit\u00e0 di fusione<\/strong>. Il cursore Opacit\u00e0 ti consente di impostare una sovrapposizione di colore di base e giocare con l’opacit\u00e0 per aumentare o diminuire il suo effetto<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

I filtri CSS e la modalit\u00e0 di fusione ti consentono di applicare effetti simili a Photoshop ai tuoi elementi. Gli effetti filtro CSS consentono effetti grafici come sfocatura o spostamento del colore sulle immagini. Per quanto riguarda le modalit\u00e0 di fusione, Elementor ne offre 13: Normale (questa \u00e8 l’impostazione predefinita e ha una fusione zero), Moltiplica, Schermo, Sovrapponi, Scurisci, Schiarisci, Scherma colore, Saturazione, Colore, Differenza, Esclusione, Tonalit\u00e0 e Luminosit\u00e0.<\/p>\n

\"Come<\/a><\/p>\n

Come impostare l’altezza della sezione di parallasse<\/h2>\n

L’altezza della sezione di parallasse pu\u00f2 dipendere dal contenuto della sezione<\/strong>. Se, ad esempio, abbiamo definito il padding del contenuto, o il contenuto ha gi\u00e0 un proprio padding predefinito, il parallasse si regoler\u00e0 in modo tale da coprire l’intera superficie dietro l’elemento<\/strong>. Quindi, per impostare l’altezza in questo caso, dobbiamo regolare l’elemento stesso.<\/p>\n

\"Come<\/a><\/p>\n

Se ci\u00f2 non bastasse o abbiamo una sezione che non contiene contenuti, torneremo alle impostazioni e sceglieremo la scheda Avanzate. Nelle impostazioni Padding possiamo impostare l’altezza e vedere come ha effetto immediatamente in un’anteprima dal vivo<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Come impostare l’effetto di parallasse in una riga con pi\u00f9 colonne<\/h2>\n

Cosa succede quando abbiamo due o pi\u00f9 colonne di fila e vogliamo avere l’effetto di parallasse di Elementor solo in una delle colonne? La procedura \u00e8 molto semplice. Vai al menu delle opzioni della colonna in cui vuoi impostare l’effetto di parallasse<\/strong>. Aggiungi lo sfondo proprio come hai fatto in precedenza quando c’era solo una colonna in una riga. Ma non puoi impostare l’altezza della parallasse semplicemente regolando il padding, \u00e8 necessario aggiungere del contenuto alla colonna. Puoi inserire il contenuto nella colonna con l’effetto parallasse oppure puoi inserire il contenuto nell’altra colonna e poi sar\u00e0 possibile regolare l’altezza della sezione regolando il padding nel menu Opzioni avanzate<\/strong>. Se non ti piace il modo in cui l’immagine di parallasse \u00e8 centrata, puoi sempre tornare alle impostazioni di stile e regolarne la posizione.<\/p>\n

\"Come<\/a><\/p>\n

Le micro-interazioni e le interfacce utente animate sono spesso gli elementi che rendono l’esperienza utente coinvolgente e memorabile. Questo \u00e8 uno dei motivi per cui l’effetto di parallasse \u00e8 cos\u00ec popolare su tutti i tipi di siti Web al giorno d’oggi. Ti consente di rivelare i dettagli dei tuoi contenuti in modo dinamico e ispira l’utente a sentirsi come se avesse il controllo.<\/p>\n

L’effetto di parallasse pu\u00f2 davvero migliorare molti aspetti di un’esperienza utente. Ma non deve essere fatto bene e con uno scopo. Aggiungere parallasse solo perch\u00e9 tutti ce l’hanno non ha alcun senso e potrebbe effettivamente infastidire gli utenti, soprattutto se non si adatta al contenuto del sito web.<\/p>\n

Fonte di registrazione: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

L’effetto di parallasse di Elementor pu\u00f2 davvero migliorare molti aspetti di un’esperienza utente. Scopri come creare un effetto di parallasse in Elementor.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[571],"tags":[846],"class_list":["post-366966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nozioni-di-base-su-wordpress","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/366966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=366966"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/366966\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=366966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=366966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=366966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}