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.
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;
}