Display Images on Essential Grid Filters

This article will show you how to display images on your Essential Grid Filters.

Preview:

  • Post 1
  • Post 2
  • Post 3
  • Post 4
  • Post 5
  • Post 6
  • Post 7
  • Post 8
  • Post 9
  • Post 10
  • Post 11
  • Post 12
Entertainment
Modern
Scenery

1. Make sure the filters you'd like to use are also selected as the grid's main source.

2. Add the "filter" element to your Grid, and then select your filters.

3. Make note of the "slug" name for each of your filters

4. Add the following CSS inside the Item Skin Editor and replace the "data-selectedfilter" with your filter "slug" name and the "background: url" link with your preferred image links.

  • Quick Note:
    To display the images on the right of the grid filter instead of left, replace the words "before" in the CSS below with the word "after"