Preview the New Layout section controls
We’re enhancing the Style panel’s layout controls to elevate your design experience. Our goal is to streamline design workflows, simplify decision-making, and improve the overall experience for both new and seasoned Webflow users.
Starting March 4th, we’ll begin the progressive rollout of our new layout controls, ensuring a smooth transition for all our customers. We’re excited for you to experience these enhancements and we invite you to explore this post for insights into the changes, their motivations, and how they’ll positively affect your workflow. For a detailed overview and to make the most of these updates, please connect with your customer success manager.
Navigation
Overall, Layout section updates focus on making navigation and usability more intuitive. We’ve simplified complex ideas like flex and grid, using clear text labels and straightforward icons for directions like left and right. Although these updates don’t introduce new functionalities to Webflow, they facilitate the discovery and application of best practices. The new Layout section streamlines access to Webflow’s features, simplifying the learning process and empowering users to design with greater efficiency.
Display
Our research shows that text labels more effectively communicate concepts like block, flex, and grid compared to icons, making them preferred choices for display controls.Additionally, we placed the most impactful options centrally for easy access, and moved additional options to a dropdown menu. This approach aims to lessen the cognitive burden on visual developers, putting primary display options front and center and promoting the exploration of more specific controls through the dropdown.
Flex
We’ve introduced the align box and X and Y axis controls to improve the design experience for a diverse range of customers — from those with design backgrounds to developers seeking precise control.
The align box, a familiar pattern for designers, offers a visual method for quickly setting the alignment of flex and grid children. Meanwhile, the X/Y controls provide detailed options for more seasoned developers, allowing for explicit alignment along the main axis and the cross axis. This dual approach ensures that all users, regardless of their background, can efficiently utilize flexbox’s capabilities to achieve their desired layout with precision and ease.
Grid
We’ve refined Webflow’s grid layout options for enhanced design flexibility, transitioning from a comprehensive configuration panel overlay into a streamlined, user-friendly workflow in the Style panel.
Now, when users choose the grid option, they’re greeted with a simplified interface for setting rows, columns, direction, and alignment. This evolution in the UI design maintains the depth of customization Webflow is known for while aligning more closely with the intuitive experience of other styling features.
Gap
The Style panel’s layout controls now have a refined gap control, featuring a linear slider and manual input entry for enhanced spacing adjustments in both flex and grid layouts. The slider for gap styling offers more control over the spacing between elements with real-time visual feedback, reducing the time spent on layout refinements and offering a finer grain on design execution.
Learn more on Webflow University
Mark your calendars! The rollout of our new layout controls begins on March 4th, offering you an even better experience.
Discover a world of resources at Webflow University, featuring detailed guides, video tutorials, and practical tips for building responsive web layouts with the new controls. For this launch, we’re excited to introduce a new learning experience.
Dive into Layout Land, an interactive learning adventure that makes building web layouts both fun and informative. Layout Land is full of engaging interactive lessons and projects that bring the power of Webflow’s layout controls to life.
With multiple ways to learn, the date saved on your calendar, and a dedicated customer success manager ready to assist with any questions, we hope to make the transition as smooth as possible for you.
With this launch, we’re pushing the boundaries of approachable web design and power, supporting creators at every skill level. Explore Webflow’s enhanced Style panel and unlock your creative potential with the new layout controls.
