Group 12
close_24px 1

1. Creating a Child Theme

By creating a child theme of the Marketplace theme, You can now create one-off changes, custom CSS, JavaScript, and/or modules, while still being able to receive updates through the Marketplace.

You can create a child theme for your marketplace purchased theme or a default HubSpot theme in the Design Manager. When creating a child theme from these assets inside the Design Manager, the following files will be added to your child theme:

  • theme.json - this will include the proper extended statement for linking to the parent theme.
  • child.css and child.js - this is an empty CSS and JS file. Code added to these files will only affect the child theme. You can customize the name of these files in the advanced options section of the child theme creation wizard.
  • In your HubSpot account, navigate to Content > Design Tools.
  • In the left sidebar, navigate to @marketplace > Zepia and right-click on the theme and click Create child theme.
  • Enter a name for your child theme, choose the location of the theme, and click Create Child Theme.
  • Once your child theme is created, a success message will appear telling your child theme is ready to go. You can now click Close.

 

 

2. Theme Settings

To customize your theme's styling, including font, colors, and spacing, navigate to your theme settings. Any styles edited here will apply to all pages.

For any additional customization options needed in theme settings. Contact us at support@growmeda.com

Follow these steps:

  • Click the settings icon in the main navigation bar of your HubSpot account.
  • In the left sidebar menu, navigate to Content > Themes.
  • Select your Zepia theme.

Global Colors

Here, you can customize and establish the colors that will represent your brand.

Global Fonts

Here, you can set up the typography for your site. You can choose the typography settings for Primary Font (Body Texts) & Secondary Font (Headings). You can choose the Primary font from any Google Fonts and Its Color in the Primary font settings. You can choose the Secondary font from any Google Fonts and Its Color in the Secondary font settings.

Spacing

You can customize the container width and vertical and horizontal Spacing globally here.

Text

In this theme setting, You can customize the Typography settings of Body texts, Headings (H1- H6) and Link color & Link Hover color throughout the theme. In the Body Text Setting, You are provided with selecting the Google font of your need and font size, color, line height, font weight, and a boolean option to change the Font size on mobile if needed. SImilarly, you have the same options in Headings H1-H6.

Buttons

In this theme setting, You can define the buttons' styles.

Forms

You can customize the form styling inside these settings. You can customize the Form background color, Field background color, Label color etc here.

Tables

Here you can define the styles and look of the tables used in the website.

Website Header

In the Website Header Settings, You can choose the Background color of the Header, Text Color, Menu link color and It’s hover state color, Menu link dropdown icon color, Child menu Background Color, Child menu link color, Child Menu Item Link hover state color and it’s Background color on hover state.

Website Footer

Here you can define the Global style of the footer of website.

 

 

3. Page Templates

When you are creating a new page in HubSpot, you will have the option to choose from the available templates.

To access the available templates when creating a page in HubSpot, follow these steps:

  • Log in to your HubSpot account and navigate to the Content menu.
  • Find and click on the Website Pages or Landing Pages option.
  • Click on the Create button to start creating a new page.
  • In the page creation menu, you will find a section where you can select a template.

 

 

4. Blog Templates

Blog Listing Template

  • Click the settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Content > Blog.
  • In the Current View section, click the first dropdown menu and select the blog you want to edit.

In the Blog Listing section, click the Actions dropdown menu to manage your blog post template:

  • Select Change template to choose a different template. On the next screen screen scroll down a click Advanced options then select Use different template On the theme selection screen, choose Zepia Blog Listing Page, then select your Blog Listing then click Use Template.

Blog Post Template

  • Click the settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Content > Blog.
  • In the Current View section, click the first dropdown menu and select a blog and select the blog you want to edit.

In the Blog Post section, click the Actions dropdown menu to manage your blog post template:

  • Select Change template to choose a different template. On the theme selection screen, select Zepia, then select your Blog Post template then click Done. In the bottom left of your template settings, click Save.

 

 

5. System Templates

System Pages

  • Click the settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Content > Pages.
  • Select System Pages from the tabs
  • There you can select the templates for these system pages:
    • 404 Error page
    • 500 Error page
    • Password prompt page
    • Search result page
  • Also, you can set the Search result page URL.

Subscription Templates

  • Click the settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Marketing > Email.
  • Select Subscription from the tabs
  • There you can select the templates for these subscription pages:
    • Subscription preferences page
    • Subscription Update Confirmation page
    • Unsubscribe page

 

 

6. Modules

Apart from the theme settings, we provide advanced customization and content updation options in custom & global modules.

For any additional custom modules or customization needed in modules in the Zepia theme. Contact us at support@growmeda.com

Module Content Updation

Inside the edit page of a particular page, You can just click on a module and click on the content tab to update the Text, images, and other elements of the module.

Module Style Updation

Inside the edit page of a particular page, You can just click on a module and click on the Styles tab to update the styles of each element included in the module such as fonts, color, Background, etc.

FAQ's

Will my content get overwritten after updating the theme?

No, your content will not get overwritten to the default content after updating the theme. In the rare case that it does happen to you, feel free to reach out to the Growmeda Support Team at support@growmeda.com.

I created a child theme, will updating the theme affect the child theme as well?

Yes. Generally, without cloning the files to the child theme, updated changes in the parent theme will reflect in the child theme.

I created a child theme and cloned everything from the parent theme to the child theme, will updating the theme affect the child theme as well?

Not exactly, a file in the same relative path of a child theme will overwrite the equivalent file from the parent theme. What this translates to is that, even after updating the parent theme, cloned files in the child theme will not be affected till they are manually updated to match the files in the parent theme.

If I need to add some more modules and some customization in the theme, Where can I contact the support team?

In case you need to add some more modules or want to make some more customization apart from theme settings and module styles settings, feel free to reach out to the Growmeda Support Team support@growmeda.com.