I am currently customizing my website using a template that includes an element called 'portfolio-filters.' This element is located on my blog page and can be seen in the following image:
When a visitor interacts with these buttons, all relevant content or posts are displayed underneath. Clicking on a different button will change the displayed content accordingly. The 'Show All' button reveals all content below.
On my homepage, there are four main categories: Travel Fashion Lifestyle Motivation
How can I link these categories on the homepage so that when a user clicks on 'travel,' for example, they are directed to the blog page where the 'travel' category is highlighted and related content/posts are shown below?
The code snippet from my homepage: ontravel (Link is inside a DIV Class)
The code for the portfolio-filters on the blog page appears as follows:
<section class="small-gap filter-blog">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="portfolio-filters">
<ul>
<li class="active" data-filter="*"><span>Show All</span></li>
<li data-filter=".travel"><span>travel</span></li>
<li data-filter=".fashion"><span>fashion</span></li>
<li data-filter=".lifestyle"><span>lifestyle</span></li>
<li data-filter=".Motivation"><span>Motivation</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Would it be possible to implement this functionality?
Thank you, Michael