Morphing Sections

< All Topics
Widget Used
Morphing Sections
Knowledge Required
Advanced

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.

Pro tip
Why not add your own blob section with animation your content at the same time using this widget. Showcase a animated blob sections on your website with ease. Use the blob sections to increase engagement.

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.

Table Of Contents

General Steps


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.

1. Content

Content

Morphing Layout

Select your preferred layout from the dropdown. We have provided 4 different layouts. They are Normal, Section Background, Column Background, and Fixed Scroll.

Maximum Width 

Set the maximum width of the shape here.

Maximum Height 

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 Type 

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.

Overflow Morphing 

Slide to setup Overflow Hidden option for Morphing.

2. Style

The Style tab is used for customizing the appearance of all the Morphing widget components. Let’s understand each of these customization options. 

Morphing Style

Set and enable the Morphing Change Hover, Duration, Easing, Scale, Rotate, and Adjust options here.

3. Advanced

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

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?