Come creare un carosello di immagini verticali su WordPress utilizzando Elementor

Muneeb Tutorial WordPress Jan 21, 2022

Una presentazione di foto o informazioni che gli spettatori possono selezionare premendo un pulsante che le sposta avanti o indietro nella presentazione è nota come sequenza di immagini. Illumina l'aspetto generale del tuo sito web e aiuta a promuovere i servizi essenziali.

Le foto attraenti possono attirare nuovi visitatori sul tuo sito attirando subito la loro attenzione. Questo tutorial ti mostrerà come utilizzare Elementor per creare un carosello di immagini verticale su WordPress.

Come creare un carosello di immagini verticali di Elementor

Crea prima un'immagine adatta per il tuo Carousel verticale liscio Elementor . Avrai bisogno di un'immagine che contenga già tutte le tue fotografie. Usando Crello , un programma simile a Canva, puoi crearne uno, ma qualsiasi software di modifica delle immagini dovrebbe essere sufficiente.

Naturalmente, questo ha lo svantaggio di non essere dinamico e potrebbe essere scomodo quando è necessario modificare solo alcune delle foto. Tuttavia, offre diversi vantaggi. Produce un carosello solo CSS senza requisiti JS. L'animazione è molto fluida, con un utilizzo minimo della CPU. In poche parole, è incredibilmente efficace, anche se un po' scomodo.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Quindi, dai alla tua colonna la colonna del nome verticale come classe.
Impostare lo spazio dei widget per quella colonna su 0 nelle impostazioni Colonna e Layout .

Add an image element to that column and choose the picture you made. Aggiungi un elemento immagine a quella colonna e scegli l'immagine che hai creato. Assign the class carousel vertical to the picture element . Assegna la sequenza di classi verticale all'elemento dell'immagine .

Crea tutto esattamente come lo desideri, quindi replicalo. In quella colonna, te ne serviranno due, ciascuno con parametri identici. E poi, puoi procedere all'utilizzo del codice CSS indicato di seguito. Puoi utilizzare questo codice ovunque per apportare le modifiche.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

C'è un notevole commento con il codice per consentirti di capire abbastanza e apportare le modifiche ovunque sia necessario. Usando questo codice, puoi creare con successo un carosello verticale di Elementor .

5 migliori plugin per carosello di immagini

1. Post Carousel per Elementor

Post Carousel For Elementor di iThemelandCo è un plug-in aggiuntivo di Elementor che ti consente di creare Media Carousel incredibilmente creativi con i suoi layout di carosello già pronti. Il plugin si integra perfettamente con Elementor e offre 19 layout predefiniti. Questi layout sono completamente personalizzabili e possono essere facilmente personalizzati in base alle tue esigenze utilizzando il meccanismo di trascinamento della selezione di Elementor.

Carosello di prodotti per Elementor

Product Carousel For Elementor è un altro plug-in aggiuntivo Elementor progettato esplicitamente per i negozi di e-commerce per mostrare i loro prodotti in un carosello. Il plug-in offre 12+ controlli del carosello come Riproduzione automatica, Scorri per scorrere, Pausa al passaggio del mouse, ecc. Il plug-in è altamente reattivo su tutti i tipi di dispositivi e puoi creare tutti i caroselli che desideri. Inoltre, è un plug-in multilingue al 100%, il che significa che funzionerà anche se il tuo sito Web è tradotto in un'altra lingua.

3. Carosello veloce per Elementor

Fast Carousel For Elementor è un plug-in aggiuntivo Elementor che afferma di essere abbastanza veloce da costruire un carosello per te in un minuto. Per quanto impressionante possa sembrare, offre anche diversi tipi di gallerie e oltre dieci stili unici. Il plug-in è dotato di più di cinque controlli del carosello oltre a offrire opzioni di colore personalizzate con ciascun carosello. Per una soluzione rapida, questa potrebbe essere la soluzione migliore per un carosello di immagini.

Ci auguriamo che tu abbia trovato questo tutorial utile per migliorare il tuo sito web. Assicurati di unirti a noi sui nostri Facebook e Twitter per continuare a ricevere tutorial che rendono il tuo viaggio con WordPress facile e divertente.

Divi WordPress Theme