{"id":371645,"date":"2023-04-25T12:50:00","date_gmt":"2023-04-25T09:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371645"},"modified":"2023-04-25T13:00:33","modified_gmt":"2023-04-25T10:00:33","slug":"il-modo-piu-semplice-aggiungi-il-dispositivo-di-scorrimento-prima-e-dopo","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/il-modo-piu-semplice-aggiungi-il-dispositivo-di-scorrimento-prima-e-dopo\/","title":{"rendered":"Il modo pi\u00f9 semplice Aggiungi il dispositivo di scorrimento prima e dopo"},"content":{"rendered":"\n

Le immagini prima e dopo sono ampiamente utilizzate per scopi di marketing in una vasta gamma di settori<\/strong>. Non ci sono parole che possono descrivere meglio l’effetto che ha un certo processo di un’immagine che mostra esattamente come appariva qualcuno o qualcosa prima e dopo quel processo. Anche nelle aziende che non ruotano intorno a prodotti i cui effetti sono visibili, \u00e8 possibile utilizzare questa funzione in modo umoristico.<\/p>\n

Diciamo che gestisci un ristorante: potresti mostrare come appare una persona prima di mangiare nel tuo palazzo e quanto \u00e8 felice di aver assaggiato le tue prelibatezze. Le possibilit\u00e0 offerte prima e dopo slider in termini di rappresentazione dei vantaggi e dei vantaggi dei tuoi prodotti\/servizi sono illimitate<\/strong>. Dipende tutto dalla tua immaginazione.<\/p>\n

Proprio come l’aggiunta dell’effetto di parallasse<\/a> alle tue pagine rende il tuo sito Web moderno, il dispositivo di scorrimento prima e dopo lo rende difficile da dimenticare poich\u00e9 le immagini raccontano pi\u00f9 di 1000 parole.<\/p>\n

Inoltre, puoi aggiungere questa funzionalit\u00e0 al tuo sito web da solo. In questo articolo, ti mostreremo come creare uno slider prima e dopo con il popolare widget gratuito Prima\/Dopo di confronto<\/a>.<\/p>\n

Resta sintonizzato per saperne di pi\u00f9 su:<\/p>\n<\/p>\n

Aggiunta del dispositivo di scorrimento prima e dopo con i componenti aggiuntivi Qi per Elementor<\/h2>\n

Qi Addons per Elementor<\/a> \u00e8 uno strumento intuitivo che ti consente di aggiungere un’ampia gamma di splendidi elementi<\/strong> al tuo sito Web senza sforzo. Viene fornito con un’interfaccia molto pratica e intuitiva<\/strong> e sia i principianti che gli utenti avanzati lo troveranno facile da usare. La cosa particolarmente bella di Qi \u00e8 il fatto che oltre a tante utili funzioni, ti offre anche un tocco di eleganza contemporanea.<\/p>\n

Il processo di installazione<\/a> dei componenti aggiuntivi QI per Elementor non \u00e8 diverso da qualsiasi altra installazione di plug-in. In caso di domande al riguardo, assicurati di controllare il link che abbiamo fornito sopra e puoi anche scriverci nella sezione commenti.<\/p>\n

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

Poich\u00e9 si tratta di un plug-in Elementor, assicurati di passare all’editor Elementor quando crei un nuovo post<\/strong>. Tutti i widget dei componenti aggiuntivi di Qi verranno visualizzati in modo ordinato nel menu degli elementi a sinistra<\/strong>. Basta scorrere il menu per trovarli.<\/p>\n

Il widget Slider Prima e Dopo<\/a> offre un modo semplice ed efficace per mostrare due immagini nella stessa cornice<\/strong>. Trovalo nel menu della barra laterale a sinistra, digitando il nome del widget nel campo di ricerca o sfogliando i widget nel menu.<\/p>\n

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

Per aggiungere il dispositivo di scorrimento del confronto Prima\/Dopo, trascina e rilascia l’elemento Elementor nella posizione desiderata. Quando il widget viene aggiunto, tutte le impostazioni saranno sul lato sinistro<\/strong> e all’interno delle schede Contenuto e Stile ci sono tutte le opzioni relative allo slider<\/strong>.<\/p>\n

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

Ora devi aggiungere le immagini prima e dopo allo slider<\/strong>. Innanzitutto, stiamo aggiungendo l’immagine precedente: passa il mouse sopra il campo dell’immagine e l’opzione Scegli immagine mostrer\u00e0 o fai semplicemente clic sull’icona pi\u00f9 piccola al centro del campo.<\/p>\n

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

\u00c8 possibile scegliere un’immagine dalla libreria multimediale o caricare un’immagine nella libreria multimediale, se necessario<\/strong>. Basta trascinare e rilasciare l’immagine selezionata e nella libreria multimediale se non \u00e8 gi\u00e0 presente, quindi selezionarla e scegliere.<\/p>\n

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

Dopo aver inserito le immagini desiderate, puoi continuare a personalizzare lo slider prima\/dopo modificando il testo che verr\u00e0 visualizzato nel cerchio al centro dello slider<\/strong>. Puoi scrivere un’istruzione qui o un messaggio pi\u00f9 accattivante, dipende da te e dallo stile del tuo sito web. Puoi anche scegliere se vuoi che il testo sia allineato verticalmente o orizzontalmente.<\/p>\n

Se si desidera regolare la posizione in cui il bordo tra l’immagine prima e dopo l’immagine apparir\u00e0 sul dispositivo di scorrimento, \u00e8 possibile immettere il valore di Offset desiderato nel campo<\/strong>. Il valore predefinito \u00e8 50%, il che significa che il bordo predefinito \u00e8 proprio nel mezzo dell’immagine. Ecco come pu\u00f2 apparire il dispositivo di scorrimento se si regola l’offset:<\/p>\n

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

Ora \u00e8 il momento di perfezionare ulteriormente il dispositivo di scorrimento prima-dopo. Vediamo cos’altro puoi personalizzare per rendere il dispositivo di scorrimento esattamente come ti serve. Fare clic sulla scheda Stile per esplorare altre opzioni<\/strong>.<\/p>\n

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

Se vuoi spostare la maniglia circolare dal centro dell’immagine, usa il cursore per regolare il valore di Offset maniglia superiore<\/strong>. Vedrai immediatamente le modifiche in tempo reale in modo da poter decidere facilmente cosa funziona meglio per te. Allo stesso modo regolerai anche la dimensione del cerchio, cos\u00ec come il bordo tra la versione prima\/dopo dell’immagine<\/strong>.<\/p>\n

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

Puoi anche fare clic sul colore del testo Nabdle per creare la tua sfumatura del colore per il testo nel cerchio<\/strong>, anche scegliere il carattere del testo allo stesso modo<\/strong>. Infine, puoi anche personalizzare il colore del cerchio<\/strong> allo stesso modo.<\/p>\n

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

Esplorazione delle opzioni avanzate<\/h2>\n

Nella scheda Avanzate, troverai molte altre opzioni per rendere il dispositivo di scorrimento pi\u00f9 attraente e accattivante. Queste opzioni non sono esclusive solo per questo widget, sono opzioni di Elementor predefinite che puoi utilizzare per modificare anche altri widget su una pagina.<\/p>\n

Illustriamo alcuni dei pi\u00f9 interessanti. Sentiti libero di testare tutte le opzioni, poich\u00e9 vedrai tutte le modifiche che apporti dal vivo, cos\u00ec puoi scoprire immediatamente cosa fa ogni opzione al dispositivo di scorrimento e se funziona per te.<\/p>\n

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

Se apri il menu Avanzate, vedrai le opzioni per impostare il margine e il riempimento<\/strong>. Noterai una piccola icona di laptop accanto a ciascuna opzione che ti consente di impostare valori diversi per il margine e il riempimento su dispositivi diversi: laptop, tablet o cellulare.<\/p>\n

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

Gli effetti di movimento sono particolarmente interessanti e hai una scelta davvero ampia di oltre 35 effetti di movimento tra cui scegliere. Hai anche la possibilit\u00e0 di impostare diverse animazioni da mostrare su diversi dispositivi<\/strong>. Dopo aver scelto il tipo di animazione, puoi anche regolarne la durata e il ritardo se lo ritieni necessario.<\/p>\n

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

Ora fai clic sulla scheda Trasforma per scoprire pi\u00f9 effetti che puoi utilizzare<\/strong>. Dalla rotazione all’inclinazione e al capovolgimento orizzontale e verticale, ci sono molte cose che puoi fare per cambiare la visualizzazione del dispositivo di scorrimento.<\/p>\n

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

Nella scheda Bordo, troverai le opzioni che ti permetteranno di decorare il lato aggiungendo i bordi dell’immagine ombra nei colori che selezioni<\/strong>. Puoi anche scegliere di aggiungere un effetto ombra attorno alla casella diapositiva e impostare l’output dell’effetto ombra.<\/p>\n

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

Le opzioni nella scheda Maschera sono molto utili. Qui puoi impostare la visualizzazione del dispositivo di scorrimento in diverse forme<\/strong>: cerchio, fiore, schizzo, triangolo, blob, esagono o persino aggiungere una forma personalizzata. \u00c8 anche possibile regolare la dimensione e la posizione della forma selezionata.<\/p>\n

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

Prestare particolare attenzione alla scheda Responsive<\/strong>, poich\u00e9 \u00e8 possibile scegliere il dispositivo di scorrimento da non visualizzare sui dispositivi selezionati<\/strong>.<\/p>\n

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

Ecco come appare il dispositivo di scorrimento sulla pagina dopo averlo regolato per le nostre esigenze:<\/p>\n

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

Per maggiori informazioni dai un’occhiata a questo video:<\/p>\n