Trometa is a highly responsive, modern, and clean design HubSpot Theme for users who want to create a great website for their digital marketing business. It allows HubSpot CMS users to construct fully configurable pages easily. With the Trometa HubSpot theme you get:
100% Drag and Drop
Multiple Theme Settings
Perfect to get you started with HubSpot
Mobile First Approach
High Page Speed
The Trometa theme is easy to work with. However, if you need any assistance with the setup and installation, connect with us for a free 30 minutes session.
Trometa HubSpot theme offers,
Modules – 27
Sections – 18
Templates – 8
Blog – 2
System Pages – 7
If you want us to add any module or curate a template for you, talk to our experts, share your requirements and we’ll get it done as soon as possible.
1.2.Edit Theme Settings
To access the theme settings, you first need to create a page > edit page option > theme > edit theme settings
From the edit theme setting you will find the following:
Color and Font Settings
System Page Setting
Scroll To Top
1.2.1.Color And Font Setting
There are 3 sub-settings in this menu:
1. Global Colors: This setting lets you configure Primary Color, Primary and Secondary Accent colors, Body Background color, and Heading Color through this setting.
2. Global Fonts: This setting lets you change the Heading font and Body font of the theme.
3. Typography: This setting lets you tweak the headings from H1 to H6 along with Subscript, Superscript, Links, and Blockquotes.
The header has 9 sub-settings: 1. Header On Top Scroll: Toggle to enable header on top scroll. 2. Header Top Bar: Toggle to enable your header’s top bar. Set the top bar background color. 3. Header Bottom Bar: Toggle to enable your header’s bottom bar. Set the bottom bar background color. 4. Background: Alter header background color. 5. Language Switcher: Set font, letter spacing, and line height of the text set the font of the text on hover, and edit the drop-down text & background color, hover text, and background color. 6. Menu: Change menu hover font, active font, alignment, desktop menu font, line height & text-transform, and mobile menu font size & line height. You can also edit the menu drop-down text & background color, hover and active menu text, and background color. 7. Heading: Change desktop heading font, line height, text transform, mobile heading font size line height. 8. Text: Change header desktop font, line height text transformation, mobile header font size, and line height. 9. Icon Color: Change the color of icons like phone, and search except for social icons.
It has the following sub-settings:
Background: Change the footer background color.
Heading: Change desktop footer font, line height, text-transform, and mobile footer heading font size and line height.
Text: Edit mobile footer and desktop text.
Menu: Change active and hover menu footer font, desktop menu text font, line height & text-transform, and mobile menu text line height, and font size.
Spacing setting allows you to alter maximum content width, and adjust horizontal and vertical section spacing.
You can edit the value for the base border radius, overwrite for images, and overwrite for cards in pixels.
The button settings include the following sub-settings
1. Button: Edit button text font size, line height & transform, button spacing, button corner radius, enable hover – effect, and choose hover option between pulse and scale. 2. Button: Edit button text font size, line height & transform, button spacing, button corner radius, enable hover effect, and choose hover option between pulse and scale. 3.Outlined Button: Edit dark and light-outlined button settings in normal, hover, focus, and active states. 4.Arrow: Edit arrow settings for dark and light buttons on active and hover states.
Forms option has the following sub-settings:
Title: Edit title text, background, spacing, border, and corner radius.
Labels: Alter label spacing and label text font, line height, letter spacing, and transform.
Help Text: Change help text font, color, size, underline, bold, etc.
Fields: Edit field input placeholder, field text, background color, spacing, border, border color on focus, and field corner radius. Control the paragraph content of GDPR fields and form rich text fields.
Form: Edit form background color, spacing, border style, and corner radius.
Error Message: Edit text font, line height, text-transform, and letter spacing, and error message spacing.
From the tables option you can access the following:
Table Header: Change text color and background color.
Table Body: Change table body text color and background color.
Table Footer: Change the table footer text and background color.
Header: You can change the settings of your Sticky Header, Header on top scroll, Header top, and bottom bar, Background, Language switcher, Menu, Heading, Text, and Icon color from here.
Footer: This setting lets you tweak the Footer Background, Heading, Text and Menu.
Spacing: You can change the settings of Container Width and Section Spacing from here.
Corners: Adjust Base Corner Radius and Overwrite radius for images and cards.
Buttons: In this section, you can configure Button, FIlled Button, Outlined Button, and arrow settings.
Forms: You can change the Background, Spacing, and Border of the form through this setting.
Tables: You’ll find settings for Table Header, Table Body, Table Footer, and Table Cells in this section.
You can configure the blog post settings here. There are 2 settings in this section:
Sidebar: Enable or disable the sidebar on the blog from here. Further you can change the sidebar position, enable/disable topics, popular posts, and subscription form.
Blog Post: You can show/hide the author name, image, timestamp, tags, and related posts from here.
1.2.11.System Page Settings
You can use the system page settings to make changes to system pages. There are 4 settings here,
Error Page Setting (404): Enable/disable the error image, add alt text, change image loading, and change the error banner image from here.
Error Page Setting (500): Enable/disable the error image, add alt text, change image loading, and change the error banner image from here.
Backup Unsubscribe: Enable/disable the banner image, add alt text, change image loading, and change the backup unsubscribe banner image from here.
Password Prompt: Enable/disable the password prompt image, add alt text, change image loading, and change the password prompt banner from here.
1.2.12.Scroll To Top
This section will let you Enable/Disable the scroll to the top button element. Apart from it, there are 3 settings,
Icon fill color: Change the color of the arrow inside the button.
Icon background color: Change the background color of the icon.
Icon corners: Adjust the corner radius of the icon.
Trometa HubSpot theme has the following 27 modules:
The accordion module is used to add popular or most asked questions in the form of FAQs to your landing pages.
You can add multiple accordions in the column count, choose the icon position, enable box shadow, and add shades.
Each accordion has the option to edit the questions, answers, and the open & close icon.
From it’s style tab, you can
Front the style tab you can change the styles of the accordion, title, and content and overwrite the accordion icon color. You can change the
Title font and spacing, content font and spacing
Change content background, spacing, and font
Overwrite icon color settings
Alter accordion border, background color, spacing, corner border radius, and max-width.
The banner is the first thing that the visitors check out as soon as they land on your website. You can add and edit the Trometa theme banners according to your needs. We have created different layouts of the banner.
188.8.131.52.3.Banner with Image
You can enable reverse order for mobile if you’re using this layout. Simply put you can enable this if you want to reverse the order of the image in mobile.
184.108.40.206.4.Banner with form
You can choose any of the above layouts, and other settings include:
Edit subtitle and content
Enable primary & secondary button & choose button type, link & text
Enable/disable Application store redirect button, i.e. primary and secondary application store buttons, edit their styles, text, and links.
Enable/disable icon box, edit it’s content, and replace or remove it’s icon.
Remove or replace the background banner image for mobile devices, adjust it’s size and image loading.
From the style tab you have the following sub setting:
Background overlay: Enable background overlay for the background image and video banner layouts of the banner.
Banner content alignment: Choose mobile and desktop content alignment
Spacing: Adjust desktop & mobile spacing
Content color: Enable & change heading & text color
Content max width: Enable & adjust content max width
Form Styling: Enable form title border & edit its style, enable background color & change it, enable max width & adjust its value, enable button full width & adjust its value, adjust spacing and padding of the margin above & below, and enable & adjust border radius.
Banner icon box: Change icon color, and icon box color of the banner icon box.
You can remove or replace the banner image, adjust its size, and image loading for the background image banner, and change the background color for background color banner.
You can check the blog listing module on the blog listing page. For accessing the blog listing page:
Go to the marketing > website > blog. From the left panel select blog listing pages and select the Trometa blog listing page > Click edit and you will find the blog listing template.
Blog listings settings include
Blog Banner: This appears only for the recent post listing page. Edit banner title and description.
Blog Layout: Select blog layout style between blog card and listing row.
Blog Meta Description: Enable or disable the author name, author image, description, description count, tags, feature image, reading time, read more, edit read more text, and publish date.
Pagination: Select the pagination type if you want the blog listing to have a load more button ( without page load ) or have pagination on the bottom. You can also edit and load more button text.
From the log listing page layouts’ style tab you can
Adjust spacing and padding of the feature image
Change the style of wrapper, content, and background color of card or listing layout
Edit button styles, spacing enable & edit border and text.
The button module will assist you in placing a button on your page. There are certain types of custom buttons available in the Trometa theme:
1. Filled Dark
2. Outlined (light)
3. Arrow (dark)
4. Filled (light)
5. Arrow (light)
6. Outline (dark)
You can choose the button style you want to add, edit the button text, and add links to it.
From the style tab, you can customize button settings and hover button options like:
Enable border, border radius, background color, and text color.
Enable background color, text color, and border color on hover.
You can display cards on your website pages with information about your features, or services using cards. They are easily observed and have a long-lasting effect on memory. There are two layouts for this module:
The card has the following settings:
Layout Select: Select layout between card and compact.
Column Select: Column choice between one to four
Card: Edit card components like, enable icon or image, remove or replace the image or icon, the maximum size, image loading, enable heading, edit the heading, add links, enable or disable content, and add content to the card.
Enable Special Effect: Enable or disable special effects It will work on the desktop only and for “the Two Column” column layout choice.
Enable Box Shadow: Enable or disable box shadow and add box shadows to the card.
From the style tab, you can, change alignment, overwrite icon color, enable heading color, change background color, overwrite card corners, and adjust image width.
The counter module allows you to add a number on your website. The numbers are great to convince users to take an action. There are two layouts for the counter module.
a. Card Layout
b. Compact Layout
The counter module has the following sub-settings:
Counter Layouts: Select layout from compact and card options.
Column Count Choice: Select column count one to four. Here is an example of four column counter. You can replace the icons and texts as you desire.
Image/Icon Display Condition: Check to enable the display of the image in the counter component. Additionally, select an image or icon to display on the counter.
Counter Text Display Condition: Enable or disable the counter text display condition.
Animation: Enable/disable counter animation. Animation settings include selecting animation type from available options, set the animation duration, and the animation easing.
Counter: Edit, clone or delete counter. Replace or remove the counter image, add alt text, adjust the size, and maximum size, enter the counter value and counter unit, and edit the text.
From the style tab, you can edit the counter, counter alignment, and counter spacing.
Counter: Edit counter value and counter text. Overwrite desktop counter value, and change the mobile font size. Overwrite desktop counter text settings, and change the mobile counter text font size.
Counter Alignment: Change counter alignment for mobile and desktop.
Counter Spacing: Alter counter spacing and padding for mobile and desktop.
You can add a custom form according to your website’s requirements. It could be for contact or inquiries, etc. There are three layouts included:
a. Single Field Form (Side Button)
b. Multiple Field Form
c. Single Field Form (Button at Bottom)
It has the following sub-settings:
Form Layout Choice: Select a form layout between a single field( side button), multiple fields, and a single field (button at the bottom)
Form Title: Edit the form title as you want it to appear on your web page.
Choose Form: Select an existing form or create a new one so people can fill it out.
Form Content: Edit form content by adding or removing the form fields and editing button text.
Thank You: Edit the thank you text. This is the text the user receives instantly after filling out the form.
Form Automation: Enable or disable form automation.
Button: Overwrite button styles.
Enable Form Box Shadow: Enable or disable the form box shadow and add new form box shadows.
Enable Input Field Shadow: Enable or disable input field shadow and add input field shadows.
From the style tab of the custom form you have the following settings:
Enable and change the form background color
Enable and set form max width
Overwrite desktop and mobile form spacing
Overwrite input fields background color and enable border.
Overwrite form corners and form title colors
Enable form title border bottom.
Choose form title alignment for desktop.
You can add a custom menu on your header or footer to add links to important pages. You can add a menu on your header as a global module.
From the settings of the menu, you can select the trometa menu and edit the maximum levels on the menu. The maximum levels determine the number of menu tree children that can be expanded in the menu.
From the menu style tab, you can overwrite settings and change the text color for desktop and mobile, and edit drop-down.
From the drop-down settings, you can edit the drop-down text color, background color, border style, and color along with width.
The footer nav module can be added to the footer of your website with links to important pages.
You can select the title for the footer nav, select a menu or create a new menu, and enter maximum levels.
Header controls are also an element added to the header of your website pages.
You can enable a phone icon and edit the content of the phone icon. This will be shown when clicked on the phone icon.
You can also change the display mode of the language switcher from localized, page lang, and hybrid. You can enable search and edit the search placeholder text. Additionally, you can also enable a button on the header controls and edit the button style.
From its style tab, you can change the search background color.
The header toggler allows you to add a toggler to the header so that the user can see more options.
The icon box allows you to add multiple icons and their descriptions on landing pages. You can also add these to the footer. There are two layouts for the icon box.
a. Card Layout
b. Compact Layout
The icon box settings include:
Icon Box Layout: Choose a layout for the icon box from compact and card.
Column Count Choice: Choose column count from one to three columns. For example, notice the two column compact icon box layout.
Icon/Image Selection: Select an icon or image to display along with the content.
Icon Box: Further edit the icon box. It includes options to replace or remove the image or icon, add alter text, adjust the size and maximum size, and edit the icon box content.
From the style tab, you can edit the content by overwriting text and heading color, icon box spacing for mobile and desktop devices, and enable and change the card background.
The image module helps you add images anywhere on the landing pages. Images also have a great impact on the users so this module is a must-have!
You can remove or replace the image, add alt text, and adjust the size and maximum size along with image loading. There are 3 image loading types, eager, lazy, and browser default.
“Lazy” loading defers loading this element until it’s visible on the page. This may help improve site performance. “Eager” loading loads the element right away.
From the style tab, you can decide on image alignment for desktop and mobile. You can also overwrite the image border-radius.
A logo depicts your brand. You can add a brand logo on your website pages by just dragging and dropping it anywhere you like.
Enable/disable custom logo
Add custom logo, replace or remove logo image, add alt text, adjust size, edit link and image loading. https://docs.makewebbetter.com/wp-content/uploads/2022/09/logo-1-2.png
The map module will add a virtual map to your website.
You can embed the location of your head office.
Front the style tab, you can adjust the border radius corner, and edit desktop, mobile, and tab height.
Display your partner brands using this module. There are two layouts for our partner module:
It has options to select partner layouts from listing and slider, edit the content of portfolio tabs and enable or disable description.
You can further edit each of these partner content. It has settings to replace or remove the partner logo, adjust the size and maximum size, insert partner page logo link, and edit the partner description.
If you select the slider layout, you can also edit the slider settings like editing the number of items to be shown on various devices, i.e. mobile, desktop, and tablet.
From the style tab, you can change alignment, enable or disable greyscale, and adjust vertical and horizontal inner spacing.
You must have a team of experienced and enthusiastic members. Showcase each of them on your landing page using our team module. There are 3 layouts for our team module:
b. Card Slider
c. Card Slider With Content
The our team module has 4 sub-settings:
Layout Choice: Choose our team module layout from the card, card slider, or card slider with content.
Team Member: Edit, delete, or clone team members. You can add multiple team members. Replace or remove the member image, add alt text, add designation, and social icons, and edit links to the member’s details page.
Box Shadow: Enable box shadow and add shadows.
Slider Settings: Select the number of items to display on a desktop, tablet, or mobile, enable or disable slider dots, and slider navigation, and change the navigation icon.
From the style tab, you can adjust alignment, overwrite card corners, alter content, content background color, and overwrite content background color on hover.
Show your work to visitors and potential customers through an interactive portfolio. You can add a portfolio tab to your website pages using this module. It has two layouts:
a. Image Slider
b. Image Tabs
You have the following sub-settings:
Layout choice: Choose the layout from the image slider and image tabs.
Mini title: Edit mini title and subheading.
Gallery grid: Add multiple gallery grids and edit them. You can further edit the gallery grid by adding multiple images to every tab.
You can remove or replace these portfolio images, add alt text, and adjust the size and maximum size along with image loading.
Slider settings: Enable slider dots, or slider navigations.
From the style tab, you can overwrite the border radius and edit the mini title font and color.
The pricing card is a great module for displaying your product or service price on website and landing pages. There are two pricing card layouts, basic and premium.
a. Basic Layout
There are 4 sub-settings under the pricing card option:
Pricing Card Layout: Choose pricing card layout between basic and premium.
Badge: Select the position of badge from top, bottom, and side.
Box Shadow: Enable box shadow and add multiple shadows.
From the style tab, you can select card alignment and edit pricing card colors.
From the color option of the style tab, you can alter the card background color, card border, and overwrite the badge background color.
The search module is to add the functionality of navigation. You can add it to your header.
You can edit the placeholder text, enable box shadow and add box shadows.
From the style tab, you can change the icon color and input the field background color.
You can add the sidebar menu to your website page or blog using this module.
It has options to:
Enable menu heading and edit it
Add multiple menu, edit and clone it.
For editing each menu you have options to edit the menu text, and add link.
From the style tab, you can adjust the spacing, overwrite the background, heading, and menu colors, and adjust the sidebar corner radius.
If you want your audience to follow you on various social and professional platforms, you can use this module.
You can add multiple social icons and edit them.
For each of the icons, you can select a social account, add the social link, and edit a title from the accessibility options.
From the style tab, you can adjust the icon size, corner radius, spacing, and alignment. You can also overwrite icon fill color, and enable and overwrite background color.
The spacer module adds white space to the website and landing pages. With the spacer module, you can add vertical spaces between sections and modules as and when required.
From the style tab, you can adjust the desktop, tablet, and mobile height, and alter the background color.
Add testimonials to your website pages using this module. Customers trust you when they see people talking positively about you.
You can choose a testimonial layout between 1. Single column slider with image
2. Two column slider
3. Single column slider without image
4. Card layout
Other settings include
enable to hide or show testimonial quotes, enable to hide or show social icons, add testimonials and edit each testimonial.
Edit the details of each person’s review. Replace or remove customer image, edit name, adjust size, maximum width and image loading. You can add information about the client too.
Add the quote of the customer and edit or format it.
Slider settings include selecting item numbers in desktop, tablets, and mobile, enable or disable slider dots, slider navigation and change navigation icon.
Replace the quotes icon or image, add alt text, and adjust the size and maximum size. You can also add the social media icons of the customer.
From the style tab, you can edit the corner radius, overwrite social icon color, and adjust their sizes.
If you choose card layout you can also adjust the card spacing from here.
You can add content on website pages using the title content module.
You can add a subtitle, edit title content, and add a primary and secondary button to your title content. You can also edit the styles of primary and secondary buttons.
From its style tab, you can change the desktop & mobile alignment, enable & edit maximum width, subtitle, title, description, and button bottom spacing, and overwrite content title, subtitle, and description colors.
For adding any video to your website pages, you can utilize the video popup module.
There are 3 sub-settings for video popup:
Video Poster: Replace or remove the poster, add alt text, adjust the maximum size, and change image loading.
Icon/Content: Select between icon over image or content over the image.
Icon: Replace or remove the play icon on the video popup.
From the style tab of the video popup module, you can change the video popup desktop and mobile alignment, enable or disable the overlay, overwrite the icon color, and adjust the corner border radius.
Trometa has the following 18 sections:
220.127.116.11.1.Connect With Us Section
18.104.22.168.3.Contact us Section
22.214.171.124.6.CTA Column Reverse Section
126.96.36.199.8.Get In Touch Section
188.8.131.52.11.Sidebar Content Section
184.108.40.206.13.Two Column Button Section
220.127.116.11.14.Two Column Counter Text Section
18.104.22.168.15.Two Column Image Text Section
22.214.171.124.16.Two Column Video Text Section
126.96.36.199.17.Two Video Landing Banner Section
188.8.131.52.18.Two Video Section
Trometa has 8 theme templates.
Trometa the theme offers you 7 different system pages that are as follows,