Configuring the Events

Setting up Events Filtering in Index 5 or Events Page

The event filtering in these pages utilizes the Isotope plugin to filter the event items. Below is an example of the filter navigation code in an HTML file:

<ul
  class="list-unstyled event_filter d-flex justify-content-center mb-4 flex-wrap gap-2"
>
  <li><a href="#!" data-filter="*" class="active">All Events</a></li>
  <li><a href="#!" data-filter=".family">Family</a></li>
  <li><a href="#!" data-filter=".corporate">Corporate</a></li>
  <li><a href="#!" data-filter=".members">Members</a></li>
</ul>
<!-- /.list-unstyled event_filter -->

In the provided code, the illustration class is used as a data-filter value and also assigned as a class to the event item. When you select the "Family" filter, the plugin will show only the event items that have the family class.

Here is an example of an event with the data-filter value and the classes .family and .corporate:

<div class="col-lg-4 event_outer family corporate mb-4">
  <a
    href="single-event.html"
    class="event_minimal_link d-flex position-relative rounded-2 shadow-sm"
  >
    <div class="overflow-hidden">
      <img src="img/events/someimage.jpg" class="img-fluid rounded-2" alt="" />
    </div>
    <!-- /.overflow-hidden -->

    <div class="em_content position-absolute">
      <div class="em_detail">
        <h3 class="fs-4">Any Events</h3>
      </div>
      <!-- /.em_detail -->

      <p>
        <i class="ph ph-map-pin"></i>
        Anywhere
      </p>
    </div>
    <!-- /.em_content -->
  </a>
  <!-- /.event_minimal_link -->
</div>
<!-- /.col-lg-4 -->

When you choose a specific filter, the plugin will show only the events with the corresponding category. In this example, it will display the item when you click the Family and Corporate buttons in the filter list.

For a more detailed explanation, you can visit the plugin's official website here.