Morphing is a special animation effect that changes or morphs its shape into a different one through transitions. Our Morphing widget will help you create Blob Shape SVGs into animated morphing image/shape. These shapes are a part of modern Web Design trend and they look amazing. They are usually placed behind an image or content to highlight them.
How to use the Morphing Sections Widget of The Plus Addons For Elementor
The Morphing Sections widget comes with four different layouts. It is an advanced widget. Let’s understand how to use this widget in the tutorial below.
Search for the Morphing Sections widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
Select your preferred layout from the dropdown. We have provided 4 different layouts. They are Normal, Section Background, Column Background, and Fixed Scroll.
Set the maximum width of the shape here.
Set the maximum height of the shape here.
Svg Morphing Loop
You can add and edit SVG Morphing Loops here. You will get the following options:
Morphing Style – Select the style for the SVG Morphing Loop over here. You will get multiple styles to choose from or you can even add custom Morphing.
Fixed Scroll Alternate – You can add Morphing styles instead of Fixed scroll over here. You will get multiple styles to choose from or you can even add custom Morphing.
Path – You can edit and set the Path Duration, Elasticity, Path Easing, Scale X, Scale Y, Rotate, Horizontal adjust, Vertical adjust for the Path of the SVG Morphing Loop.
SVG – You can edit and set the SVG Duration, SVG Easing, Scale X, Scale Y, Rotate, Horizontal adjust, Vertical adjust for the SVG of the SVG Morphing Loop.
Fill Color – You can edit and set the Fill Duration, Fill Easing, Fill Color, Scale X, Scale Y, Rotate, Horizontal adjust, Vertical adjust for the Fill Color of the SVG Morphing Loop.
Select the type of morphing you want. It can be color, gradient, or an image. When you select any one of these, you will need to configure additional customization options that come with it.
Custom SVG from Blob Maker
If you are using custom SVG code from blob maker, Turn on this option.
Slide to setup Overflow Hidden option for Morphing.
The Style tab is used for customizing the appearance of all the Morphing widget components. Let’s understand each of these customization options.
Set and enable the Morphing Change Hover, Duration, Easing, Scale, Rotate, and Adjust options here.
Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial