📔Dynamic DOM Navigation

Easily explore and interact with your Webflow project's structure using the DOM Navigator. Select elements, manage attributes, and stay synced with real-time updates for efficient project management.

Overview

  • Seamlessly convert raw HTML to Webflow elements.

  • Ensure HTML content is preserved and compatible.

Steps

  • Open AttriFlow in your Webflow project.

  • The DOM Tree Navigator appears on the left panel, displaying the hierarchical structure of your project.

  • Single Element: Click on any element in the tree to select it.

  • Multiple Elements: Use Ctrl+Click to select multiple elements simultaneously.

  • Enter Components: Double-click on a component in the tree to dive into its structure.

  • Exit Components: Click the Back to Parent button to return to the main structure.

  • Use the Expand All or Collapse All icons to control the visibility of child elements in the DOM tree.

  • Manual Refresh: Click the Refresh DOM icon to reload the tree instantly.

Last updated