Umbraco - Content Editing
Umbraco is the friendliest CMS. Content editors to developers, it creates raving fans. It's grid structure gives endless options to creating layouts of varying content on your website.
Transcript
Hi this is Jordan from ipso Creative and in this video we will be exploring the content editing experience in Umbraco 8. Now every website is built differently, so some aspects of the editing experience may vary slightly. So the goal of this video is to give you a basic understanding of an Umbraco editing experience and examples of how it can be leveraged. We’re gonna take a look at the Umbraco grid editor, the built in SEO fields, styling and formatting options, and how to manage page settings. Let’s dive in.
Taking a look at our content tree we can tell the different content types apart by the icons used. Often times a blank page like this is used to represent a basic content page. So let’s click into the About Us page to see what a typical editing experience is like in Umbraco. Once loaded, you’ll see there are 2 title fields at the top. The first field is used to name the page within Umbraco. It is also used to define the url. The second field is for the actual Page Title which is used for search engine results, and can also be used as the H1 heading title for your content page depending on how your site is set up.
This next section is the main content or body section. This is what's called the Grid Editor. It is built using a varying combination of columns and rows. It is similar to other CMS block editors such as the new Wordpress editor called Gutenberg. However, there are several unique features to Umbraco’s grid editor. Let’s check it out.
To add a new row of content click the plus sign. Here you can see we have six different types of content rows we can to our page. Umbraco is built using a 12 column grid system. So you can create all sorts of different combinations of columns per row to use in your grid editor. Once you’ve chosen your row, you can begin to add content within each column.
Click Add content, and you’ll see all the different content elements you can add to your page. The Rich text editor is a common element used to add paragraph text, headings, and buttons. However, You can also add headings as their own content element. Adding imagery is incredibly intuitive and efficient with Umbraco. It pulls up a side panel with your entire media library where you can browse your folders, create new ones, and upload new media.
Another content element that is commonly used are macros. Macros are often created for reusable content elements that are used in multiple places throughout your site. Such as a featured product display, a recent blog posts listing, or a contact form. Macros make it easy for developers to create various kinds of customizable content elements.
One of the other powerful features of Umbraco is the ability to add individual styles to grid rows and columns. Let's take a look at another website to see some examples of custom formatting settings. If you click on the row you will see a gear icon, that opens up the row settings & styles. Developers can create classes that can be added to the grid editor, such as:
* Hide on...
* Set an anchor tag id for anchor links
* Make a row full width on the page
* Adding padding to the top and bottom separately
* Background Video
* Background Image, colors
* Change the text color for an entire row
* Define behavior for background images and more
And what’s great is you can apply most of these settings to individual columns as well.
The row and column settings are an excellent example of the flexible and easily customizable nature of Umbraco.
If we scroll down to the bottom of the page, below the grid editor, we find the SEO fields. We have a Meta description field and keywords field. And remember, our page title field is located at the top of the page.
Once you are done editing your page, you have the option to preview your changes, “Save” your changes as a draft without publishing them, or you can “Save and Publish” your page. You can also schedule your page to be published at a set date and time. Publish this page and all its child pages, or Unpublish this page.
Clicking “Actions” in the top right corner of your page displays a list of actions that can be taken. These actions are also displayed by right-clicking on a page in the content tree. You can create a new items, such as a content page, underneath of the existing item. You can delete, move or copy this page, create a content template based off of the content and layout of the current page, sort the child pages that belong to this page, and more.
The Info tab provides varying information about the page. Here you can find the url, the audit history, and other identifying information. One very important feature found on the info tab is the Rollback setting. This feature allows you to revert your page to an earlier saved version, which is quite helpful when it comes to managing content on the web.
And that is an overview of a content editing experience in Umbraco 8. Hopefully, it was helpful to see how the grid editor allows a user to intuitively build out dynamic content pages, easily manage SEO information, and navigate page settings. Check out the description for links to other helpful videos on Umbraco, and thanks for watching.