Getting started with website editing in the Umbraco backoffice is super easy and very intuitive with a great WYSIWIG editor, lots of time-saving tricks and flexibility to always generate interesting and effective design layouts.
Here's our introduction to getting started with editing our Umbraco websites.
Use your email and provided password to Access the backoffice.
The usual link to login is: [yournormalwebaddress]/admin
Notes: this could be a staging area which will update when the site goes live. Some companies have other authentication processes so if this does not work for you contact us or your IT.
Website pages are accessed in the content tree on the left. Expand (click on arrows) to see all sections and sub-pages. Unpublished pages are shown in light grey.
Click on any page title and the right hand pane will update to show the selected page or section. Each page is made up of Layouts or pre-designed Sections which can all be edited. Scroll down to see the whole page. Click on the pen icon to edit (seen on rollover). Tip: you can copy/paste whole Layouts or section to use in more than one place.
Adding new Layouts and Sections is done by clicking the plus symbol (seen on rollover). The range of options will display on the right hand side.
The Layouts then have further content block options which show up in the same way. You can select any option and also drag & drop them to change the order. You can also delete anything by clicking on the bin icon.
If you are pasting a copied Section or Layout, click on the Clipboard icon top right.
When adding new text, if you are pasting copied text, make sure you control click to ‘Paste to match style’. This just ensures you don’t inject any unwanted code from eg. another site or Word doc. If it does not look right, you can clear the formatting as shown.
On each Layout, Section or Content Block the cog icon controls the setting for each where there are options for Design, Layout and Effects.
The Resources page type manages its content (eg. news articles and PDFs) in a list format as shown. There is also a handy search (top right) to help you find content quickly if necessary.
To add a Resource item, click on the Create button as shown and select a blank or template news page. You can create as many template pages as you need.
All non-text assets such as images, graphics and PDFs are stored centrally in the Media section which is accessed in the top dark nav bar. Media should be kept tidy to avoid future lag in the CMS. Use as many folder structures as you need to. It is best practice to upload to the Media folder before adding in the Content section.
Make sure that naming is helpful to other editors so be clear and descriptive about what the media is. This also helps when using the search function. You update assets centrally which means it replaces in all instances where it appears on the website in one go.
Below the content pages in the content tree on the left hand section of your screen, are site-wide settings. This includes logo, contact details, footer and scripts (such as Google Analytics). Click on any of the tabs to create or edit details or paste in your scripts.
Above Settings there are centralised content such as People and Filters.
For each web page you can define SEO settings such as Meta Data. Click on the SEO tab as shown for the page you want to update and fill in as required.
On the Sharing tab you can define what is shown if the page is shared on social media.
The Options tab allows you to hide the page in the navigation (but still make it visible for search and direct URL links).
When you are finished editing the site, you log out by clicking top right and then selecting the red button bottom right. Here you also update your password and edit your profile.
You will be automatically logged out if you stop using Umbraco for a period of time (for security reasons) so save your changes regularly until you are ready to publish.
