Skip to main content

Protected: EHRC Website Styles

This is a password protected training page.

placeholder

Introduction

Welcome to your training guide! This page contains a range of content samples to help you style your content in the best way possible.

Templates

The EHRC website has four templates available to choose from for standard content pages, and several template types for specific resources. Templates are like the bones of your website, they contain the page builder components which are more like the guts of your site.

Content page template choices:

  • Default (page with the sidebar) – this is a standard content template with a side bar that is populated as you add page builder components. The side bar will use the heading from each PBC unless you override it by opening the settings panel at the bottom of each component, and add a shorter alternate side bar lable.
  • About us – The about us template is used only for the Who we are page. It’s only major difference is that it includes the ability to include team bio’s and the board of directors.
  • Landing page – the landing page template. behaves much like the page without a side bar, except that it has a bold dark blue hero banner style. It is intended for use only the 4 priority areas (LMI, Funding, DEI & Career Dev) OR for stand alone campaign pages being linked to from ads or social media.
  • Page without the sidebar – this template is exactly like the default page except that the side bar is turned off. This template would only be used in instances where there isn’t enough content on a page to merit a side bar.
page templates ehrc website

Other Template Types:

The templates also vary across certain resources:

  • Toolkit – Includes special sections for reading materials (chapters,) resources, sponsors & steering committees.
  • Events – the top section of event pages are controlled by the plugin Event Calendar Pro, and then is followed by the option to add page builder components for additional information.
  • Webinars – Webinar pages are still basically a standard page builder page, but should always start with a video component.
  • News (Posts) – News pages are basic single column format WYSIWYG templates with the ability to include images within the content space (which is different compared to how images are usually handled) These templates were developed so that existing content from the old EHRC site would be able to be moved over without reformatting them.
  • LMI – Standard page builder content pages but have all been styled fairly consistently so we advise looking at an existing LMI to see how to style the page (Content block, two column, intro content to the left and image of the LMI report to the right. Content should include a button to download the report)
  • Career Profiles – Also a standard page builder content page, and like LMI’s these pages all use a similar layout so we advise looking an existing career profile as a reference.

Page Builder Components

There are ten different types of page builder components you can use to style your content.

  • Content Blocks. – Three column options + ability to add text or images.
  • Accordions – Best used for FAQ or “deep dive” content
  • Columned Icon Cards – Great for things like steps or options
  • Logo Gardens – for creating large grids of logos that are positioned consistently. Can add sponsor labels, descriptors & website links.
  • Featured Sponsor/Logo – for standalone featured sponsors/logos that require more information and a larger space
  • Featured Post/Resource – for featuring a specific resource (LMI, toolkit, event etc)
  • Featured Programs – Mostly only used on the program page, but can also be dropped into other pages to link to a specific program
  • Related Resources – can be added to any page, however archive/resource pages also have related resources built in as an optional component at the bottom which includes more exciting image background styling.
  • Video Embed  – for videos, descriptions & transcripts.

This is a Content block

Content blocks can exist as one, two or three columns. Click Add Row to choose how many columns you would like to have.

Heading 3 looks like this

Heading 4 looks like this

Heading 5 looks like this
Heading 6 Looks like this and should only be used for page labels.

Paragraph texts look like this when set to large. It is great to intro a paragraph and help break things up.

Paragraph text looks like this in it’s default state.

Paragraph texts looks like this when set to small. It is great for disclaimer text.

Placeholder

Heading 3 looks like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas id aliquet libero. Aliquam vel magna sed dolor hendrerit accumsan. Phasellus fermentum ex volutpat fermentum ultrices.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id aliquet libero. Aliquam vel magna sed dolor hendrerit accumsan. Phasellus fermentum ex volutpat fermentum ultrices.

Heading 3 looks like this

Heading 4 should ideally not sit right next to the Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id aliquet libero. Aliquam vel magna sed dolor hendrerit accumsan. Phasellus fermentum ex volutpat fermentum ultrices.

Heading 5 can serve as a featured content call out.

This is a Primary Button

This is a Secondary Button

Heading 3 looks like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id aliquet libero. Aliquam vel magna sed dolor hendrerit accumsan. Phasellus fermentum ex volutpat fermentum ultrices.

Heading 4 is great to introduce a list:

  • List item here
  • List item here
  • List item here

Content Block (Grey Background)

Content blocks can have white or grey backgrounds. Changing the background helps your user identify the different sections in your content.

Single Column

You can add a single column to contain your text, but remember that  45 to 80 characters (per line) is the ideal line length for text on websites. Shorter line lengths are much easier to scan if your content is on the longer side.

Double Column

Try and break your content up into short paragraphs and add pictures to help create visual resting spots, and easy to identify sections in your content.

It’s also a good idea to add formatting to your copy. Starting a long paragraph off with the “large text” format is good for highlighting the key point of the paragraph to make it easier for users to scan!

 

Alt text goes here! Be Descriptive! "Two wind farm technicians reviewing a laptop in front of some wind turbines" is good, but "a Senior wind far technician mentoring their junior in the field" provides better context if the page content is about mentorship.
This logo has been formatted with a 4:3 ratio and a BG

Formatting images

Images come in all shapes and sizes, but alas, websites cannot always accommodate EVERY shape of image with a single component type.

  • This page builder component is intended for images that are approximately 4:3 ratio.
  • Images are intended to horizontally fill the column space they are placed into, which means that vertical orientation images will end up looking quite large in some cases.
  • Logos are not always well suited for this area because they will become very large unless you intentionally format them into a 4:3 ratio image size. It is best to use the logo garden of featured sponsor/logo component instead.
    • If you DO choose to put a logo in this space, ensuring it has a background colour that is visible can help it not look out of balance. (see example to the left)
  • Not every image will work, so please select images that fit within these constraints.

Thee Columns

Three column text is usually best when you are listing things such as services, or concepts.

Figure it out

There is no perfect rule, you just have to read your content and try different layouts to see what works best.

 

Consistency

The only thing to try and keep in mind is that you should be as consistent as possible, and try to keep your copy blocks even so you don’t create awkward gaps like the one that is going to appear over to the left because I’m still adding content to his block in order to make a point.

See, it doesn’t look great does it?

This is an Accordion block

Accordions are good for frequently asked questions which is a great way to break up content to make it easier to scan. Content placed with in acordions should always be kept short and to the point.

This is a Call To Action

You should have one on almost every page

Calls to action should be used to direct your user towards the action you want them to take. Most pages should have a goal for your user, whether it’s to sign up for something, continue on to more information, contact EHRC, attend an event etc. They usually sit at the bottom of the page! There are two colour options to choose from, light grey or navy!

Required button

Optional second button

Two turbine techs reviewing tablets

This is a Columned Icon Card Section

Icon cards can be set up in 2, 3 and 4 columns and are great for breaking up blocks of content or creating features that link to other sites/areas. They include an icon, a heading, some supporting text and an optional link. It's important to try and make sure that each card contains a similar amount of content so that you don't create weird gaps.

This is a Logo Garden

Logo gardens were designed to hold batches of sponsor logos. They are can included names, descriptions of their sponsorship type, and links. If you are going to add a name, descriptor or link for one logo you'll need to add them for all of them. Alt text is generated automatically when you add your sponsor name.

Featured Event

This is a featured resource block

You can feature any type of resource (events, LMI toolkits etc). If you choose to feature an event though make sure that the thumbnail associated with the event is formatted for the thumbnail which is almost square. It is especially important if there is text in the image as it can be cut off. (example to the right)

SGIN Energy Innovation Forum

Mon 30

Some alt text.

Monday October 30, 2023 @ 8:00 am - Tuesday October 31, 2023 @ 5:00 pm

Learn More

This is a Video Embed Block

You can add videos from youtube or from vimeo. Remember that when you are adding your transcript, if you are getting it from youtube this is the one time when you do not want to “paste plain text”.  Copy and paste it exactly as it comes out of youtube so that the styles and formatting come with it, the system is prepped to accept and format that code.