How to Update Row Backgrounds and Featured Image Headers in BeaverBuilder

Your website headers can feature static images, slideshows, colors, gradients, or even videos to create a strong visual impact. This tutorial will guide you through updating these background features in BeaverBuilder.

Step 1: Open the Page for Editing

• Log in to your WordPress dashboard.

• Navigate to the page you want to edit and click Beaver Builder.

• In this example, we’ll work on the homepage.

Step 2: Access Row Settings

• Hover over the header row and click the wrench icon to open Row Settings.

• Click the Style tab.

Step 3: Choose a Background Type

Under Background, you can select:

• Photo – One static image

• Slideshow – Multiple rotating images

• Color – Solid color background

• Gradient – Blended color transition

• Video – Looping background video

Step 4: Using a Video Background (Best Practices)

• Recommended video length: ~10 seconds on loop.

• Upload the video to YouTube or Vimeo, then paste the video URL in the provided field.

• Do not upload large videos directly to your WordPress media library (file compatibility and playback issues).

• Disable audio to avoid autoplay sound, which can drive visitors away.

• This method ensures videos work across devices and browsers.

Step 5: Using a Slideshow Background

• Click Slideshow and then Edit Gallery to manage images.

• Image Requirements:

  • Landscape orientation (16:9 aspect ratio)

  • At least 1,600 pixels wide for high resolution

  • Leave some space at the top and bottom of the image to avoid cropping on different devices

• Avoid portrait-oriented images—they can appear cut off or distorted.

• Use high-quality, non-pixelated images for the best look.

Step 6: Arrange and Configure Your Slideshow

• Reorder images by dragging them in the gallery.

• Click Update Gallery when done.

• Adjust settings like transition type (fade, slide) and speed to your preference.

Step 7: Save and Publish

• Click Save in the Row Settings panel.

• At the top right, click Done > Publish to make your changes live.

Pro Tip:

Headers set through row backgrounds update instantly and keep your design consistent. Always check your changes on desktop and mobile to ensure your visuals display correctly.