Fluid Design System for Elementor vs Premium Addons for Elementor – Powerful Elementor Templates & Widgets

Design once. Scale everywhere. Fluid Design System for Elementor is a small yet powerful add-on that brings fluid typography and spacing presets directly into Elementor’s interface — helping you create fully responsive designs that scale naturally across every screen size, from tiny phones to ultra-wide desktops. 🎯 Think of it like color presets — but for padding, font sizes, and layout gaps. 🎥 Video Tutorials With just a few clicks, you can: – Define minimum and maximum values for typography or spacing. – Apply those values using a new “fluid” unit inside any Elementor control. – Watch your design scale smoothly—no coding or media queries required. – Organize your presets into custom groups (e.g. “Border Radius”, “Thumbnail Sizes”) for better management. Say goodbye to manually tweaking every breakpoint. Say hello to automatic, intelligent design scaling with organized preset management. How It Works ❓ What Does “Fluid” Mean? Traditionally in Elementor, you need to set separate values for each breakpoint — for example, one font size for desktop, another for tablet, and another for mobile. While this gives some control, it has two major downsides: – 🧩 It’s rigid: You only define styles for specific screen widths, leaving awkward gaps in between where the design may not scale smoothly. – ⏱️ It’s time-consuming: Updating styles across multiple breakpoints for every section and element becomes a repetitive, manual process. 💡 Fluid Design System solves this. Instead of setting fixed values for each breakpoint, you define just two—a minimum and a maximum — and the plugin automatically generates a smooth scaling behavior in between. This means: – One preset handles all screen sizes. – You get consistent design and spacing across the entire site. – You save time and reduce manual effort. – You can organize presets into groups for different projects or design systems. This plugin introduces Fluid Units, powered by CSS clamp() and custom presets, allowing your design to scale automatically across all screen sizes. Here’s how it works in real scenarios: ✍️ Fluid Typography Example Old way: 24px (mobile), 36px (tablet), 72px (desktop) Fluid way: One preset: min = 24px, max = 72px Result: Text scales smoothly and proportionally on all devices. 📦 Fluid Spacing Example Old way: 40px (mobile), 80px (tablet), 160px (desktop) Fluid way: One preset: min = 40px, max = 160px Result: Section padding adjusts naturally without breakpoints. 🔗 Fluid Gaps Example Gap between elements: 20px (mobile) to 60px (desktop) Result: Even spacing between containers and widgets on any screen. ❓ Why not Just Use vw or vh Units? While viewport units like vw can scale elements based on screen width, they often lack control — your text might become unreadably small or overly large. The Fluid Design System solves this by generating clamp() values behind the scenes, so your designs stay within defined min/max boundaries. This gives you the flexibility of responsive scaling, combined with the precision of design tokens. 👉 Behind the scenes, the plugin creates CSS variables like: clamp(24px, 5vw, 72px) which Elementor then uses across typography, spacing, padding, margin, and more. How to Use Follow these steps to set up and use the Fluid Design System in your Elementor projects. 📐 Step 1: Configure Fluid Breakpoints Go to Elementor > Site Settings Navigate to the “Fluid Typography & Spacing” tab In the “Breakpoints” panel, set your: Minimum Screen Width (e.g., 360px for mobile) Maximum Screen Width (e.g., 1920px for desktop) 🧰 Step 2: Create Your Presets In the same “Fluid Typography & Spacing” tab: Go to “Typography Presets” to create fluid font size presets Go to “Spacing Presets” to create fluid spacing presets For each preset: Give it a descriptive name Set minimum and maximum values Optionally set custom breakpoints for this preset 🎨 Step 3: Apply Your Presets Edit any page with Elementor In any control that supports custom units (typography, spacing, etc.): Select “fluid” as the unit Choose your preset from the dropdown Watch your design smoothly adapt to different screen sizes 🔧 Step 4: Fine-tune Your Design Use the live preview to see how your presets work Adjust preset values if needed Create additional presets for different design needs Why Use Fluid Design System? Perfect Responsiveness: Create websites that look flawless on every device, from mobile phones to large desktop screens including all intermediate sizes Design Consistency: Maintain perfect spacing and typography harmony across your entire website Time-Saving: Eliminate manual breakpoint adjustments with intelligent fluid scaling Future-Proof: Seamlessly integrates with Elementor’s latest features and updates User-Friendly: Manage everything through Elementor’s familiar interface – no coding or CSS knowledge required Key Features Inline fluid values – Set values directly in controls (“20px ~ 100px”) without visiting Site Settings Save as Preset – Convert inline values into reusable presets with one click Create unlimited fluid typography and spacing presets with custom minimum and maximum values Define global breakpoints or set custom breakpoints for individual presets Real-time preview of changes in the Elementor editor Works with all Elementor widgets and elements Compatible with any WordPress theme including Elementor’s Hello theme Full support for Elementor’s responsive controls and additional breakpoints Mix different units (px, em, rem) in your presets for ultimate flexibility Common Use Cases Fluid Typography: Create responsive headings and text that maintain perfect proportions across all devices Consistent Spacing: Design section padding and margins that adapt smoothly to any screen size Responsive Grids: Build fluid grid layouts with perfect spacing between elements Typography Scale: Set up a complete typography system that works flawlessly everywhere Container Spacing: Create fluid containers that maintain perfect proportions on all devices Element Gaps: Design consistent gaps between elements that scale naturally

Premium Addons for Elementor supercharges your Elementor Page Builder with 90+ Elementor widgets, 550+ pre-made Elementor templates that will give you the ability to build sophisticated websites in less time with no coding required. Both Elementor and Premium Addons plugins take your WordPress website to the next level. It has Elementor elements like Carousel, Blog Posts List/Slider, Mega Menu Builder, Testimonials, WooCommerce, Search Form, Posts/News Ticker, etc. Check Elementor Widgets & Addons Demo Pages Useful Links Docs | Video Tutorials | Facebook Group | Upgrade to Pro KEY FEATURES Modular & Lightweight 90+ Free and Pro Elementor Widgets 17+ Powerful Elementor Addons 580+ Ready made Elementor Container & Full Page Templates Carousel & Advanced Media Carousel Widgets Advanced Mega Menu Builder Mobile Menu Builder Widget Magazine Widgets Bundle (Smart Post Listing, Weather Forecast, World Clock, News Ticker, Tags Cloud and Recent Posts Notification) WooCommerce Widgets Bundle (Products Listing, Products Carousel, Categories Listing, Woo CTA, Woo Mini Cart) Advanced Display Conditions Addon Apple’s Liquid Glass Effect & Glassmorphism Addon Equal Height Elementor Containers Addon Lottie Animations Integration Cross Domain Copy Paste Elements Elementor Page and Post Duplicator 100% WPML Ready Fully Responsive & Cross Browser Ready Performance and Speed Improvements Premium Addons for Elementor is now much faster than ever. Only the required JS files will be loaded on your page to boost your page loading speed and site performance. All the editor loading issues have been fixed to make your site faster and minimize the time it takes for Elementor editor to load. New: Liquid Glass Addon Select between 6 attractive liquid glass and glassmorphism effects to be applied on any Elementor widget or container. It has also been added to be applied on specific parts inside our elements. Check it out now!. New: WooCommerce Mini-Cart and Categories Listing Widgets This powerful widget allows your customers to view the products in their shopping cart, change the quantity, remove items and check the total amount without leaving the page. We have also released Woo Categories widget to showcase your Woo categories in four neat skins. Check from here and here. New: Mobile Nav Menu Widget Create a neat mobile menu on your website with just few click with this powerful widget. You can set the click action of each menu item to a link or to open an off-canvas content. Check it out now!. New: AJAX Search Form Widget The ultimate solution to add a search form widget on Elementor websites. Customize the search results, add pagination or carousel and select between three different neat skins. Check it out now!. Animated Shape Divider Addon Add animated shape dividers for Elementor flexbox containers. You can select between 40+ shape dividers or use a custom SVG code to add your own divider. Check it out now!. Advanced Media Carousel Widget You can now create carousel using images, videos, Elementor templates to create the carousel you want. Select between four animations and dozens of customization options. Check it out now!. Elementor Navigation/Mega Menu Widget Now, you build outstanding navigation menus and mega menus using Premium Navigation/Mega Menu Widget which allows you to select between four different layouts with dozens of options to create a responsive menu. Check it out now!. Elementor Display Conditions A professional way to manage your website content with specific conditions. You can show/hide content dynamically based on location, browser, operating system, user role, URL parameters, device type, Woocommerce display conditions such as WooCommerce product and WooCommerce shopping cart data, ACF fields, etc. Check the demo page Equal Height Feature Now, you can make your containers, widgets or any selector you want the same height with just ONE click using Equal Height feature in container settings -> Advanced tab. Container and Full Page Elementor Templates Ever-growing Container/Page Templates Library Available on both Premium Addons Free and PRO versions. Browse, preview, and insert the template you like in your page/post with just ONE click. Lottie Animations Integration You can now use Lottie Animations in ALL our widgets. Whatever widget that have an image or icon option now have also the option to add a Lottie animation. Post and Page Duplicator Duplicate any post, page or template on your website with just ONE click. Check the documentation article from here. Modular & Instant Loading Premium Addons for Elementor is fully modular. You can enable/disable specific elements to prevent overloading your website with code you will not actually use which helps your website have a blazing fast performance. Editor Panel Not Loading How to resolve Elementor editor panel loading issue when Premium Addons is active. Elementor Widgets & Addons Included Content Widgets Carousel Widget (FREE): Create a slider of any Elementor content. Blog Widget (FREE): Showcase posts or any custom post type in 5 neat skins. AJAX Search Widget (FREE): Add search form to your website with custom search query. Smart Post Listing Widget (PRO): Create any posts layout you want using this widget. You can use it to create any grid layout to show your posts or any custom post type on your website. World Clock Widget (FREE): This widget helps you to show time from any place. You can use it to show analog/digital clock. Weather Widget (FREE): Weather widget is useful for showing weather forecast data by city name or custom coordinates. You can select between three neat layouts with dozens of customization options. News Ticker Widget (FREE): Show your posts in an attractive way using this news ticker widget. Select between four different layouts. You can also use the widget to show Gold, Stock and Currencies prices. Textual Showcase Widget (FREE): Elevate your text into stunning visual art with Elementor Textual Showcase. Experiment with Text, Images, Font Awesome Icons, SVG Draw, and Lottie Animations to craft eye-catching designs. Engage your audience by making your words move, fade, and transform dynamically, leaving a lasting impression. Tags Cloud Widget (FREE): Showcase tags and categories as cloud, sphere, labeled. Recent Posts Notification Widget (FREE): This widget helps you to show a notification icon on your website to show the latest posts that your website users have not seen yet. Google Maps Widget (FREE): Advanced Google Maps Widget comes with features like adding multiple markers, custom skins, and much more options. Team Members Widget (FREE): Very good widget to list team members, co-workers, etc. Team Members Widget comes with many customization options. Tabs Widget (PRO): Create both Vertical and Horizontal tabs with tons of styling features. Content Toggle (PRO): Present multiple content in a smart way. Animated Text Widget (FREE): The animated Fancy Text Widget comes with very useful options to help you create attractive marketing messages. Heading Widget (FREE): Heading Widget has many customization options and ready-made heading styles. Dual Heading Widget (FREE): Create a headline with 2 different unique styles. Image & Video Widgets Site Logo Widget (PRO): Create an attractive logo for your brand using an image, SVG shape, or Lottie Animation with tens of customization options. Media Gallery Widget (FREE): Highly customizable gallery widget that can be used for creating attractive looking image galleries and portfolios. Advanced Media Carousel Widget (FREE): Create advanced carousel using images, videos or Elementor templates. Image Scroll Widget (FREE): Allows you to represent your images in a brand new yet attractive way. Image Comparison Widget (PRO): Create vertical or horizontal image comparisons easily using this amazing widget. Image Hotspots Widget (PRO): The only Image Hotspots Widget with 100% freehand design experience. Add hotspots to your image using mouse drag n’ drop. Image Layers Widget (PRO): Combine images, Lottie animations and texts. Image Accordion Widget (PRO): Create eye-catching Image Accordions in both vertical and horizontal orientations. Video Box Widget (FREE): Bring videos from YouTube, Vimeo, Dailymotion, or upload your own using Video Box Widget. The widget comes with many customization features. Container Addons & Widgets Horizontal Scroll Widget (PRO): Create horizontal scroll websites with just few clicks. Vertical Scroll Widget (FREE): Create beautiful vertical scroll pages with advanced responsive control options using Premium Vertical Scroll Widget. Background Transition Widget (PRO): Create fancy, colorful, and eye-catching webpages. Multi-Scroll Widget (PRO): Create attractive multi-scroll effect. Custom Mouse Cursor Global Addon (PRO): Add a custom mouse cursor to any container or widget. Magic Scroll Global Addon (PRO): Create outstanding scroll animations to any widget with just few clicks and control every single detail in the animation scene. Animated Shape Divider Addon (FREE): Create animated shape divider on containers. Select between tens of pre-made dividers or use your own. Tooltips Global Addon (FREE): Add icon, image, Lottie animation or Elementor template as a tooltip for any Elementor container element. Badge Global Addon (PRO): Add an icon, image, Lottie animation, or SVG blob shape badge to any container. Animated Blob Generator (PRO): Add multiple animated blob layers to your containers with a wide range of smart customization options. Lottie Animations Container Addon (PRO): Add multiple Lottie Animations easily to any container with a lot of customization and interactivity options. Parallax Container Addon (PRO): The only Parallax Container Addon that can be enabled for containers with freehand design experience and many styles to choose from. Particles Container Addon (PRO): Create eye-catching particles background with many customization options. Animated Gradient Container Addon (PRO): Subtle animated gradients effect that makes your backgrounds attractive. Ken Burns Container Addon (PRO): Add multiple images to your container background and animate them with the popular Ken Burns effect. Off-Grid Widgets Modal Box Widget (FREE): All purpose modal box widget with the ability to use Elementor Templates and many other options. Alert Box Widget (PRO): Show a popups, GDPR alerts and much more with this handy widget from Premium Addons. Off-canvas Widget (PRO): Another off-canvas widget allows you to slide in a container from any direction with a trigger. Preview Window Widget (PRO): Very clever way to show more data in less content area. Elementor WooCommerce Widgets & Addons Woo Products Listing (FREE): Display your WooCommerce products in customizable grid, masonry, or carousel layouts with flexible query controls and ready-made skins. Woo Categories Listing (FREE): Show your WooCommerce product categories in stylish grid or carousel layouts with full control over filtering and design.. Woo CTA (FREE): Add beautifully designed “Add to Cart”, wishlist, or compare buttons anywhere on your product pages to boost conversions. Woo Mini Cart (FREE): Show a live, interactive mini cart that updates instantly as customers browse — fully customizable and easy to place anywhere with dozens of styling and free shipping progress bar option. Woo Display Conditions (PRO): Show or hide any Elementor content based on WooCommerce conditions like cart items, product categories, stock, user role, and more. Social Reviews & Testimonials Widgets Testimonials Widget (FREE): The modern Testimonials Widget is available with many customization options. It can be used with Carousel Widget to create testimonials carousel. Facebook Reviews Widget (PRO): This widget allows you to show off your Facebook Reviews on your website. Google Reviews Widget (PRO): Show your business’s latest Google Reviews right on your webpage. Yelp Reviews Widget (PRO): Show your business’s Yelp Reviews in your website pages with this useful widget. Blurbs & CTA Widgets Bullet List Widget (FREE): Create a bullet list with icons, images, and text tags beside Lottie animations. Countdown Widget (FREE): Create sense of urgency with this widget. It’s perfect for under construction pages, events, sale items, etc. Banner Widget (FREE): Animated and interactive Banner Widget comes with multiple styles and customization features. Button Widget (FREE): Advanced Button Widget comes with lots of interactive animation, styling options, and onClick event option. Image Button Widget (FREE): Image Button Widget is a unique element that can be used for creative and innovative call to action ideas. 3D Hover Box Widget (PRO): Comes with 8 cool 3D interactive effects. Icon Box Widget (PRO): An advanced Icon Box Widgetwith endless customization options. iHover Widget (PRO): The popular iHover Widget with various interactive animations and styling options. Unfold Widget (PRO): Advanced way to fit long text in small area. Unfold Widget is a great trick as it will make your layout design look better. Social Feed Widgets Pinterest Feed Widget (FREE): Get pins and boards from your Pinterest account and show them on your website. Select between three layouts and four skins. TikTok Feed Widget (FREE): Get feed from your TikTok account and show them on your website. Advanced filtering options, three layouts and three skins. Facebook Feed Widget (PRO): Show your Facebook Feed directly inside your website. Twitter Feed Widget (PRO): Display your Twitter Feed on your website pages. Instagram Feed Widget (PRO): Show your Instagram photos right on your webpage. Behance Feed Widget (PRO): Show off your amazing portfolio projects using Behance Feed Widget. Tables, Charts & Anything Data Widgets Progress Bar Widget (FREE): The most advanced Progress Bar Widget comes with multiple labels option. Pricing Table Widget (FREE): Highly customizable Pricing Table Widget with tons of styling options. Charts Widget (PRO): The only advanced Charts Widget is available in Premium Addons. Create Line Chart, Bar Chart, Doughnut Chart, Radar Chart, and more. Tables Widget (PRO): Create sophisticated tables with unique styling and interactivity options. Counter Widget (FREE): Show your facts & figures with Counter Widget. Contact Widgets Contact Form 7 Widget (FREE): Include contact forms in your contact us page using Contact Form 7 Widget. WhatsApp Chat Widget (PRO): Get instant WhatsApp messages right from your website visitors. Design Widgets Divider Widget (PRO): Design beautiful dividers with this unique widget. Image Separator Widget (FREE): Add an Image Separator between containers with this handy yet fully responsive widget. Support & Documentation Documentation Search here first if you need to know how a widget or feature works or for troubleshooting. Video Tutorials This playlist includes Premium Addons elements’ video tutorials. We are adding more regularly. Facebook Group A great place to get help or ask a question about Premium Addons. Community Forums Another good place to search for answers or post your own question. Check Premium Addons PRO Love Premium Addons User? rate us on WordPress 🙂