Customize Post Categories for UX Builder (Flatsome Theme) — is an essential addon for any Flatsome user looking to break free from standard blog and portfolio layouts. While the Flatsome theme and its UX Builder are incredibly powerful, they offer limited options when it comes to styling the category labels and meta-information within post grids and sliders. This plugin directly addresses this limitation by adding a suite of new design controls to the UX Builder's native 'Posts' element.
This powerful tool allows you to take full control over the appearance of post categories. You can assign unique background colors, text colors, and custom icons to each category, making your content more organized and visually appealing. The settings are intuitive and live-previewed within the UX Builder, ensuring a smooth and efficient design process. Whether you're building a complex news portal, a stylish portfolio, or a dynamic blog, this plugin provides the flexibility needed to create a professional and engaging user experience that perfectly matches your brand's identity.
Why is this important?
In a competitive digital landscape, standing out is crucial. Standard, generic blog layouts fail to capture user attention, leading to higher bounce rates. Statistics show that websites with strong visual appeal and clear content organization can increase user engagement by up to 80%. Your blog or portfolio is a key asset, but if every post looks the same, users struggle to differentiate topics and lose interest quickly.
This plugin solves the core problem of visual monotony. By enabling you to color-code categories, add distinct icons, and customize hover effects, you create an intuitive visual language for your readers. This immediately helps them navigate content, improves time-on-site, and reinforces your brand's aesthetic. Stop letting your valuable content get lost in a sea of sameness; start guiding your users with beautiful, functional design that converts.
Features
- Seamless integration with the native Flatsome UX Builder 'Posts' element.
- Assign a unique background and text color for each individual post category.
- Upload and assign custom SVG or image icons to categories for better visual identification.
- Advanced typography controls: change font size, weight, and style for category labels.
- Create custom hover effects for category badges to improve user interaction.
- Option to display categories as stylish pills, badges, or simple text links.
- Show or hide the category display on a per-element basis.
- Full control over the position of the category label (e.g., top-left, bottom-right).
- Add custom text or a prefix before the category name (e.g., "Topic:").
- Live preview of all changes directly within the UX Builder for a fast workflow.
Integration and Customization Options
| Feature | Standard Flatsome Element | With This Plugin |
|---|---|---|
| Category Color Coding | ❌ Not available | ✅ Yes (Unique color per category) |
| Custom Category Icons | ❌ Not available | ✅ Yes (SVG/Image upload) |
| Category Badge Styling | Basic Link | ✅ Advanced (Pill, Border, Shadow) |
| Typography Control | Global settings only | ✅ Per-element font size/weight |
| Hover Effects | Simple color change | ✅ Customizable (e.g., grow, fade) |
| Positioning | Fixed position | ✅ 9 position options |
| Live UX Builder Preview | Limited | ✅ Full live preview of all styles |
How to install the plugin?
- Download the plugin archive using the button above.
- Navigate to Plugins > Add New in your WordPress dashboard.
- Click "Upload Plugin" at the top and select the downloaded ZIP file.
- Install, activate the plugin, and follow the quick setup wizard instructions.
FAQ
Does this plugin work with custom post types in Flatsome?
Yes, absolutely. The plugin is designed to work with both standard WordPress posts and any custom post types you have registered on your site, as long as they use standard taxonomies (categories). When you use the UX Builder 'Posts' element and select your custom post type, our customization options will appear and function correctly.
Will the category styles affect my entire site or only UX Builder elements?
The styles you configure with this plugin are specifically applied to the 'Posts' elements within the UX Builder. They will not affect the appearance of categories on your default blog page, archive pages, or single post pages. This gives you precise control, allowing you to create unique layouts for your homepage or landing pages without altering your theme's default styling elsewhere.
Is it possible to assign a style to a parent category and have it apply to all its child categories?
Currently, the plugin's settings are applied on a per-category basis, meaning each category (parent or child) can have its own unique style. There is no automatic inheritance of styles from a parent category. This provides maximum flexibility, but if you want child categories to have the same style as the parent, you will need to configure them manually.
How does this plugin impact website performance and loading speed?
The plugin is built with performance in mind. It's lightweight and only loads its assets (a small CSS file) on pages where a customized UX Builder 'Posts' element is present. The styling rules are efficient and do not add any significant overhead or database queries on the front end. You can expect a negligible impact on your site's overall performance.
