Rubric is our most intensive theme but with regards to customization functionality. We needed to create a theme that customers might use to construct a web site utterly distinctive to them, so we pulled out all of the stops with Rubric. This theme lets customers alter each little styling element in a module, add customized courses and CSS, customise sections past HubSpot’s built-in capabilities, and even add customized search engine optimizations on a page-by-page foundation.
So, precisely what’s Rubric able to, and the way did we do it?
Diving into Rubric
Rubric is a extremely customizable theme that provides customers unprecedented management over their web site’s design and performance. Constructed with flexibility and ease of use in thoughts, Rubric empowers companies to create really distinctive web sites that completely align with their model and meet their particular wants.
At its core, Rubric is designed with you in thoughts. Its modular design philosophy permits for intensive customization, all inside a user-friendly interface. Whether or not you are a seasoned internet developer or a enterprise proprietor with restricted technical expertise, Rubric gives the instruments you should deliver your imaginative and prescient to life.
Key options of Rubric embody:
- Superior customization choices for each module
- Versatile layouts that adapt to numerous content material wants
- Improved accessibility and responsive design
- Streamlined workflow for environment friendly site-building
- Enhanced website positioning capabilities
These options work collectively to create a theme that is highly effective, intuitive, and environment friendly. Within the following sections, we’ll discover every of those facets, exploring how we have carried out them and the advantages they carry to our customers.
By selecting Rubric, you are not simply choosing a theme — you are embracing a brand new means of constructing web sites that places you accountable for each element. Let’s discover how we have made this attainable.
Versatile Layouts and Modularity
Our first drawback to unravel was the HubSpot Template Market’s module limitation. We needed Rubric to have sufficient content material choices that any enterprise might construct a web page tailor-made to its content material wants, however 50 modules are fairly limiting. Our resolution: maintain modules modular.
We moved away from making a separate module for each sort of fashion and structure and as an alternative created modules based mostly on content material. For instance, as an alternative of a Social Observe and Social Share module, Rubric has a single Socials module that may show both by choosing an choice from a Kind area.
This turns into exceptionally strong with modules just like the Navigation module, which permits customers so as to add static, flyout, or hamburger menus, pulling information from a easy menu, HubSpot navigation, or the module itself. Moreover, the hamburger and mega menu choices permit customers so as to add a number of varieties of content material, together with buttons, socials, search, photographs, and menu sorts.
Moreover, a number of of our modules have a Structure group that features choices to indicate/disguise sure components, change the sort or place of sure components, responsive choices for grids, and different layout-altering choices.
With the multitude of choices inside a module, you could be considering that is a whole lot of code, and you’ll be appropriate. Nonetheless, creating an intensive library of reusable macros drastically reduces the code inside a single module. The place the Navigation module normally has 1000’s of traces of code, it is lower than 500 within the module itself.
Macros have been additionally a large assist with the next drawback we needed to unravel with Rubric.
Complete Styling Choices
Whereas customers have been usually pleased with the choices supplied in all our earlier themes, we did discover a need for extra editable types within the assist tickets we obtained. Folks needed so as to add backgrounds, change the width of modules, alter the spacing between components, and modify sizes and spacing responsively. Including this quantity of customizability to each single module can be an enormous enterprise, even with macros, and is perhaps why many themes have such restricted choices.
Nevertheless, HubSpot modified the sport by introducing JavaScript Fields to native improvement, and our dream of offering customers with the final word customization expertise turned a actuality. JavaScript Fields allowed us to create reusable parts, which we paired with our macros to incorporate model teams per aspect in a module.
Including responsive choices additionally turned much more manageable with the assistance of JavaScript Fields, permitting us to create a utility operate that may repeat a set of fields.
Superior Module Settings
A less complicated however no much less necessary characteristic we added in Rubric is an Superior content material group inside every module. This permits skilled customers so as to add IDs, customized courses, and customized CSS to a module. With this, customers would not must go to the Design Supervisor or web page settings so as to add easy CSS adjustments to a single module occasion.
Sections Settings
Whereas HubSpot’s sections embody choices for alignment, spacing, and background out of the field, we needed Rubric to provide customers much more energy over them. Introducing the Part Settings module! Including this module to a bit provides customers 4 choices we felt have been most pertinent: background overlays, two-tone backgrounds, overlapping sections, and customised columns.
By far, the Customise Columns choice was essentially the most thrilling characteristic so as to add. Many occasions, customers need to change the order of modules on smaller screens, add house between modules, or just have a width completely different from the predetermined HubSpot grid.
One draw back, although, is that as a result of it is not attainable to straight change the wrapper code of HubSpot sections, this module makes use of JavaScript so as to add courses to the sections in order that we are able to alter them for a few of these choices.Round 2% of individuals have JavaScript disabled of their browser, which does not appear enormous, however customers would nonetheless need to guarantee their sections look first rate for these few folks earlier than including any customizations with this module.
Web page Settings
Different settings-type modules we needed to incorporate have been for the web page itself. In each Rubric web site web page template, we added a static Web page Settings module with header, website positioning, and indexing customization.
In our earlier themes, customers have been caught with no matter header was used on the template, which wasn’t perfect for some customers. Our Web page Settings module in Rubric solves this by permitting customers to change between their website header and touchdown header on any template or take away the header altogether.
Including customized social meta choices was extra complicated. HubSpot doesn’t present any technique to edit the standard_header_includes, which have to be current in all templates and is the supply of the dynamically added social meta.
Luckily, social platforms do not care if there are a number of meta tags on a web page, so we simply have to ensure it picks our customized ones. For LinkedIn, this meant including the Open Graph tags earlier than HubSpot’s meta, whereas for the remaining, we had so as to add each Twitter and Open Graph after HubSpot’s meta.
To make use of these settings outdoors of our module, in our base structure file, we utilized the export_to_template_context module property.
Weblog Itemizing Settings
One other drawback we needed to unravel with settings modules was how HubSpot does not present a straightforward technique to change the look and content material of every weblog itemizing web page (most important, easy, tag, and creator) as an alternative of all trying the identical.
To unravel this, we created separate dnd_areas for the principle part of every web page sort and added a static Weblog Itemizing Settings module with a dropdown to pick which itemizing to edit.
The opposite areas of the template (Hero, Sidebar, Callout) might be eliminated if wished utilizing the “Areas to incorporate” multichoice area.
Weblog Publish Settings
The final settings-type modules we created are particularly for Weblog Posts. Since weblog posts are dynamically created pages, we first wanted an alternate model of the Web page Settings module. Secondly, since drag-and-drop in weblog posts is proscribed to the publish physique, we needed the person to have some template customization choices each globally and regionally. We added two static modules to the Weblog Posts template: Weblog Publish Settings (International) and Weblog Publish Settings (Native).
Straightforward System Web page Enhancing
The final HubSpot ache level we needed to handle in Rubric is HubSpot’s lack of a system web page editor. Sometimes, it is inconceivable to edit a theme’s system pages with out cloning the templates to a baby theme and modifying these templates straight.
With Rubric, we have made it easy. By leveraging international partials, we have designed a System Web page Globals template that makes making a web page for modifying system web page content material a breeze.
Begin Utilizing Rubric At the moment
As you may see, Rubric is not simply one other HubSpot theme – it is a game-changer in web site customization and administration. We have poured our experience and fervour into making a theme that empowers you to construct the web site of your desires. And the most effective half? It is extremely straightforward to make use of, with out compromising on flexibility. From its modular design to its superior customization choices, Rubric is designed to satisfy the varied wants of companies and internet builders alike.
Able to revolutionize your website-building expertise? You can begin utilizing Rubric immediately! For these trying to construct or improve a single web site, head to our theme itemizing to obtain Rubric and discover its highly effective options. We have you coated for those who’re an company or a enterprise managing a number of portals. Our Rubric Theme License gives a zipper file of the theme that may be uploaded to any variety of portals, supplying you with the flexibleness to make use of Rubric throughout all of your tasks.
Do not let restricted customization choices constrain your web site. With Rubric, the one restrict is your creativeness. Obtain Rubric immediately and begin creating web sites that actually stand out within the digital panorama. Your dream web site is just some clicks away!