Web Editor Beginners Guide 

Welcome to Umbraco, please log in using the email and password you have been provided.

💡It is recommended to avoid opening Umbraco with Internet Explorer, as older versions are not supported.  

This is the homepage when logging in, the Dashboard in the middle can be ignored. At the top left-hand corner, you can see Umbraco is divided into ‘Content’ and ‘Media’ areas. Content is where you create the webpages within your Group or Region/Chapter folder.  

Media is the library for your images and media files, these can be embedded and linked from your webpage (PDF, JPG etc.) To add a file, you can simply drag and drop it in or ‘click here’ to choose a file and select it from your computer.  

❗Please make sure to resize the images before uploading. They shouldn't be larger than max.1MB. Ideally images should be only around 250KB. This will help with the webpage loading time and accessibility. 

To create a page, first find your designated Group or Region/Chapter folder within the green folders. These are the main page-create folders. 

The only other folder you will need are the blue ones, these are content card folders, you will find a folder assigned to your designated Group, Region or Chapter. More about Cards later. 

In this example we have created a ‘Test-Vol’ page within the Chapters Folder, Once you have found your folder click on it to open your page.

💡The yellow folders are 'News items' and can be ignored in this guide. 

A 'Content Page' allows the use of content blocks, these are useful when you have a lot of text to add. It is a simple text and image page. Clicking on 'Add content' will open up the features for this page.

As you can see below those include 'Rich Text' where you can add your main text, 'Quote' to highlight special phrases and there is the option for a 'Content Image' that will appear within the text. 

Use a combination of content blocks to add in your content when building a page.

💡You can easily rearrange the content blocks by dragging and dropping.

Click 'Save and preview' to see how your page will be implemented on the website.

💡You can always save and preview your progress. It is recommended to only click save and publish when you want the changes to go live immediately. 

A 'Landing Page' uses content cards instead of content blocks, these are displayed across the page rather than the vertical scrolling of a 'Content Page'. These are especially useful to link a variety of content on one page with clear definition. 

The content options within a 'Landing Page' are shown below; 'Section', which includes a Title and Description and 'Card containers', which you can choose between displaying as three or five columns. The Cards created for this page type house your created content.

To select your image from the Media Library, you will have to upload it first, as highlighted in the section Homepage and Navigation it is a simple process.

Click the Media section on the top left hand corner and you will find a list of folders, select your dedicated folder. You can create sub-folder within your main media folder. This can be beneficial for you to keep an overview and find items quicker. 

Either drag and drop or choose the files from your computer.

💡 Recommended file types: PDF, JPG and PNG

Then select the media type that applies to your item. 

Once selected, your item is added to your Library folder and can be added to the page or card of your choice.

After completing the page information and uploading a hero image you can use the 'save and preview' button to view your webpage. Here is an example of how the Hero title, description and credits are displayed over a Hero Image.

When selecting a Promo card there are different sizes to choose from Single, Double and Triple. These relate to the size of the card and define how wide the card will show on the website. 

You will need to name the card and complete Title and Description fields and upload an image from the Media Library.

There is also the option to add a CTA (Call To Action) link. This means you can link to different content from your card. This can be a created page, an external link or media from your library. You can make the whole card clickable or show it as a button.  

Click on 'Add' to create a CTA.

Link: Pop a URL in the Link section which has been done on this example.

Media: Clicking on 'Select media' will open the Media Library and you can choose from there. 

Page/Card: You can use the Search option or click on the Home Icon and find the folder that contains the page/card you wish to link to. (The brown event folders can be ignored). 

'Target' within this section gives you the option to automatically create a new window pop up for the user, you can tick or untick this. 

💡Descriptions might just show on double or triple sized cards, as the single size doesn't leave enough space. 

An example of the created card with a clickable CTA button, you can see the created Volunteer Document Promo Card on the right hand side.

Spotlight Cards work the same way, choose a Size, Image, Title and Description.  

The main difference between those cards is the appearance. The Spotlight Cards are the more common ones on the RPS Website and always have a coloured box around them - so 'Spotlighting' the content more. 

💡The colour of the Spotlight Card is chosen automatically, if you select an Override Colour you can customise the Card with one of the provided colours.

Selecting a CTA, In this example we choose to link to our Content Test-Page. 

💡The brown Event and yellow News folders can be ignored. 

The result, a triple sized Spotlight Card featuring a link to our created test page.

Lets look at how to add the created content card on the 'main page' or landing pages. 

Navigate to your designated page (green folders). 'Add content' in the 'Content cards' section of the page and select them form the blue card folder where you have created them originally. 

You can select multiples cards at the same time, they appear with a little ✔. Once you have made your seletion click on the green 'Submit' button in the right hand corner and you cards will be added. 

💡'Card Containers' represent columns on the website, to add cards next to each other, add them to the same 'Content Container'. To add a card below simply add it to a separate container.

Here is the final main page, showcasing the created cards.

💡To see how cards look on a published page view this landing test page that holds loads more examples.