The Off‑Canvas widget allows you to create hidden content panels that slide in from any edge of the screen when triggered by user interaction. These panels stay off-screen until activated, offering a smooth, non-intrusive way to reveal extra information, tools, or navigation without disrupting the main page layout. 🎯 Common Use Cases Display additional details like team bios, product descriptions,
A Floating Button is a global template (not a regular widget) that displays a sticky, interactive button across your site. Typically shown in a corner or along an edge, it triggers actions like opening a chat box or opening business contact options. 🎯 Use Case Examples Customer support: Launch a chat or messaging window. Call to action: Prompt visitors to
Elementor now allows you to embed an Off‑Canvas container directly inside a Loop Grid item. This means each card or item in a grid can open its own individual slide-in panel—offering more information or functionality without leaving the current page. ✅ Why This Is Important Enhanced User Experience: Visitors can explore more details or media through a smooth slide-in panel
🎯 Purpose Unlock limitless icon design possibilities by importing your own icon sets or individual SVGs—beyond the default library—to elevate branding and creativity in your layouts. ➕ Key Capabilities Upload Custom Icon Sets Import icon libraries created with tools like Fontello, IcoMoon, or Fontastic. Bundle and deliver consistent icon collections tailored to your brand. Add Standalone SVG Icons Upload unique
🎯 Purpose Gradient backgrounds allow you to create smooth color transitions—ideal for eye-catching sections, accent blocks, or subtle overlays that enhance your overall design. 🛠️ How to Create a Gradient Background Select Your ElementChoose a section, column, or widget where you want to add the gradient. Open Style SettingsNavigate to the Style tab and choose Background Type → Gradient. Choose
🎯 Purpose Background images help define the visual tone of a section, column, or widget—adding depth and style to your layout. Elementor’s tools make it easy to swap, customize, and fine-tune these images with precision. 🛠️ Step-by-Step Editing Select the ElementClick the section, column, or widget where you want to update the background. Go to Style SettingsIn the left-side panel,
✨ What It Does Hover Effects in Elementor let you add interactive visual changes that trigger when a user hovers over a widget, column, or section. These effects enrich engagement and design interaction. 🎯 Where to Use Applicable at the widget, column, or section level Normal and Hover states are available across styles—look for those tabs in the style settings
🔎 Purpose Elementor allows you to control exactly how background images are displayed inside sections, columns, or widgets. This includes options for position, repeat behavior, size, and responsiveness, helping you design layouts that look polished on all devices. 1. Think of the Container as a Frame Every background image sits inside a frame (the element’s container). Since image and container
Elementor offers several background options, each with customizable effects. Not all types are available for every element. 🎨 1. Classic Background Solid Color or Single Image Customize with color picker or global color Supports image responsiveness and scroll effects: Vertical/Horizontal movement, Blur, Transparency, Scaling Hover and mouse interaction effects available 🌈 2. Gradient Background Blends two colors Choose Linear (angle-based)
