Floating image in Elementor

May 9, 2024 | Blog

How to Add a Floating Image on WordPress Website Using Elementor

Floating image widgets in Elementor can make your website visually interesting by segregating large blocks of text and placing animating images around them. You can draw user’s attention to important content easily using the Floating image widgets. These help keep the users engaged and give them a realistic content experience.

In this post, we will demonstrate how to add a floating image in Elementor easily using the WPMozo Floating Image Widget. We will also provide an overview of some similar floating widgets that can enhance the overall appearance of your website with floating image effects.

Note: Before starting, make sure you have installed the WPMozo Addons for Elementor plugin.

How to Create a Floating Image using Elementor

Creating an image section that floats using Elementor is not a tedious task and a beginner with basic knowledge of Elementor can create it easily. Let’s explore how to do that.

Open the webpage and edit it using Elementor. Search for the WPMozo Floating Image Widget.

Add a Floating Image in Elementor

Upload and Position Floating Images

You can see the list of Floating Image Items that you can utilize to create a animated image section. Upload a suitable image to convey vibes of content. Align it horizontally and vertically within the container using Image Position options. Analyze the floating section design you want to create and adjust the position accordingly.

Create a Floating Image in Elementor

Tune Up the Image Animation Options

Utilize the Image Animation options to configure the action of images. The Floating Effect allows you to move the image in a left-right or up-down direction delivering an eye-catching experience to visitors.

Tune up the Animation Delay and Animation Duration to control the floating movement of the image. Animation Speed Curve will let you choose the animation pattern. Keep the Animation Repeat ‘Infinite’ to continuously display the floating effects.

Configure a Floating Image in Elementor

Configure the Advanced Options

The Advanced Options of this widget will let you customize your floating image section in detail. Paste an Image Link URL if you want to redirect users to any other place.

Design a Floating Image in WordPress

Leave the Background Type for now and proceed to further options. Image Sizing lets you customize the width of the floating image. Image Spacing helps you to display the floating effect clearly by tweaking the margin and padding.

Polish the aesthetics and make it stand out from the surrounding content by applying a border. Apply a Box Shadow and differentiate the image with extended clarity.

Image sizing in Floating Image

Similarly, you can add more Floating Image Items to introduce more images in this section. Last but not the least is the Container Height of the floating section. Tune it in such a way that accommodated floating content looks superb and amazing.

Shadow in Elementor floating Image

If you want more creativity, simply use a background image that forms a blended combination with the floating effects to make the overall experience sensational.

Elementor floating Image background

That’s all. See this superbly designed floating image section in the front end.

Elementor floating Image layout

This dynamic image section is more engaging and communicative as compared to the dumb static images. That’s why it is a great choice and a huge necessity for modern websites to incorporate floating sections.

Design a Fish Aquarium using Elementor Floating Image Widget

If you have a creative thinking and your imagination is beyond limits, you can craft innovative things for your website using floating image widget. Take a look at the below example.

Floating fish aquarium with effects

Excited to know how to create this fish tank aquarium using Floating Image Widget for Elementor? Its very easy and you only need to follow some simple steps to create this wonderful design.

1). Get some transparent images of animated fishes.

2). Use these images as Floating Image Items and position these images using Horizontal and Vertical Align.

configure floating fish aquarium

3). Click on the Image Animation and select Floating Effect as Left Right or Up Down for fish images.

4). Bring down the Animation Duration value under 1500.

5). Keep the Animation Speed Curve as Ease-out to visualize realistic motion of fish.

6). Select ‘Infinite’ for Animation Repeat for a continuous floating movement of images.

7). Lastly get an underwater background image and upload it using the Background option. Select ‘Large’ Image Resolution to fit it perfectly in the container.

Floating fish aquarium background

Some More Useful Elementor Floating Widgets

These are some other interactive Elementor Floating widgets that will help to enhance visual interest and add an interactive experience to your WordPress website.

1. Exclusive Addons Floating Widget for Elementor

This Elementor Floating animation widget makes your WordPress website fascinating by crafting unique fancy animated shapes. It provides you with an easy solution to animate elements without messing up with CSS codes. That’s helpful for beginners who want to add animation with floating elements on their websites.

Key Features

  • 11+ pre-built default shapes.
  • Random floating animated shapes.
  • PNG or SVG images.
  • Fully customizable design.
  • Option to use shapes as section background.
  • Completely responsive.

You need to install the pro version of the Exclusive Addons for Elementor plugin.

2. Qi Addons Floating Effect Widget for Elementor

This Elementor floating widget transforms your website with an eye-catching presentation of floating background images. It can be the best choice for photography and portfolio websites to visualize everything engagingly. Online stores can also use this floating widget to showcase their products sensationally.

Key Features

  • Place floating background images.
  • Use fixed overlays.
  • Multiple positions for overlay title.
  • Many images can be used with overlay.
  • Show text information on hover using item layouts.
  • Put links on images.

Purchase the pro version of Qi Addons for Elementor to experience the advanced features of this widget.

The final verdict of this post is that if you want an innovative design to mesmerize visitors with its visual appeal, it can be created with floating image widgets. The dynamic images immediately capture visitor’s attention and increases the average time spent by visitors on a website. Moreover, it emerges as a smart tool to bring your design imagination to reality on your website. There are several plugins that you can use and it completely depends on your design needs. Say bye bye to the conventional passive images and let your website speak with the amazing floating images.

Posted By:
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.


Submit a Comment

Your email address will not be published. Required fields are marked *


Submit a Comment

Your email address will not be published. Required fields are marked *

Top Useful Hidden Features in Gutenberg Editor

Top Useful Hidden Features in Gutenberg Editor

Gutenberg has completely changed the content creation experience in WordPress with its user-friendly interface and incredible features. Gutenberg has become the default editor in WordPress 5.0 as it simplifies the editing process for beginners. Users can create...

Useful WooCommerce Plugins Equipped with Tab Manager

Useful WooCommerce Plugins Equipped with Tab Manager

The product page of a WooCommerce store is loaded with pricing details, product variation, and other primary product information. Suppose we want to show some more product details on a product page, what is the solution? Tab Manager for a WooCommerce store comes in...

Best Interactive Image Card Plugins for WordPress

Best Interactive Image Card Plugins for WordPress

Interactive image card are smart visual tools that combine dynamic visual elements such as hover effects, tooltips, and animations. These elements provide an interactive experience for the visitors and allow them to immerse in the content while browsing the website....

Popular on WPMozo

WPMozo Wishlist for WooCommerce WPMozo Checkout Manager for WooCommerce WPMozo Variation Swatches for Woo WPMozo Addons for Elementor

Explore, Learn, Grow: Join Now!