This guide takes you through the step-by-step process of launching a new layout-driven page. It helps beginners move beyond basic templates to create a truly bespoke user experience. You’ll learn how to initialize a page that supports the Block Grid Editor, allowing you to drag, drop, and resize content sections with ease.
Choosing the Right Page Type
Not every page in Umbraco 17+ is a Grid page. To use these advanced features, you must select a "Document Type" that has been configured with a Grid property. In most uSkinned or standard setups, this is often called an "Advanced Page," "Modular Page," or simply "Grid Page." Choosing this foundation is the first step toward total design freedom.
The Initial Canvas
When you first create a new Grid page, you will be met with a blank canvas and a plus (+) icon. This is your starting point. You won't see a standard text editor here; instead, you are prompted to add your first Layout Section. This separation ensures that your content is always wrapped in a responsive container that looks great on mobile, tablet, and desktop.
[Image showing the "Create" dialog selecting an Advanced/Grid Page type]
Watch: Umbraco 17 - Creating a Page with the Block Grid
This video demonstrates selecting the correct page type and adding your first structural rows to the grid.
Other Related Tutorials
-
[Tutorial] Setting Up a Block Grid Page (Official Docs)
-
[Tutorial] Understanding Grid Layouts and Areas
-
[Tutorial] uSkinned: Using the Advanced Page Template
-
[Tutorial] Best Practices for Responsive Grid Design
Action Steps to Create Your First Grid Page
-
Open the Create Menu: Right-click your "Home" page in the Content Tree and select Create.
-
Select the Grid Page Type: Look for "Advanced Page" or "Grid Page". (Note: If you don't see this, it may not be "allowed" under your Home page settings).
-
Name Your Page: Enter a title at the top (e.g., "Our Services").
-
Add a Layout Section: Click the (+) button in the grid area. Choose a layout like "Full Width" or "Two Column."
-
Add Your First Block: Click the (+) inside the section you just created and select a content block like "Banner" or "Rich Text".
-
Save and Publish: Click the button at the bottom right to make your new layout live.
Pro-Tip: Before you hit "Publish," use the Preview button at the top of the editor. This allows you to see the actual layout on your site's frontend without the backoffice grid lines getting in the way!