Available on Plus, Professional, and Enterprise plans.
You can add multiple backgrounds to any page block with the "Background" style tool.
Add a background to your page blocks
To add a background to a block:
1. From the page editor, click the block you wish to add a background to.
2. The style and edit options for the block will occupy the right pane. Click the grey "+" symbol next to "Background."
3. Four background options will appear in a modal window: color, gradient, image, and video. Click the option you wish to use.
More editing options will appear depending on the type of background selected.
Background types
There are four types of backgrounds that you can use for a page block:
- Color
- Gradient
- Image
- Video
Color Backgrounds
Color backgrounds use colors specific to your page's theme. When you add a new color background, it's set to the first color in your theme's palette.
Click the square color on the left to access its color, gradient, and opacity.
- To use a different color for your background, click the color tile you wish to use
- To adjust the gradient of the color, drag the handle left or right
- To adjust the opacity of the color, drag the handle left or right
Gradient Backgrounds
Each new gradient starts with two color stops. These color stops are represented by two white handles: one on the left and one on the right. Each color stop has its own handle:
- To add another color stop, click the horizontal gradient bar. When you do, a new handle will appear
- To remove a color stop, grab its handle then drag it down and away from the horizontal bar
- To edit a color stop, click one of the handles and select a new color. You can also adjust its gradient and opacity
- Change the position of a color stop, drag one of the handles from left to right
- To change the direction of the gradient, use the circular widget to the left of the horizontal bar
- To make the gradient radial, click the circle inside the circular widget
Image Backgrounds
You can use any image uploaded to the file manager as a background. Image backgrounds are highly configurable. You can:
- Replace any image
- Adjust its position
- Set it to repeat horizontally and vertically
- Adjust its size to have it occupy a given amount of space
- Add parallax effects
- Make it see-through by adjusting its opacity
Click the image background to access the following:
- Replace the existing image with a new one by clicking the image thumbnail on the top left
- Position it to the center, top, bottom, left, or right
- Change its size to be the image's original size, or make sure the image covers the background with no white space showing, or ensure the entire image is shown (cover), but will be full width or height accordingly (contain)
- Repeat it vertically, horizontally, both, or neither
- Apply a parallax effect by dragging the slider left or right
- Adjust its opacity by dragging the slider left or right
When choosing an image for your background, you can only use an image from the file manager. Upload any image, under 5MB, to set as your background.
Video Backgrounds
Add a looping YouTube video that will as a background by selecting "Video" in the dropdown.
Click the "Background Video" and paste the URL of the YouTube video into the URL field.
You can adjust the parallax speed or opacity of the videos using the respective sliders.
Background order
Backgrounds are stacked in the order they were added, with the most recent on top.
You can change the position of a background by grabbing the left handle, dragging it up or down, and releasing it at the desired position. Backgrounds can be stacked in any order.