Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Fluid Design System for Elementor

开发者 artemsemkin
更新时间 2025年5月6日 18:25
捐献地址: 去捐款
PHP版本: 7.4 及以上
WordPress版本: 6.8
版权网址: 版权信息

标签

responsive elementor typography fluid spacing

下载

1.0.0 1.0.3 1.0.1 1.0.2

详情介绍:

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. With just a few clicks, you can:

安装:

  1. Install and activate the plugin from the Plugins screen in WordPress.
  2. Make sure Elementor plugin is installed and activated
  3. Go to Elementor Editor > Site Settings > Fluid Typography & Spacing to create your presets
  4. Select "fluid" unit in Elementor controls to use your presets
  5. Once applied, your designs will fluidly scale across all screen sizes!

屏幕截图:

  • Creating a new "small" fluid spacing preset with min/max values
  • Applying fluid unit for "padding" control
  • Applying fluid unit for "typography" control
  • Applying fluid unit for "gaps" control

升级注意事项:

1.0.0 Initial release of Fluid Design System for Elementor

常见问题:

Do I need to know CSS to use this plugin?

No coding or CSS knowledge required. Everything is managed through Elementor's familiar interface.

Will this work with my Elementor widgets?

Yes! The fluid units are available in any Elementor control that supports "custom" units, including typography, spacing, paddings, margins, gaps and more.

Will this work with my current theme?

Yes! The plugin works with any WordPress theme, including the default Hello theme by Elementor.

Will this slow down my website?

No! The plugin uses Elementor's native CSS generation system, ensuring optimal performance. The fluid calculations are done once during CSS generation, not during page load.

How is this different from using viewport units like vw or vh?

Viewport units (like vw) scale based on the entire screen width, but they have no upper or lower limit — which can lead to text or spacing being too small on mobile or too large on desktops. Fluid units in this plugin use CSS clamp() behind the scenes, which means you define a minimum and maximum value. The result scales smoothly between those values — giving you precise, predictable, and accessible designs across all screen sizes.

Can I use different units (px, em, rem) in my presets?

Yes! You can mix different units in your presets, like using "3em" as a minimum value and "160px" as a maximum value.

Can I use custom breakpoints for different presets?

Yes! You can set global breakpoints or define custom breakpoints for each individual preset. The default values (360px to 1920px) are just suggestions - you can set any values that work best for your design.

What browsers are supported?

The plugin uses the CSS clamp() function, which is supported by all modern browsers, including:

  • Chrome 79+
  • Firefox 75+
  • Safari 13.4+
  • Edge 79+
  • Opera 66+
  • iOS Safari 13.4+
  • Android Chrome 79+

更新日志:

1.0.3 1.0.2 1.0.1 1.0.0