Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
How-tos and best practices for working with the Umbraco backoffice as a content editor.
The editor’s manual is a detailed user guide aimed at Umbraco editors for step-by-step instructions on performing everyday tasks with Umbraco.
Umbraco is an information platform that allows you to quickly publish information onto a website without the need for any prior knowledge of web page editing. It is designed to be powerful and flexible enough to enable user's full control of their website content.
No special skills are required to create, publish, and manage web pages and related content with Umbraco. Any prior web page editing experience you may have might prove useful in terms of understanding what you want your website to do. Anything you can do using HTML can also be done in Umbraco.
The Umbraco platform can be utilized for all types of websites – from public websites to intranets and extranets, whether password-protected or not. It can even be used to manage multiple websites from a single Umbraco instance. Regardless of the type, authorization to edit them can be given to anybody you choose and as editing is done via a web browser, it can be done at any time and in any place.
Umbraco is designed to be intuitive and straightforward, so this manual aims to explain each step with clear instructions and help get you editing your website with ease.
Happy editing!
Showing you the ropes on getting started with Umbraco. A walkthrough on how to log in, create and publish content, working with pages.
How to use the Rich Text Editor.
How to compare versions and roll back different versions of content.
How to work with media, organize folders, and do image editing.
Providing a few tips and tricks on how to work with Content using Umbraco.
Umbraco HQ offers a training course that covers an overview of the Umbraco backoffice, workflows, and best practices for managing content and media. The course targets content editors, project managers, and decision-makers who want to understand how Umbraco works.
Explore the Umbraco Content Management Training Course to learn more about the topics covered and how it can enhance your Umbraco development skills.
In this section, you will find all the relevant topics to help you get started with Umbraco:
After logging in to an Umbraco project you will be presented with a dashboard containing a wide array of buttons and features. Let's quickly go through what each feature does.
By default, there are two dashboards available:
The Getting Started dashboard provides helpful information about Umbraco.
The Redirect URL Management dashboard displays the original and redirected links of the published pages which are moved to a new location in your project.
The Search bar allows you to search for the content in your entire project.
The Help icon provides different Help options such as Tours, Umbraco Learning Base YouTube videos, Umbraco Documentation, and your System Information.
The profile icon allows you to edit your profile, change the password, and Logout from the application.
The following sections are available in the backoffice:
Content - allows to manage your content.
Media - allows to manage images and other media files.
Settings - allows to handle your meta data such as document types.
Packages - allows to manage and install packages.
Users - allows to manage the users on the project. To learn more about users, see the Users article.
Members - allows to handle the members of the project. If you want to learn more about Members, see the Members article.
Forms - allows to create and manage your forms.
Translation - allows to manage dictionary items.
The menu list will differ depending on your permissions for the project. For example: if you are an editor, then you will only have access to Content, Media, and Forms as per the default settings.
The section tree is different depending on the section you are in.
In this example, you are looking at the content section. The section provides an overview of the nodes contained in the tree.
The Content tab allows you to create content nodes and manage your content tree. When you hover over the sections, it is highlighted with a darker color indicating that you are hovering over it. A button with three dots will show up, left-click or click the + icon to view additional options.
The Recycle Bin contains the deleted content and is available only in the Content and the Media section.
To access the Umbraco Backoffice:
Open your web browser and enter your website domain name followed by /umbraco (for example: http://www.company.com/umbraco/). A login screen appears.
Enter your Email and Password provided by your system administrator.
Click Login.
The address at which you access Umbraco may vary so check with your system administrator.
To log out of the Umbraco Backoffice:
Select the profile picture in the top-right of the screen.
Click Logout.
The Umbraco content tree view allows you to navigate web pages through a logical site hierarchy. You can find a page by navigating through the tree itself if you know where the page is stored.
A quicker way to search across all the content, files, or folders in Umbraco is to click the Magnifier icon in the top-right of the screen. Alternatively, you can use the keyboard shortcut CTRL + SPACE to access the Search bar.
Using the search bar, you can enter a search term and Umbraco will search for pages and media containing the term.
Move pages within the website through the tree view. Not all pages can be moved depending on your set-up or page permissions. If you need clarification, contact your system administrator.
You can move a page in two ways:
Go to Content.
Click ... next to the page you wish to move.
Select Move to.
A window appears on the right side of the screen. Here, you can choose where you want to move the page in the tree structure.
Click Move.
A confirmation message appears. Click OK to dismiss the confirmation message.
Go to Content.
Select the page you wish to move.
Click Actions in the top-right corner of the screen.
Select Move to from the Actions drop-down menu.
A window appears on the right side of the screen. Here, you can choose where you want to move the page in the tree structure.
Click Move.
A confirmation message appears. Click OK to dismiss the confirmation message.
When you are looking to edit content, locate the page you want to edit in the Content tree on the left-side of the screen.
To edit existing content, follow these steps:
Go to the Content section.
Select the page in the section tree you wish to edit. The content of the page is loaded in the right-side editor.
Edit the contents of the page.
Click Save to save the edits without publishing it.
Click Save and preview to preview the changes.
By default, you can view Page layouts in two ways:
List
When you enable Collection on a page, there will be no standard tree view for that page. Clicking on the parent page displays the child pages in a list.
Grid
To enable Collection:
Go to Settings.
Navigate to the Document Type you wish to configure as a Collection.
Go to the Structure tab.
Click Configure as a Collection in the Collections field.
Select List View - Content.
Click Save.
Click Save.
Additionally, you can sort the list items by the Name, Last Edited, and Updated By columns in either ascending or descending order.
The pages in Umbraco are placed in the tree structure according to a predefined sort order. The most recently created page is placed at the bottom of the tree structure. You can change the order of the pages by using the Sort function.
You can sort pages in two ways:
Go to Content.
Navigate to the parent node whose child nodes you wish to sort.
Click ... next to the page you wish to sort.
Select Sort children of.
A window appears on the right-side of the screen. Here, you can arrange the child nodes in the order you want by dragging them up or down.
Click Save and then Close.
Go to Content.
Select the parent node whose child nodes you wish to sort.
Click Actions in the top-right corner of the screen.
Select Sort children of from the Actions drop-down menu.
A window appears on the right-side of the screen. Here, you can arrange the child nodes in the order you want by dragging them up or down.
Click Save and then Close.
Click Save and publish to publish the changes. For more information, see the article.
You can switch between list and grid view by clicking the icon in the top-right of the screen:
If you have pages that are no longer required for your website, you can delete them. Upon deletion, the page is moved to the Recycle Bin and is not deleted permanently.
In case you wish to restore the page, you can restore them from the Recycle Bin. You also have the option to empty the Recycle Bin which permanently deletes all the items.
To delete a page:
Go to Content.
Click ... next to the page you wish to delete.
Select Trash.
Alternatively, click Actions in the top-right corner of the screen and select Trash.
A window appears confirming if you want to delete the page.
Click OK.
A confirmation message appears. Click OK to dismiss the confirmation message.
The Recycle Bin is a separate tree list which can be found at the bottom of the section tree view. Clicking the arrow to the left of the Recycle Bin icon will reveal any pages that have been deleted from the website.
To restore deleted pages from the Recycle Bin:
Click ••• next to the page in the Recycle Bin and select Restore.
You can also click Actions in the top-right corner of the screen and select Restore.
A window appears confirming if you want to restore the page.
Click Restore.
A confirmation message appears. Click OK to dismiss the confirmation message.
To display the page on the website, click Save and publish.
If you are confident you no longer require any pages in the Recycle Bin, you can permanently delete it. You can delete pages one by one or empty the Recycle Bin in one go.
After deleting the pages from the Recycle Bin, you will not be able to retrieve any data associated with that page.
To empty the Recycle Bin:
Click ••• next to the Recycle Bin and select Empty recycle bin.
A message appears confirming if you want to empty the recycle bin.
Click OK.
To delete individual pages from the Recycle Bin:
Click ••• next to the page from the Recycle Bin and select Delete.
You can also click Actions in the top-right corner of the screen and select Delete.
A message appears confirming if you want to delete the page.
Click OK.
A confirmation message appears. Click OK to dismiss the confirmation message.
The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You can select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
The functionality varies depending on how the editor is set up. Here, we describe the default editor with all the options enabled. Contact your system administrator for details regarding your editor.
By default, the following editor buttons are available. Your system administrator can determine which buttons are displayed in different templates. You therefore might have access to more or fewer buttons than those shown here.
The Rich Text Editor is like any other word-processing program. You write the text and the text wraps around when the line reaches the end. Use the following keyboard shortcuts in the editor to add:
Space between paragraphs - press ENTER.
Line breaks - press SHIFT + ENTER.
To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:
We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the TinyMCE Documentation.
If you are proficient in HTML, you can switch to HTML mode to create your page. You can also check the code and make minor adjustments to get the page exactly as you want.
Certain elements such as scripts are not recognized by the HTML view of the Rich Text Editor. You can enter the scripts directly in the text view of the editor.
You can apply formatting via the Formats drop-down list. The Formats drop-down list provides predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
These styles incorporate advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings, and sub-headings. For example, you can use a format style to change a link into a call-to-action button.
To apply pre-defined styles:
Select the text you want to apply the style.
Choose the style from the Format drop-down list.
For more information on how to create the Styles, see the Rich Text Editor Styles article.
You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
The most familiar way to control formatting is by using the formatting buttons. With these buttons, you can apply basic formatting such as Bold, Italic, aligning text, creating bulleted and numbered lists, and applying indents.
To apply a format using the formatting buttons:
Select the text you want to apply the formatting.
Click the desired format button.
When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.
While pasting content, the original text styles are preserved which can lead to different font faces, sizes, and colors displaying on the website when viewed.
To prevent formatting issues, we recommended pasting the content first into a markdown editor such as Notepad, then copying and pasting it into your Rich Text Editor.
If you have already formatted a paragraph or selection using the formatting buttons, you can remove the formatting rule.
To remove formatting:
Select the text you want to remove the style from.
Click the relevant formatting button to remove the formatting rule.
You can also add a Remove format button in your toolbar. To add the Remove format button:
Navigate to your Rich Text Editor in the Document Type.
Click the cog wheel.
Click Edit next to the Rich Text Editor Data Type.
Select Remove format under the Toolbar Configuration.
Click Submit.
Click Save.
The Insert/Edit Link button is used to add or update links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.
To insert different types of hyperlinks, follow these steps:
To display images on a page the images must be uploaded to your Umbraco media library.
Many administrators set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your administrators have setup. Check with your system administrator for more information about this.
Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the Table button in the Rich Text Editor toolbar.
Clicking on Table Properties gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
The Rich Text Editor in Umbraco can be configured in many different ways.
For more information, see the Rich Text Editor Configuration article.
In this section, you will get an overview of how to create and save pages. You will also learn more about how to publish and unpublish your content, as well as how you can compare content between multiple environments. Finally, you will also get an introduction to how you can transfer your created content to another environment.
Select the parent page to create your new page. The parent page can be the home page or any of the sub-pages of the site.
If the parent page allows sub-pages underneath it, follow these steps:
Hover over the name of the parent page in the Content section and click ••• to view the types of pages you can create.
Select the page type you wish to create. The new page is loaded in the editor on the right-hand side.
Enter a Name for the page and click Save.
There are three different options for saving and publishing pages. The options vary depending on whether you’re still in the process of editing the page or have completed your edits and wish to publish your changes.
The Save and preview button allows you to save your changes and preview it before publishing the changes to the live site. The Preview feature shows you how the page will look once it is published. This Save and preview feature only saves your page and does not publish your contents to the live site.
The Save button is used for saving the page without publishing the changes to the live site. The Save feature is especially useful if you are working on changes over a period of time as you can save your changes frequently to prevent losing any data.
The Save and publish button is used to publish a previously saved page to the live website or to publish a page without previewing it. The Save and publish feature will save and publish the page to your live website.
The Save and publish button has three options:
The Schedule button allows you to set a time and a date for when your page should be published. With this option, you can continue working on your edits and the site will automatically be published at the time and date it was scheduled to.
To set up scheduled publishing, follow these steps:
Navigate to the page you want to publish.
Select the arrow next to the Save and Publish button.
Select Schedule.
In the Scheduled Publishing window, set the date and time in the Publish at field.
Select Schedule.
The Publish with descendants button allows you to publish the current page and all the content linked to this page to the live site. Using this option, you can publish the current parent page and it's child nodes, previously published, and unpublished content items.
To publish the node with descendants, follow these steps:
Navigate to the page you want to publish.
Select the arrow next to the Save and Publish button.
Select Publish with descendants.
Toggle the option to Include unpublished content items if you wish to. This option includes all unpublished content items for the selected page and the available linked pages.
The Unpublish button allows you to unpublish a page if you do not want a page to be publicly visible and do not want to delete it.
To unpublish a page, follow these steps:
Navigate to the page you want to unpublish.
Select the arrow next to the Save and Publish button.
Select Unpublish.
You can also unpublish your page by setting the date and time using the Schedule feature.
To set up scheduled unpublishing, follow these steps:
Navigate to the page you want to unpublish.
Select the arrow next to the Save and Publish button.
Select Schedule.
In the Scheduled Publishing window, set the date and time in the Unpublish at field.
Select Schedule.
Compare content is available in all Umbraco Cloud projects running the latest version of Umbraco Deploy for Umbraco versions 8 and 9.
Compare Content allows previewing content changes before transferring them to another environment. This is helpful to ensure that the correct updates are transferred when working with content in multiple environments.
You can see the Summary Information and Field Comparison values to understand what will change if you proceed to transfer the content to a higher environment or try restoring content to the current environment.
To compare content between environments, follow these steps:
Navigate to the page you want to compare.
Select the arrow next to the Save and Publish button. Alternatively, you can click the Actions drop-down.
Select Compare to open the Compare window.
Choose the workspace from the drop-down field.
View the Summary information.
In the Field Comparison table, view the differences between the versions in the two workspaces at the node level of each field.
Proceed to transfer the content using the Queue for transfer or Transfer now options.
Restore the content from the higher environment using the Partial restore option.
Click Close to continue editing the content node.
Transfer now is available in all Umbraco Cloud projects running the latest version of Umbraco Deploy for Umbraco versions 8 and 9.
You can transfer a specific content node directly to the higher environment without adding it to the Queue for transfer.
To transfer content between environments, follow these steps:
Navigate to the page you want to transfer.
Select the arrow next to the Save and Publish button.
Select Transfer now.
In the Transfer now window, a message is displayed that you are about to transfer the content node directly to the higher environment, without adding it to the queue.
Click Transfer now.
Re-use a page or a tree structure you have previously created by copying the parent page and its child pages to a different section within the site structure.
When you copy a parent page all of its child pages are also copied, by default. You can choose if you want to copy the child pages or not. You can also choose whether the links should be automatically updated or continue to link to the original pages.
You can copy a page in two ways:
Go to Content.
Click ... next to the page you wish to copy.
Select Duplicate to.
A window appears on the right side of the screen. Here, you can choose where you want to copy the page in the tree structure.
Toggle Relate to original button if you want to keep the links linked to the original page.
Toggle Include descendants if you want to copy the child pages alongside the parent page.
Click Duplicate.
A confirmation message appears. Click OK to dismiss the confirmation message.
Go to Content.
Select the page you wish to copy.
Click Actions in the top-right corner of the screen.
Select Duplicate to from the Actions drop-down menu.
A window appears on the right side of the screen. Here, you can choose where you want to copy the page in the tree structure.
Toggle Relate to original button if you want to keep the links linked to the original page.
Toggle Include descendants if you want to copy the child pages alongside the parent page.
Click Copy.
A confirmation message appears. Click OK to dismiss the confirmation message.
When you select Relate to original, Umbraco will create a relationship between the original and copied page. This relationship can be used to programmatically link the pages - For example, linking two pages in a multilingual setup. This relationship does not sync the content between the original and copied page.
You have the opportunity to access and re-publish older versions, if necessary.
To rollback to a previous version of the page:
Navigate to the page whose versions you wish to view.
Go to the Info tab.
Click on the Rollback button in the History section.
The Rollback window opens. Select a version of the page you wish to Rollback to.
Click Rollback to proceed with the changes. Your content has now been rolled back to the selected version of the page and is saved as a Draft version.
To publish the draft version, click Save and publish.
You will never lose changes on a page because all the old versions of the page are saved in History.
To compare a page on the site with its previous versions:
Navigate to the page whose versions you wish to view.
Go to the Info tab.
Click on the Rollback button in the History section.
The Rollback window opens. Select a version you wish to compare with.
After selecting the version, a comparison of the current page with the version you selected is displayed. The text highlighted in red and striked-out will not appear in the selected version and the text highlighted in green means the text that will be added, should you choose to rollback to that version of the page.
Umbraco provides the tools for organizing and uploading the Media. In this section, you can find information on how to work with different media types, organise folders, and edit images:
Umbraco allows you to work with multiple versions of the same page. All previously saved pages are stored in a version history list. In this section, you will find information on how to compare versions or roll back different versions of content:
| Shortcut | Action |
|---|---|
Ctrl + A
Select all
Ctrl + B
Bold
Ctrl + C
Copy
Ctrl + I
Italic
Ctrl + U
Underline
Ctrl + V
Paste
Ctrl + X
Cut
Ctrl + Y
Redo
Ctrl + Z
Undo
This section provides a few handy tips to work with your Content using Umbraco:
Umbraco is set up to automatically log a user out if they have been inactive for over 20 minutes. Don't worry if you are logged out of Umbraco. Log back in using your credentials and continue editing.
The following default Media Types are available:
Article - Used for uploading and storing documents.
Audio - used for uploading and storing digital audio files.
File - used for uploading and storing different types of files in the Media section.
Folder - a container for organizing media items in the media tree.
Image - used for uploading and storing images.
Vector Graphics (SVG) - used for uploading and storing Scalable Vector Graphics files which are text files containing source code to draw the desired image.
Video - used for uploading and storing video files.
In the Media Library, there are multiple ways to upload media items. The two most commonly used ones are:
Use the Create button to create a new media item and then upload directly from your machine.
The ... next to the Media tree in the Media section.
We recommend using folders to organize your media items if you are going to add a lot of media to your website.
If you wish to tidy up the Media section of your site, you can delete existing media items. Once you have deleted a media item, it is sent to the Recycle Bin. If you change your mind, you can restore the deleted media item from the Recycle Bin.
To delete a Media Item:
Select the media item you want to delete.
Click ... and select Trash.
Click Trash.
The Recycle Bin is a separate tree structure within the Media section. Clicking on the arrow next to the Recycle Bin will display its contents.
To restore a Media Item:
Click ••• next to the Media Item.
Select Restore.
Click Restore.
To move Media Items within the Media section:
Select the Media Item you want to move.
Click ... next to the Media Item and click Move.
Choose the location where you want to move the Media Item to in the tree structure.
Click Move.
Click OK to dismiss the confirmation message.
If your system administrator has set up cropping for your images, you will see a similar interface when you edit your images:
The circle in the middle of the image is the default focal point. The focal point defines the primary area or focus of the image which will be the center point of any image re-sizing. You can move the focal point by clicking and dragging it to the desired part of the image.
Next to the image, you may see specific crops of the image depending on your setup. In the above example, you can see that 2 crops have been set-up. To add or update the image crops, see Adding properties section in the Creating media article.
To manually alter the pre-defined crops:
Select one of the crops - you will see an enlarged version of the crop.
Drag the image around and zoom in or out until you have the desired result.
Once you are happy with your changes, click Done to save the changes.
If you wish to reset the crop to default view, click Reset crop.
Once you have finished editing the crops, click Save and close.
You can set up notifications to receive an email when an action is performed on a given content item. To receive notifications, you need to add your email address to your user profile.
To set up notifications for a content item:
Click ... next to the page or select the page and click Actions in the top-right corner of the screen.
Choose Notifications.
Check the actions in which you are interested and you will receive notifications each time the given action occurs.
Click Save.
The notification settings apply to the chosen content item as well as any child items that appear below the item in the content tree.
If the notifications option does not appear, the SMTP settings are probably incorrect. In this case please contact the administrator of your website.
When editing content, the content tree will refresh itself when the content is saved.
If the tree does not refresh or if multiple editors are working on the site, and you want to have their changes loaded into your content tree - you can do so by reloading parts of the content tree.
To reload a section of the content tree:
Click ... next to an item in the tree.
Choose Reload. The parent and child nodes are now reloaded and will reflect any new changes.
Within the Info content app for pages you can find the Audit Trail in the History section. Here, you can get a quick overview of the actions performed on that node, by whom, when and any additional comments.
The Audit Trail is useful to find out who made changes on a certain date.
To view the audit trail:
Go to the Content section.
Navigate to the page you wish to see the audit trail.
Go to the Info tab.
When viewing page content in preview mode you have the option to scale the preview window to various device sizes:
Once you have finished editing the page content, click Save and preview.
Select Fit browser to view the different preview modes.
Select the device you would like to scale the preview pane to.
All media within your site must be loaded in the Media section. The Media section is a media library for the site. Within the Media section, you can create or organize files and folders as in a File Explorer.
Folders help organize the Media section and keep similar media items in a logical structure. We recommend using folders to organize your media items. When your media library starts growing, folders help in locating media quickly and easily.
To create a folder:
Go to the Media section.
Click on ••• next to Media.
Click Create.
Select Folder.
Enter a Name for your folder.
Click Save.
Folders are only used for sorting media items within the media section. Folders will not be part of the image URL nor be created on the server with the given name.
To edit an existing folder:
Select the folder you want to edit from the Media tree.
Edit the title at the top of the page.
Click Create to add another media type. Alternatively, click on Actions > Create.
Click Save.
If you wish to tidy up the Media section of your site, you can delete existing folders. Once you have deleted a folder, it is sent to the Recycle Bin. If you change your mind, you can restore the deleted folder from the Recycle Bin.
To delete a folder:
Select the folder you want to delete.
Click ... and select Trash.
Click OK.
The contents of the folder are also moved to the Recycle Bin. You can restore items from the Recycle Bin in the same way as in the Content section.
The Recycle Bin is a separate tree structure within the Media tree. Clicking on the arrow next to the Recycle Bin will display its contents.
To restore a Folder:
Click ••• next to the Folder.
Select Restore.
Click Restore.
To move Folders within the Media section:
Click ••• next to the folder.
Select Move.
Choose the location where you want to move the folder to in the tree structure.
Click Move.
Click OK to dismiss the confirmation message.
Media items in Umbraco are sorted in the tree view according to a predefined sort order. The item that has been created most recently is placed at the bottom of the tree structure.
To sort the order of the items in a folder:
Click ... next to the folder you want to sort.
Select Sort.
Drag the folders, images and files into the required order. Alternatively, click on the Name or Creation Date column header to sort the items in ascending or descending order. Clicking on a column header again reverses the sort order.
Click Save.
