Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

Filtering to Organize Content

How to create and use Filters to organize website content in HubSpot

filter-icon

FILTERING

Dynamic content filtering for your website content without needing to refresh the page.

content-filters-resources-categories

Page Speed Impact

LOW

Adding filters to your page adds a minimal amount of code that does not have a significant impact on page speed.

MEDIUM

Additional impact on desktop and mobile if images within the module are added without lazy loading and/or compression.

An image or video background also impacts page performance.

TIPS

Convert images to WebP where possible to meet criteria to serve images in next-gen format.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

Vector images (SVG) also help keep file sizes to a minimum and can be used for graphics like logos and icons.

FAQ

What modules have the filter setting included?

Filtering is available with the following modules:

  • Sec Image Boxes
  • Sec Video
  • Sec Testimonials
  • Sec Simple Listing
How can I change the word "All" to something else?

In the module settings, there is a section at the bottom called "Standard Text/Translation" where you can change any of the default text to reflect your use-case.

Can I link to a category from another page or source?

Depending on where the module is located on the page, you can add an anchor link to jump to the section with the filter.

You can also set a default category to display on page load.

Unfortunately, because the filters work without refreshing the page (better user experience), it is not possible to have a URL that goes directly to any of the non-default categories.

Is it possible to change the style of the dropdown layout?
The different browser types do not really allow to style a form input element like the dropdown properly.
 
It can only be masked with a completely custom solution, which is prone to introduce glitches and problems across browsers.
 
That is why we decided to go with the browser defaults that show when opening the dropdown when launching the theme.
 
A lot has changed since and we have added this on our list of enhancements for a future update.

Setup Instructions

Filtering is available with the POWER Sec Image Boxes, Sec Video, Sec Testimonials, and Sec Simple Listing modules and can be used for a variety of page layouts to organize content so that it can be filtered by the user without refreshing the page.

Add Filters to Your Website Content

Marketing  → Website → Website Pages → [module with filtering]

First, you can decide whether to include a base category that includes all content.

Check the box next to Filter - Use Category "ALL" to turn on this feature.

image-box-filter-category-all-setting

Once you check the box, you'll see ALL available as an option on the page:
filter-all-category

If you would like to change the word ALL to something else, you can scroll down to the Standard Text/Translation module settings and update to whatever makes the most sense for your content or translate to your desired language.

standard-text-translation-filter-text-all

Another option available is to set one of your categories to display as the default category instead of ALL.

If you do not have ALL selected, the first category on the list is the default. If you would like to pre-filter the list on page load, you can set one of your categories to be the default using the text box called Filter - Active Category shown here:

filter-default-note

The last setting to control the filter function is to choose a Filter Layout, whether you want the categories in a list (horizontally) or a dropdown:

filter-layout-list-dropdown

Here is an example showing the Dropdown layout for Filters:

filter-dropdown

Filter Style Settings

In addition to the other style settings for the module, you will see a Different Filter Style? checkbox, when selected you can change the Filter Color Scheme and add a Filter Background Color.

filter-style-settings

Adding Categories

There is not a centralized list of categories to set up or choose from, when you create content, you'll just add the appropriate categories (tags) to the content and those categories will be added to the list of available filters.

For the Content, you'll see a setting called "Filtering" with a text box for "Categories" where you will add the tags. This list should be comma separated, which means that you will need a comma and a space following each tag. You can add multiple tags for a single content item, or use a single tag - just make sure you are consistent across all content and that the wording is the same.

Filtering-Categories-example

Next Steps

Filtering is a great way to create interactive content and make it easier for your users to find what they're looking for. Adding Shape Dividers is a great way to blend sections together and guide users to scroll down the page, oh, and take your designs up a notch, too.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.