Skip to main content

Premier Background Elements and Images

Create engaging and speciality pages using the Background Elements and Images module within your Premier Digistorm Website.

D
Written by Digistorm
Updated over 2 weeks ago

The Background Elements and Images module allows schools to add visual elements such as graphics, logo elements and background images to the Layout section.

  1. Navigate to your sidebar > Select ‘Entries’ > Select ‘Background Elements’.

  2. In the top right hand corner, select ‘New Entry’.

  3. This element can be used globally throughout your website to title your element in a memorable way.

  4. Add your image or device. If you are using a graphic element like a logo crest, be sure to upload an image with a transparent background with either a .png or .svg file type.

  1. Enter the settings and hit save.

  2. To add the element to your page, navigate to the desired page then add the Layout section within the Content tab.

  3. Add the desired content sections to your layout. Once complete, navigate to the Design tab and under Background Element , select the background element you previously created.

  4. Save and view your page to check how it looks. You may add this element to as many layouts as you wish.

Settings cheat sheet:

Image Placement:

Determine the placement of your graphic element or image. If you are adding a full width image background, place the image in the centre.

Image Opacity:

Depending on the colour of the image or graphic you are using, select the opacity you wish to display the element. For example, if you upload a school crest in your school colour but want it to display as a watermark, set the element to 5% opacity, as this will create a watermark effect.

Horizontal Adjustment:

This setting adjusts the horizontal placement of the element even further. If you would like your element to sit offset in the browser, select a minus value.

Vertical Adjustment:

This setting adjusts the vertical placement of the element even further. If you would like your element to sit offset in the browser, select a minus value.

Background Element Size:

Determines the size of your element.

Scaling:

Scale width to fit container - stretches the image horizontally whilst maintaining aspect ratio.

Scale height to fit container - stretches the image vertically whilst maintaining aspect ratio.
​
Enabling scaling for both width and height scaling may result in part of the graphic being cropped as it tries to maintain its aspect ratio.

Did this answer your question?