Umbraco User Guide Page 1 of 19 Contents Introduction ...................................................................................................................................... 3 Minimum requirements .................................................................................................................... 3 Logging in to Umbraco ..................................................................................................................... 4 Getting to know the Umbraco backend ............................................................................................ 5 How to add a text page .................................................................................................................... 6 How to use Meta and Properties ...................................................................................................... 6 How to insert a hyperlink to a page .................................................................................................. 7 How to insert an image to a page .................................................................................................... 7 How to add media to your library ..................................................................................................... 8 How to move or delete content items ............................................................................................... 8 How to embed a video ..................................................................................................................... 9 How to restore an item from the Recycle Bin ................................................................................. 10 How to create a Gallery ................................................................................................................. 10 Saving and Publishing ................................................................................................................... 11
Further Information ........................................................................................................................ 19
Document History: Date Version Reasons for changes Updated By
24/06/2015 1.0 Created document Kyle Gregory
Umbraco User Guide Page 3 of 19
Introduction
This guide describes how you can keep your website updated using Umbraco. Umbraco is an information platform that allows you to quickly and easily publish information on a website without the need for any specific knowledge of creating web pages. Umbraco allows any staff member to easily create and update their website via a normal web browser. It can be compared to simple word-processing as no special skills are needed to be able to create web pages using Umbraco, and you will be able to create pages and publish them without any previous knowledge of HTML. Never the less, this will in no way reduce the functionality of your website. Umbraco offers a number of complete functions that each editor can use to develop their website. The aim of a platform such as Umbraco is to distribute the work involved in keeping a website up-to-date among as many people as possible. We hope that you find it easy to learn and use.
Minimum requirements
In order to use Umbraco’s backend (the admin area of the website where changes can be made), your computer must have a supported browser installed. If you require a browser upgrade, please log a call with the ICT Service Desk. To find out your browser version, press ‘Alt and X’ on your keyboard (the shortcut for ‘Tools’ in IE) then click the ‘About Internet Explorer’ option.
Browser
Supported Not Supported
Internet Explorer 11 (IE11)
X
Internet Explorer 10 (IE10)
X
Internet Explorer 9 (IE9)
X
Internet Explorer 8 (IE8)
X
Internet Explorer 7 (IE7)
X
Internet Explorer 6 (IE6)
X
Google Chrome (latest publically released version)
X
Mozilla Firefox (latest publically released version)
X
Apple Safari (latest publically released version)
X
Umbraco User Guide Page 4 of 19
Logging in to Umbraco
To access the backend functionality of Umbraco, you must enter the URL in your browser bar. This is your website address plus /Umbraco e.g. http://yoursiteadress/umbraco. You will then be presented with a page that looks like this which you can login from:
Your login details will be supplied to you by the ICT Development Team. You are expected to keep these credentials secure and remember them so ensure that they are stored in a safe place if needs be. If you can’t remember your password or have problems logging in to Umbraco, please log a call with the ICT Service Desk and mark it for the attention of the ICT Development Team. If you wish to change your password when you receive it to something more memorable then you can do this via the ‘Change password’ option of Umbraco. This can be accessed from the dashboard when you log in and found in the ‘Change password’ tab under the ‘Content’ heading. You will need to enter your new password in the appropriate box and then re-enter it in the box below as this will make sure you entered it correctly. Once you have set your password, click the ‘Change’ button to confirm.
This is the initial login landing page (This will vary depending on the configuration of your website).
The tree view shows the structure of your website. To navigate the tree you can click on the black arrows to the left of tree items which will reveal any sub-items. Clicking on an item’s name will load that content in the area on the right of the tree view.
Umbraco User Guide Page 6 of 19
How to add a text page
1. Navigate to the section in the tree view that you would like to add your page to.
2. Click on the icon that appears to the right of the text.
3. In the ‘Create’ list that appears, click on ‘Standard Text Page.’
4. A document will be open that can be used to input the data for your page.
5. A standard website page will include a title that is suitable for the accompanying content.
This helps to identify the pages of your website as the title will be displayed in the backend tree view as well as being included in the website URL. Your title can be adjusted in the ‘Page Title’ field.
6. To keep the text page and add it to your website, click the ‘Save and publish’ button. Your webpage will now go live and should be accessible again from the content section of Umbraco should you wish to edit it.
How to use Meta and Properties
Meta The ability to give your website keywords which describe it can be found on the ‘Meta’ tab of a document. This means that when someone searches for these keywords in your website’s search function they are more likely to come across the page that you include relevant tags for. Properties There are many options to customize a document in more detail which can be found under the ‘Properties’ tab in its navigation bar. From there you will see a document history including when it was created and last edited. Another feature is the ability to customize a page’s URL name. There is a description of this function located underneath the property label as well as an example of how it is used. This characteristic is useful as it means you can set an easily identifiable link name so that you can have your page displayed how you want it and a custom way of accessing it.
Umbraco User Guide Page 7 of 19
How to insert a hyperlink to a page
1. Include text within your page’s text box that you would like to be displayed for your
hyperlink.
2. Highlight this text and click the ‘Insert/edit link’ option in the toolbar.
3. You can now set where you would like your hyperlink to point to. It is common for a hyperlink to be an external link. An external link will direct the user to an external destination e.g. a different website. You will need the URL to do this which can be found at the top of your internet browser, this works for both external sites and pages of your own.
4. Alternatively, you can link to a file in the website such as a document. This can be done by pressing the ‘Link to file’ button and selecting the file from there.
5. Once you have made your selection, click ‘Select’ at the bottom right of the panel.
6. Your hyperlink will now be underlined and once clicked should take you to your chosen
destination.
How to insert an image to a page
1. From within the document that you would like to add an image to, navigate to the media
picker tool and select it.
2. Your site’s media library should appear and from this content area you will be able to find the image that you want to include.
3. The images location will be shown and you have the option to add a title.
4. When you are happy with the image, click the ‘Insert’ button on screen. You will be able
to see your inserted image within the area you have placed it before you save and publish. 5. If you move away from the original document without completing or cancelling your task in
the ‘Media’ panel it will stay open so you can use it on other areas of the site.
Umbraco User Guide Page 8 of 19
How to add media to your library
1. Identify the folder that you would like to add media to within the ‘Media’ directory of the
Umbraco backend interface.
2. Click on the icon that appears to the right of the text.
3. In the panel that opens, you can select to add a new folder, image or file.
4. Once created, the entry will be accessible within the same directory that you created it.
How to move or delete content items
1. Click the ‘ellipsis’ icon to expand the field on your item you want to reorganise.
2. Press the ‘Do something else’ button at the bottom right of the panel.
3. Click either ‘Move’ or ‘Delete’ to suit your needs.
Move
1. Using the tree view, select the folder you wish to move the item to.
2. The folder icon will change to a tick and this shows that it is selected.
3. To make your alteration, press the ‘Move’ button. The item will go to the specified target.
Delete
1. Selecting ‘Delete’ will bring up the option to either cancel or go through with the deletion. Deleting items will move them to the ‘Recycle Bin’ should they need to be recovered.
Umbraco User Guide Page 9 of 19
How to embed a video
1. Find a video that you would like to embed from a video sharing website such as YouTube.
2. Click the ‘Embed’ icon from the editor toolbar.
3. Paste the URL of the video in to the text box and press ‘Retrieve’.
4. Input the size that you would like the video to appear as and it will show you a preview.
5. Click ‘OK’ to add the video to your page.
Umbraco User Guide Page 10 of 19
How to restore an item from the Recycle Bin
1. All deleted items are stored in your website’s ‘Recycle Bin’. This is found in its own section at the bottom of the tree view.
2. Expanding the tab by using the ‘arrow’ icon that appears when you hover over it will display everything that has been deleted including sections and folders which can be expanded.
3. To restore an item, click the ‘ellipsis’ icon which will bring up a list of options.
4. Click ‘Move’ to be presented with the selection of where you would like to reinstate the item.
5. Once you have made your decision, select the ‘Move’ button and your item will be transferred to your designated location.
How to create a Gallery
1. Create a folder in your ‘Media Library’ if you do not already have one set up that has
images in it that you wish to include in your gallery.
2. Your existing galleries may be found in a ‘Galleries’ section in your tree view. You can only create a gallery in the relevant section. Creating a gallery in the ‘Galleries’ section will make your website uniform and allow you to access it better.
3. Click the ‘ellipsis’ icon to expand the field on the section that you would like to add a gallery to.
4. Select the ‘Gallery’ option from the list.
5. Scroll down to the ‘Media Folder’ section. Linking a folder will give your gallery the images
from that folder.
6. Click the ‘add’ icon to navigate to your ‘Media Library’ and select what you want to include.
7. Press the ‘Save and publish’ button to keep the changes and make your gallery live.
Umbraco User Guide Page 11 of 19
Saving and Publishing
Save The ‘Save' button is ideal for when you are working on one page for a long period of time. You should save regularly to be sure that you won’t lose any of your changes. When you select this option, the content is stored where you created it but not published to the live website. Saving and Publishing The ‘Save and publish’ preference is used if you want to publish a previously saved page to the website or to just publish a page without previewing it. Preview You can use the ‘Preview’ button to see how the page will appear when it is published. Doing so will open up a new tab in your browser with the page you have edited.
How to create an Event (Calendar)
1. To create events which will make up your website’s calender, you must use the events
section of your website. Events can only be created in ‘Event Folders’.
2. Click the ‘ellipsis’ icon to expand the field on the section that you would like to add an event to.
3. Select the ‘Event Item’ option from the list.
4. Give your event a date and a description in the relevant fields.
5. Press the ‘Save and publish’ button to keep the changes and make your event live.
Umbraco User Guide Page 12 of 19
How to add a news item
1. Navigate to the ‘News’ folder in your website structure. Your news items should be
organised by folders for year and month.
2. Select the ‘Standard News Item’ option from the list.
3. Include your news article in the text box.
4. Set a date to be displayed alongside the news item.
5. Press the ‘Save and publish’ button to keep the changes and make your news live.
How to add a document library
1. Document libraries take their files from a ‘Media Folder’ so you should create a folder with
the documents you want to display before creating the library.
2. Click the ‘ellipsis’ icon to expand the field on the section that you would like to add a document library to.
3. Select the ‘Document Library option from the list.
4. Then on the ‘Media Folder’ field, click the ‘add’ icon to navigate to your ‘Media Library’ and select the folder that you want to include.
5. Press the ‘Save and publish’ button to keep the changes and make your document
library live.
Umbraco User Guide Page 13 of 19
Reloading Nodes
When editing content, the content tree will generally refresh itself when content is saved. If the tree doesn’t 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 this by reloading parts of the content tree. To reload a section of the content tree, simply click on the ‘Actions’ dropdown menu from within a section and choose the ‘Reload nodes’ option from the list. This causes the content tree to refresh itself and its child nodes to reflect any new changes.
How to use the search function
You can use your website’s built-in search function once it has content to find anything ‘live’ that you need. Your search terms can include either text from a page, the page name or a page’s meta tags. This can be particularly useful after you’ve published a page and wish to view it.
Formatting
Rich Text Editor The Umbraco ‘Rich Text Editor’ is the field where as an editor you can have your own input. How in-depth you go with editing in this area is up to you. This can include working on the format of text, editing text content itself or just leaving the website the way that it is. If you want to do more then there is the opportunity to insert images, create tables or create links to other pages and documents. Instructions on how to do these tasks are included in this user guide. The functionality varies depending on how the editor is setup. This Umbraco guide covers all of the standard editing features. Contact the ICT Development Team for details about what features your website has. The text fields in Umbraco are like any other word processing program in the sense that when you type, text wraps around until it reaches the end of a line. If you wish to have space between text such as when creating a new paragraph, press ‘Enter’ on your keyboard in the editor which will create a paragraph break. You can also press the ‘Shift’ and ‘Enter’ keys simultaneously to form a line break. This is a method of moving your text cursor down a line or as it does not create a new paragraph it can be used to separate text but keep it in the same paragraph. Shortcut Keys There are other ways to use your keyboard to carry out certain actions. These are shortcut keys which let you use key commands to make your work easier.
Umbraco User Guide Page 14 of 19
Here is a list of commands and the keys to perform them:
Command Shortcut Key
Ctrl + Z Undo
Ctrl + Y Redo
Ctrl + X Cut
Ctrl + C Copy
Ctrl + V Paste
Ctrl + B Bold
Ctrl + I Italic
Ctrl + A Select all
Text Formatting Formatting is how your text is presented. Another word for it is layout. There are at least four different kinds of text, they are: headings, paragraphs, quotations, and references or lists. These can all be displayed using text formatting. Formatting Buttons Ordinarily text is displayed in a readable fashion without adding formatting. However when you wish to display your content in a more presentable way then you need to know how to control the format of your text. The most common way to control how your text looks is via built-in formatting buttons. These work similarly to those found in most word processing applications such as Microsoft Word. With these you can apply simple formatting such as Bold, Italic and underline as well as altering text alignment and creating bulleted and numbered lists. All of the basic formatting techniques are available by default in your Umbraco text editor and can be found in the bar above a document’s text box.
The process for applying a format using the formatting buttons is always the same, regardless of the changes being applied.
1. Select the text you want to apply the formatting to.
2. Click the relevant formatting button to apply the formatting you wish to add.
Removing Formatting If you wish to remove the formatting of a text selection, you can do so by highlighting the text again and clicking the same button that you used to format it. Alternatively if you have deleted the text, it will be removed but the formatting rule you added will generally remain on that line.
Umbraco User Guide Page 15 of 19
How to edit Contact Details
1. As an editor, you can edit the contact details which will be presented on your website. To
do this, navigate to the ‘Content’ section and click on your ‘website name’.
2. Then find the tab for information or contact details to be stored and input the relevant documentation. This will generally include an email address, a location and a telephone number so that users may contact you via your preferred channels.
3. Once you have made your changes, press the ‘Save and publish’ button to make the contact details appear on the website.
Copying text from other programs
1. Any text from a document within a program can be imported to your website. This is done
by selecting and copying the text from the program you want to copy it from.
2. To do this, highlight the text with your cursor and either ‘right click’ with your mouse and select ‘Copy’ or press ‘Ctrl’ and ‘C’ (the keyboard shortcut to copy).
3. Switch to Umbraco and select the editor for the page you wish to copy the text in to. 4. Position your cursor to the point where you want to place the text on the page. 5. Then either ‘right click’ with your mouse and select ‘Paste’ or use the ‘Ctrl’ and ‘V’
shortcut on your keyboard to paste in the text.
6. This should give you a copy of the original text but within where you pointed it in the editor. The existing formatting from where you copied it may have been carried over. If this is the case, you could try again but copy the text to a file in the word-processing program ‘Notepad’ which should remove the formatting and then paste it into Umbraco that way. To find out more about formatting, see the ‘Formatting’ part of this guide.
Umbraco User Guide Page 16 of 19
How to add a new section
1. A section can house folders and other sections, they help to organise you website’s
structure. In the backend tree view, find where you would like to add a new section to.
2. Click the ‘ellipsis’ icon to expand the field that you would like to add a new section to.
3. Choose the ‘Section’ option from the list.
4. Give your section a name and enter the relevant properties.
5. Press the ‘Save and publish’ button to create the new section.
How to sort items
1. Click the ‘ellipsis’ icon to expand the menu of a folder that you would like to sort the contents of.
2. Press the ‘Do something else’ button at the bottom right of the panel.
3. Click on the ‘Sort’ button from the list.
4. You will see a list of items stored in that section, along with the date they were created and the current order they are in. Drag the items into the required order using your mouse. Alternatively, click on the ‘Name’ or ‘Creation date’ column headers to sort the items automatically using these preferences. Clicking on a column header again reverses the sort order.
5. Click ‘Save’ to finalise these changes.
Umbraco User Guide Page 17 of 19
Analytics
There are stats that are recorded for your website that you can track using Umbraco. The data collected refers to the usage of your website; this can help you obtain valuable information on how people use it. These options be found in the ‘Analytics’ option from the Umbraco backend navigation.
When you have entered this section, you will be presented with various choices. ‘Views’ This is a display of what pages have been visited, the number of individual visits to the pages there has been and how many times the pages have been viewed. You will see a graph that shows the amount of page views on the y axis and what date the views took place on the x axis. You can sort the graph by timeframe using the adjacent dropdown menu. ‘Keywords’ This is a list of words that relate to your website. This is another way of analysing your page views. You can sort this data by timeframe using the adjacent dropdown menu ‘Social Network’ You can see which social media channels your users have come from in this item. The data is displayed as a table with the name of the social network in the left column if applicable. The most common social media networks are Facebook and Twitter. Sharing your website to these platforms will generate flow and this can be tracked with this tool. There is a graph that shows the amount of visits and page views from social media concurrently. The platforms are labelled on the x axis and the number they generated are displayed on the y axis. You can sort the graph by timeframe using the adjacent dropdown menu. ‘Operating System’ When a user visits your website, the operating system that is being used on their machine will be recorded. This is useful for seeing what demographic your website has. You can also see what version of the operating system is being used. This and the actual operating system records are shown in tables with the amount of visits and views relating to them. In order to easily compare how popular different operating systems are on your website, you can use the built-in graph feature which uses the operating system on the x axis and the amount of views from them on the y axis. You can sort the graph by timeframe using the adjacent dropdown menu.
Umbraco User Guide Page 18 of 19
‘Screen Resolution’ Screen resolution refers to the size of a device’s screen. These stats can provide further information on what devices your website is being used on. With Umbraco, your website is designed to be responsive, meaning that the layout changes at different sizes. This analytic will allow you to see the sizes that your website is being displayed at. Screen resolution sizes use the format of pixel dimensions, this is shown as width followed by height. Pixels are what make up a monitor screen so the more pixels there, the bigger the display is. The data is formatted so that the resolution used browsing your website is show the first column and the ‘Visits’ and ‘Page Views’ that come from them are in the accompanying columns. You can sort this data by timeframe using the adjacent dropdown menu. ‘Devices’ The electronic devices that your website has been accessed from are recorded which means you can be sure that your website is compatible on them. This is separated by desktop, mobile and tablet in a table with a graph. It displays the page visits and views alongside each other against the number that is recorded for them. You can sort the graph by timeframe using the adjacent dropdown menu. You can see the mobile and tablet devices used specifically in the lower table. ‘Browser’ There are various browsers on the market with multiple versions for each of them. This means that some are not compatible with your website. If you can identify whether users are using the website on unsupported browsers, you can make them aware of this. There is a graph for this data and it is displayed with the browsers, page visits, and views on the x axis and the number relating to them on the y axis. You can sort the graph by timeframe using the adjacent dropdown menu. ‘Language’ This is where the browser language that is being used by those accessing the website is displayed. This gives you an overview of the standard language that users operate with when viewing your website. You can sort this data by timeframe using the adjacent dropdown menu. ‘Country’ You can see the country that the users are browsing your website from in this option. This is useful for gauging the popularity of your website on a worldwide scale. The countries are displayed in the left column and the accompyaning columns feature the amount of visits and page views that have come from the indivual countries. This information is presented in map form above the table and this works by having countries with varying levels of significantcy in terms of views displayed as a progessively more green fill.
Press the ‘Analytics’ header to view an overview of your statistics for the last 7 days
Umbraco User Guide Page 19 of 19
Rollback (Version History)
1. Click the ‘ellipsis’ icon to expand the menu of an item that you would like to see the version history of.
2. Press the ‘Do something else’ button at the bottom right of the panel.
3. Click on the ‘Rollback’ button from the list.
4. You will now be presented with the date and time that the current version was created on,
5. The option ‘Rollback to’ is for restoring items to previous versions. Using the dropdown menu, select the version that you would like to restore (Once pressed the amendment will be made instantly so be cautious when making changes).
Audit Trail
1. An ‘Audit Trail’ is a list of logs for when items have been saved which also detail who they
were saved by. Click the ‘ellipsis’ icon to expand the menu of an item that you would like to see the save history of.
2. Press the ‘Do something else’ button at the bottom right of the panel.
3. Click on the ‘Audit Trail’ button from the list.
4. This will display a table of what ‘Action’ was taken for the log, who it was created by and the date it was created. With this resource, everything can be tracked and your items are more secure.
Further Information Support Should you need help with your website or using Umbraco, please contact the ICT Development Team either by logging a call via the ICT Service Desk on 01952 384444 or through the online self-service system with the http://toolkit link. Video Tutorial http://umbraco.tv/ is a free website which offers video tutorials on how to use Umbraco.
