Scambio di immagini

Panoramica #

Immagine Scambio è un modo semplice per modificare la visualizzazione di qualsiasi immagine quando ci si passa sopra con il mouse e può tornare all'immagine originale spostando il mouse fuori dall'immagine. Ecco un articolo completo per spiegare ogni metodo in dettaglio. Segui la procedura passo passo per connettere il Scambio di immagini.

Plug-in richiesto: #

  1. Elementore: Scarica plug-in.
  2. ElementsKit Lite: Scarica plug-in.
  3. ElementsKit Pro: Ottieni il plug-in.

Passo 1: Abilita il widget Scambio immagini #

Innanzitutto, devi abilitare il widget dalla dashboard di WordPress. Per abilitare il widget Scambio immagini:

  1. Navigare verso ElementsKit > Widget.
  2. Trovare il Immagine Scambio dall'elenco e abilitare il widget.
  3. Clicca sul SALVARE LE MODIFICHE.

Passaggio 2: trascina e rilascia il widget #

Successivamente, apri l'editor di Elementor, quindi trascina e rilascia il widget ElementsKit Image Swap nell'area di progettazione.

Passaggio 3: Configura lo scambio di immagini aggeggio #

In questo passaggio puoi aggiungere le immagini fronte e retro, impostare la dimensione dell'immagine, scegliere lo stile di scambio e altro.

  1. Immagine frontale: Carica la prima immagine come immagine frontale.
  2. Immagine posteriore: Carica la seconda immagine come immagine posteriore.
  3. Dimensione dell'immagine: Seleziona una dimensione dell'immagine dalle opzioni fornite.
caricare immagini fronte e retro per il widget di scambio immagini
  1. Stile di scambio: Il widget ElementsKit Image Swap include 21 stili di scambio. Puoi scegliere uno qualsiasi degli stili.
Stile di scambio disponibile nel widget di scambio immagini ElementsKit
  1. Tigro: Scegli come attivare l'effetto di scambio tra le seguenti opzioni.
    1. Passa il mouse: L'effetto di scambio si attiverà quando passi il mouse sopra l'immagine.
    2. Clic: L'effetto di scambio si attiverà quando si fa clic sull'immagine.
  2. Indicatori: Indica l'immagine attiva (immagine mostrata) e l'immagine sul retro.
  3. Collegamento: Puoi aggiungere un URL alle immagini.
Scegli lo stile di trigger e abilita l'indicatore nel widget di scambio immagini Elementor

Passaggio 4: personalizza il widget Scambio immagini #

Ora puoi personalizzare gli stili dell'immagine e dell'indicatore.

4.1 Immagine #

  1. Altezza fissa: Regola l'altezza dell'immagine.
  2. Durata della transizione: Imposta il tempo di transizione tra lo scambio di immagini.
regola l'altezza e la durata della transizione nel widget di scambio immagini di Elementor

4.2 Indicatori #

  1. Colore normale: Imposta il colore dell'indicatore.
  2. Colore attivo: Scegli un colore indicatore attivo.
Cambia i colori degli indicatori del widget di scambio immagini Elementor
  1. Misurare: Regola la dimensione degli indicatori.
  2. Spaziatura: Lo spazio tra i due indicatori.
  3. Stile: Sono disponibili due stili per gli indicatori: Orizzontale e Verticale.
  4. Posizione: Regolare la posizione degli indicatori. Posizione X: per modificare la posizione orizzontale, Posizione Y: per modificare la posizione verticale.
Personalizza gli indicatori del widget di scambio immagini

Infine, puoi aggiungere il widget di scambio immagini al tuo sito web. Ecco come funziona:

Come funziona il widget di scambio immagini di Elementor

Come il widget Scambio immagini, ElementsKit include centinaia di elementi avanzati per Elementor. Ottieni ElementsKit e utilizza questi elementi per creare siti Web WordPress ricchi di funzionalità.

Quali sono i tuoi sentimenti?
Aggiornato il Gennaio 28, 2024