.png)
.png)
.jpeg)
.png)
.png)
Keep Sections Ordered in Elementor
- Open your WordPress dashboard, navigate to the page you want to edit, and click Edit with Elementor.
- In the Elementor editor, open the Navigator (right-click anywhere → Navigator, or click the Navigator icon at the bottom panel).
- Review the list of Sections in the Navigator. These appear as top-level items and represent the reading order of your page.
- Drag each section up or down in the Navigator until the structure follows a logical top-to-bottom sequence:
- Hero/header section first,
- Main content sections next in meaningful order,
- Footer section last.
- Click on a section in the Navigator to highlight it on the canvas, then open the Advanced tab in the left panel.
- Assign an informative CSS ID or CSS Class (optional but helpful) such as “about-section” or “services-section” to support navigation and assistive tools.
- Check headings inside each section:
- Ensure the section begins with an H2 (or the next appropriate heading level).
- Use H3–H4 for nested content within the same section.
- Avoid multiple H1s—keep one H1 at the top of the page.
- Ensure sections are not unintentionally nested:
- In the Navigator, each top-level section should sit directly under the page node.
- If a section appears inside another, drag it back to the top level.
- Check for layout confusion caused by columns or inner sections:
- Inner Sections belong inside a Section, but should not replace main Sections.
- If an Inner Section is being used as a main content block, convert it to a full Section by adding a new Section and moving widgets into it.
- Switch to Tablet and Mobile responsive modes using the bottom toolbar.
- Scroll through the mobile view to confirm the visual order still matches the Navigator order. If something appears out of order visually, reorder or adjust padding/margins to maintain clarity.
- Click Update to save changes, then preview the page and scroll from top to bottom to ensure the content sequence is predictable and logical.
