mmiffdgkfllbcadbjmljgpjphillbgfk
This extension replaces Webflow text fields with dropdowns so you or your client can easily switch between preset values. To make it work you need to label your props like so: "Name of your prop {option A,option B,option C}" The comma separated values within curly brackets will become the options for the dropdown field. It's handy if you combine this with a CSS based styling system + custom attributes. You can make dramatic changes to your component styles without setting up a bunch of visibility props. You can setup custom attribute based CSS styles like so: .button[hierarchy="primary"]{ background-color: blue } .button[hierarchy="secondary"]{ background-color: gray } .button[hierarchy="tertiary"]{ background-color: transparent } Then, you can setup your custom attribute in your button component: Attribute name: hierarchy Attribute value: Assign a prop called "Hierarchy {primary,secondary,tertiary}"
Webflow Input Enhancer
Transform the Way You Work with Component in Webflow! Webflow Input Enhancer: Transform the Way You Work with Component Inputs in Webflow! Transform your Webflow experience with the Webflow Input Enhancer extension! Designed to make working with inline CSS and class properties effortless, this tool streamlines your workflow by improving how values are displayed and edited in Webflow’s input fields. Key Features: - ✨ Enhanced Input Fields: Automatically format CSS properties into individual lines for easy editing and reformat them seamlessly when you're done. - 🔑 Dynamic Field Enhancements: Use intuitive keywords to unlock enhanced functionality: - [Style]: Optimize input fields for inline CSS editing. - [Class]: Enhance input fields to work with classes effortlessly. - [Dropdown=ID]: Display dropdown options by linking to a specific field. Check out our tutorial to learn how to create a config component! - [Email]: Restrict input to accept only valid email addresses. - [Number]: Limit inputs to valid numbers, with optional min-max validation. For example, [Number]{1,10} ensures a range between 1 and 10. How It Works: 1. Install the extension. 2. Insert the appropriate keyword (e.g., [Style], [Class]) into the property name to enable enhancements. 3. Edit fields directly, and the extension will automatically enhance the input for better visualization and control. Grouping Collections Items: 1. Open your Collection settings 2. Edit any field 3. In the Help Text, add [Group=GROUP_ID] 4. Repeat on every field that should share the group, using the same GROUP_ID 5. Save the Collection Fields with matching IDs get bundled together. Use different IDs for different groups. Why Choose Webflow Input Enhancer? - 🚀 Streamline CSS Editing: Simplify complex property management. - 🕒 Save Time: Effortlessly navigate and edit multiple CSS properties. - ✅ Improve Accuracy: Ensure valid inputs with specialized field enhancements. - 🔍 Auto-Complete for CSS Styles and Class Names: Speed up your workflow with intelligent auto-completion for CSS properties and class names, making edits faster and reducing errors. Supercharge your component inputs and make your Webflow workflow smoother and more efficient with Webflow Input Enhancer!
ViDesigns Extension for Webflow
Create, share and upload Webflow components from the Webflow Designer Access your backups on any device with the same Google Account using Chrome Sync Storage!💪🏽 Enjoy all these fantastic features: 💜 Create and store components to expedite page creation. 🔎 Seamlessly search for components, saving you valuable time. 🚚 Export and share components with anyone for collaborative work. 🔺 Upload components effortlessly, expanding your library. 🗂 Folders - Organize your components for better accessibility. ⚙️ Backups - Never lose your components again. Automatic backups are taken once every week. Exciting upcoming features on the horizon: ⭐️ Favourites - Mark your go-to components for quick access. 🔗 Link components to code for a streamlined development process.
Relume Chrome Extension for Webflow
Boost your productivity in Webflow with the Relume Chrome Extension. ★ Access 1,000+ Webflow components from the Relume Library, right inside of Webflow designer. Copy components into your project with 1 click. ★ Class Sync enables you to sync Relume components with updated classes in the designer, preventing class duplication. When you turn on Class Sync and paste a component, the component will adapt to match the styles of your Webflow project. ★ Paste SVGs directly into your Webflow project, with Relume's free SVG to HTML embed converter. ★ Create and save components in your own private Relume Library. Share with with clients and your team. The Relume Library includes everything you need to start a Client-First Webflow project: ✓Navbars ✓Footers ✓Header sections ✓Feature sections ✓CTA sections ✓FAQ sections ✓Contact sections ✓Pricing sections ✓UI Elements (including Buttons, Accordions, Sliders, Dropdowns, Cards, Tabs & more) ✓Page Templates (including Home, About, Blog, Contact, Portfolio & more) Browse the full library online: https://library.relume.io/dashboard Don't waste time rebuilding layouts for every new project. Install the Relume Chrome Extension to access all of these components right inside Webflow. Some features require a Relume account or paid subscription. Find out more inside the extension or online: https://library.relume.io/pricing
Flowbase Chrome Extension
Unlock advanced features directly inside of the Webflow designer. Copy from thousands of components, free icon packs and much more! The Flowbase Chrome Extension unlocks powerful features directly inside your Webflow Designer. Instantly copy from thousands of components, wireframes, icons, and more—without ever leaving the Designer. ✓ 3,500+ components at your fingertips – Instantly copy and paste high-quality layouts like navigations, footers, headers, and more—without ever leaving the Webflow Designer. ✓ Thousands of SVG icons – Add icons in seconds and easily customize them using Webflow’s native color tools. Apply hover effects and color changes with complete control. ✓ Complete Webflow Wireframe System – Build faster and more consistently with a robust library of utility elements and wireframe components—designed to help you create clean, scalable websites with ease. Build better, build faster with Flowbase.
