Elysian Multipurpose HubSpot Theme

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.

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.

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

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.

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.

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.

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.

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.

Banner layout module enables you to add a banner image to your page with some sort of text with it. You can use it to create the first fold section of your website’s homepage or any landing page. You can tweak banner heading, subheading, banner content, and many other things in this module.

Similar to banner layouts, this module helps you add a section of multiple banners you can slide. You can obviously add multiple images in this module, add heading and overlay color.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

You can use this module where you want to add any logo. This module will add the logo you select, and you can add the URL where the user will be redirected after clicking.

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.

This module allows you to add a menubar on your web page.

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.

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.

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.

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.

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.

The search module adds a search button on your web page that helps people find out the internal content of your website.

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.

This module allows you to create a sidebar on your page that contains a title with a link.

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.

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.

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.

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.

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.

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.

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.

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.

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.