The Challenge
Mautic’s built-in Focus Items module is a useful feature, but it doesn’t always meet the unique design needs of every site. By default, it offers limited customization options from within the builder, which means you’ll need to make some code changes to achieve the desired look and functionality.
Solution
The Focus Items module in Mautic comes with four predefined styles, but you can easily customize these styles by modifying their respective PHP files. If you need to adjust the layout or style of the Focus Items, here’s how you can make the necessary changes:
Steps to Customize Focus Items
1.Locate the Focus Item Files
First, you’ll need to find the Focus Item PHP files. These files are located in the Mautic plugin folder. Depending on your version, the path could be something like:
/plugins/FocusItemsBundle/Resources/views/
2.Modify the PHP Files
In this folder, you’ll find the template files for the different Focus Item styles. These files contain the HTML structure and basic styling. You can edit them to modify the appearance of the Focus Items, adding custom classes, updating the layout, or changing the overall design to fit your site’s needs.
3.Change the CSS
You will also need to edit the CSS files to reflect your custom styles. Depending on your setup, you can add custom CSS either within the Focus Item’s template or by linking an external stylesheet.
4.Customizing the Functionality
If you want to customize how Focus Items behave (such as how they appear on page load or when they are triggered), you can modify the associated JavaScript files. Mautic uses jQuery for many of its front-end interactions, so you’ll likely be updating the existing JavaScript for your custom behavior.
5.Testing Your Custom Focus Items
Once you’ve made your changes, test the Focus Items on your site to ensure they display and function as expected. You may need to clear your browser cache or recompile Mautic’s assets if you’ve added new CSS or JavaScript.
Conclusion
By modifying the Focus Items PHP, CSS, and JavaScript files, you can fully customize the look and behavior of Focus Items in your Mailertizer-powered AMS. While it requires some coding, this flexibility allows you to tailor Mautic’s features to better match your site’s design and functionality needs.
If you need further guidance or have questions about customization, feel free to reach out for support!
