Artem Semkin

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


Fluid Design System for Elementor

Create fluid typography & spacing presets natively in Elementor — no CSS clamp formulas, no breakpoints, just seamless responsive design.

Helmut Wandl

<p><strong>Theme Designer</strong> is a powerful WordPress plugin that allows you to create and manage block themes (FSE themes) without writing a single line of code. It provides an intuitive interface to configure all theme settings that are typically defined in the <code>theme.json</code> file.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Visual Theme Builder</strong>: Create new themes with a simple form interface</li>
<li><strong>Complete Settings Management</strong>: Configure all theme.json settings through an intuitive admin panel</li>
<li><strong>Theme Metadata</strong>: Set theme name, description, author, version, and other metadata</li>
<li><strong>Screenshot Management</strong>: Upload and manage theme screenshots</li>
<li><strong>Color Palettes</strong>: Define custom color palettes and gradients</li>
<li><strong>Typography Settings</strong>: Configure font families, sizes, and fluid typography</li>
<li><strong>Spacing & Layout</strong>: Set up spacing scales, layout sizes, and user controls</li>
<li><strong>Border & Shadow</strong>: Define border styles, radius, and shadow presets</li>
<li><strong>Background Controls</strong>: Configure background image and positioning options</li>
<li><strong>Theme Export</strong>: Download your themes as installable ZIP files</li>
<li><strong>Theme Duplication</strong>: Easily duplicate existing themes as starting points</li>
<li><strong>WordPress Defaults</strong>: Choose to include or exclude WordPress default settings</li>
</ul>
<h4>What Gets Created</h4>
<p>When you create a theme with Theme Designer, it automatically generates:</p>
<ul>
<li><strong>Theme Directory Structure</strong>: Complete theme folder with all necessary files</li>
<li><strong>style.css</strong>: Theme header with all metadata</li>
<li><strong>theme.json</strong>: Complete configuration file with all your settings</li>
<li><strong>Templates</strong>: Basic <code>index.html</code> template for the main content area</li>
<li><strong>Template Parts</strong>: <code>header.html</code> and <code>footer.html</code> parts for site structure</li>
<li><strong>Screenshot</strong>: Theme preview image (if uploaded)</li>
</ul>
<h4>How It Works</h4>
<ol>
<li><strong>Open Theme Designer</strong>: In the admin panel go to “Design” <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Theme Designer”</li>
<li><strong>Create Theme</strong>: Fill out the theme metadata form</li>
<li><strong>Configure Settings</strong>: Use the visual interface to set up colors, typography, spacing, etc.</li>
<li><strong>Preview & Test</strong>: Your theme is immediately available in the WordPress admin</li>
</ol>
<h4>Perfect For</h4>
<ul>
<li><strong>Developers</strong> who want to quickly prototype themes</li>
<li><strong>Designers</strong> who prefer visual tools over code</li>
<li><strong>Agencies</strong> creating custom themes for clients</li>
<li><strong>WordPress users</strong> who want to create their own themes</li>
<li><strong>Theme shops</strong> looking to streamline theme creation</li>
</ul>
<h4>Integration with Site Editor</h4>
<p>Themes created with Theme Designer work seamlessly with the WordPress Site Editor. You can:</p>
<ul>
<li>Customize templates and template parts visually</li>
<li>Add custom styles through the Site Editor interface</li>
<li>Override theme settings on a per-page basis</li>
<li>Create additional templates and parts as needed</li>
</ul>
<p><strong>Note</strong>: Settings defined in the Site Editor take precedence over theme settings, even after saving new values in the theme.</p>
<h4>Requirements</h4>
<ul>
<li>Block theme support enabled</li>
<li>Write permissions for the themes directory</li>
</ul>
<h3>More from the same author</h3>
<p>Take a look at <a href="https://www.wppeak.com/" rel="nofollow ugc">www.wppeak.com</a></p>


Theme Designer

Create and manage block themes with an intuitive interface. No coding required - design your theme's settings through a user-friendly admin panel.

Fluid Design System for Elementor vs Theme Designer