1.Overview

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
  • Fully Responsive
  • 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.

1.1.What’s Included?

Trometa  HubSpot theme offers,

  1. Modules – 27
  2. Sections – 18
  3. Templates – 8
  4. Blog – 2
  5. 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  

edit theme settings

From the edit theme setting you will find the following:

HubSpot Themes: Edit theme settings
  1. Color and Font Settings
  2. Header
  3. Footer
  4. Spacing
  5. Corners
  6. Buttons
  7. Forms
  8. Tables
  9. Blog Setting
  10. System Page Setting
  11. 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.Color and font 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.

1.2.2.Header

Header

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.

1.2.4.Spacing

Spacing

Spacing setting allows you to alter maximum content width, and adjust horizontal and vertical section spacing.

1.2.5.Corners

Corners

You can edit the value for the base border radius, overwrite for images, and overwrite for cards in pixels.

1.2.6.Buttons

Buttons

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.

1.2.7.Forms

Forms

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.    

1.2.8.Tables

Tables

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.
  • Table Cells: Adjust table cell spacing, border style, color, and width.

1.2.9.Layout Setting

layout settings

You’ll find the following settings here:

  • 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.

1.2.10.Blog Settings

blog settings

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.
Sidebar Options
  • Blog Post: You can show/hide the author name, image, timestamp, tags, and related posts from here.
Blog settings

1.2.11.System Page Settings

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

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.

1.2.3.Theme Modules

Trometa HubSpot theme has the following 27 modules:

1.2.3.1.Accordion

The accordion module is used to add popular or most asked questions in the form of FAQs to your landing pages.

Accordion

You can add multiple accordions in the column count, choose the icon position, enable box shadow, and add shades.

Accordion

Each accordion has the option to edit the questions, answers, and the open & close icon.

Accordion

From it’s style tab, you can

Accordion

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.

1.2.3.2.1.Background color

Background Color

1.2.3.2.2.Background Image

Background Image

1.2.3.2.3.Blog Listing

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

Blog listings settings include

  • Blog Banner: This appears only for the recent post listing page. Edit banner title and description.
Blog Listings
  • 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.
Blog Listings
  • 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. 
Blog Listing

From the log listing page layouts’ style tab you can

  • Adjust spacing and padding of the feature image
Blog Listings
  • Change the style of wrapper, content, and background color of card or listing layout
Blog Listings
  • Edit button styles, spacing enable & edit border and text.
Blog Listings

1.2.3.2.4.Custom Button

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

Custom Button

2. Outlined (light)

Custom Button

3. Arrow (dark)

Custom Button

4. Filled (light)

Custom Button

5. Arrow (light)

6. Outline (dark)

Custom button

You can choose the button style you want to add, edit the button text, and add links to it.

Custom button

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. 
Custom Button

1.2.3.2.5.Card

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:

a. Card

Card

b. Compact

Card

The card has the following settings:

Card
  • 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.
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.

Card

1.2.3.2.6.Counter

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

Counter

b. Compact Layout

Counter

The counter module has the following sub-settings:

Counter
  • 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.
Counter
  • 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
  • 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.
Counter

From the style tab, you can edit the counter, counter alignment, and counter spacing.

Counter
  • 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.

1.2.3.2.7.Custom Form

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)

Custom form

b. Multiple Field Form

Custom form

c. Single Field Form (Button at Bottom)

Custom form

It has the following sub-settings:

Custom form

  • 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.
Custom form

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.

1.2.3.2.8.Custom Menu

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.

Custom menu

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.

Custom menu

From the menu style tab, you can overwrite settings and change the text color for desktop and mobile, and edit drop-down.

Custom menu

From the drop-down settings, you can edit the drop-down text color, background color, border style, and color along with width.

Custom menu

1.2.3.2.11.Header Controls

Header controls are also an element added to the header of your website pages.

Header controls
Header controls

You can enable a phone icon and edit the content of the phone icon. This will be shown when clicked on the phone icon.

Header controls

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.

Header controls

1.2.3.2.12.Header Toggler

The header toggler allows you to add a toggler to the header so that the user can see more options.

Header Toggler

1.2.3.2.13.Icon Box

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

Card Layout

b. Compact Layout

Card Layout

The icon box settings include:

Icon Layout

  • 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.
    Compact 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.
Compact Layout

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.

Compact Layout

1.2.3.2.14.Image

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!

Image

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.

Image

From the style tab, you can decide on image alignment for desktop and mobile. You can also overwrite the image border-radius.

Image

1.2.3.2.15.Logo

A logo depicts your brand. You can add a brand logo on your website pages by just dragging and dropping it anywhere you like.

Logo

Settings include:

  • 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

    Logo

1.2.3.2.16.Map

The map module will add a virtual map to your website.

Map

You can embed the location of your head office.

Map

Front the style tab, you can adjust the border radius corner, and edit desktop, mobile, and tab height.

Map

1.2.3.2.17.Our Partners

Display your partner brands using this module. There are two layouts for our partner module:

a. Listing

Our Partners

b. Slider

Our Partners

It has options to select partner layouts from listing and slider, edit the content of portfolio tabs and enable or disable description.

Our Partners

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.

Our Partners

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. 

Our Partners

From the style tab, you can change alignment, enable or disable greyscale, and adjust vertical and horizontal inner spacing.

Our Partners

1.2.3.2.18.Our Team

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:

a. Card

Card team

b. Card Slider

Our Team

c. Card Slider With Content

Our Team

The our team module has 4 sub-settings:

Our Team

  • 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.
Our Team
  • 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.
Our Team

From the style tab, you can adjust alignment, overwrite card corners, alter content, content background color, and overwrite content background color on hover.

Our Team

1.2.3.2.19.Portfolio Tabs

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

Portfolio tabs

b. Image Tabs

Portfolio Tabs

You have the following sub-settings:

Portfolio Tabs
  • 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.  
Portfolio Tabs

You can remove or replace these portfolio images, add alt text, and adjust the size and maximum size along with image loading.

Portfolio Tabs
  • 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.

Portfolio Tabs

1.2.3.2.20.Pricing Card

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

Pricing card

b. Premium Layout

Pricing Card

There are 4 sub-settings under the pricing card option:

Pricing Card
  • Pricing Card Layout: Choose pricing card layout between basic and premium. 
  • Badge: Select the position of badge from top, bottom, and side.
  • Pricing Card: Edit, clone or delete pricing cards. Add multiple pricing cards, edit pricing card heading, price, enable disable badge, edit badge content, add multiple features, edit feature content, choose pricing card image or icon, edit button text, and edit links.
    Pricing card
  • Box Shadow: Enable box shadow and add multiple shadows.  

From the style tab, you can select card alignment and edit pricing card colors.

pricing card

From the color option of the style tab, you can alter the card background color, card border, and overwrite the badge background color.

Pricing card

1.2.3.2.21.Search

The search module is to add the functionality of navigation. You can add it to your header.

Search

You can edit the placeholder text, enable box shadow and add box shadows.

Search

From the style tab, you can change the icon color and input the field background color.

Search

1.2.3.2.23.Social Follow

If you want your audience to follow you on various social and professional platforms, you can use this module.

Social follow

You can add multiple social icons and edit them.

Social follow

For each of the icons, you can select a social account, add the social link, and edit a title from the accessibility options.

Social follow

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.

Social follow

1.2.3.2.24.Spacer

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.

Spacer

From the style tab, you can adjust the desktop, tablet, and mobile height, and alter the background color.

Spacer

1.2.3.2.25.Testimonial

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

Testimonial

2. Two column slider

Testimonial

3. Single column slider without image

Testimonial

4. Card layout

Testimonial

Other settings include 

  • enable to hide or show testimonial quotes, enable to hide or show social icons, add testimonials and edit each testimonial.
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.
Testimonial
  • Add the quote of the customer and edit or format it.

    Testimonial
  • Slider settings include selecting item numbers in desktop, tablets, and mobile, enable or disable slider dots, slider navigation and change navigation icon.

    Testimonial
  • 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.

Testimonial

From the style tab, you can edit the corner radius, overwrite social icon color, and adjust their sizes.

Testimonial

If you choose card layout you can also adjust the card spacing from here.

Testimonial

1.2.3.2.26.Title Content

You can add content on website pages using the title content module.

Title content

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.

Title content

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.

Title content

1.2.3.2.27.Video Popup

For adding any video to your website pages, you can utilize the video popup module.

Video Popup

There are 3 sub-settings for video popup:

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.

Video Popup

1.2.3.4.Theme Sections

Trometa has the following 18 sections:

1.2.3.4.1.Connect With Us Section

Connect with us

1.2.3.4.2.Contact Section

contact

1.2.3.4.3.Contact us Section

contact-us

1.2.3.4.4.Counter Section

counter

1.2.3.4.5.CTA Section

call-to-action

1.2.3.4.6.CTA Column Reverse Section

cta-column-reverse

1.2.3.4.7.Feature Section

features

1.2.3.4.8.Get In Touch Section

get-in-touch section

1.2.3.4.9.Map Section

map section

1.2.3.4.10.Pricing Section

pricing

1.2.3.4.12.Subscribe Section

subscribe

1.2.3.4.13.Two Column Button Section

two-column-button-text

1.2.3.4.14.Two Column Counter Text Section

two-column-counter-text

1.2.3.4.15.Two Column Image Text Section

two-column-img-text

1.2.3.4.16.Two Column Video Text Section

two-column-video-text

1.2.3.4.17.Two Video Landing Banner Section

video-landing-banner

1.2.3.4.18.Two Video Section

Two video section

1.2.3.4.5.Theme Templates

Trometa has 8 theme templates.

  1. About Us
  2. Contact Us
  3. Homepage 
  4. Landing Page 
  5. Portfolio 
  6. Services 
  7. Blog Details
  8. Blog Listing 

1.2.3.4.6.System Pages

Trometa the theme offers you 7 different system pages that are as follows,

  1. Error 404
  2. Error 500
  3. Backup Unsubscribe
  4. Password Prompt
  5. Search Results
  6. Subscription Preferences
  7. Subscriptions Confirmation
Suggest Edit