State cercando il miglior cursore di immagini prima e dopo per il vostro sito web? Non preoccupatevi più! Perché abbiamo la soluzione giusta per voi. Oggi vi mostreremo come potete realizzarne uno facilmente utilizzando Elementor.

Un cursore di immagini prima e dopo crea una presentazione affiancando due immagini simili. Con una barra di scorrimento, è possibile trascinarla avanti e indietro per vedere entrambe le immagini a confronto. Si tratta di un modo interessante per mostrare prodotti appena arrivati, la crescita della vostra azienda o significati speciali. Non solo attira i visitatori, ma mostra anche gli effetti del vostro prodotto o servizio. In effetti, si tratta di un ottimo strumento!

In genere, per ottenere questo tipo di effetto si utilizzano gli strumenti dell'editor fotografico. Ma utilizzando un semplice Confronto immagini widget, è possibile realizzare facilmente questa impresa. Si noti che l'azienda Element Pack ha sviluppato questo widget. Questo widget è un cursore di immagini completamente funzionale che consente di mostrare due versioni diverse della stessa immagine. Inoltre, è possibile utilizzarlo in qualsiasi modo.

Basta con le chiacchiere. Diamoci dentro!

Inserire e personalizzare il cursore immagine prima e dopo

Inserimento del widget

Per prima cosa, andare alla pagina web in cui si desidera utilizzare questo cursore. Poiché stiamo utilizzando elementor, assicuratevi di installare i plugin Elementor e Element Pack Lite nella vostra dashboard. Tuttavia, in questo blog non parleremo delle procedure di installazione.

Anche se non è il caso di dirlo, i principianti potrebbero comunque trovare difficoltà. Basta cercare il Confronto immagini nel menu dei widget. Quando lo si vede (ha Pacchetto di elementi logo su di esso), trascinarlo e rilasciarlo in una sezione dell'editor.

Personalizzazione del layout del dispositivo di scorrimento delle immagini

Una volta rilasciata, si vedrà la configurazione predefinita del cursore all'inizio. Tuttavia, questo è il Layout nella sezione Contenuto scheda. È possibile scegliere qualsiasi tipo di immagine per il cursore di immagini da mostrare qui.

Cambiamo le immagini. Per cominciare, selezioniamo quelle normali.

Una volta inserita un'immagine, è possibile modificarne le dimensioni da Dimensione dell'immagine opzione. In genere, più grande è l'immagine, più spazio occuperà. Per un'immagine con un'altezza di 1000 pixel ma una larghezza di soli 500 pixel, la lunghezza del cursore aumenterà di 1000 pixel.

Inoltre, da qui è possibile modificare i tag 'After' e 'Before'. Parliamo di questa parte più avanti e passiamo alla sezione successiva.

Impostazioni dell'interfaccia

Vai a Scheda Contenuto> Ulteriori

Il Ulteriori L'opzione è nota anche come impostazioni dell'interfaccia. Da qui è possibile modificare l'orientamento della barra di scorrimento in Verticale o Orizzontale. Inoltre, è possibile modificare l'opzione 'prima dell'immagine' visibilità. Il Sovrapposizione attiva/disattiva la sovrapposizione sull'intero cursore dell'immagine prima e dopo.

Ancora una volta, ci sono alcune cose da dire in questa sezione. Si noti che è possibile aggiungere un cerchio al centro della barra di scorrimento. Inoltre, è possibile aggiungere un effetto di sfocatura al cerchio.

Un'altra cosa interessante è la possibilità di attenuare il trascinamento del cursore della barra di scorrimento. Attivare il selettore L'appianamento? per attenuare il trascinamento del cursore. Tuttavia, è possibile regolare la sensibilità della barra di scorrimento delle immagini con il pulsante di scorrimento sottostante.