Views:

Overview: using the right image sizes is essential for the visuals in your learning content to display correctly and to ensure design consistency. This article outlines standard image sizes for the main image types in Evolve modules. See Create and optimise graphics for Evolve modules for more information on this topic.

Hero images

Hero images are those introductory, visual preview images at the top of every page.

  • Select the Add Hero Image toggle button under the General tab on a page in an Evolve module to activate a Hero Image for that page.

Standard sizes for Hero Images

Desktop 1920x750px | Tablet 1024x800px | Mobile 800x800px

Course menu images 

These are the images that are placed within the course menu (i.e. box menu).

  • Select Box Menu Item tab on a page in an Evolve module to manage Course menu image settings.

Standard sizes for Course menu images

All devices: 512x320px 

  • Select the the Set Image Per Device Size toggle button and add the image to the Desktop, Tablet and Mobile fields if you find that menu images look pixelated.

Flip cards

These are the images used in Flip card components.

  • Select the Graphic tab when selecting any Flip card component in an article in an Evolve module.

Standard Flip card sizes

All devices:
2x cards on a line: 512px wide and any height 
3x cards on a line 340px wide and any height 

Media carousels

These are the images used in Media carousel items.

  • Select the Graphic tab when selecting any Media carousel component in an article in an Evolve module.

Standard Media carousel image sizes (especially when they are shown side-by-side with text)

All devices:
Half width 512px wide and any height 
Full width 1024px wide and any height 

Background Images

Background images can be added to Articles, which gives the imagery more space by allowing it to span the entire width of the screen. This technique can be used to make a key statement really stand out, such as an important rule or an inspirational quote.

  • Select the Background image tab when selecting any article on an Evolve module.

Standard image sizes for Background images

All devices: 1920 x 720 pixels 

Note: many of the image sizes are relevant to the component you are using and what you want it to look like. See Evolve’s own image size guide for more information.