Backgrounds

In this article, we will show you the different ways you can design backgrounds in the Editor. 

Table of contents

• Basic knowledge
• Color & Gradient Background
• Element Background
  • Image
  • Image Slider
  • Map
  • Video
  • YouTube
  • Vimeo
  • HTML

Basic knowledge

Backgrounds can be added to all container elements (since section templates are also built out of container element(s) they can also be added there). 

To access the background settings, double-click on a container element and open the Background tab in the settings panel that opened on the left side. 

For the background, you always have three general options:

• None: This means that no background will be used.
• Color/Gradient: Here you can decide if you want to have a background with one color or if you want to create a gradient with multiple colors. 
• Element: Here, you can choose between a pre-selection of elements that can be used as backgrounds:
  • Image
  • Image Slider
  • Map
  • Video
  • YouTube
  • Vimeo
  • HTML

We will take a look at all options and their respective settings in this article. 

Tip: If you work with nested elements meaning you have a container of another container element, e.g. in a header you will see the option Edit parent container. Clicking this button will lead you to the container that provides the current background. 

However, you can also add another background in one of the child containers as well. The Evergreen template, e.g. has a colored parent container background and a plant as child container background. 

Color & Gradient Background

When you click on Color/Gradient, you can choose between

• Color: You can select one color that will be displayed in the background
  
• Gradient: You can set up a gradient effect with different options
  • Colors: You can add as many colors as you like and add the value to which they should consume a part of the gradient. The colors will automatically be sorted by their percentage. 
  • Invert: You can invert the color scheme you have set up 
  • Randomize: This will give you a random combination of colors and percentages
  • Style: You can choose between a 
    • linear gradient, which sorts the colors from one side to the other. This option comes with the angle setting where you can choose the degree of the gradient and the duration settings which lets the gradient "move" through your background
      
    • radial gradient, which sorts the colors from the center to the outer parts
      

Both options give you a great canvas to add elements on top that should get the website visitor's attention, e.g. a text, an image, or an icon. 

Element Background

The element tab shows you a pre-selection of all the elements that can be used for backgrounds:

• Image
• Image Slider
• Map
• Video
• YouTube
• Vimeo
• HTML

There are two settings that are always available no matter which element you choose:

• Color overlay: This option allows you to add an overlay above the element. If you e.g. want to take some attention from the background by making it a bit darker or if you want to colorize it to match the website's color scheme.
• Parallax: This will let the background content (e.g. an image) move at a different "speed" than the foreground content while scrolling.

Image

With the image element, you can display an image in the background. You can either upload it, select one from your Files, or browse through the free stock photos. 

You also have the following options: 

• Lazyload: When activated, the image will be loaded after the page has been loaded to improve page speed.
• Responsive: When activated, it will automatically load retina images and smartphone optimized sizes.
• Optimized: When activated, the image will automatically be compressed to improve page speed. But if this is deactivated, it will load the original image - no matter how big the file is. This also means that the responsive setting is no longer available.
• Size: This allows you to select between different sizes options.
• Position: This allows you to adjust the position of the image and thus the section of the image that is visible. You can use Direction to use the options that are provided, or set up specific values for the X offset and Y offset under Custom.
• Alternative Text: Add an alternative text to improve accessibility and to have content that is visible when the image cannot be displayed.

Image Slider

With the image slider, you can add multiple images that will move through the background. 

You also have the following options: 

• You can add an image description to each image
• Slides to show: A slide is an image. So this determines how many images are shown at the same time. 
  
• Slides to scroll: This specifies how many images move at once. 
• Center mode: This center the slide and show parts of the previous/next slide - works best if you selected an odd number for slides to show
• Animation: Here you can decide if the animation with which the images are moving should be a slide motion or a fade motion.
• Speed: Set up how fast the animation should be. The lower the number, the faster and "harsher" the animation. Use a higher number if you want to achieve a smooth transition. 
• Automatic: When activated, the animation starts on its own - recommended for background image sliders.
• Pause: Determines how long an image will be shown.
• Pause on hover: If you hover with the mouse over it, the animation will stop. 
• Loop: When activated, the slider will start over again once all images have been shown.
• Lazyload: You can decide if you want to use lazyload and if you do, it should be on demand or progressive.
• Arrows: Displays arrows on both sides where website visitors could manually switch between the images.
• Dots: Displays dots at the bottom where website visitors could manually switch between the images.

Map

This allows you to display a (Google) map as a background. 

Please note that the default options are limited to the embed mode of Maps. If you want to enable all features, please add a Google Maps API key under More > SEO. 

Depending on the API key, you will have the following options: 

• Type (advanced): You can choose between e.g. the street map, satellite view, terrain map
  
• Style (advanced): You can choose to colorize it with a specific color, select one of the color options or select "no labels"
  
• Zoom level: This determines how far you zoom in. The smaller the number the more you see from the world, the higher the number the higher the zoom into a specific area.
  
• Zoom controls: Decide if you want to show the +/- options on the right, so zoom in or out of the map
• Scale: When activated, the scale at the bottom right will be visible
• Mouse wheel active?: If activated, the website visitor can zoom in or out using the mouse wheel
• New marker (advanced): Allows you to add multiple markers and e.g. upload a custom marker icon.
  

Video

With Video, you can play a video in the background. You can either upload your own or browse through the stock videos under Files. The support file types are MP4 and WebM.

Once you have added a video, you will have the following settings

• Autoplay: This will make sure that the video will automatically start
• Mute video: This will mute the sound of the video
• Loop video: This will replay the video over and over again
• Preview image: You can upload a video that will be used as a preview. This only works if autoplay is deactivated.

YouTube

With the YouTube element, you can easily exchange the dummy link in the Video URL field with your YouTube link. 

You can also manage the following settings:

• Lazyload: This setting determines whether the video shall be loaded in advance or only after hitting the play button.
• Show controls: This will enable or disable the play button, volume control, etc.
• Show related videos: After the video has ended, there will be a list of suggested videos from YouTube, when this is enabled.

Vimeo

With the Vimeo element, you can easily exchange the dummy link in the Video URL field with your Vimeo link. Additionally, you can choose the aspect ratio in which the video should be displayed. 

HTML

When you select the HTML element, you will see that there are no settings in the left panel, but the HTML panel opens at the bottom of the Editor where you can add your custom code.