How to style row backgrounds

This article shows the different background options available within rows in the EE Builder and how to use them.

The following row background options are available:

Color
Gradient
Image/Photo
Video
Slideshow
Parallax

Styling a row

To select one of the styling options for a row you will need to be in the 'Style' tab in the builder for the row you wish to apply a custom background.

Scroll down to the option 'Background' and 'Type' which will be set to 'None' by default.

Next, click on the drop-down and select from the options available.

Color background

When selecting the type 'Color' it will display another option below with a color picker allowing you to use either the saved presets or the color picker.

For this example we have used the color picker and selected an orange background:

The EE Builder allows you to see your edits before you commit to them so you can tinker with the colors and content until you are happy. Then, click the 'Save' and 'Publish Changes' to update the live website.

Gradient Background

To set the background as a gradient of two colors, first select the 'Background Type' and within the drop-down select the 'Gradient' option.

Once you have selected 'Gradient' it will display a new field of options for your gradient:

Linear - Going from right to left
Radial - Going from the center outwards

Next, select the two colors for the Gradient using the color picker. You can also change the number to control the position of your gradient.

Photo Background

To set the background as an image or photo please select the 'Background Type' and within the drop-down select the 'Photo' option.

Once you have selected 'Photo' it will display a new field of options for your photo background:

Photo source - Media Library or URL. IMPORTANT: We always recommend using the Media Library and uploading your image to ensure the image will always be visible. If a link to an image contained in another site is used, that original image may be deleted in the future resulting in your image being shown as broken on your site.
Photo - This is the image that you select from your Media Library.
Repeat - This allows you to repeat the image if it doesn't fit the space you are wanting it to occupy be default.
Position - This allows you to control the positioning of the image eg. you may have a focus point in the center, in which case you would set the position to 'Center'.
Attachment - Here you can set to either Scroll or Fixed. Scroll is a static image whereas Fixed will result in the image scrolling as you scroll down the page.
Scale - Here you can choose either Fit or Fill. We recommend setting this to Fill as it will fill the space available with your image and results in no white spaces if your image isn't large enough.

With a Photo background you may want to have text appear over the top but don't want it to be lost due to the background image selected. That's why with the EE Builder we have the option for 'Background Overlay' where you can set a background overlay color or gradient that will appear over your image but not any of the content that you add to that row.

When setting a background overlay colour you can adjust the color transparency. By default it will be 100% opaque and you will not be able to see the set background. You can use the toggle highlighted with the arrow below to control the transparency of the overlay color.

Video Background

To set the background as a video please select the 'Background Type' and within the drop-down select the 'Video' option.

Once you have selected 'Video' it will display a new field of options:

Source - You can select from the following options: Media Library, URL and YouTube or Vimeo - We recommend using the YouTube or Vimeo option as uploading your video directly to your site can slow it down.
Video URL - Paste in the share URL.
Enable Audio - You can select either Yes / No.
Enable Video in Mobile - You can choose whether this should be shown on mobile devices or just show the fallback image within mobile.
Fallback Photo - This is the image that will show if your video fails to load.

Like the Photo Background you can assign a background overlay to ensure visibility of text content. You would do this in the same way highlighted in the 'Photo Background' section above.

The above example is using a demo YouTube video as the row background (but you can enter a Vimeo link in here if that's what you are using to host your videos).

Slideshow Background

To set the background as a Slideshow (of images) please select the 'Background Type' and within the drop-down select the 'Slideshow' option.

Once you have selected 'Slideshow' it will display a new field of options:

Source - You can select from the following options: Media Library and SmugMug.
Photos - You can set the images for your slideshow gallery.
Speed - You can control how quickly your slides change over, by default it is set to 3 seconds.
Transition - You can select your preferred transition effect eg. Fade.
Randomise Photos - You can choose to display the images in the order set in the gallery, or to show randomly.

Like the Photo Background you can assign a background overlay to ensure visibility of text content. You would do this in the same way highlighted in the 'Photo Background' section above.

Parallax Background

To set the background as a Parallax please select the 'Background Type' and within the drop-down select the 'Parallax' option.

This is very much like the Photo Background option and setting the attachment to Fixed. This option has less control but is much easier to set up as it is as simple as choosing your image and selecting the move speed.

Once you have selected 'Parallax' it will display a new field of options:

Photo - Here you can select the image.
Speed - Choose between fast, medium and slow to determine the speed the image will move when the user scrolls the page.

Like the Photo Background you can assign a background overlay to ensure visibility of text content. You would do this in the same way highlighted in the 'Photo Background' section above.