Web Editor Beginners Guide
This beginners guide will enable you to create and maintain the content on your Group or Region/Chapter RPS website page, there are more advanced features covered in the Web Editors Guide.
1 - Login
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.
1a - Password Change
For security reasons, on your first log in you should change your password to a personal one of your choice. To do this, click on your initials in the top right corner of the screen. Then click ‘Change Password’.
2 - Homepage and Navigation
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.
3 - Group and Region/Chapter Page
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.
4 - Page Types
To create pages underneath it, hover over your main page and click on the three dots, which then open an option-menu.
Here you can choose between creating a 'Content Page' or 'Landing Page' to link form the main page.
4a - Content Page
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.
4b - Landing Page
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.
5 - Media Library
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.
5a - Crediting an Image
Click on the file name of the image you have uploaded into the media library, this will bring you to the details of your image. The relevant section is highlighted in blue below, type the relevant information and click 'Save and Close'.
6 - Building a Landing page
Enter your page information, this will include a page name, hero title and hero description. Add a hero image, this is an image that is displayed as a banner at the top of the page with the description and title.
To upload your desired image click on the + in the square, this opens the 'Select media' section navigate to your media folder and select the image
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.
7 - Creating Content Cards
Now that we have added photos onto pages. Lets have a look at creating and adding content cards to the Landing page.
Leavening the green folders behind for now, the first thing to do is to find your folder within the blue card folders on the left hand side.
Hover over your folder and click on the three dots to open the option-menu, the most frequently used cards are either the 'Promo Card' or 'Spotlight Card'.
💡Content Cards are key components to building out webpages you can create as many cards as you wish.
7a - Promo Card
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.
7b - Spotlight Card
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 (the colour is selected automatically and can not be changed) around them - so 'Spotlighting' the content more.
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.
8 - Adding Cards to a 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.