1.Overview

HubSpot Elysian Theme is a multipurpose DIY theme you can install in your HubSpot portal and use it for different purposes of your business. This theme is completely based on component structure anyone can add with a simple drag-and-drop. Like if you want to create a testimonial section on your page, just drag and drop that component and it will be created. This theme contains 38 modules, 5 landing page templates, 25 theme templates, 7 system pages, 1 blog page, header, footer and a no-navigation header. You can use all of these assets to build aesthetic web pages through your HubSpot CMS.

2.Basic Settings

2.1.How to build a page

To create a new page, login to your HubSpot portal. Then navigate to Marketing > Website > Website Pages. On the top right, you’ll see a Create button. Click on it then select the type of page you want to create. You can choose between Website pages, Landing Pages, or blogs.

After selecting the page type, select the Elysian theme and choose a template. The theme provides you 30 templates like Coming Soon, Testimonials, Portfolio and more. Select the one you want to create.

Once you select the template, enter the Page Name and click on Create Page and your page will be successfully created. You can now add or remove modules accordingly, add meta description, page title, and other necessary information and publish the page.

2.2.Edit Global Styles

After you successfully create a page, you get an Edit Page Panel on the left side of the screen. In this panel 3 sections are listed named Add, Contents, and Design. Click on Design and you’ll see an Edit Theme Settings button there. Click on it and make changes on the theme globally.

Here what you change will take effect on all the pages and assets. Through these settings, you can change:

1. Color And Font Setting
2. Layout Setting
3. Blog Setting
4. System Page Setting
5. Thank You Page Setting

2.3.Edit Global Modules

We have create 2 global modules in this theme that are:

  • Website Header
  • Footer 

You can start editing them after successfully creating a page. Once you create a page, you’ll see three sections on the left panel named Add, Content, and Design. Click on Content and at the top, you’ll see the Website Header module and Footer at the bottom.

How to edit Website header module

Click on the Website Header module and a popup will appear saying Edit Global Content? Click on Open in Global Content Editor. Once you click it, you can edit the header of the website. Change the header the way you want.

After making changes, click on Publish to save changes.

How to edit the Footer module

Click on Footer and a popup will appear saying Edit Global Content? Click on the Open in Global Content Editor button there. Once you click, the editor will open where you can make changes to the module. Change the footer the way you want.

After making changes, click on Publish to save changes.

Note: Publishing the changes on these modules will take effect on all your pages so be sure while doing any modifications.

2.4.Change Blog Templates

Blog templates allow you to select a template for your blog pages. This helps you decide how your blog pages will look like. You can set a template for:

  • Blog page: Template for a single blog post
  • Blog listing page: Template that aggregates all your blog posts

To do this, go to Settings of your HubSpot account, scroll down on the left panel and click on Website dropdown. Then click on Blog in it and select the Templates section. There you’ll see templates for blog posts and blog listing. Click on their dropdown and select the Elysian template and save the changes.

2.5.Change System Templates

System templates allow you to set a template for the system pages like Error pages, Password Prompt, Search Results.

To change the system templates, go to the Settings of your HubSpot portal, then scroll down on the left panel and click on Website drop-down and select Pages. You’ll see multiple sections there. Select the System Pages section there. After clicking on it, you can set a template for these system pages:

  • Errors
    • 404
    • 500
  • Password Prompt
  • Search Results

Just click on the dropdown on these pages and select the Elysian template. Save the changes and the Elysian template will be applied to selected pages.

3.Module Library

3.1.Accordion

accordian

This module can help you create a section to add FAQs or large pieces of content users can toggle to show or hide. You can adjust its height according to the different devices, i.e. Mobile, Desktop, Tablet. And you can also change its background and heading color, border, and shadow.

3.2.Awards and Certifications

certificate-hubspot-themes

This module is designed to help you create a section where you can display your awards and certificates. You can add the images of awards, select the number of awards you want to display at a time, and more.

3.5.Blockquotes

Blockquotes

As the name suggests, the blockquotes module helps you add blockquotes on your page.

3.6.Blog Listing

Blog Listing

This module helps you create a section where you can add multiple blogs. You just need to select the blog template and it will fetch and list all the posts from that blog.

3.7.Card Section

Card Section

The Card section module allows you to create a section with multiple cards where you can display some content in every individual card. You can add a title, image and text for each card in this section.

3.8.Clients and Brands

Clients and Brands

This module helps you create a section where you can showcase all the clients you’ve worked with. You can add multiple images in this module to display them.

3.9.Countdown

Countdown

This module helps you add a countdown timer on your page. You can select a date and time you want to run the countdown for.

3.10.Counter Section

Counter Section

This module creates a section that contains multiple columns. Each of these columns has some content and a counter with it. You can use it in your about us page, or home page to display the numbers like businesses you’ve helped, number of clients, countries you offer solutions to.

3.11.Customizable Button

Customizable Button

This module helps you add a button in your page. You can customize the styling of this button like set border radius, enable/disable shadow, change text color and more.

3.12.Ebook

ebook - hubspot theme

The Ebook module adds a section that contains multiple cards you can use to display different chapters of a content piece. You can add title and description to every card in this module.

3.13.Form

Form - hubspot theme

With the Form module, you can add a form on your pages. You can drag and drop this module and the form will be created on the page. Then you need to select the form, add fields if you want to, set a thank you message, redirection and you’ll be done. You can also set GDPR options, captcha in the form.

3.14.Icon Box

Icon Box

This module adds a section where you can display multiple cards. Each of these cards has an icon and you can set the number of cards you want to display in a column. You can also change the layout and the text alignment of these cards.

3.15.Image

Image - hubspot theme

As the name suggests, this module helps you add an image on your page. You can set the image of your choice and its alt text, size, loading, etc.

3.16.Job Listing

Job Listing - hubspot theme

This module helps you create a job listing section where you can add multiple job profiles, location, with a posting date, classification, apply now button, and a share button.

3.17.Landing Banner

Landing Banner- hubspot theme

This module enables you to create a banner you can use in the first fold of your landing pages. It contains a background image, a heading, subheadings, a CTA, and a form.

3.18.Language Switcher

You can use this module to implement the language switching functionality on your website.

Note: The language switcher module will only be visible if your site operates in multiple languages.

3.20.Map

Map- hubspot theme

This module adds a map section on your page. In this module, you can add the map API, set default latitude and longitude, map JSON, zoom level and height.

3.22.Message Alert

message alert

If you want to display a message as a popup for some error or any other action, you can use this module to do that. You can set the messages in any number to display as an alert on any action.

3.23.Portfolio Layouts

Portfolio Layouts- hubspot theme

This module creates a section you can use to display multiple portfolios in a row. These portfolios can contain an image, a heading, subheading and social profile links. You can use this module when you want to display a team gallery on your about page.

3.24.Pricing Card

Pricing card-hubspot theme

This module allows you to create a pricing card section on your web page. It offers you a 2 and 3 card layout design you can use select from. Moreover, it also comes with a toggle that helps you switch between different time period plans like Monthly and Annually.

3.25.Process

process - hubspot theme

This module creates a section which shows a step-by-step process of how things happen. You can use this module to display your project development process.

3.26.Roadmap Layouts

Roadmap Layouts

This module helps you create a section where you can show a roadmap of a process like your business’s journey. You get two different layouts here which allows you to create a vertical or a horizontal slider.

3.28.Section Heading

Section Heading - hubspot theme

This module adds a section that contains a heading and some content with it. Here you can change the heading color, enable/disable the content, change content color and set content margins.

3.30.Social Icon Layouts

Social Icon Layouts

This module creates a small panel for social media icons which you can use on your blog posts or other pages to allow people to share the page directly to their social channels.

3.31.Spacer

Spacer

You can use this module to give a space between different sections. In this module, you can adjust the height for different devices and can change the background color.

3.32.Table of Contents

Table of Contents - hubspot theme

This module helps you create a table of contents section in your web page. Here you get to add a heading with a link, a main heading you’ll be redirected to, and its subheading and content.

3.33.Tabs

tabs - hubspot theme

With this module, you can create a section with multiple tabs on top. Each tab has some content associated with it. Whenever a user clicks on any tab, the associated content appears. Here you can change the tab layout, add tab header, with some content and image.

3.34.Team Members

team members- hubspot theme

Team members module helps you create a section you can use to display your team gallery. The section contains multiple columns where each one can have an image, profile title, profile designation, link, social profiles, etc.

3.35.Testimonial Box

Testimonial Box - hubspot theme

This module creates a section where you can show multiple testimonials where each testimonial can contain a logo, client image, client designation, and review. You can change the number of testimonials you want to show in each row.

3.36.Testimonial Slider

Testimonial Slider - hubspot theme

You can use this module to add multiple testimonials on your pages but this time you can slide through them. You can change the image, alt text, loading style, slider content, author name and font.

3.37.Toggler

This module helps you add a toggler that helps you switch between the header’s submenu and mobile view. You can add a toggler image here to configure it.

3.38.Video Popup

Video Popup - hubspot theme

This module helps you add a video that pops up whenever you click on it. Here you can add a thumbnail image for video, configure popup overlay, change heading color, etc.

4.Add Additional Offers

Suggest Edit