Fluid Design System for Elementor vs GSheetConnector – Elementor Forms Google Sheet Connector to Sync Submissions to Google Sheets

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

GSheetConnector for Elementor Forms is a powerful Elementor Google Sheets integration plugin that connects Elementor Forms and MetForm directly to Google Sheets. GSheetConnector acts as a secure bridge between your WordPress site, Elementor Pro Forms or MetForm, and Google Sheets — enabling real-time form submission sync and automated spreadsheet management without manual exports. Automatically sync Elementor form submissions to Google Sheets in real-time and eliminate manual exports, CSV downloads, or copy-paste workflows. Every submission is securely transferred to your selected Google Spreadsheet instantly after form submission. Whether you collect leads, contact inquiries, bookings, registrations, or customer data, GSheetConnector ensures reliable Google Sheets sync and structured spreadsheet management directly from your WordPress site. Built specifically for Elementor Pro Forms and MetForm, this plugin delivers seamless Google Sheets integration with secure authentication and automatic data synchronization. Why Choose GSheetConnector? ✔ Sync Elementor Forms to Google Sheets instantly ✔ Direct Google Sheets integration without third-party automation tools like Zapier ✔ Support for Elementor Pro and MetForm ✔ Secure Google OAuth 2.0 authentication ✔ Lightweight, fast, and performance optimized Built specifically for Elementor Pro Forms and MetForm users who need secure, real-time Google Sheets integration and reliable form submission sync. How Elementor to Google Sheets Sync Works When a visitor submits an Elementor Form (Elementor Pro) or MetForm (Free or Pro), GSheetConnector automatically syncs the form submission to Google Sheets in real-time by creating a new row in your connected Google Spreadsheet. All standard and advanced form field types are supported. Submission date is recorded automatically, with extended metadata available in the Pro version. Secure Google OAuth authentication ensures safe data transfer without complex API configuration. Core Features (Free Version) Real-Time Elementor Forms to Google Sheets Sync Automatically sync Elementor Forms and MetForm submissions to Google Sheets in real-time. One-Time Google Authentication Authenticate once and enable continuous automatic form submission sync. Field & Column Mapping Map Elementor form fields directly to Google Sheet columns. Submission Date Capture Automatically record submission date with every form entry. View Connected Google Spreadsheet Access your linked Google Sheet directly from plugin settings. Secure Google OAuth Authentication Includes one-click Google authentication using official Google APIs. Full Compatibility Works with Elementor Pro Forms, MetForm (Free & Pro), latest WordPress versions, and modern PHP environments. 🛠️ How to Send Elementor Forms Entries to Google Sheets After installing and activating GSheetConnector: Step 1: Authenticate with Google Use the one-click Google authentication button to securely connect your WordPress site to your Google Sheets account. Step 2: Configure Sheet Details Enter your Google Sheet Name, Sheet ID, Tab Name, and Tab ID inside plugin settings or within the Elementor Form editor under “Actions After Submit” → select “GSheetConnector”. Step 3: Match Form Fields with Sheet Columns Ensure your Google Spreadsheet has column headers in the first row that match your Elementor form field labels. Save and submit a test form — your data will sync to Google Sheets in real-time. 🚀 Pro Features Upgrade to Elementor Forms Google Sheets Connector PRO for advanced automation and enhanced control. Automatic Header Creation Generate Google Sheet column headers automatically from form fields. Synchronize Existing Entries Sync previously submitted Elementor or MetForm entries. Advanced Field & Column Management Edit, reorder, enable, or disable specific form fields before syncing. Extended Submission Metadata Capture submission time, IP address, browser info, and additional metadata. Freeze Header Rows Freeze header rows in Google Sheets for better readability. Header & Row Styling Customize header colors and alternate row styling. Manual API & Service Account Authentication Supports manual Google API configuration and Service Account authentication. Live Demo & Resources Homepage | Documentation | Support | Demo | Premium Version 🌟 About GSheetConnector Part of the GSheetConnector suite, supporting over 80,000 WordPress users worldwide across multiple Google Sheets integrations. GSheetConnector provides Google Sheets integrations for popular WordPress forms and WooCommerce, helping automate data syncing without writing code. Important Notes Ensure your Google Sheet Name, Sheet ID, Tab Name, Tab ID, and Column Headers match exactly with the values entered in plugin settings. • Use exact form field labels as column headers • Avoid special characters in column names • Keep column headers consistent with form field labels Proper formatting ensures accurate real-time Elementor to Google Sheets synchronization.