The Page Editor

This guide introduces the anatomy of the Umbraco 17+ editing interface. It helps beginners move beyond just "typing in a box" to understanding the powerful tabs and bars that surround your content. You’ll gain the basics of navigating the workspace, from the Content Tree on the left to the Publishing Actions at the bottom.

Tabs: Your Content Folders

In Umbraco 17+, information is organized into Tabs (located at the top of the editor). While every site is unique, you will typically see:

  • Content: Where you edit your main headings, text, and images.

  • Navigation: Settings to hide the page from menus or change the "NaviHide" status.

  • SEO: Fields for Meta Titles and Descriptions to help you rank on Google.

  • Info: The "behind-the-scenes" area where you can see the page's URL, history, and status.

The Breadcrumb & Action Bar

At the very top of the editor, you’ll see the Breadcrumb path (e.g., Home > Services > Web Design). This helps you stay oriented so you never get lost in a large site. On the far right, you’ll find the Preview button—your best friend for checking your work before the public sees it.

[Image showing the Umbraco 17 editor layout with labels for Tabs, Property Editors, and the Save/Publish bar]

Watch: Navigating the Umbraco 17+ Backoffice Interface

Blank placeholder image

This video provides a tour of the workspace, showing how to switch between tabs and use the new management features in version 17.

Other Related Tutorials

Key Areas of the Page Editor

  • Properties: These are the individual fields (like a "Textstring" or "Media Picker") where you enter data.

  • The Content Tree: The left-hand sidebar that lets you switch between different pages instantly.

  • The Bottom Bar: This houses your Save, Save and Publish, and Action (arrow) buttons.

  • Validation: If you try to save but a required field is empty, the editor will highlight the tab and field in red to show you exactly what needs fixing.

Pro-Tip: If you find yourself scrolling for a long time on a single page, look at the top of the editor. You can click the Tab names to jump straight to specific sections like "SEO" or "Social Links" without scrolling at all!

Where Next?

Now that you’ve mastered the Page Editor’s interface and layout, why not bring your content to life with visuals? Your next step is to explore "Insert Image".