How to Design Filterable Video Gallery?

Video Gallery widget provides the feature to create a filterable gallery. Here are the steps –

Step 1 – Enable Filterable Video Gallery option.

  • This option is available only for Grid layout.
  • The setting can be found under Content (tab) > Filterable Tabs.
  • Enabling this option will display all categories assigned for videos. See how to create categories in the next step.
  • “All” Tab Label is a label to the main category, where all videos in the gallery will be displayed. Edit it if required.

Step 2 – Set categories for videos.

  • The category names that are set to videos will display as Filterable Tabs title.
  • In the below screenshot Astra, Elementor are categories.
  • You can directly assign categories to the video. See how to set categories for videos?
  • For example – If video A has assigned to category Astra. While video B has assigned to category Elementor. Then Filterable Tabs will automatically display all 2 categories along with main ‘All’ category. On clicking on any of the tab will display related video.

Step 3 – Customize Filterable Tabs.

  • Category names will automatically display as Filterable Tabs.
  • That means if you assign 5 different categories to videos, then 5 Filterable Tabs for all those categories will be created.
  • You can completely customize Filterable Tabs with the settings under Style (tab) > Filterable Tabs.

You can add Title for Filterable Tab. That will describe more about the filterable tabs and video gallery.
Enable Title for Filterable Tab option and enter a title. You can customize the title under Style ( tab ) >  Title.

Manage Filterable Tabs on Responsive Devices

Under  Filterable Tabs section, you get an option for Responsive Support. Enabling this option will display all  Filterable Tabs as a dropdown on the responsive devices. If you have a number of filterable tabs, enable this option. It will stack all tabs and display them as a drop-down.

Related Documents –

How to Display Specific Video Category Tab as a Default on Page Load?

Not the solution you are looking for? Check other articles, or open a support ticket.