Login
Login

Knowledge Base

Visual Builder - Background Images, Colours & Videos

Applying a Background Image, Colour or Video to a Section or Header Section on your site can make your pages more appealing and capture fundraisers' attention.

Learn more about:

Change your site's look and feel by applying a background colour, image or video. You can upload your own imagery, use stock photos/videos from free sources like Pexels or Unsplash, or purchase professional imagery from Shutterstock.

Applying a Background Colour

You can apply a Background Colour in a Section, Column or individual Blocks. Applying a colour is easy. To apply a Background Colour within the Visual Builder:

  1. Click the edit edit icon.
  2. Click the 'Style' tab.
  3. Expand the Background bar. 
  4. Apply a colour to the Background Colour field.

You can apply your brands hex colour or use the colour picker to find a colour you would like to apply.

Adding a Background Image

You can upload an image in your site's Header Section or in the background behind content. To add an image to the background within the Visual Builder:

  1. Click the edit edit icon.
  2. Click the 'Style' tab.
  3. Expand the Section Background bar. 
  4. Click the Image icon tab.
  5. Click 'Add image' in Background Image field.
  6. Select an image and click the 'Insert' button.

You can use any image already saved in the media library or upload a new image to the media library. To upload a new image:

  1. Click 'Upload Media' button in media library popup.
  2. Choose a file from your desktop.
  3. Select an image and click the 'Insert' button.

Uploading and applying a Video Background

You can also apply a video as a background on your site pages. The video in the section background will autoplay and repeat, it won't display video controllers. This makes video graphics in your header look great and creates movement instead of using still graphics.

To add a video as a background within a header section or content section:

  1. Click the edit edit icon.
  2. Click the 'Style' tab
  3. Expand the Section Background bar.
  4. Click the Play icon tab
  5. Click 'Add video' in the Background Video field.
  6. Select video and click the 'Insert' button.

Note: Video only applies to the desktop background. We recommend using a fallback image for desktop and mobile and applying it to the Image Background field.

You can also apply to the Background Video:

  • Colour Overlay: This adds a solid colour on top of a video. You can control the opacity percentage using the slider. This is beneficial for accessibility if there is copy on top of the video that is difficult to read.

Videos for backgrounds should be an mp4, no bigger than 40MB, trimmed to no more than 30 seconds for best performance and 16:9 in ratio.

Previous
Next