1. Home
  2. Docs
  3. Dynamic Content Elements
  4. Dynamic Filterable Gallery

Dynamic Filterable Gallery

How to Configure & Style EA Dynamic Filterable Gallery

EA Dynamic Filterable Gallery is the perfect solution for heavy blog based websites. It lets you display your posts in an interactive manner, inside a grid layout. Every post in this list will be visually presented in separate cards.

Table of Contents:

  1. How to Activate Dynamic Filterable Gallery
  2. How to Configure the Content Settings
    2.1. Dynamic Gallery Settings
    2.2. Query
    2.3. Filter Controls
    2.4. Popup Settings
    2.5. Load More Button
  3. How to Style Dynamic Filterable Gallery
    3.1. General Style
    3.2. Others
  4. Final Outcome

1. How to Activate Dynamic Filterable Gallery

To use this Essential Addons element, find the EA Dynamic Galleryelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Dynamic Filterable Gallery’ into the Drag widget hereor the ‘+’ section.

Dynamic Filterable Gallery
After you are successfully done with this step, this is how the element is going to look like:

Dynamic Filterable Gallery

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will be able to configure ‘Dynamic Gallery Settings’, ‘Query’, ‘Filter Controls’, ‘Popup Settings’ & ‘Load More Button’.

2.1. Dynamic Gallery Settings

From this section, you are able to set the ‘Animation Duration’ for the Dynamic Gallery. Significantly, you can change the layout of the gallery by modifying the number of columns and Layout Style options. Maximum 6 columns layout can be set.

You can choose the layout out of these 2 styles: Grid & Masonry. You can set the height for Grid layout whereas for Masonry layout it’s automatically set.

Moreover, you can use the dropdown menu to change Item Style to either Hoverer or Card Layout. With Hoverer layout, the title and description is shown when you hover your mouse over the image. On the other hand, the title and description are always shown below the image for the ‘Cards’ style.

In addition to that, you are also able to change the ‘Hover Style’, ‘Zoom Icon’ and ‘Link Icon’ from this section.

Dynamic Filterable Gallery

Click to See Live Demo

2.2. Query

From this section, you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your source: Posts, Pages, WooCommerce Products & Manual Section.

After choosing your preferred ‘Source’, you can filter your contents by ‘Author’, ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add many authors, categories & tags as you wish. If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

The ‘Categories’ and ‘Tags’ you add through the Query will be automatically be added as filters. Moreover, you can set the number of ‘Posts Per Page’ and changes its ‘Order By’ option as well.

Dynamic Filterable Gallery
2.3. Filter Controls

You can use the toggle to enable ‘Filter Controls’. If it’s enabled, only then you will be able to view the filters. You can modify the ‘Gallery All Label’ and set an excerpt length for the posts.
Dynamic Filterable Gallery

2.4. Popup Settings

From this section, you can enable Popup option. As a result, when you click on the gallery item, it will displayed in the popup. If it’s not enabled, then you won’t be able to view the full size for the image.

Dynamic Filterable Gallery

2.5. Load More Button

You can use the toggle to turn on or off the ‘Load More Button’ option. You are able to change its text, button top space and alignment.

Dynamic Filterable Gallery

3.  How to Style Dynamic Filterable Gallery

Switch to the ‘Style’ tab to style all the features of Dynamic Filterable Gallery and get your desired result.

3.1. General Style

From the ‘General Style’ section, you can change the ‘Background Color’ of your Gallery.  Besides, you can add Box Shadow & ‘Border’ styling.

Dynamic Filterable Gallery

3.2. Others

You have the flexibility to add styling to Filter Controls & Gallery Items you are using. Besides, you can change the background color, add styling to the border & many more of ‘Item Caption’.

Dynamic Filterable Gallery

On the other hand, you can adjust the Background & Text Color of the button both when it’s in a normal view or a when mouse is hovered over it from ‘Load More Button Style’ section. You are also able to easily customize the ‘Load More Button’ by adding Border, Box Shadow & changing its typography.

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Dynamic Filterable Gallery content as per your preference.

Dynamic Filterable GalleryThis is how you design an impressive looking gallery and filter the contents based on certain criteria on your WordPress website easily using EA Dynamic Filterable Gallery.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now

Tags , , , ,

How can we help?