Elementor’s built-in floating button feature sounds great in theory. A sticky action button that follows users as they scroll – perfect for quick-access links like support, booking, or contact options.
The problem? It’s barely customizable.
You can’t change the icons. You can’t style it like a regular container. You’re locked into the set templates that Elementor provides, and all you can really do is add your links and accept what you get.
If you’ve landed here searching for how to change the icon on Elementor’s floating button – you can’t. At least not through the built-in feature.
But there’s a better way. You can build your own custom floating button using Elementor widgets you already have access to, with full control over icons, styling, layout, and behaviour.
Why Build Your Own Floating Button?
The native floating button in Elementor is a closed system. Here’s what you’re stuck with:
- Fixed icons — no way to swap them for your own
- Limited layout options — you can’t rearrange or restructure the menu
- No container-level control — you can’t style it the way you style everything else in Elementor
- Template-dependent — you pick a template and fill in the blanks
Building your own version gives you full creative control. You choose the icons, the colours, the layout, the animations – everything. And it works with widgets you already know how to use.
What You Need
This approach uses two Elementor widgets:
- Icon widget — the floating trigger button that’s always visible on screen
- Off-Canvas widget — the panel that slides out when someone clicks the button, containing your action links
That’s it. No plugins, no extravagant custom code, no workarounds. Just two native Elementor widgets working together.
Step 1: Create the Floating Trigger Button
Start by adding an Icon widget to your site-wide header template.
Set up the icon
- Choose an icon that fits your use case. A question mark, chat bubble, headset, or plus icon all work well depending on context.
- Set the icon size, colour, and background to match your brand.
Make it float
In the Advanced tab of the icon widget, set the Position to ‘Fixed’ with 32px offset right and 32px offset bottom in the orientation settings. This pins the icon to the bottom-right corner of the viewport so it stays visible as the user scrolls. Adjust bottom and right values to reposition it.
Add a hover effect (optional)
You can add a scale transition in Advanced > Scale or background colour change in Style > Icon Hover to give the button some life.
Step 2: Set Up the Off-Canvas Panel
Now add an Off-Canvas widget to the header.
Configure the Off-Canvas widget
Set the panel to open from the bottom (or right, depending on your preference). Add animation duration and remove the overlay from the style tab.
Add your action links
This is where you build the actual menu. Each link can have its own icon, description, and styling. Unlike the native floating button, you have complete control over the layout here.
Style the panel
Since the off-canvas panel is just a container, you can style it however you want – background colour, rounded corners on cards, custom icon sizes and colours per link, spacing, padding, typography. All the usual Elementor controls.
Step 3: Connect the Button to the Panel
This is the part that ties it all together.
- On your Icon widget, go to the Link settings
- Set the link to toggle the off-canvas widget
- Set the close icon inside your off-canvas widget to close the off-canvas widget
In Elementor, you do this by using a dynamic action. Set the icon’s link action to toggle the off-canvas widget. The exact method depends on your Elementor version, but typically you’ll use the Action URL or a click trigger in the off-canvas widget settings.
When someone clicks the floating icon, the panel slides out. Click again (or click the X / overlay) and it closes.
Step 4: Make It Responsive
A floating button that looks great on desktop but overlaps content on mobile isn’t useful. Here are a few responsive tweaks:
Adjust size and position per breakpoint
In the icon widget’s Advanced tab, use Elementor’s responsive controls to reduce the icon size on tablet and mobile, and adjust the bottom and right values so it doesn’t overlap navigation or other fixed elements.
Consider mobile-specific behaviour
On mobile, screen space is tight. You might want to use a smaller icon size or increase bottom spacing if there’s a fixed mobile menu, and set the off-canvas panel to full-width on mobile for easier tapping.
Tips for a Better Floating Button
Don’t overload it. Three to four links is the sweet spot. More than that and the off-canvas panel starts feeling like a secondary navigation – which defeats the purpose.
Use clear, recognisable icons. A headset for support, a map pin for locations, a calendar for booking. Users should understand each option at a glance without reading the label.
Match your site’s design language. The floating button should feel like a natural part of the page, not a bolt-on. Use the same colours, border radius, and typography as the rest of your site.
Test the z-index. If your floating button disappears behind other elements (sticky headers, popups, cookie banners), increase the z-index value until it sits on top of everything.
Add a subtle entrance animation. A slight fade-in or slide-up when the page loads can make the button feel more polished. You can do this with Elementor’s entrance animation settings on the icon widget.
Skip the Build – Use a Ready-Made Template
If you’d rather not build this from scratch, Element UI has a pre-built custom floating button template that you can copy straight into your Elementor site.
It includes the floating trigger icon, off-canvas panel, styled action links, and responsive settings – all ready to go. Just swap in your own links and content.
Get the Floating Button template →
Wrapping Up
Elementor’s native floating button is fine if you’re happy with the default setup. But the moment you want to change an icon, restyle the layout, or add anything beyond what the templates offer, you hit a wall.
Building your own with an icon widget and off-canvas panel takes some extra time, but gives you full control over every detail. It uses tools you already have in Elementor Pro – no extra plugins needed.
