In this video, you’ll learn how to add fallback images in Bricks Builder for both standard image elements and dynamic background images. This is a great way to prevent broken or empty layouts when featured images or custom fields are missing.

Bricks Fallback Documentation

Timestamps:

• 0:00 Introduction
• 0:50 Image Element – Fallback Image
• 2:22 Background Image – Fallback Image

How to Add Fallback Images in Bricks Builder (Image Elements and Background Images)

If you’re building dynamic WordPress websites with Bricks Builder, you’ve probably run into situations where a featured image is missing. Instead of showing an empty image or blank background, you can display a fallback image instead.

In this tutorial, I’ll show you two different ways to add fallback images in Bricks Builder:

• Fallback images for the Image element
• Fallback images for dynamic background images

This is especially useful for blog archives, custom post types, team pages, and anywhere featured images might not always exist.

Why Use a Fallback Image?

Dynamic content depends on information being available. If a featured image hasn’t been added to a post, Bricks has nothing to display.

A fallback image solves this by displaying a default image whenever the dynamic image is missing.

Benefits include:

• Prevents broken or empty layouts
• Creates a more consistent design
• Improves the user experience
• Eliminates blank background sections

How to Add a Fallback Image to an Image Element

Setting up a fallback image for a standard Image element is built directly into Bricks.

Step 1: Add Your Default Image

Select your Image element.

Under Content, choose the image you want to use as the fallback image.

This image will only appear if no dynamic image is available.

Step 2: Add a Dynamic Source

Under Sources, click Add Source.

For the breakpoint, select Base so the setting applies to all breakpoints.

Step 3: Choose Featured Image

Under Dynamic Data, select Featured Image.

Bricks will now:

• Display the featured image when one exists.
• Display your fallback image when no featured image is available.

This is one of the easiest dynamic image features in Bricks Builder and only takes a few clicks.

How to Add a Fallback Image to a Background Image

Background images work a little differently.

Unlike the Image element, Bricks doesn’t currently provide a fallback image option in the interface for dynamic background images.

Instead, you’ll use Bricks’ Dynamic Data arguments.

Add the Dynamic Background Image

Select the container or section.

Go to:

Style → Background

Choose Featured Image as the dynamic background.

If your post doesn’t have a featured image, you’ll notice the background is blank.

Use the Fallback Image Argument

Bricks allows you to extend dynamic tags with arguments.

For a featured image, the syntax looks like this:

{featured_image @fallback-image:1667}

Replace 1667 with the attachment ID of the image you want to use as the fallback.

Now, if the featured image is missing, Bricks will automatically display your fallback image instead.

Finding an Image ID

Every image uploaded to WordPress has its own attachment ID.

You can find it by opening the image inside the Media Library.

The attachment ID appears in the URL and is also available in several media management plugins.

Once you have the ID, simply replace the number in the dynamic tag.

Using an Image URL Instead

You don’t have to use an attachment ID.

Bricks also allows you to use the image URL.

For example:

{featured_image @fallback-image:'https://yourwebsite.com/fallback-image.jpg'}

Both methods work the same way.

Which Method Is Better?

Both options are valid, but I generally prefer using the image URL.

Using a URL makes it much easier to identify which fallback image is being used later.

An attachment ID like 1667 doesn’t tell you anything a few months from now, while a URL clearly identifies the image.

For long-term maintenance, URLs are usually easier to understand.

Test Your Fallback Images

After setting everything up:

1. Add a featured image and verify it displays correctly.
2. Remove the featured image.
3. Refresh the page.
4. Confirm the fallback image appears instead.

Testing both scenarios ensures your layouts always display as expected.

Learn More About Bricks Dynamic Data

The fallback image argument is only one of many Dynamic Data features available in Bricks Builder.

The Dynamic Data documentation includes additional arguments that let you customize how dynamic content behaves throughout your website. It’s worth exploring if you’re building more advanced layouts.

Final Thoughts

Fallback images are a simple feature that can make your dynamic websites look much more polished.

For standard Image elements, Bricks includes fallback support directly in the interface.

For dynamic background images, you’ll need to use the @fallback-image argument, but once you know the syntax, it’s quick to implement.

If you’re moving from Elementor to Bricks Builder, understanding these Dynamic Data features will help you build more flexible and reliable websites.