Theme Documentation

Inside, you can find:

• primary color (by default will apply to every heading)
• secondary color (will apply to paragraphs and lists)
• body background-color
• links color (default and hover)
• icons color

Options from this section apply to the body text field from typography.

Inside, you have the following options:

• body text (font family, font size, and color)
• Heading one - H1 (font family, font size, and color)
• Heading two - H2 (font family, font size, and color)
• Heading three - H3 (font family, font size, and color)
• Heading four - H4 (font family, font size, and color)
• Heading five - H5 (font family, font size, and color)
• Heading six - H6 (font family, font size, and color)

Inside, you have the following options:

• Maximum content width (default container size - you can change it for each section from the section settings)
• Vertical spacing (acts like margin-top - you can change it for each section from the section settings)

Inside, you have options for:

• primary button
• secondary button
• tertiary button

Each button has the following options:

• background-color (default and hover)
• text color (default and hover)
• border-color (default and hover)
• border-width (default and hover)
• corner-radius (default and hover)
• vertical and horizontal padding
• shadow (default and hover)
• font-family, font size, and font style

Note: you can override this style from the modules that have buttons.

This section has the following options:

1. Text color:

• headings color
• paragraphs color
• labels color

2. Input styles:

• background-color (default, hover, and focus)
• text color (default, hover, and focus)
• border-color (default, hover, and focus)
• border-width (default, hover, and focus)
• corners radius (default, hover, and focus)
• vertical and horizontal padding
• shadow (default, hover, and focus)
• font-family, font size, and font style
• radio buttons color
• errors color
• placeholders color

3. Submit button:

• background-color (default and hover)
• text color (default and hover)
• border-color (default and hover)
• border-width (default and hover)
• corner-radius (default and hover)
• vertical and horizontal padding
• shadow (default and hover)
• font-family, font size, and font style

This section can override the font sizes, padding, and spacing for text, buttons, and forms.
These changes will apply to screens with a resolution lower than 768px.

This section has the following options:

• large box text color and background color
• small box icon color and background color

Note: these settings apply to each system page (Page not found, Server error, Password prompt, Search results, Email subscription preferences)

Each modal (video, text/form, search) has the following options:

• overlay color
• blur
• saturation

This module allows you to add a different style for blog listing pages:

• Default listing page

• Tag page

• Author page

• All page

Each of the main pages has the option to override the description. By default, the home, tag, and author descriptions come from HubSpot blog variables.

You can also add a different image for each page. On the author page, the default image is the author's avatar. If the avatar is missing, then the image from the module will appear.

The newsletter form is showing on all and default listing pages. It can be disabled by unchecking the 'Enable newsletter form?' option. When setting up the form, make sure you use the newsletter form.

To edit the blog listing template, please take the following steps:

• Go to Settings by clicking the cog icon on the top right of the screen
• Navigate to Website > Blog, which is the last section of the left menu
• Click on the templates tab

This module analyzes your content and creates a hierarchical table of contents based on the headings present in the post body.

Each section is an anchor to a heading (live example here).

This module is available through all the blog posts, and it can be disabled.

As a part of the global group ("Blog post globals"), once you disable/enable it, this change will reflect on each post.

Its colors are coming from the blog post header.

This module is responsible for the colors of the blog post header and the table of contents (live example here).

Every change will reflect on each post as a part of the global group ("Blog post globals").

You can use up to five cards per row.

As a general style, you can set the following:

• cards margins (px)
• cards padding (px)
• icon size and margin (px)

Each card has the following options:

• heading type
• icon
• label
• description
• alignment
• buttons
• colors for each element mentioned above

Example page: Product page 3.

Each slide has the following fields:

• description
• label
• image
• rating stars (optional, these can be disabled)

And you can customize, for each slide, the following:

• text color
• background-color
• stars color

Example page: Homepage Option 1.

For example, this module creates a navigation for the product pages in the EDGE theme.

Example page: Product page 1.

You can add unlimited categories and posts. In addition, each modal is created with a rich text area which means you can add multiple content types, not only paragraphs.

Display all posts category? The setting will create another category (you can name it as you want), displaying your posts from all categories.

Note: this page is built using this module.

You need to select the date for the event (this should be a future date). You can also change the text color, background, and border color. (example page: Conversion LP 4)

For each button, you can select its style and its action.

• Style (primary, secondary and tertiary - globally defined in the theme settings). You can also override the default colors for each button.
• Action: link, scroll to anchor and open modal

If you select the scroll to anchor action, make sure the anchor exists on the page and has a unique name. Then, use the anchor name to fill the 'Anchor name' field. (example page: Conversion LP 2)

If you select the open modal action, you need to (example page: Conversion LP 4):

1. Drag and drop the 'Modal' module on the page
2. Give a unique name to the modal
3. Use the same name to fill the 'Modal name' field

Using this module, you can create unlimited cards following the blog design.

Each card has the following fields:

• header image
• title
• title label
• description
• button - if you want to keep it as a simple link, let the 'Button style' field empty
• alignment (left, center and right)

None of the fields are required. You can have different structures for each use of the module.

Example page: Portfolio.

This module has the following fields:

• title, which by default will inherit the icon's color from theme settings
• description

And you can change:

• alignment 
• title and description colors
• title size

Example page: About us.

This module overcomes the limitations of the HubSpot sections.

You need to drag and drop it inside the section you want to change to use this module.

With this module, you can:

• add CSS classes to the section
• add an ID to the section (use it as an anchor)
• add a custom background

The custom backgrounds are:

1. Background color - which can be used as a single color or as a gradient
2. Background image with colored overlay (single color or gradient)
3. Video background with colored overlay (single color or gradient)

Example page: Conversion LP 1. This page uses a background image with a single color overlay.

You can add an unlimited number of questions.

You can also change the following:

• Question font size (px)
• Question color
• Question hover color
• Answer color

Example page: Contact 1.

With this module, you can add:

• your logo
• copyrights
• unlimited columns (each containing a title and multiple links)
• links to your social media profiles
• extra links (out of the columns)
• additional information (we use it as address)

You can change:

• background-color
• border-color
• the content size (full-width or centered)
• maximum content width (px)
• content padding (top, left, right and bottom)
• copyright color and font size
• column title color and font size
• link color (default and hover) and font size
• social media icons width and gap
• columns gap (for mobile max-width: 767px, the gap will be half of the size)

With this module, you can add:

• text (this field is created with a rich text area which means you can add multiple content types, not only paragraphs.)
• buttons
• image

You can change:

• background-color
• text color
• buttons style
• image position and overlay

Example page: Product Page 1.

Note: the content size comes from the theme settings (Maximum content width).

With this module, you can add:

• title
• title label
• description
• buttons

You can change

• background-color
• text-color
• heading type (H1, H2, H3...)
• buttons style

Example page: Case study.

Note: the content size comes from the theme settings (Maximum content width).

The small box contains:

• heading type (H1, H2, H3 ...)
• heading text
• text color (this will apply to each text except the buttons)
• title label
• description
• content alignment
• background-color
• buttons
• frost effect

The large box contains:

• position (left or right)
• background-image
• image overlay color
• video file (optional)
• play button color

Note: You can use this module also as a page section (not only for header).

Examples:

• background-image: Portfolio
• background-image with video: About us
• frost effect: Conversion LP 5

The large box contains:

• heading type (H1, H2, H3 ...)
• heading text
• text color (this will apply to each text except the buttons)
• title label
• description
• content alignment
• background type, which can be color, image, or video (overlay will be visible if the background type is video or image)

The small box contains:

• position (left or right)
• form
• background-color

Note: You can use this module also as a page section (not only for header).

Example:

• Contact 1: large box with video background and overlay

The large box contains:

• heading type (H1, H2, H3 ...)
• heading text
• text color (this will apply to each text except the buttons)
• title label
• description
• content alignment
• background-color
• buttons

The small box contains:

• position (left or right)
• background-image
• overlay color

Note: You can use this module also as a page section (not only for header).

Example page: Products overview.

You can add:

• images (as many as you need)
• images height (will apply to each image)

And you can change the colors of the image preview modal:

• counter
• navigation
• close button
• spinner
• captions background
• overlay background
• frost effect (which can be disabled)

Example page: Gallery.

Image 1 - gallery

Image 2 - image preview

To use this module correctly, you need a Google Maps API key. If you don't have one, check this post to learn how to generate it.

After you get your key, you can:

• add the location
• change the map height

Example page: Contact 3.

To use this module correctly, you need a Google Maps API key. If you don't have one, check this post to learn how to generate it.

This module has the following options:

1. Content:

• heading type (H1, H2, H3 ...)
• heading text
• label
• description
• alignment 
• text color (this will apply to each text except the addresses)
• background-color

2. Addresses (unlimited)

• title
• address

3. Addresses colors:

• default background
• default text color
• hover background
• hover text color
• active background
• active text color

Example page: Contact 2.

You can add up to three levels to the menu.

This module has the following options:

• Logo
• Navigation items alignment: which allows you to move the items to the left, right, or center of the menu,
• Navigation items: here, you can add your top level links and submenus
• Button: which can be disabled and fully customizable 
• Website search: which can be disabled

And you can find the following styling options:

• background-color
• border-color
• frost effect (which can be disabled)
• Content alignment: centered or full-width
• Maximum content width
• Padding (top, left, right and bottom)
• Links font size
• Links colors (default and hover)

The only way to open the modal is through buttons. However, you can use the exact modal for multiple buttons.

The module has the following options:

• modal name (must be unique and used as the 'modal name' options within buttons).
• modal type (text or form)
• form background color (for the form option)
• close icon color (for the form option)

You can change the overlay styling from theme settings.

Example page: Conversion LP 5.

Image 1 - modal with text

Image 1 - modal with form

This module has the following options:

• image (used as partner logo)
• description
• card background color (each card can have a different background color)
• cards alignment (left, right, or center)

Example page: Homepage Option 1.

This module has the following options:

• Section primary color (which applies to section titles and subtopic links)
• Section title
• Section content
• Links (use as subtopic links)

Note: The module navigation inherits its style from the menu.

Example page: Pillar.

This module has multiple options as follows.

Section title:

• heading type (H1, H2, H3 ...)
• heading text
• subtitle
• alignment 

Plan:

• title
• description
• price
• button
• benefits
• learn more link
• colors for each element mentioned above

Section colors:

• title color
• subtitle color

Section background:

• overlay color (will act as background color if the image is missing)
• background-image

Example page: Pricing.

Each plan has the following fields:

• title
• price
• button
• benefits
• highlight option
• highlight label text
• colors for each element mentioned above, including background-color

Example page: Conversion LP 4.

This module has the following fields:

• blog
• number of posts
• filtering by author 
• filtering by tag
• filtering by date

Example page: LP - e-guide.

This module has the following fields:

• color
• height
• corner radius

Example page: Homepage Option 1.

This module has the following styling options:

• background-color
• border-color
• content alignment (full-width or center)
• maximum content width
• padding (top, left, right and bottom)
• copyrights color and font size
• links colors (default and hover) and font size
• social media icons (width and colors - default and hover)

And you can add:

• logo
• copyright 
• links
• social media profiles

This module is present on each landing page.

With this module, you can add as many links as you need.

Each entry has the following options:

• icon (Font Awesome)
• link
• network name (e.g., Facebook, Twitter)
• colors (default and hover)

In general settings, you can:

• set the size of the icons
• set the spacing between the icons
• alignment (left, right, or center)

Example page: Contact 2.

This module has the following platforms:

• Facebook
• Twitter
• LinkedIn
• email

And you can change:

• the size of the icons
• the space between icons
• icon color, background, and border (applying to all)

Example page: Blog post.

With this module, you can create multiple teams with multiple members (unlimited).

Each team contains:

• team title
• team description
• members

Each member can have:

• profile picture
• name
• position
• description (optional - will be opened in modal)
• social media profile links (icons with customizable colors)

Examples:

• team members: Team
• speakers: LP - Conference

This module has the following options:

• heading type (H1, H2, H3 ...)
• heading text
• title label
• descriptions
• alignment
• buttons (fully customizable)
• colors for heading, description, and label

Example page: Homepage Option 1.

You can add an unlimited number of events, and each event contains:

• title
• description
• image
• date
• link optional

And you can change the following colors:

• event background
• title
• description
• bar background
• date background and color
• dot background

Example page: About us

This module has the following options:

• background type (video or image, both coming with a customizable overlay)
• heading type (H1, H2, H3 ...)
• heading text
• title label
• description
• text color (this will apply to each text except the buttons)
• text-align
• content alignment (full-width or center)
• maximum content width
• padding (top, left, right, and bottom)
• buttons (fully customizable)

Example page: FAQs (video background), also this page header (background image) is built using this module.

With this module, you can create multiple sections with multiple videos (unlimited). 

Each section contains:

• section title
• section description
• videos

Each video has the following options:

• thumbnail
• thumbnail overlay (color)
• video (file)
• title
• description

Example page: Video library.

This group has the following modules:

• Blog Post Header Settings
• Social Media Sharing
• Blog Post - Table of Contents

Note: everything you change here will be visible across all blog posts.

This group is present on each website page (including blog and system pages).
Note: everything you change here will be visible on each page mentioned above.