Placing banners with the same content but different sizes on multiple places of the website may take a lot of time in designing. But, you totally can use custom fields with dynamic content to create those banners at once. Then, when you want to change the content, just replace it in custom fields without re-design the banner. Let’s do it with Meta Box and Bricks!

These are two banners that have the same content but different sizes and positions.

Two banners have the same content but different sizes and positions

Video Version

Before Getting Started

Specifically, the banner background, text, color, text position, or any element of the banner are stipulated from the content saved in custom fields. These fields will be placed on a settings page.

In this practice, we’ll use the following tools:

  • Meta Box core plugin: to have framework to create a settings page and custom fields for the banner;
  • MB Settings Page: allows you to create a settings page to input banner information;
  • Meta Box Builder: provides a UI on the back end to easily create custom fields;
  • Bricks Builder: to build the page and display banners.

Create the Settings Page

We’ll use a settings page to include all the content and other settings of the banner.

Go to Meta Box > Settings Pages to create a new one. There is no need for special settings for it in this practice.

Create a settings page

After publishing, you can see a new settings page named Banner.

A new settings page named Banner

You’ll see that it’s blank now, so just move one to create custom fields for it.

Create Custom Fields

Each element for the content of the banner should be put in a separate custom field. These are some fields that I’ll create for the banner.

The custom fields that I’ll create for the banner

The first field you can see in the image above is to set to display the banner on the frontend or not. You can turn on or turn off the banner easily thanks to it.

All the other fields are the content of the banner. They’re just typical ones. You should create fields based on your own requirements for the banner.

Now, move to the Meta Box > Custom Fields to create them.

Choose the Checkbox type for the first field, which regulates whether to display the banner or not.

The Checkbox field regulates whether to display the banner or not.

For the other fields for the content of the banner, just create them without special settings.

After creating all the fields, move to the Settings tab, choose Location as Settings Page, and select Banner to display the created fields to the settings page we use for the banner.

Set location to display the created fields to the Banner settings page

Now, the custom fields are ready on the settings page.

The custom fields are ready on the settings page

You can start adding content for the banner.

Create a Template for Banner

Simply go to Bricks and create a template to display the banner and regulate how its content displays. Then, put this template into any place on any page you want.

In the right sidebar, choose the template type.

Choose the template type

After creating a new template, edit it with Bricks.

First, to cover the banner content, add a new section. There’ll be a container inside the section.

There’ll be a container inside the section.

Set Rule to Display or Hide the Banner

We’ll add some elements inside this container to display the banner’s content. But first, we should add a condition to set whether to display the banner or not, following the value that we choose for the Checkbox field.

I will use CSS to do it. So, I will add a dynamic class for the Section element. Go to the Attributes section in this element’s settings, add a new attribute.

To add a dynamic class for the Section element, add new attributes

You can name the class whatever you want.

You can name the class whatever you want.

However, to make the class be dynamic, click on the Select dynamic data button on the Value box, and choose the field where we stipulate if to display the banner or not.

To make the class be dynamic, click on the Select dynamic data button, and choose the field stipulating if to display the banner or not.

So, the name of the class will be added a variable as below. It’ll change following the status of the Checkbox field.

The name of the class will be added a variable

Next, go to the CSS section, add these codes.

In the CSS section, add some codes

.banner-display-Yes{
display:block;
}
.banner-display-No{
display:none;
}

.banner-display- are the first part of the name of the dynamic class that we have set. Yes or No is from the variable in the class. If you check the box to show the banner, the value saved in the Checkbox field will be yes. And the class will be .banner-display-Yes, so these lines of code below will display the banner on pages.

.banner-display-Yes{
display:block;

Otherwise, if you uncheck the box, the class will be .banner-display-No, then the banner will disappear thanks to this:

.banner-display-No{
display:none;
}

Display Banner’s Content

Before displaying content from custom fields, we should add some Div elements to divide content into separate parts for easier styling later.

Add some Div elements to divide content into separate parts for easier styling later

Now, add a Basic Text element for the banner’s title.

Add a Basic Text element for the banner’s title

As the banner’s title is saved in a custom field created with Meta Box, click the Select dynamic data button and choose the right field. It’s Title.

Get the banner’s title from the custom field

Currently, it’ll display like in the image below.

The banner’s title doesn't display as you want on the backend

Don't worry, you can see the right text on the frontend.

For the banner’s description, select another Basic Text element. We also use the Select dynamic data button and choose the field correspondingly.

Get the banner’s description from custom field

For the background image of the banner, I will add the image from the custom field to be the background of the Div element that covers the banner. There also is a button for selecting dynamic data from custom fields as well. Just search for the one where we saved the image for the banner.

Add the image from the custom field to be the background of the Div element that covers the banner.

Now, you can see the image displayed in the background.

The image displayed in the background

I have some fields to regulate the color and position of the text on the banner. Whenever users change the value in those custom fields, their position will automatically change as well. It’ll be done very easily since Bricks allows adding some attributes using dynamic data for each element. This is one of the interesting things that makes me love Bricks. I guess you will do so.

In the setting of each element that you want to set the position based on values in custom fields, just add values for the attribute, following what you do with CSS as normally. But, click on the Select dynamic data button and find the field where the style is stipulated to insert a variable into the value of each attribute like this.

Click on the Select dynamic data button and find the field where the style is stipulated to insert a variable into the value of each attribute

Add an attribute with the style stipulated from the Banner Color and Title’s Position fields.

In there:

  • color:{mb_banner_color}: is for the color, and {mb_banner_color} is the variable to get dynamic value from the Color field;
  • text-align:{mb_banner_titles_position}: is for the position, and {mb_banner_titles_position} is the variable to get dynamic value from the Title’s Position field.

Do the same with the style of the banner’s description, also add an attribute with the style stipulated from the Description Color and Description’s Position fields.

Add an attribute with the style stipulated from the Description Color and Description’s Position fields.

That’s all for the banner template. This is the preview of the banner on the frontend.

The preview of the banner on the frontend

You see, the color and the position of the text follow the settings that we set in the custom fields.

Let’s move on to the next step to put this template to some specific place on the website to display the banner.

Display Banner in Some Places

Display Banner in Sidebar

I will take the sidebar as a typical example for where we put the banner. Just edit the page where the sidebar is on with Bricks. I’ll add the banner to this space.

Add banner in Sidebar

Go to the right corner of the header bar of Bricks and click the Templates icon to add templates. Then, choose to insert the one that we’ve just created.

Insert the created template

You can see that the banner displays immediately.

In the structure of the page, there’re also the elements following those we added in the template.

After inserting the created template, there’re also the elements following those we added in the template.

You can also change the style settings of those elements to have a better look. This is how my banner displays in the sidebar on the frontend after that.

The banner displays in the sidebar on the frontend.

Display Banner as Full-width Image on a Page

In any place of a page, insert the created template for the banner. There’re also the same elements for the banner.

The same elements for the banner

You also should change those elements settings to get the right display for full-width.

Now, on the frontend, you can see both of the two places displaying the banner in different sizes. And, the two banners have the same content and some of the settings for style.

The two banners in different sizes have the same content and some of the settings for style

From now on, whenever you change the values saved in the custom fields, the content of the banners on every place will be changed while their size and layout remains intact.

Last Words

It’s not difficult to create dynamic banners using Meta Box and Bricks, right? From now on, you can have banners in different sizes on your website with the same content and settings. You can apply this way to put banners with the same content in multiple places on your website without designing too many ones. This saves more time and effort. Hope this tutorial will be helpful for you!

In the case that you are not using Bricks or any page builder, we also have another tutorial for you. Just take a look and follow the guides.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  31. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  32. How to Create a Recipe - P3 - Using Meta Box and Elementor
  33. How to Create a Recipe - P4 - Using Meta Box and Bricks
  34. How to Create a Recipe - P5 - Using Meta Box and Zion
  35. How to Create a Recipe - P6 - Using Meta Box and Brizy
  36. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  37. How to Create a Recipe - P8 - Using Meta Box and Kadence
  38. How to Create a Recipe - P9 - Using Meta Box and Divi
  39. How to Create a Recipe with Meta Box Plugin
  40. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  41. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  42. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  43. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  44. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  45. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  46. How to Create a Team Members Page - P4 - Just Meta Box
  47. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  48. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  49. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  50. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  51. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  52. How to Create a Video Gallery Page - P5 - Using MB Views
  53. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  54. How to Create a Video Gallery Page Using Meta Box + Oxygen
  55. How to Create ACF Flexible Content Field with Meta Box
  56. How to Create an Auto-Updated Cheat Sheet in WordPress
  57. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  58. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  59. How to create an FAQs page - P4 - Using Meta Box and Bricks
  60. How to Create an FAQs Page - P6 - Using MB Views
  61. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  62. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  63. How to Create an FAQs Page - P9 - Using MB Blocks
  64. How to Create an FAQs Page -P3- Using Meta Box
  65. How to Create Buttons with Dynamic Link using Custom Fields
  66. How to Create Category Thumbnails & Featured Images Using Custom Fields
  67. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  68. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  69. How to Create Download and Preview Buttons - P3 - Using MB Views
  70. How to Create Download Buttons in WordPress - Using Custom Fields
  71. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  72. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  73. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  74. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  75. How to Create Notification Using Custom HTML Field
  76. How to Create Online Admission Form for School or University
  77. How to Create Online Reservation Form for Restaurants using Meta Box
  78. How to Create Reading Time to Your WordPress Posts - Using MB Views
  79. How to Create Relationships - P1 - Using Meta Box and Oxygen
  80. How to Create Relationships - P2 - Using Meta Box and Bricks
  81. How to Create Relationships - P3 - Using MB Views
  82. How to Create Relationships - P4 - Using Meta Box and Breakdance
  83. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  84. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  85. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  86. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  87. How to Display a Video Playlist - P1- Using MB Views
  88. How To Display All Listings On A Map With Meta Box
  89. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  90. How to Display Author Bio in WordPress - P2 - Using MB Views
  91. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  92. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  93. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  94. How to Display Images from Cloneable Fields - P3 - with Elementor
  95. How to Display Images from Cloneable Fields - P4 - with Bricks
  96. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  97. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  98. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  99. How to Display Product Variations - P2 - Using Meta Box and Oxygen

1 thought on “How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks

Leave a Reply

Your email address will not be published. Required fields are marked *