Module Xiroweb Ui Hero

This module is currently under development and free to the community. 
Your support through donations helps us continue developing this module—thank you for considering contributing!. Donate XiroWeb (PayPal)

Xiroweb Ui Hero is a module that
makes it easy to add HTML code to your website
with visually edit HTML and CSS, similar to popular website BUILDER.

You can drag and drop HTML elements to create layouts effortlessly, and you can also add CSS class attributes or define additional CSS properties as needed.

This module only using existing CSS files of your template like template(.min).css (with Bootstrap 5 included) and user.css. This module without adding any new CSS files.

Other Solutions and Their Scope of Use

Custom Module

In the past, we used Joomla's default Custom Module with the TinyMCE editor. While it lets you add HTML div blocks, the editing process isn’t user-friendly. You can only see plain text in the editor, not the actual layout. Adding or editing classes inside div elements is time-consuming and complicated.

When handing over websites to clients with less experience, they often accidentally delete important HTML div blocks while editing, which breaks the layout.

Module insert raw html css js

This method involves pasting HTML code and adding custom CSS. However, editing usually requires switching between the frontend and backend to see changes, which is inconvenient and takes extra time.

For most users, working with raw HTML divs is difficult and confusing, making it hard to maintain the website properly.

Website Builders

Builders are easy to use with drag-and-drop features that let you quickly create layouts. However, they often add too many unnecessary CSS and JavaScript files, along with extra CSS rules, which can slow down your website.

The HTML generated by builders is also more complex and doesn’t work well with Bootstrap 5 CSS, which is already included in templates like Cassiopeia or XiroStart Template Joomla.

Xiroweb Ui Hero

With Xiroweb Ui Hero, you can easily drag and drop ready-made HTML layouts while using a visual editor similar to website builders. You can click on any HTML element to add CSS classes, and the editor will automatically find the class styles from files css template.css or template.min.css, user.css of the active template,  showing the results instantly. This makes editing layouts simple and visually clear.

The module embed HTML content blocks with minimal custom CSS to frontend site. It doesn’t load any extra CSS files, only using the CSS files already in your template (template.css, user.css) to keep your frontend page loading speed and rendering performance.

When the website is handed over to clients, editing becomes easy. Users can double-click on text or images to make changes quickly, focusing only on what they need to update without worrying about the code.

 
With the pre-made hero blocks, we hope you won’t need to make many edits.

Custom CSS with Responsive Breakpoints

Web developers often write code css use breakpoints like @media (min-width: 768px) or @media (min-width: 576px) to make websites responsive. This module makes working with responsive CSS easier and more intuitive.

You can generate CSS for specific screen sizes by combining Device Size Screen with Property Editing Options.

Following Bootstrap 5’s Mobile-First Principle, default CSS is applied to all screen sizes when you select the mobile view before making changes.

For example, you can change the background color and instantly see the result while the module automatically generates the correct CSS for the breakpoints.

For more advanced needs, you can write CSS in your template’s user.css file and then use those classes in the module.

Usage Notes

To minimize generated CSS, you should add class attribute to elements. Adding a class does not create additional CSS. With CSS, the less code, the better the website's performance. 

You still need basic knowledge of Bootstrap and CSS to add class attributes to selected HTML elements. View the classes declared in the template.css and user.css files of the template currently active on your site to use them.

The module does not include additional CSS files on frontend site. The visual editor loads pre-built CSS files from the template. These CSS files include: template.css (or template.min.css), user.css, and custom.css. Therefore, this module should only be used with templates that include these CSS files and have loaded them on the frontend.

Recommended templates for use:

• The default Joomla template, Cassiopeia
• XiroStart Template

Practical Use:

We have been using this module on homepage XiroWeb.com and for our clients’ websites.

The module has helped us save significant time in building blocks. Within minutes, we can create blocks for use on our websites. These blocks can be inserted into any page without affecting other components. 

Donate

We hope this module helps you build websites more efficiently. Donate to support our development efforts and enable us to continue improving this module for you.