Premium add-on for Bricks Builder

Display Term Image with Bricks

How do you upload the term image and display it on the site with Bricks Builder? In this tutorial, I am showing you how you can do it on the Bricks Builder site.

Minimum requirements
1. Bricks Builder
2. ACF/MetaBox plugin


Term image with overlay content

Step 1: Creates Upload Image Field

We shall use the ACF or Metabox plugin and create the term meta field for terms. Here I used the MetaBox plugin and added the image upload field. Here was my settings:

Create the image upload field

Click on the “Settings” and set the location. Here I used the post-category taxonomy.

Configure the location

Click on Publish/Update button and create the term meta field.

You can make the same image upload field with the ACF plugin.

Step 2: Upload Image

Now we shall upload the image to every category. Navigate to the Posts -> Categories page and edit the existing category or add the new category with an image.

Upload image

Step 3: Creates Hero Section on Archive page

We shall create the hero section on the category archive page.

1. Navigate to the Bricks -> Templates page and click on the “Add New” button
2. Select the Template Type “Archive” and publish the page
3. Click on the “Edit with Bricks” button and open the builder editor
5. Click on Settings (gear) icon and set the condition for the archive template

6. Add a Section element and make a hero section area
7. Click on the “Style” tab of the section or container element and connect the Term Image as a background image like the attached image.

Builder settings

We are done. Now check the term’s archive page at frontend and you will get the different images for different terms.

Fills In: 

Leave the first comment

Search Tutorials

Request TutorialsFeatures Request