Search icon

How to use Umbraco & content block examples

Getting started with Umbraco

Watch the video to get familiar with some of the basics of using our CMS, Umbraco. Lower down, you will find examples of all the different content blocks available for use.

  • 00:00:00 Guidance documents
  • 00:08:25 Content Blocks and Example Displays
  • 00:17:32 CMS Editor Menu
  • 00:18:09 Media library - uploading images and documents
  • 00:32:16 Creating Content Pages
  • 00:32:46 Callout folders explained (lightbox, sliders, fly-ins etc)
  • 00:46:46 Creating New Pages Or Sections - Page Types
  • 00:49:03 Home Page Edits - Adding Lightboxes, Changing Navigation Menu, Related Content
  • 00:50:46 Adding CTA Fly-In
  • 00:52:07 Editing The Header Image
  • 00:53:41 Adding Content Blocks
  • 00:54:24 Footer Content Donation Panels
  • 00:55:27 META Info - Search Optimisation Settings
  • 00:57:36 Page Reference Image
  • 00:59:03 Rich Text Content Block - Copy and Pasting Text
  • 01:00:51 Publish Pages Hidden From Public
  • 01:01:45 Rich Text Editor - Headings
  • 01:02:56 Emphasis Blocks
  • 01:03:16 Creating Quotes
  • 01:05:00 Adding Hyperlinks
  • 01:10:51 Add Anchor Link
  • 01:11:34 Adding A Button
  • 01:12:52 Insert YouTube Video
  • 01:13:55 Inserting Images - Text Aligned
  • 01:21:28 Adding Tables
  • 01:21:58 Adding Bold, Italics and Numbered/Unordered Lists
  • 01:24:55 Adding A Sidebar Menu
  • 01:25:35 Back Office Titles and Other Content Blocks Overview

Quick Good Practice Checklist

Subheadings and quotes

  • Use the correct subheading selection from the FORMAT drop-down menu, selecting H2 / H3 etc as appropriate. Do not add styles such as bold/italics to headings. This is important for accessibility as well as creating consistency with styling across the pages of our website.
  • Write headings in sentence case. The CSS style will automatically create capitalisation. This is important for accessibility. 
  • Structure headings correctly. Do not skip headings, you can't have an H3 before you have had an H2 for example.
  • While not compulsory to use it, we have a style for quotes found in the FORMAT menu. Apply the format “Blockquote” to the body of the quote removing the quotation marks from the copy in the editor as the CSS style adds its own. You can then apply the style, "Quote Source <p>" from the FORMAT menu to the line of copy holding the person's name who made the quote. It helps to give emphasis to this piece of copy and breaks up larger chunks of text making it easier to read. No other styling is required on the copy in the editor, the format styling does everything for you.

Spacing and layout

  • Do not create empty spaces and line breaks by hitting the return key several times. The stylesheets create appropriate spacing that is consistent through all our websites. Doing this creates bad HTML which in turn gives our website pages a bad reputation with search engines robots and ultimately affects our ranking and ability for people to find our pages. When you look in the source code there should not be any lines of code with <p> </p> = empty paragraphs or <br /><br /> = double line breaks.

Links

  • Links to external sites and PDF documents need to open in a new tab. This is achieved by ticking the “Target” box. We do this so people are not ending their journey with us.
  • Links must have titles that describe in a few words what the link is pointing to. This is important for accessibility.
  • Internal links, links to other pages within the same site, should use the site menu selection and not have a url pasted like you would for an external link. Media items within our sites, such as PDFs should use the media selection option found at the bottom of the list creation menu. This is important as it not only signifies an internal link which is good for Search Engine Optimisation but it also means if an internal website page is moved or renamed for any reason the link does not get broken.
  • Links to Action/Donation pages (Engaging Networks pages) with exception of footer donation panels which are hardcoded, links should have the correct tracking formula applied. An example of how a tracked link should look: https://action.ciwf.org.uk/page/100367/action/1?ea.tracking.id=ciwf-homepage&supporter.appealCode=CATWE_UK0322. Use the "utm parameters are not required" option in the url generator and select homepage or webpage (any Umbraco page except the home page) for the tracking id.
  • Ensure hyperlinks are placed on meaningful words so if taken out of context you would still know what it would be pointing to.

Images

  • Images must have alt-tag descriptions applied. they should be within 125 characters and describe who, where, and what is happening in the image.  Alt tags should also hold any wording which is on the image (which should be minimal). This is important for accessibility.
  • Linking from an image should use the field titled "Image Link" by clicking on "ADD". Ignore other link options, they are redundant. Follow the link rules set out above.
  • Illustrative mages should be uploaded as JPEGs. Logos which should be transparent PNG files at a max size of 100kb

Meta Info (SEO)

  • Ensure ALL fields are filled in. 

Umbraco How To

This guide explains what different components in the Umbraco editors panel for CIWF website are, how to use content blocks, create and edit pages, create short urls, using the media library and website search functionality.

View The Guide
Umbraco How To

News & Press

A guide on how to upload a new Web News article or Press Release step by step.

Step By Step
News & Press

Logos

How to find and prepare logos for web pages

View The Guide
Logos

Image Asset

All the image ratios and min image sizes for content containers in all our digital tools

Read More
Image Asset

All Content Blocks

Click through to see examples of content blocks that you can utilise on your website pages to display content in an engaging way.

 

Other Related Guides

Please look over these other important guides related to creating content on website pages. 

Read more

Globe

You are using an outdated browser which we do not support. Please upgrade your browser to improve your experience and security.

If you have any further questions regarding this, or any other matter, please get in touch with us at supporters@ciwf.org.uk. We aim to respond to all queries within two working days. However, due to the high volume of correspondence that we receive, it may occasionally take a little longer. Please do bear with us if this is the case. Alternatively, if your query is urgent, you can contact our Supporter Engagement Team on +44 (0)1483 521 953 (lines open Monday to Friday 9am to 5pm).