Current EcourseUnbounce for Designers

Background Effects

There are a handful of background effects in Unbounce that will help you bring your custom designs to life. While the page builder isn’t designed to be a full image editing suite, there are some basics that will save you time and get your work looking sharp.

You can assign background effects to your whole page, to specific page sections, or boxes, and you can choose between an image, pattern, solid color, or gradient.

For page sections, you can indicate whether you’d like the background to stretch to the edge of the section, or to the edge of the total page. The background fill options are solid color, image, or gradient.

No matter what type of background you choose, you have the option to stretch the effect to the page edges, or just to the defined width of the page.

Stretch to page edges

 

Color and gradient backgrounds

You can select a solid color or gradient for your background. When selecting a gradient, the page builder will suggest a complimentary color, but unlock and you can select whatever color matches your design.

Solid color and gradient

 

For page sections and boxes, you can select the opacity. This is helpful if you want to create a layered effect (including parallax, which we touch on further down).

Opacity

 

Image backgrounds

If you’re looking for a single image as your background, choose the image option from the style dropdown, if you want to tile your image, choose Pattern.

For either, you can select parallax effect to add some depth to your design – it creates a ‘sticky’ background image while the user moves farther down the page.

Please note that this feature is not available in mobile builder at this time.

Parallax

 

 

Images

Select Image if you want a single image (not tiled) as your background. You can select the position of image backgrounds, add overlays (which let you add a ‘tint’ effect to your background image using a color of your choice), and fit the background to the container.

 

 

 

 

Patterns

Select Pattern if you’d like to tile an image. You can select the position of image backgrounds, add overlays (which let you add a ‘tint’ effect to your background using a color of your choice), and fit the background to the container.