Element UI is best viewed on desktop
A custom floating button that opens a slide-out panel with quick-access links. Built with an Icon widget and Off-Canvas panel for full control over icons, styling, and layout.
Category
Built with
Widgets
Custom code
CSS
How it works
The floating button uses an icon widget pinned to the bottom-right corner of the screen. Clicking it opens an Off-Canvas widget containing your action links. A small line of custom CSS on the Off-Canvas widget ensures the Off-Canvas widget z-index is behind the icon.
Style both however you like with custom icons, colors, layout and spacing. It is all fully customisable. For a full step-by-step walkthrough, check out our guide: How to Create a Custom Floating Button in Elementor.
Custom css
The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.
/* This targets the main wrapper that Elementor uses for the off-canvas. Used to bring the wrapper behind the icon used for toggling the off-canvas widget */
.elementor-widget-off-canvas,
.e-off-canvas__content {
z-index: 1 !important;
}