Element hierarchy WordPress document view
Accessing document view
- Opening document view:
- Locate the Document View icon in the top Toolbar of your WordPress dashboard.
- Click on the icon to open the Document View. This view acts like a table of contents for your page, making it easier to manage your layout.
- To close the Document View, click the icon again or click the 'X'.
Navigating and managing blocks:
- Selecting and editing blocks: Click on a block's name in the Document View to select and edit it directly.
- Expanding/collapsing blocks: Use the arrows next to block names to expand and collapse nested blocks, such as groups or columns. This helps visualize the hierarchy of your content.
- Block options: Click on the three dots on the right of a block in the list to access options like duplicate, delete, or add blocks before or after the selected block.
Working with nested blocks
- Adding nested blocks: Imagine adding a container block; inside, you'll see a row (child element) and then columns within the row (grandchildren). You can further add blocks like text or images inside the columns.
- Viewing nesting hierarchy: Each child element in the Document View is slightly indented to show the nesting hierarchy clearly.
Breadcrumbs and sibling blocks
- Breadcrumbs: Hover over a block to see its parent elements in the breadcrumbs at the bottom. Clicking a block highlights its parent chain in the breadcrumbs.
- Sibling blocks: Blocks added next to each other, like an image and text block in the same column, are considered siblings. They share the same parent (the column) but are not directly nested within each other.
Styling with Maxi Blocks
Accessing Maxi Blocks:
- Click on the Maxi icon on the main toolbar.
- Next, click on the 'Style Cards' button. This is where you can adjust all the visual aspects of the site's components.
Customizing style cards:
- If this is your first time customizing, click on the 'Customize Card' button and give your style card a name. This ensures you have a backup of the original style card in case you need to revert.
- You can overwrite the parent style in the child block settings.
Conclusion
The Document View is a powerful tool for managing complex layouts, navigating content, and customizing individual blocks in WordPress. By understanding child elements, nesting, and styling options, you can create well-organized and visually appealing content.
Useful links