AI Content Chat (Beta) logo

2.1 | How to add Background Videos/Images

6 minute read


Discover how to personalize your content space to reflect your unique style and preferences! You can personalize two types of backgrounds: on the page level or whole experience (All pages).

 

What's the Different Kind of Backgrounds?

In relayto, there's two types of AI Background settings. One for each page individually, that can be accessed from Studio, and another for the experience as a whole, that can be edited in Settings. 

Page Level

  • Background video: Either you have a colored PDF page or an image background, it's going to be replaced by the background video inside RELAYTO. It affects the source file page directly.
  • Background color: This isn't going to replace the page background. This feature can change the surrounding color of the page. 

 

Whole Experience (All Pages)

  • Background Video/Image/Color:  This feature is going to only affect the surrounding area, not the pages. By applying one of those types - video, image or a color - in "All pages", you're editing the space behind the source file. 

Page Level: Background Video

Step 1

Click the "Studio" button in the top right corner.

 

Step 2

Click the "AI Background" button to upload a video.

 

Step 3

You can upload a video using the "Upload video" button or choose one from the RELAYTO options below.

 

Step 4

After adding a video, you can also customize:

  • Overlay. Click here to add a color overlay above the video. You can choose the color and opacity on the selector on the side.
  • Fill. Here, you can choose how the video will be displayed on the screen, taking all blank space or just the page size.

 

Page Level: Background Color

You can also add color, instead of a video. Click the "Slide surrounding color" button and adjust color and opacity on the color selector.

💡Tips: You can also type the hex color of your brand. Hex is a digital color code used to represent colors on screens. Websites like Adobe Color allow you to select a color and instantly get its code.

 

All Pages: Background Video

Step 1

Click the "Settings" button in the top right corner.

 

Step 2

Click the "AI Background" option.

 

Step 3

Click "All pages" tab. 

We also have two states for backgrounds on AI Background:

  • 1st page. Similar to page level background, you can add only videos to the first page of the experience. Control overlay color, opacity and enable/disable the Fill Screen option.
  • All pages. This is will appear as an overall background, behind the document. You can choose between Video or Image type, and you can add an overlay too.

 

Step 4 

Click "Upload Video" or choose one from the RELAYTO section.

We recommend a video size of less than 5MB for optimal performance.
Click here to access RELAYTO Best Performance Guide.

 

All Pages: Background Image

Step 1

In the All Pages tab, click Type and choose "Image".

 

Step 2

Click "Upload Image" to add an image. 

 

Step 3

You can enable/disable Overlay option to add/remove an overlay color above the image.

 

All Pages: Background Color

Step 1

In the All Pages tab, Click Type and choose "Color".

 

Step 2

Click Background Color wheel to add a surrounding color for the whole experience.

💡Tips: You can also type the hex color of your brand. Hex is a digital color code used to represent colors on screens. Websites like Adobe Color allow you to select a color and instantly get its code.

 

Related Articles: 

 

Thank you for joining us in this tutorial! If you have any questions or need help, feel free to email us at [email protected] or book a call here.