Custom floating button link tree
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 customizable. 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.