Hai bisogno di un modo per creare un effetto di scorrimento delle immagini Elementor ? In questo articolo, ti guideremo a creare un effetto di scorrimento delle immagini utilizzando Elementor sulle tue pagine web.
L'effetto di scorrimento dell'immagine ti consentirà di rivelare l'immagine completa quando l'utente passa sopra le immagini. Quando visiti un sito Web che vende modelli di siti Web, puoi vedere l'anteprima completa dei modelli con le funzionalità dell'effetto di scorrimento dell'immagine.
Con queste funzionalità, puoi mostrare facilmente ai tuoi utenti la visualizzazione completa del sito Web in uno spazio ridotto. Normalmente, se desideri visualizzare un'immagine completa di un sito web, occuperà molto spazio sulle tue pagine web. Inoltre, influisce sul design del tuo sito web.
Ma con l'effetto di scorrimento delle immagini, puoi aggiungere più immagini in un modo attraente che può facilmente attirare l'attenzione del pubblico.
Crea un effetto di scorrimento delle immagini in Elementor
Elementor non fornisce un widget per aggiungere l'effetto di scorrimento dell'immagine. Quindi è necessario aggiungere l'effetto utilizzando CSS personalizzati. La funzione CSS personalizzata è disponibile solo con Elementor Pro. Quindi assicurati di aver eseguito l'aggiornamento a Elementor Pro.
Ora apri una pagina con l'editor di Elementor e fai clic sull'icona più per aggiungere una sezione.
Ora devi selezionare la colonna per la tua sezione. Qui selezioniamo la sezione a colonna singola.
Ora fai clic sull'icona di modifica della sezione e nella scheda del layout imposta l'altezza minima su 500.
Ora dal widget del blocco aggiungi il blocco della sezione interna alla sezione creata e rimuovi la colonna predefinita. Fare clic con il pulsante destro del mouse sull'icona di modifica della colonna e fare clic sull'opzione Elimina per eliminare la colonna principale.
Vai di nuovo all'opzione di modifica della sezione interna e nella scheda del layout imposta l'altezza minima su 500 come mostrato in precedenza.
Ora passa alla scheda stile della sezione interna e imposta lo sfondo come classico dall'opzione sfondo. Successivamente, è necessario aggiungere l'immagine di sfondo. Dall'opzione posizione immagine, impostare la posizione dell'immagine in base a In alto al centro. Dall'opzione di ripetizione, impostare l'opzione no-repeat e le dimensioni come coprire.
Ora passa alla scheda avanzato per aggiungere CSS personalizzato. Nel campo CSS personalizzato, aggiungi il seguente codice:
selector{ -webkit-transition: easy-in-out 3s !important; transizione: facilità dentro-fuori 3s !importante; } selector:hover{ background-position: center bottom !important; }
È possibile modificare il valore di transizione per modificare l'effetto di scorrimento delle immagini. Se desideri aggiungere più immagini con lo stesso effetto, puoi duplicare la colonna e quindi modificare l'immagine di sfondo.
Conclusione
Seguendo il processo, sarai in grado di aggiungere un effetto di scorrimento dell'immagine al tuo sito Web utilizzando il generatore di pagine Elementor. Puoi dare un'occhiata ai nostri altri articoli per imparare:
- Come utilizzare i blocchi Elementor nell'editor Gutenberg?
- Elementor vs Divi vs SeedProd – Qual è il migliore?
- Come utilizzare la cronologia per annullare e ripetere le azioni in Elementor
- Come rendere super veloce un sito Web Elementor
- Come creare un cerchio interattivo in Elementor
Speriamo che questo articolo ti sia utile. Se ti piace questo articolo, metti mi piace alla nostra pagina Facebook per rimanere in contatto.
