What are the main changes that have been made to the Webflow selector UI?

Published on
September 22, 2023

The Webflow selector UI has undergone several changes to improve user experience and streamline the process of selecting elements on the designer canvas. Some of the main changes include:

  1. New UI layout: The selector UI has been redesigned with a new layout that makes it easier to navigate and understand. The new design features a collapsible sidebar menu that organizes the different selector options into categories, such as class names, tags, and nested elements.

  2. Quick access to commonly used options: The updated selector UI provides quick access to frequently used options right at the top of the sidebar. This allows users to easily target elements by class, ID, or tag without having to navigate through different sections of the UI.

  3. Context-aware suggestions: Webflow now offers context-aware suggestions as users type in the selector field. This feature helps users select the correct element by providing options based on the elements present on the canvas.

  4. Improved class name selection: Selecting class names has become more intuitive and efficient. Users can now simply start typing the desired class name and Webflow will suggest existing class names or allow them to create new ones.

  5. Advanced targeting options: Webflow has added advanced targeting options to enhance the selector capabilities. Users can now target elements based on their parent-child relationship or their position in the hierarchy.

  6. Real-time element highlighting: The selector UI now provides real-time element highlighting on the canvas. As users hover over different selector options, the corresponding elements are highlighted, making it easier to visualize and select the desired elements.

These updates to the Webflow selector UI have greatly improved the usability and efficiency of the platform, allowing users to more effectively select and style elements on the designer canvas.

Additional questions:

  1. How can I target elements based on their position in the hierarchy in Webflow?
  2. Does Webflow provide suggestions for class names?
  3. What is the purpose of the collapsible sidebar menu in the Webflow selector UI?