{"id":4286,"date":"2026-10-21T08:09:54","date_gmt":"2026-10-21T08:09:54","guid":{"rendered":"http:\/\/eventful-elementor.local\/?post_type=docs&p=4286"},"modified":"2026-10-21T08:09:54","modified_gmt":"2026-10-21T08:09:54","password":"","slug":"filter-styles","status":"publish","type":"docs","link":"https:\/\/wpeventful.com\/elementor\/docs\/filter-styles\/","title":{"rendered":"2. Filter Styles and Layout"},"content":{"rendered":"

Show each filter as buttons, a dropdown, radio buttons or checkboxes, and set how the filter bar is laid out.<\/p>\n\n

This article continues Add AJAX Live Filters<\/a>. Button filters are in the free version; dropdown, radio and checkbox filters need Eventful Pro.<\/p>\n\n

Style one filter<\/h2>\n\n
  1. In Content > Filter Events > Filter Options<\/strong>, open a filter row. Show Ajax Live Filter<\/strong> must be on.\n
    \"Eventful<\/a>
    A filter row set to Dropdown, with three dropdowns in the live widget.<\/figcaption><\/figure>\n<\/li>
  2. Choose a Filter Type<\/strong>: Button<\/strong>, Dropdown<\/strong> (Pro), Radio<\/strong> (Pro) or Checkbox<\/strong> (Pro). Checkboxes let visitors pick several options at once.<\/li>
  3. Type a Label<\/strong>, shown above the filter, for example “Venue”.<\/li>
  4. Change Rename “All” Text<\/strong> to something clearer, for example “All venues”.<\/li>
  5. For buttons and dropdowns, pick a Filter Icon<\/strong>. It shows in the “All” button, or beside the dropdown.<\/li>
  6. Turn on Show Event Count<\/strong> to show how many events each option has, and Hide Empty Option(s)<\/strong> to leave out options with no events.<\/li>
  7. Set the Alignment<\/strong> of this filter: left, centre or right.<\/li><\/ol>\n\n

    Several filters side by side<\/h2>\n\n

    Below the rows, Filter Option Column(s)<\/strong> places up to 6 filters in a row. Click the device icon to set a different number for tablet and mobile, for example 3, 2 and 1. Margin Between Columns<\/strong> sets the gap.<\/p>\n\n

    Colours<\/h2>\n\n

    Open Style > Filter Bar<\/strong> to set the colours of the filter buttons in their normal and active states, and of the Show\/Hide Filter button.<\/p>\n\n

    Dropdown filters are named after their label for screen readers, so keep the label short and clear.<\/p>\n\n

    Related articles<\/h2>\n\n