If you're struggling and spending too much time creating landing pages for multiple marketing campaigns, even when they have the same content structure, check out this article right away!

We have a comprehensive solution for these cases, named 'dynamic landing page'. All you need to do is create a sample page with content stored in custom fields, and have a template for it with a perfect interface. Then, when having a new campaign, just duplicate the page and change the content in custom fields. You’ll have a new landing page with new messages without touching the template anymore.

I have a tutorial on how to create a dynamic landing page using Meta Box and Elementor that you may have read in a couple of weeks ago. Doing it with Bricks is in a similar way.

I will take a real case from our company as an example. We have another product, Slim SEO. It has Slim SEO Schema and Slim SEO Link Manager, two plugins for two different purposes. Each one has their own landing page. You can see that these pages have the same structure but different content.

Example landing pages which have the same structure and different content

To have these two versions, we will use a dynamic landing page to minimize the effort.

Video Version

Before Getting Started

The mindset will be like this:

  1. Create custom fields to save all the content of the page. Each element will have its own field.
  2. Create a template with Bricks for a sample page. In there: get and display data from fields
  3. Clone the sample page to a new one for using in a specific campaign.
  4. Change the content in the custom fields, then have a new landing page.

As I mentioned, all of the content of the landing page, such as the hero image, tagline, subtitle, the URL in the button, its color or label, and so on, will be regulated by content in custom fields.

To have the framework to create them, we need the Meta Box core plugin. It’s available on wordpress.org.

Besides, we’ll need some advanced features from Meta Box extensions. You can install them individually or use Meta Box AIO.

Here are the extensions we may need:

Meta Box Builder: to have a UI on the backend to create the custom fields easily;
MB Testimonials: a ready-to-use solution from Meta Box that helps to create a testimonial section with pre-built layouts;
Meta Box Group and Meta Box Tabs (optional): to organize custom fields into groups or tabs with a clearer structure;

Finally, we need Bricks to build the landing page layout, get the information from custom fields, and display it on the frontend.

Create a New Page

Go to Pages > Add New to create a new page as usual.

Create a new page

I leave it blank since all the content will be put in the custom fields that I’ll create in the next step.

Blank page

Create Custom Fields

We will create custom fields for every element on the page and organize them in groups and tabs based on sections on the page.

Organize custom fields in groups and tabs based on sections on the page thanks to Meta Box Group and Meta Box Tabs

For some kinds of content, you may use cloneable fields or cloneable groups.

You may use cloneable fields or cloneable groups for some kind of content

Simply create the fields following your content structure. We have more than 40 field types for almost all kinds of data and layout, so just exploit them best.

Now, go to Meta Box > Custom Fields and create those fields.

Go to Meta Box > Custom Fields and create custom fields

To create tabs, just add a field with the type as Tab.

To create tabs, add a field with the type as Tab

Then, add some fields.

Add some custom fields for the Hero Section

All the fields below the Hero Section tab field will be displayed in the tab.

For the menu on the landing page, there will be multiple items on the menu. Each one of them includes the label and its link. So I will create a cloneable group.

Create a cloneable group for the menu since there will be multiple menu items, which includes the label and its link.

The sub-fields will be used to input the label and URL of each item.

The sub-fields will be used to input the label and URL of each item.

The button information will be in a group as well.

The button information will be in a group as well

Next, I add a new Tab field.

Add a new Tab field

Whenever you do that, it’s understood that the fields between the first tab field and this new tab field belong to the first one.

The fields between the first tab field and the new tab field belong to the first one

Continuing to create other custom fields. Just keep in mind the expected structure and create fields to follow it.

Continue creating custom fields following the expected structure

For the content in the testimonials section, I’ll use the MB Testimonials extension to build it, so I’ll create only a custom field for title, and another one for description of this section. All other content of this section will be created later.

For testimonial section, create custom fields for title, and description.

After creating all the fields, move to the Settings tab, set the Location as Post type, and choose Page. Since we created the fields for the landing page, go to the Advanced location rules section below and choose the name of the page we created in the previous step to apply all the fields to this page.

Set location to apply the custom fields to the wanted page

Go to the page editor, you will see all the fields.

All the custom fields displayed

Just input the content that you want to be on the landing page to the corresponding fields. I did it with some content for example.

Input the content that you want to be on the landing page to the corresponding fields

Create Testimonials

There will be a menu here when activating the MB Testimonials solution.

The menu of testimonials in the dashboard when activating the MB Testimonials solution

Go there and add a new testimonial for your page.

This section is to add content of each feedback from your customers.

The section is to add content of each feedback from your customers

If you want to add more feedback from another person, just click the Add more button.

Click the Add more button to add more feedback from another person

This MB Testimonial solution also provides some pre-built templates that you can opt for.

Choose one of pre-built layouts of MB Testimonials solution

Also can set some parameters for the styling.

Set some parameters for the styling

After publishing, there will be a shortcode automatically generated, just copy it since we will use it on the page.

Copy the shortcode automatically generated

We had a useful tutorial on how to use the MB Testimonials solution to create and customize the testimonial section. You can watch it for more details.

Create Template for the Landing Page

Go to the page editor and edit it with Bricks.

Go to the page editor and edit it with Bricks.

My landing page will have its own header and footer, so I’ll hide these parts.

The available header and footer of the page.

Go to the Settings section > Page Settings > General , disable the header and footer.

Disable header and footer as my landing page will have them separately.

The landing page has several sections such as header, hero, feature, pricing and so on. Thus, we need to select the Section element to cover the information of each section.

The Section element to cover the information of each section.

There is an available container. We’ll add some elements inside this container to display the section information.

Display Content from the Stand-alone Fields

We can add a reasonable element for the content that is from a stand-alone field (which is not in any group). For example, for the logo of the landing page, choose the Image element.

Add a reasonable element for the content that is from a stand-alone field

Since it is saved in a custom field created with Meta Box, use the Select dynamic data button to get the data form the corresponding field.

Use the Select dynamic data button to get the data form the corresponding field.

The corresponding field from Meta Box will be displayed.

Display Content from the Groups

For the content from the groups, you should use a Div element.

For the content from the groups, you should use a Div element.

Take the menu as an example. I have some items for the menu, and they are in a clonable group, so I need to use the query loop for the Div. In the Query section, turn on the button below and choose the type of data source as the group field where I put the menu items.

Use the query loop and choose the data source in the Query section.

To display the name of those items, add a Basic Text element. Use the Select dynamic data button and choose the right field. The field we should choose is the sub-field of the group that we use for the menu.

Get the information about the subfield in the group field.

Then, all the menu items will display immediately.

All the menu items will display immediately.

Each item should be embedded with a specific link. Those links are saved in custom fields as well. So, in the Link to section > add Dynamic Data > choose the field where we save the links.

In the Link to section > add Dynamic Data > choose the field where we save the links.v

So, please notice a rule about getting data from the custom fields.

  • Firstly, for the content from the stand-alone field, just add a corresponding element, then use the Select dynamic data button to get data from the wanted field.
  • Secondly, for the content from the groups, you should use a Div element and use the query loop for it to allow getting data from its subfields. Then add a reasonable element inside this Div, and add dynamic data from the wanted subfield.

Please keep in mind that we should follow this rule through all of this step to get full content from custom fields.

Follow the rule through all of these steps to get full content from custom fields

Style Something Using Dynamic Data

There is a special thing about the button in the hero section. It has the color background stipulated in a custom field. So, you can add an attribute to regulate this button style.

Add an attribute to regulate the button style

You also can use dynamic values from custom field for this attribute as well.

Use dynamic values from custom field for this attribute as well.

Display the Testimonial Section

We also have a special section for testimonials. It has the section’s title and description from custom fields, so follow the rule.

Follow the rule to get Testimonial section’s title and description from custom fields

We created a testimonial with the MB Testimonials solution from Meta Box and copied its shortcode in the previous step. To get data from MB Testimonials, just add a Shortcode element.

To get data from MB Testimonials, just add a Shortcode element

Then, paste the shortcode to the box as follows:

Paste the shortcode to the box

And this is our landing page on the frontend with all information displayed, including testimonials.

The landing page on the frontend with all information displayed, including testimonials

The next work is styling this page.

Style the Page

Back to the page editor with Bricks. Then customize each element to style it in your own way.

You may want to add some CSS for advanced styling, it’s up to you.

Add some CSS for advanced styling

This is the new look of my landing page.

The new look of my landing page

I finished creating a landing page with dynamic content from custom fields. But it is just a sample. It’s not for any specific marketing campaign. To create one for a campaign, let’s go ahead to the next step.

Clone the Landing Page for Specific Campaigns

When you have a new marketing campaign, just follow these steps:

  1. Clone the dynamic landing page that we have just created to a new one;
  2. Change the page’s content in custom fields, and you’ll get a new landing page.

To clone the page but keep its layout built with Bricks, we should use a third-party plugin named Duplicate Page. It’s available on repo. Just look for it and install.

Look for and install Duplicate Page to clone the page but keep its layout built with Bricks

There will be a new option to duplicate the landing page under the page.

There will be a new option to duplicate the landing page under the page.

Just duplicate it to any number of pages you want. I just created two to easily show you the concept.

Duplicate to any number of pages you want.

Next, you should go to Custom Fields in Meta Box, and add location for the field group that we created for the landing page as the new pages.

Add location for the field group that we created for the landing page as the new pages.

Go to those pages editor, you will see that they inherit all the custom fields including data saved in them.

The created pages will inherit all the custom fields including data saved in them.

Just change it to the new one matched with your new campaign.

Just change it to the new one matched with your new campaign

Go to the pages on frontend, you will see that you now have different versions of pages. Just different in content but the same layout.

Different versions of pages with different in content but the same layout

Last Words

I hope that this way will help you create landing pages for multiple marketing campaigns faster, more conveniently, and more efficiently. With the dynamic landing page, you’ll have new landing pages with new messages without touching the template anymore. If you want to try this with other page builders, follow this series.

Additionally, you also can apply this way to customize your homepage easily. We also have a tutorial on configuring the homepage regularly without touching code every time. Feel free to check it out!

  • How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks

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

Leave a Reply

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