Morphing means to change or morphs one image or shape into another. It is a special effect in motion pictures and animations to give them a flawless transition. To add some special effect to your website image ElementsKit is presenting you a fully customizable widget name Morphing dell'immagine.
With ElementsKit, you can easily create interactive image transitions by utilizing an morphing dell'immagine widget. It lets you customize effects, direction, and animation controls with flexibility.
Quick Steps:
1. Enable the ElementsKit Image Morphing widget.
2. Open a page with Elementor and drag & drop the Image Morphing widget.
3. Customize content: choose effect type, add image, and adjust morphing settings (style, direction, duration, etc.).
4. Style the design by adjusting image size, opacity, filters, and shape settings.
5. Click Publish/Update to apply the morphing effect on your site.
ElementsKit Image Morphing #
First, install and activate ElementsKit Pro plugin on your WordPress dashboard.
STEP 1: Enable the Widget #
- Go to your WordPress Dashboard
- Find ElementsKit
- Click Widgets
- Turn ON the Image Morphing widget
- Salva le modifiche
STEP 2: Edit a Page with Elementor #
Select a page where you need to apply image morphing and edit it with Elementor.
- Search Image Morphing widget
- Drag and Drop it simply
STEP 3: Customize ElementsKit Image Morphing widget #
Seleziona il tipo di effetto- Scegli l'effetto da Immagine, colore e sfumatura di colore opzioni.
Contenuto #
Seleziona il tipo di effetto- Scegli l'effetto da Immagine, colore e sfumatura di colore opzioni.
Image Effect
- Choose Image- Upload an image
- Dimensione dell'immagine- It will allow you to adjust the image size
- Immagine Resolution- You can adjust the image resolution from te options.
Color Effect:
Mostra tratto- Se tu scegli il colore allora questo campo te lo permetterà Mostra o nascondi il tratto.
Gradient Color Effect:
Se tu scegli il colore sfumato come tipo di effetto avrai le opzioni di regolazione della posizione- Posizione X1, Posizione X2, Posizione Y1 e Posizione Y2.
Impostazioni:
Tipo di forma- Select Default then you will see the customization options below:
- Morphing Effect: Controls the easing and pacing of the transformation (e.g., Linear, EaseOutInQuad, EaseInCirc, etc.).
- Morphing Direction: Defines the sequence and order in which the SVG shapes transition into one another. Three options are- Normal, Reverse, and Alternate.
- Ciclo continuo: Dictates whether the animation plays just once or repeats continuously.
- Duration(s): Sets the total time in seconds that it takes for one shape to fully morph into the next.
- Delay(s): Sets a pause in seconds before the morphing animation begins for the first time.
- End Delay(s): Sets a pause in seconds on the final shape before the animation loops or stops.
Tuttavia, se lo desideri stile personalizzato then you can generate a morphing SVG with blobmaker.
Inoltre, puoi caricare il tuo file proprio SVG di morphing. Tieni presente che devi caricare minimo due SVG al lavoro di trasformazione.
Stile #
Le opzioni di stile sono disponibili per gli effetti Immagine, Colore e Sfumatura.
Stile immagine
In questa sezione è possibile regolare la larghezza, l'altezza, l'opacità dell'immagine, i filtri CSS, lo zoom dell'immagine, la posizione dell'immagine in termini di orientamento orizzontale e verticale.
Stile colore
Per il tipo di effetto Colore, avrai a disposizione le opzioni per personalizzare il colore SVG.
Stile sfumato
Ci sono due opzioni di colore, devi scegliere di conseguenza e regolare anche l'Offset.
Dimensione della sape
This option is common for all the effect type. You can adjust the width and the height of the effects based on your needs.
Questo è un esempio di morphing delle immagini che abbiamo personalizzato per te-
Per mostrare diverse immagini in modo accattivante attraverso animazioni ed effetti insoliti, il widget ElementsKit Image Morphing è la scelta migliore.
