Categories
Elementor

Take your web design to next level with stylish Floating Widget, no CSS coding required

Web design is evolving, it’s now more dynamic, imaginative, and captivating. And this is happening rapidly. You have more freedom to show your creativity while designing websites than ever before.
This brings greater opportunity as well as challenges to create a fresh and beautiful style. You have to be up-to-date with new trends around the community.
One particular concept getting popular in recent times is floating effects. A fresh designing idea that many websites are integrating into their style to spark visitors’ interest.
Are you someone really interested to integrate the floating elements into your website, but having trouble because there are lots of CSS coding required? Well, then Exclusive Addons has the solutions for you.
Blend unique, trendy, and fancy animated shapes on your wordpress site using Exclusive Addons Floating Widget.
  • 11+ Pre Build Default Shapes
  • Customizable Design
  • Set the parameters to create a unique animation style
  • Design random floating animated shapes the way you want
  • Use PNG or SVG images
  • Use it for Single Post or Single Page
  • Use as Section Background
  • Fully Responsive

Benefits of using the Floating Animation widget

It’s challenging to create smooth and creative shapes for websites. Even working with one single shape takes a lot of time. And for several numbers of unique shapes, this is going to be very tedious.
An animated floating widget always makes things easy for you to add animation effects. You don’t have to deal with adding floatable div or other complicated techniques anymore. With the pre-built shapes, you just need to select one shape and that’s it. Different and versatile, but doesn’t much of work do.
But if you really want to make unique and organic ones, you have the option too with SVG code.
While individual styling gives you freedom to create variety, global styling option allows you to customize it in an easier way. Here are a lot more.

3 in 1 Floating shape maker

There are three ways of adding animated floating elements to a website. Our floating animation widget has got all of the three. Default ones, generating organic shapes, and use images.
You can use the default shapes added to the widget. Or can create organic shapes and import them to the widget. Also can upload PNG or SVG images as a floating animation effect.

11+ Pre-built shapes

We’ve made 12 exclusively stylish, animated shapes to provide flexibility for you. Each style is different from others. You can choose any of the shapes for elements to make the design a versatile one.

Create unique shapes with Blobmaker

Apart from the default ones, you have the option to add floating animations of your own. Create shapes from the Blobmaker.app website, and just copy-paste the SVG code here, it’s simple than you think.

Upload PNG or SVG images

Using floating images is another option. Any PNG or SVG pictures can be used as floating animated shapes. You can upload any images to use those as floating element in your design.

Individual style for each element

While you are adding multiple floating shapes on a webpage, same style is gonna make it monotonous. Using individual designs for each element will give the website a fresh and versatile look.
You can use different types of shapes and designs for every item. By changing parameters like Translation, Rotation, and Scale, you can decide over animation style for the elements.
Set how long and how wide the shape will float over a different axis. Control the movement of elements in vertical and horizontal directions by adjusting Translation attributes.
You can choose the Rotation style for each element by changing duration and the value that particle will rotate along a different axis.
By changing the Scale attributes, you can control the zoom effect of the items.
Size, color, and position of each element are also separately modifiable.

Place it anywhere

Literally anywhere! By enabling custom position option you can just place the shapes in any position on a web page. So, the floating blob shapes can blend into your design. This gives you the ultimate freedom to design a web page with animated shapes.
Literally anywhere! By enabling custom position option you can just place the shapes in any position on a web page. So, the floating blob shapes can blend into your design. This gives you the ultimate freedom to design a web page with animated shapes.

Fully responsive

Responsiveness of the web design is not an optional choice anymore. You have to ensure that your design is completely compatible with smaller devices like mobile and tablet, as they are with desktops and laptops.
Floating Animation Widget is fully responsive. So anyone with any type of viewing device can have same experience and won’t do any harm to the responsiveness of your web page.

Create Attractive Section Background with Float Elements

There are always some significant sections on a web page you want to put the spotlight on. Floating Animation is a great way to do so.
Make sections more attractive and eye-catching to the visitors by adding floating animated shapes in the background.
All you need to do is turn on the ‘Enable as a Background’ option. Then set ‘Top Offset’, ‘Left Offset’, and ‘Z-Index’ to adjust the element position.

Customizable Design with Global Styling Options

Besides individual styling, general styling for all is also available. Make changes of color, size, and opacity all at once for all the elements floating around.
Choose a color, you can use a custom color or select one from the global color. Adjust elements to the design by changing their SVG size.
From a full solid colored shape to a more transparent one, variation in opacity is an option that can change the visibility of the blob shape and make things convenient.

How to add and use Floating Widget

The process is as easy as you like. If you have Exclusive Addons Pro installed, all of our widgets along with this one will automatically appear on Elementor Panel. You just need to Drag & Drop the element into the page.
Now that you’ve added the widget, customize it to your wish. In Content tab, add as many shapes as you like. Also can set individual styles of each of the shape. Global styling is available in the Style tab. Shape color, SVG Size, Opacity, and other attributes can be changed from here.
Check the full documentation on How To Configure and Style Elementor Floating Animation Element, and find every detail on using the widget.

Final Words

If you’re looking to create an attractive and innovative design by adding beautiful blob shapes, then Exclusive Addons Floating Widget is most probably the best solution.
With multiple ways of adding floating elements and a number of customizable options, it gives ultimate flexibility to show your creativity without even knowing much about CSS coding.