In the previous posts of this series, we’ve gone through some ways to create a Video Gallery page using page builders. In today's practice, we're going to find out how to do it with another page builder: Breakdance.

The example of creating a video gallery page with Meta Box and Breakdance

Video Version

Before Getting Started

The page shows a list of videos with additional information. Each video's information will be saved in a single post. In particular, the information about the video is the default information of the post. For videos, instead of uploading them to the website which makes the site heavy, I will use videos on Youtube and store those links in custom fields and display the videos from them.

So, we need Meta Box core plugin to have a framework for creating custom post types and custom fields. It’s free and you can download it directly from wordpress.org.

For the advanced features from Meta Box, we need some of its extensions:

They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each one individually.

Since this page is built by Breakdance, make sure you have it on your site.

Create a New Custom Post Type

Go to Meta Box > Post Types > Add New.

Create a new custom post type for videos

Since I want to show the author information for each video, I’ll go to the Support tab, and check this box.

In the settings of the post type, choose some features of the Supports tab to add them to the post type.

After publishing, you will see a new Videos menu like this in the Admin Dashboard.

This is a new post type that we created

Create Custom Fields

Go to Meta Box > Custom Fields to create custom fields.

Create new custom fields for videos

In this practice, the related information of the video is the default supported by WordPress. So, I use only one custom field to save the video.

Also, instead of uploading the video, I use a URL from another place. However, I won’t use the URL field. The oEmbed field will be the best choice in this case because Breakdance can display the video preview directly from the link saved in this field.

Choose oEmbed fields that allow you to save the link and display it as the video preview on the frontend.

In the Settings tab, choose Location as the Post Type, and select Video to apply the field to it.

In the Settings tab, set the Location as the Video Post Type to apply the created field to this post type.

Then, you will see all the custom fields in the post editor of the Video post type.

In the Post Editor, you will see the created custom field.

Create a New Global Block

With Breakdance, you should create a global block to get and display information from a post first, then use this global block to display them anywhere on your site.

Go to Breakdance > Global Blocks > Add Global Block.

Create a global block to get and display information from a post

Remember to set a post for live preview.

Set a post for a live preview

Add a Div element to cover the block. Then add a Video element inside. You’ll see a preview of a random video display.

Add Div and Video elements to cover the block

Click on the icon Insert Dynamic data, then choose the field in the Meta Box section. The video preview will display.

Choose the field in the Meta Box section

For the other information for the video, add a Column element to separate them into two columns.

Add a Column element to separate other information for the video

In the first column, add the Author element. It will automatically get information about the author from the post.

Add the Author element to automatically get information about the author from the post

You should configure it a little bit to choose which information of the author will be displayed.

Choose informations of the author will be displayed

Add the Post Title for the video title to the second column.

Add the post title for the video title

Add a Text element, there’ll be an icon when you hover it to insert dynamic data. Choose the Author Name field from the Author section.

Add a text element and choose the author name field for the video

Add the Post Content element.

Add the post content element for the video gallery

For the publish date, also add a Text element, then insert data from the Post Date. You can add some text or symbol before or after the date by using the prepend and append settings.

Add some text or symbol to video gallery

That’s all to display a video in the block.

Create the Page

Go to Pages > Add New to create the page, then edit it with Breakdance.

Add a Section element to cover all the content in the body of the page. Then add the Post Title element to display the name of the page.

Add a section element to cover all the content in the body of the page

Next, look for the Post Loop Builder. In the Global Block section, choose the one we’ve just created.

In the global block section, choose the one we’ve just created.

Then move to the Query section, choose Custom, and edit the query. Choose the Post Types as Videos to get data from this post type.

Choose the post types as videos to get data from this post type.

Then your wanted information about the videos will be displayed.

The video gallery on the page before styling

Style the Page

Still in the page editor, change the settings of each element to have the look as your desire. Just customize one by one.

Change the settings of each element to have the look as your desire

Then you will see the new look of the page.

The video gallery page have a new look after styling.

Last Words

We’ve found out how to create a video gallery page using Meta Box and Breakdance. Let’s try it and share the result with us. If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

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 a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  12. How to Add Custom Fields to Display Banners using Meta Box Plugin
  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 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 using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe with Meta Box Plugin
  37. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  38. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  39. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  40. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  41. How to Create a Team Members Page - P4 - Just Meta Box
  42. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  43. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  44. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  45. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  46. How to Create a Video Gallery Page - P5 - Using MB Views
  47. How to Create a Video Gallery Page Using Meta Box + Oxygen
  48. How to Create ACF Flexible Content Field with Meta Box
  49. How to Create an Auto-Updated Cheat Sheet in WordPress
  50. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  51. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  52. How to create an FAQs page - P4 - Using Meta Box and Bricks
  53. How to Create an FAQs Page - P6 - Using MB Views
  54. How to Create an FAQs Page -P3- Using Meta Box
  55. How to Create Buttons with Dynamic Link using Custom Fields
  56. How to Create Category Thumbnails & Featured Images Using Custom Fields
  57. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  58. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  59. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  60. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  61. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  62. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  63. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  64. How to Create Notification Using Custom HTML Field
  65. How to Create Online Admission Form for School or University
  66. How to Create Online Reservation Form for Restaurants using Meta Box
  67. How to Create Relationships - P1 - Using Meta Box and Oxygen
  68. How to Create Relationships - P2 - Using Meta Box and Bricks
  69. How to Create Relationships - P3 - Using MB Views
  70. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  71. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  72. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  73. How to Display Images from Cloneable Fields - P2 - with Oxygen
  74. How to Display Images from Cloneable Fields - P3 - with Elementor
  75. How to Display Images from Cloneable Fields - P4 - with Bricks
  76. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  77. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  78. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  79. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  80. How to Display Product Variations - P3 - Using Meta Box and Bricks
  81. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  82. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  83. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  84. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  85. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  86. How to Display the Most Viewed Posts - P1 - using MB Views
  87. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
  88. How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
  89. How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
  90. How to Manually Reorder Posts with Meta Box
  91. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  92. How to Show Posts With a Specific Criteria - P3 - Using MB Views
  93. How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
  94. How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
  95. How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
  96. How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
  97. How to Show Posts with Specific Criteria - P6 - Using Meta Box and Zion
  98. How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
  99. How to Show the Featured Restaurants - P4 - Using MB Views

Leave a Reply

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