All templates have all 4 main types of headers built-in. The tutorial about changing the type of navigation in the template is available here.
Additionally, for each of the listed above headers, there is a top panel (also built as a global group) with fast links (telephone number, email) and social buttons - "me-header-top-panel" - live preview.
Description of how to activate the global group with the top panel is here.
It consists of modules: Logo, Main menu - standard navigation in desktop version and the hamburger type for mobiles, Search popup, Language switcher and Call-to-Action.
Due to the limited space for the Main manu, it is not recommended for very extensive pages. The recommended number of items in the first level of the menu is from 4 to 5. If the website contains more pages, better consider using the hamburger type of the header.
Do you want to learn more about changing the navigation in the template? Have a look here.
me-blog-variables - is used for the proper functioning of all blogs templates. Modifications are not recommended!
Both global modules are in the folder: Mercuric Modular/global content/global modules.
CSS and JS assets
In the global module me-css and me-js all internal and external links to CSS and JS files are stored.
This module is used in all Mercuric Modular templates except the mailing templates. It is absolutely necessary for the proper functioning of the template. Removing it from any template will cause fatal errors in the display of the page.
In the HTML + HUBL window, you may find links to Font Family and a link to the FontAwesome icons. If you seek more information about changing the font, have a look here.
Below there is the code responsible for the "wow" animation in all templates. Want to learn more about "wow" animation? Click here.
On the right side in the section "Linked files", there are CSS and JS files directly uploaded to the Design Manager.
Deleting any of these files will cause Turbo Mercuric templates to malfunction.
All CSS files, including the main style sheet mercuric-styles.css, are in the Mercuric Modular/assets/mercuric_css folder.
JS libraries, including the main script file mercuric-scripts.js, are in the Mercuric Modular/assets/mercuric_js folder.
Mercuric Modular is made up of 100 templates.
All templates are located in the Mercuric Modular/templates folder and are categorized in the following subfolders:
Mercuric Modular blog templates are in the Mercuric Modular/templates/blog folder.
In total there are 13 blog templates:
me-301-Blog listing 1
me-302-Blog listing 2
me-303-Blog listing 3
me-304-Blog listing 4
me-305-Blog listing 5
me-306-Blog single 1
me-307-Blog single 2
me-308-Blog single 3
me-309-Blog single 4
me-310-Blog single 5
me-311-Blog single 6
me-312-Blog combined 1
me-313-Blog combined 2
Blogs templates from me-301 to me-305 contain only the listing view. In order to work properly, they need another template like a single post template, i.e. one from me-306 to me-313 group. Click here to learn how to create a blog page from the separate listing and single post templates.
Blogs templates with numbers me-312 and me-313 are complete blog’s pages consisting of a listing view and a single post template. They can be also used as a single post view for templates with listing only (me-301 - me-305) and conversely (me-306 - me-311).
Mercuric Modular email templates are in the Mercuric Modular/templates/email folder.
In total there are 5 email templates:
me-401-Mailing 1 - v2
me-403-Mailing notification 1
me-404-Mailing double opt-in 1
me-405-Mailing resubscription 1
All the above templates are crested as pure HTML + Hubl code. This makes it easier to customize them for different email clients so that they display the same everywhere and without errors.
All Mercuric Modular email templates are responsive.
Mercuric Modular landing templates are in the Mercuric Modular/templates/landings folder.
In total there are 15 landing templates. Those with numbers from me-201 to me-210 work best as Landing pages and those from me-2011 to me-2015 as Thank you pages.
List of all landing templates:
me-201-Landing 1 ebook - v2
me-202-Landing 2 ebook - v2
me-203-Landing 3 subscribe - v2
me-204-Landing 4 video - v2
me-205-Landing 5 video
me-206-Landing 6 offer
me-207-Landing 7 two column
me-208-Landing 8 three column
me-209-Landing 9 multi column
me-210-Landing 10 full photo
me-211-Thank you 1 ebook - v2
me-212-Thank you 2 ebook
me-213-Thank you 3 video - v2
me-214-Thank you 4 offer
me-215-Thank you 5 offer
All System templates are in the Mercuric Modular/templates/system folder.
Mercuric Modular pack consists of 6 System templates.
me-501-Error 404 1 - v2 and me-502-Error 404 1 - v2 are templates responsible for displaying errors on the page. 404 when the page is not available at the requested URL address and 500 when a server error occurred.
Like all System pages, you can create them by selecting the appropriate templates in your account settings: Settings -> Website -> Pages -> System Pages tab.
me-503-Subscription preferences 1, me-504-Subscriptions confirmation 1 and me-505-Backup unsubscribe 1
These templates are needed to allow your contacts to change their email preferences.
They are set up similarly to the Error pages: Settings -> Marketing -> Email -> Subscriptions tab.
More information about Error and Subscription system templates you will find here.
me-506-Search result 1
It is a special System template to display search results on your website.
It is set up in the same place as the Error pages: Settings -> Website -> Pages -> System Pages tab.
Mercuric Modular Website templates are in the Mercuric Modular/templates/website folder.
The most numerous group of templates, which includes as many as 61 templates.
Full list of website templates:
me-001-Home 1 main
me-002-Home 2 banner
me-003-Home 3 slider
me-004-Home 4 video
me-005-Home 5 features
me-101-Contact 1 - v2
me-102-Contact 2 - v2
me-103-Contact 3 - v2
me-104-Contact 4 - v2
me-105-About us 1 - v2
me-106-About us 2 - v2
me-107-About us 3 - v2
me-108-Team 1 - v2
me-109-Team 2 - v2
me-110-Team 3 - v2
me-111-Team 4 - v2
me-112-Team 5 - v2
me-113-Team single 1 - v2
me-114-Team single 2 - v2
me-115-Team single 3 - v2
me-116-Product 1 - v2
me-119-Product single 1
me-123-Pricing all tables 1
me-124-Portfolio 1 - v2
me-125-Portfolio 2 - v2
me-126-Portfolio 3 - v2
me-127-Portfolio 4 - v2
me-128-Portfolio 5 fullscreen
me-129-Project single 1
me-130-Project single 2
me-131-Services 1 - v2
me-132-Services 2 - v2
me-134-Company 1 - v2
me-137-Case study listing 1 - v2
me-138-Case study listing 2
me-139-Case study single 1 - v2
me-140-Resources 1 - v2
me-141-Our clients 1
me-142-Our process 1
me-143-Our process 2
me-144-Career listing 1
me-145-Career single 1
me-147-FAQ 1 - v2
me-148-FAQ 2 - v2
me-150-Coming soon 1
me-151-Two columns 1
me-152-Two columns 2
me-153-Two columns 3
me-154-Two columns 4
me-155-Three columns 1
me-156-Three columns 2
All Mercuric Modular Custom modules are located in the Mercuric Modular/custom modules folder and are categorized in subfolders according to their scope of application:
/blog modules - 22 modules
/email modules - 11 modules
/footer modules - 2 modules
/general modules - 91 modules
/header modules - 6 modules
/system modules - 5 modules
Total number of modules - 137
Most of the modules are easy and intuitive to use. More advanced modules have fields with "Help text", describing their rules of operation or guidelines/requirements. Always read instructions to ensure that the used modules are set properly.
Change type of navigation
The type of the navigation can be set individually in each template or independently for individual pages built on the same template.
In order to change the navigation type in the template globally for all current (in which the navigation type was not overwritten from the "Content editor" level) and future pages, built on it, you need to:
Open the template in Design Manager.
In the sidebar „Edit” tab find the "Additional <head> markup" and click "Expand" for more convenient editing.
In the "header_config__option" module (line 1), change the content of the attribute "value" to one of the options available in the "choices" paramenter.
In order to change the type of the header for a particular page, you should:
In the "Content editor" move forward the side panel with the modules.
Find the "Choose header type" module - this should be the first on the list.
Select the desirable option from the dropdown menu.
Show top panel
The additional panel above the navigation can be set individually for each template or independently for individual pages built on the same template.
If you want to activate the top panel in the template globally for all current (in which the navigation type was not overwritten from the "Content editor" level) and future pages, built on it, you need to:
Open the template in Design Manager.
In the sidebar "Edit" tab find the "Additional <head> markup" section and click "Expand" for more convenient editing.
In the "header_config__top_panel" module (line 2), change the content of the attribute "value" to "True".
To display an additional panel above the navigation only for the specific page, you should:
In the "Content editor" move forward the side panel with the modules.
Find the "Show header top panel?" module - this should be the second on the list.
Click to switch the button to "True".
Change the navigation background color
There are 2 navigation color options available:
Transparent background, which changes color to white while scrolling down a page.
To change the color of the navigation background, you should:
Find the "me-header-color-and-logo-swap-config" module in the template.
Select one of the "Header color" field options.
If you need to set the background color of the navigation only for a particular page, you need to unlock the editing of this module. You may do this, by changing the value of the "Prevent editing in content editors" switcher to "False". Then the module edition will also be available from the "Content editor" level.
Set the color changeable logo (like in our demo)
To set the logo, which changes color while scrolling the page, you just need to:
Open the template in Design Manager and find the module named "me-header-color-and-logo-swap-config".
Click on the "Swap logo on scroll?" button to make it active. Using this feature is most effective when combined with the activated "Transparent" option in the "Header color" field.
Go to edit one (or more, depending on your needs) of the global header groups.
Find the Image module named "Logo for swap - on transparent header…", which is under the module with the main logo ("Logo" module).
Set a logo that will be displayed when the page is not scrolled.
Set the same size of the new logo as the original one.
Our Mercuric Modular theme uses the "grid system" based on Bootstrap 4.
Unlike the native HubSpot’s grid, which is based on old Bootstrap 2 and is focused on desktop devices ("desktop first"), our grid provides many more possibilities such as more responsive breakpoints and the flexbox technology. What’s more, it is highly focused on mobile devices ("mobile first").
Using our grid is not difficult, however basic knowledge of HTML and CSS is recommended. Of course, you don’t have to worry about anything to create a template based on Mercuric Modular - the drag and drop HubSpot’s system is fully supported by us and the structure the user build in the Design Manager (i.e. the layout of columns) will be exactly reflected on the published website.
When building a template without our grid, the page will change its layout of columns only for screens whose width is lower than 768 px.
With our grid classes you may freely change the width of columns for the following screen widths:
Moreover, the flexbox technology provides control over the behavior of the columns. You can specify whether the columns in a row should be centered vertically or horizontally. You can even change the order of the columns for specific breakpoints.
To protect Mercuric Modular template’s CSS classes, we added the prefix "me-" to most of classes’ names. This way our classes will not interfere with other classes that may be found on your website.
List of available container classes:
me-container - main container class - width 1170px
me-container header-container - for hamburger menu - width 1585px
me-container me-container--big - width 1920px
me-container me-container--large - width 1400px
me-container me-container--small - width 940px
me-container me-container--smaller - width 740px
me-container me-container--half - width 585px
me-container-fluid - full screen width
CSS styles for Mercuric Modular’s containers are available in the main CSS file "mercuric-styles.css" in the "__globals.scss" section.
Feel free to modify the containers’ widths or add new ones so that the whole will best suit your needs.
In order to use the container class in practice, it should be added to the "CSS class" field of the module group.
If you want to set one of the modified container classes, remember to always add the main class "me-container", and then after space, the class which brings new width.
The exception is "me-container-fluid". This class should be without the antecedent "me-container" class because its task is to extend the columns over the entire width of the screen.
Following the latest trends and best web-development practices, the Mercuric Modular’s grid is coded according to the "mobile first" conception.
To make it easier to use, we used the same class names as in the original Bootstrap 4.
You don’t need to use them, because the layout of the columns you set on the Design Manager will be retained. Additional columns’ classes are used to improve the page’s responsiveness.
Example of application of additional classes:
col-12 - full container width - 12 columns
col-md-6 - 6/12 of the container width for screens above 768px
col-lg-4 - 4/12 of the container width for screens above 992px
In the example above, only col-sm- and col-xl- are missing. However, the rules of conduct are the same. For example, col-sm-8 will set the column width to 8/12th of a container for screens above 576px and col-xl-10 to 10/12th of a container for screens above 1200px.
FHubSpot’s Flexible Columns provide freedom in creating websites. Read more about them here.
However, they have a significant disadvantage - modules in such a group are always stretched over the full width of the container.
To solve this problem we’ve prepared special classes thanks to which you can freely change the width of the columns in the Flexible Column group.
They are very similar to the usual Bootstrap 4 classes, which are described in the previous section Mercuric Modular Grid columns. The only difference is the additional "flex-" prefix.
In view of the HubSpot limitations, the set of classes is added directly to the Flexible Columns group, because individual modules in such a group do not have "CSS class" field.
The flex-col- styles will be applied to all modules in the same group. Analyzing the screenshot above that will be:
flex-col-12 - each module has full screen width - 12 columns
flex-col-sm-6 - each module has 6/12th of container width for screens above 576px
flex-col-md-4 - each module has 4/12th of container width for screens above 768px
flex-col-lg-3 - each module has 3/12th of container width for screens above 992px
The usage of the flexbox technology is the unquestionable advantage of our grid.
Among other things, the flexbox technology gives the possibility to change the order of columns in a container. This is specially useful when, for example, in a two-column layout, with a large screen width (desktop), an image is in the right column, and the text in the left, and in the mobile version the picture is to be placed above the text, not below it, as it results from the natural behavior of the HTML structure.
To make the column with the image change its layout when resizing to a mobile version, you need to add 2 classes: order-first and order-md-0 to the "CSS class" field.
Because our grid uses the "mobile first" conception, classes:
order-first - is responsible for the location of the column as the first one in the container
order-md-0 - will restore the layout of the columns to their natural order for screens above 768px.
Due to the flexbox technology, it is possible to freely control the alignment of the columns in the container, both vertically and horizontally.
For this purpose, we also used the classes from Bootstap 4. You will find a detailed description of all available classes here.
In order to apply them in practice, the alignment class should be added to the group located directly above the columns. Most often it is a group with the me-container class.
If you want to align all modules inside a Flexible Column, just add the desired class to the Flexible Column.
As in Bootstrap 4, the "no-gutters" class added to the "CSS class" field of the group will remove the spaces between all columns in the group.
In the Mercuric Modular theme, it is often used in the version for Flexible Column: "flex-col-no-gutters". Added directly to Flexible Column will remove the spaces between all modules in the Flexible Column.
To make it easier to customize themes, Mercuric Modular comes with a number of predefined CSS classes designed to allow you to make minor changes from the Design Manager level, without unnecessary interfering with the CSS files. Just add any class to the "CSS class" field to get the desired effect.
In the following sections, more about the defined CSS classes is presented.
Basic knowledge of HubSpot Design Manager is recommended. If you do not feel too confident with this tool, it is worthwhile to use their official documentation and tutorials. The best place to start learning is here: Get started with the design manager.
In Mercuric Modular you may easily change the spacing between sections and modules. For this purpose, we have prepared classes, which can be added in the "CSS class" field to the whole group or individual modules/columns in the Design Manager.
All classes that are intended to change spacings are written according to the same scheme. The first part is the space type and the second is the value, e.g. mt--40 means margin-top(--)40px .
Additionally, responsive classes are available, e.g. mt—sm-40 sets "margin-top" value to 40px for devices with a screen width above 576px.
mt - margin-top (outer spacing), e.g. mt--100
mb - margin-bottom, e.g. mb--20
pt - padding-top (inner spacing), e.g. pt--40
pb - padding-bottom, e.g. pb--25
pl - padding-left, e.g. pl--50
pr - padding-right, e.g. pr--65
Available values: 0-100, step 5.
If you want to add a space for all modules in the Flexible Column, you may use the special class for margin-bottom (all others are not available in the Flexible Column version). It is analogous to the previously mentioned classes. The only difference is the prefix "flex-" at its beginning, e.g. flex-mb—25.
The colors assigned to the class are defined in the main CSS file (mercuric-styles.css) in its first lines as variables.
A class with background color should be applied to the top parent group of columns. This will change the background within the whole group.
If you change the background color to dark or one where the default font color is not clearly visible, consider changing the font color to white.
Some Mercuric modules have a white text color checkbox. Others change the font color automatically. However, in the case of native HubSpot modules, e.g. Rich Text, it is not possible. For this purpose, we have added the CSS class "me-color-white". Entering it in the module "CSS class" field or any parent group will change the font color in all modules in the group to white.
You can read more about font colors in Typography.
If you want to clearly separate the columns, it is recommended to use the class showing the lateral edge line.
The color of the line depends on the color of the variable named $greyBordersColor from the main CSS file.
To give element an edge, enter one of the available, intuitive classes in the "CSS class" filed.
section-border--right-sm/section-border--sm-left - will display the edge for devices with the screen width above 576px
section-border--right-xl/section-border--md-left - will display the edge for devices with the screen width above 768px
section-border--right-lg/section-border--lg-left - will display the edge for devices with the screen width above 992px
section-border--right-xl/section-border--xl-left - will display the edge for devices with the screen width above 1200px
There is 1 main font family in Mercuric Modular. The default is Nunito (font-weights: 300, 400, 500, 600, 700, 900) from Google Fonts.
The link to the font family is in the global module me-css and me-js (Mercuric Modular/global content/global modules).
The CSS variable responsible for the font throughout Mercuric Modular is in the main style sheet (mercuric-styles.css, folder Mercuric Modular/assets/mercuric_css) under the name "$fontFamily".
To change the font family, you should:
Add a link to font family in the global module me-css and me-js, preferably by replacing the link with the default font. It is important to place the link in the "require_css" block.
If you want to use Google Fonts, it is best to choose one that has all the font-weight that are present in Mercuric, namely: 300, 400, 500, 600, 700 i 900.
Replace the value of the "$fontFamily" variable in the main CSS mercuric-styles.css and publish the changes.
To change the font family you may also use our customizer.
The customizer will automatically generate a link to the selected font family as part of the CSS code for the mercuric-styles.css file. In this case, it is not necessary to change the font link in the me-css and m-js. However, it is a good practice to remove the old link from me-css and me-js, once it is no longer in use.
Mercuric Modular has 2 basic font colors:
One for the most typographic elements, such as paragraphs and lists.
Second for headers and some menu type items.
Both colors are declared as variables in the main CSS file mercuric-styles.css (Mercuric Modular/assets/mercuric_css folder).
To see which elements will change after setting a different color, use our customizer. It also makes it easier to implement the changes by generating CSS code for the change in the main style sheet - just follow the instructions in the customizer.
White text color.
If you change the background color to dark or one where the default font color is not clearly visible, consider changing the font color to white.
Some Mercuric modules have a white text color switcher. Others change the font color automatically. However, in the case of native HubSpot modules, e.g. Rich Text, it is not possible. For this purpose, we have added the CSS class "me-color-white". Entering it in the module "CSS class" field or any parent group will change the font color in all modules in the group to white.
Dark text color.
A similar class to "me-color-white" is "me-color-dark”.
The color that is assigned to it is the color of the $headersFontColor variable from the main CSS file mercuric-styles.css.
The rule and scope of its operation are the same as the "me-color-white" - the color change will include all modules within the group with "me-color-dark” class.
Other font colors.
In addition to the "me-color-white" and "me-color-dark” classes, which are applied by entering in the "CSS class” field in Design Manage, Mercuric Modular also has classes that change the font color, which are assigned directly to HTML tags (e.g. <p>) in the "class” attribute.
A great place to use them is the HubSpot Rich Text field in the "Edit source code” mode, where the HTML tags may be modified easily, including adding a "class” attribute, such as <p class="me-text-color--secondary-color">.
The following classes are available:
me-text-color--base-color - the color is determined by the "$firstColor" variable in mercuric-styles.css
me-text-color--secondary-color - "$secondColor" variable in mercuric-styles.css
me-text-color--dark - $darkBackgroundsColor variable in mercuric-styles.css
me-text-color--white - white color (hex: #ffffff)
me-text-color--black - black color (hex: #000000)
Disable "wow" animation
Each Custom Module from Mercuric Modular has a "Dropdown" field or switcher where the animation may be changed/deactivated.
In Mercuric Modular there are also native HubSpot modules, e.g. Rich Text, where the animation type is defined directly by adding a class with animation to the "CSS class” field of a module or a group of modules.
All you have to do is to remove the fragment from "wow fadeIn…”, to deactivate animation.
You can also freely change your animations by entering one of the available Animate.cssclasses.
The following effects are used in Mercuric
In Mercuric Modular it is possible to remove the animation effect globally.
Just find the global group called "me-css and me-js”, which is at the bottom of each template and click on "Edit global group content".
Then remove or comment out the code in the <script> tag and publish the changes.
How to drag & drop modules in Mercuric Modular
Mercuric Modular is fully compatible with HubSpot’s Drag & drop technology dedicated to creating templates.
Simply drag the selected module into the area of the template and it will appear on your website.
This way, you may build a template from modules available on Mercuric, as well as from native HubSpot modules (Rich Text, Image, Form, etc.).
If you want to use Mercuric modules, pay attention to the folder in which the module is located. Some modules are designed only to work within the framework of Blog, Website or Mailing templates.
Modules from the "general modules" folder will work in Website and Blog templates.
In the folder "blog modules" there are dedicated Blog templates modules, but some of them are also compatible with Website templates.
In "email modules" there are modules only for Email templates. This is the only group of modules that are placed in Email template using "HubL module syntax", not Drag & drop.
The folder "system modules" contains the modules used in System templates. They are not limited to System templates only, so you can put them in Website or Blog templates. However, this functionality may not be complete in this case.
The "header modules" and "footer modules" folders contain modules in global groups; me-header* and me-footer. Placing them in templates is not recommended.
In order to create a new Mercuric Modular template, it is best to use one of the already existing templates. To do this, select the template you are interested in and right-click on the template. Then select the "Clone template" option.
In this way, the new template will immediately contain all the necessary elements (global groups, modules, assets and other) for the proper functioning of the Mercuric Modular.
The template consists of 3 main parts - Header, Body and Footer
Header and Footer are divided by separators. The elements contained in them should not be modified or removed. At your disposal is a central part of the template - Body - in which you can build sections from Mercuric and HubSpot modules.
The easiest way to build a section is to restore a group with modules from a different template that interests you.
You may do it manually, step by step, by playing back the group structure, or you can use HubX extension by neambo to clone modules and groups between templates.
If you decide to build sections manually, a lot of useful information on how to use the Design Manager can be found in the official HubSpot documentation.
Information about the grid (columns arrangement) in Mercuric Modular, along with instructions on how to use it, can be found here.
Also, check out the classes we have prepared to help you design and modify Mercuric Modular templates. Detailed descriptions and instructions are available here.
If you are still not sure how to use Drag & drop in Mercuric Modular or need help with creating or modifying your templates, please contact us.