In this series, we learned how to create a video gallery page using page builders. This post is one of them on how to create it using Meta Box and Elementor. You can build a stunning video gallery without coding.

This is the video gallery page that I’ll create:

Video gallery page using Meta Box and Elementor

Video Version

Before Getting Started

The page shows a list of videos with some 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, even the author. For videos, instead of uploading them to the website which makes it heavy, I’ll use videos on Youtube, then store those links in custom fields and display the video preview from them.

So, we need Meta Box core plugin to have a framework that allows creating custom post types and custom fields. It is available on wordpress.org.

Besides, we need some Meta Box’s extensions for advanced features:

The last one, make sure you have Elementor Pro on your site to build the page.

Create a New Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type for the videos.

Create a new post type for the videos

Pay attention to the Supports tab. I want to display the author’s information, so check the ‘Author’ option.

Check the ‘Author’ option to display the author’s information

After publishing, you’ll see a new menu. It’s your post type.

Post type displays on menu

Create Custom Fields

Move to Meta Box > Custom Fields > Add New to create a new field group.

Create a new custom field group

I’ll create only one custom field to save the URL of the video as I said at the beginning.

We normally use the URL field to save links. But on the front end, Elementor will display the link in the text format only then we must take a few more steps to convert it to the video preview.

In this case, Meta Box has the oEmbed field that allows you to save the URL and display it as the video preview on the front end directly. So, we’ll set the field in the oEmbed type for more convenience.

Set the field in the oEmbed type

Creating the new fields was done. Go to the Settings tab, choose Location as Post Type and then, select Video post type to apply the created field to it.

Go to the Settings tab, choose Location as Post Type and then, select Video post type to apply the created field

After publishing, you’ll see the created custom field in the post editor.

The created custom field display in the post editor

As I mentioned about checking the Author option when creating the post type, you’ll see this section to choose the author of the post.

Choose the author of the post

Let’s move on to the next steps.

Create a Template

We’ll create a template to stipulate how the information of each video will be displayed. Go to Templates > Add News to create a new template.

Create a template to stipulate how the information of each video will be displayed

Since it is a list of posts, we should choose the template as a Loop Item.

Choose the template as a Loop Item

Remember to set the preview for the template.

Set the preview for the template

First, add a Section element with the one column layout to contain all the information of the video.

Add a Section element with the one column layout to contain all the information of the video

Then, add a Shortcode element inside it to display the video preview.

Add a Shortcode element inside it to display the video preview

Since, the video links are saved in a custom field created with Meta Box, use the Dynamic Tags and look for Meta Box Field in the Post section.

Use the Dynamic Tags and look for Meta Box Field in the Post section

After that, choose the field Video oEmbed that we use to save the video URL. The video preview will display immediately after.

Choose the field Video oEmbed that we use to save the video URL

For other information about the video, I’ll group them in a section and use the Inner Section element with two columns.

Use the Inner Section element with two columns

Next, add an Author Box element into the first column.

Add an Author Box element into the first column

You can change its settings to choose to display some kind of Author information or not.

Choose to display some kind of Author information

In the second column, add the Post Title to display the video title.

Add the Post Title to display the video title

You may want to display it as a clickable link, so choose the link as Post URL.

Choose the link as Post URL

Next, add a Text Editor element to display the author name.

Add a Text Editor element to display the author name

This information is saved in the Author Name field that is default by WordPress. So, use the Dynamic Tags and go to the Author section to find it.

Use the Dynamic Tags and go to the Author section to find the information

Next, add the Post Content element to display the description about the video.

Add the Post Content element to display the description about the video

For the post date information, also add a Text Editor element and use Dynamic Tags to get information.

Add a Text Editor element to get the post date information

Use Dynamic Tags to get information

Now, all the information about the video is already displayed.

All the information about the video is already displayed

We’ll create a new page and use this template for it in the next step.

Create the Page

Let’s create a new blank page as usual.

Create a new blank page

Then, we will edit it with Elementor.

Edit page with Elementor

First, create a Section to cover all the posts.

Create a Section to cover all the posts

Select the structure

Then, add the Loop Grid element inside it.

Add the Loop Grid element inside

In the Layout settings of the Loop Grid, choose the template as which one we’ve just created.

Choose the template as which one we’ve just created

Move to the Query section, choose the Source as Videos that is our post type.

Choose the Source as Videos that is our post type

And then, you’ll see all the videos displayed in the right format.

All the videos displayed in the right format

Style the Page

To change the layout of the page such as the grid, the number of posts displayed per page, go to change the Settings tab in the page editor with Elementor.

Change the layout of the page

To change the way each information displays, you should go to edit each element in the created template for displaying each video.

Change the way each information displays

Back to the page on the frontend, refresh it then you will see a new look.

Video gallery Page with Meta Box and Elementor

Last Words

We hope this article helped you create a responsive video gallery Page with Meta Box and Elementor - the easy way. If you want to suggest any topic, feel free to leave a comment. And, keep track of us to see more useful practices. Thanks!

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

Leave a Reply

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