Environmental HubSpot Theme

• DIY theme with flexible Drag and Drop customization
• High page speed and lightweight 
• 28 modules, 6 pre-built templates, and 11 system pages 
• Mobile responsive with easy theme settings

Here are a few things that you will encounter while using any HubSpot theme:

1. 1. Modules: They are interchangeable and self-contained objects that add functionality to your page. They concentrate on a specific aspect and, when correctly combined, produce wonders for your UI/UX. You will be able to drag and drop these wherever you wish in the Environmental theme. There are 28 modules in this theme.
   2. Templates: This is the sample layout that comes with the theme. You can use these to replace your services and content on your website, or you can start from scratch. There are pre-existing 11 templates and 11 system pages in this theme. 

• Global Theme Style: Backgrounds, headings, buttons, images, and form fields can all have default design options defined in the theme style settings. These options override and replace the theme’s styling options. Global modules remain the same throughout the website. Wherever you have those modules on the website pages, the settings remain unchanged.  

1. Global Content: Information that appears on numerous pages, such as the header or footer of a website The drag and drop page editor allows you to edit global content directly.

For creating a new page in this HubSpot theme, you can use a page template and customize it accordingly. Follow these steps:

• Log in to your HubSpot account through the HubSpot portal. Go to Marketing > Website > Website Pages.

• A Create button can be found in the top right corner. Click Create. Select the sort of page you want to create by clicking on it. Website pages, landing pages, and blogs are all options.

• After you’ve chosen the page type, name the page > Click Create Page.

• Now select the Environmental theme and a template after selecting the page type. There are 11 templates included with the theme, including Our Benefactors, Our Cause, Landing Page Donation, and more. Choose which one you wish to make. Click Select Template.

• After you’ve chosen a template, your page will be created successfully. You can now add or remove modules by the drag and drop method as needed. Add meta descriptions, page titles, and other required information, before publishing the page. A page title is necessary before publishing a page.

Customizations that will be applied to All Pages and/or Collections are known as global customizations. If you want to keep your customizations constant across Collections and Default Pages, this is a good option.

To edit global styles, follow these steps:

• An Edit Page Panel appears on the left side of the screen once you successfully create a page. Three options available on this panel are:

1. Add
2. Contents
3. Design 

• Click Design, you’ll see an Edit Theme Settings button. Click ‘Edit Theme Settings’ to make global changes to the theme.

Note: What you change here will affect all of the pages and assets. 

You can make changes in the following global styles:

In the Environmental HubSpot theme, we have created two global modules:

1. Website Header
2. Website Footer

After creating any page you can start editing it. On the left side of any created page locate Edit Page Panel. Three opinions available on this panel are:

• Add
• Contents
• Design 

Click on Content, you’ll see the Website Header module at the top and the Footer module at the bottom.

For editing website header:

• On the page editor, go to Edit Page panel > Design > Edit Theme Settings

• Select Website Header > Make desired changes 

• Publish the header. It will be updated universally.

Under the website header in the Environmental theme, you will find the Menu, Background, and Top Bar options.

Under the menu, you can change the following settings related to the menu on your header:

1 Link

Select the link color, mobile link color, and link hover/active color.

2 Dropdowns 

Make changes in the text, background, border style and color, and width of the dropdowns on your website.

After making changes click on Apply Changes.

You can change the background color of your header. Just put in your color hex code and apply changes.

The Top Header Bar is a section above your main menu that allows you to display additional content on top of the header. You might display a secondary menu, language, a message such as a phone number, search, social media icons, and a cart if you have an online store.

In our theme, you can set the top bar by following these steps:

• Go to Website Header > Click Header Top Bar 

• Push the slider button to enable the top bar.
• Set the background color of the top bar
• Apply Changes.  

For editing website footer:

• On the page editor, go to Edit Page panel > Design > Edit Theme Settings

Select Website Footer > Make desired changes on the footer background and text.

• Press Apply Changes. It will be updated universally.

Under the footer, you have the option to edit the website footer text and background. 

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

You can choose a template for your blog pages using Environmental Theme blog templates. This aids you in deciding how your blog pages will appear. By default you can create a template for the following:

1. Blog Post: Template for a single blog post.
2. Blog Listing: Template to list all your blog entries in one place. 

To change blog templates follow these steps:

• Go to your HubSpot account’s settings > Scroll down to the left panel > Select Website from the dropdown menu.

• From the drop-down, select the blog option > Choose the templates option. 
• Go to the Current View option > From the drop-down select Environmental.

• Now select the blog listing page and click on the edit page to continue editing the existing blog template. Select the module through from drag and drop method and apply changes.
• You can select the number of posts per listing page, select to show summaries and images, and the option to use feature images in listing summaries. 

You can use system templates to create a template for system pages such as error pages, password prompts, and search results.

To alter the system templates, follow these steps:

• Go to your HubSpot portal’s Settings > Scroll down to the left panel
• Click Website dropdown > Select Pages 

• You will see several sections. Select the System Pages section > Set a template for the system pages after clicking it.

Among the system pages, there are Errors, Password Prompts, and Search Results. 

Errors

Among the error pages, there are 404 and 500 error pages. To use either of the two pages. 

• Go to Settings > Navigate to Website > Select pages from drop-down > Select System Pages.

• Choose the Environmental 500 or 404 Error page from the drop-down menu
• The page template will be used.

For using the password prompt page:

• Go to Settings > Navigate to Website > Select pages from drop-down > Select Password Prompt Page.

Choose the Environmental Password Prompt from the drop-down option. And our password prompt page will be applied.   

For the search result page:

• Go to Settings > Navigate to Website > Select the environmental template from the dropdown menu > Select Search Result Page.

You can also select the email subscription template. 

• Go to Settings > Marketing > Email > Subscriptions 
• From the dropdown menu, you can select the Environment theme for the Subscription preference page, Subscription Update confirmation Page, and Unknown Contact subscription confirmation

After you have saved your modifications, you will have applied the Environmental template to your chosen pages.

You can alter the following settings using these options in the edit theme settings option.

Under global colors, you can edit the color on every page of your website globally. To change Global Color Settings:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Global Colors     
• Set Primary color > Secondary color > Tertiary color > Title color > Body color > Apply Changes

Using global settings, you can change the fonts to appear everywhere on your website pages, blog pages, and system pages. For changing global fonts:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Global Fonts
• Set Primary Font > Secondary Font > Apply Changes  

Using spacing, you can set the spacing between modules and text on your website pages, blog pages, and system pages in a universal manner. To set spacing:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Spacing
• Set vertical spacing > Maximum content width > Apply changes

Typography is one of the most crucial design aspects. Everything from font style to structure to character and structure is covered by typography. For each heading type, you can set the font, text transform, and mobile font.

For making changes in the typography:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Typography

• Choose heading type from h1, h2, h3, h4, h5, and h6. 
• Set Transform option from Capitalize, Upper Case, none, or Lowercase.

• Set Mobile font. The mobile font will make text appear in the selected font on mobile devices.
• Set body and link font > Apply Changes

Under buttons, you can change the button style, corner radius, spacing, and padding of primary and secondary buttons n your website pages. To change button settings:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Buttons

• Select the primary button or secondary button and make changes in its normal state, hover state, and focus state.
• You can also set the border, background, and text for different buttons.

• Set spacing and corner radius > Apply Changes. 

To change forms settings: 

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Forms

• Under forms you can change the title, labels, help text and alter field settings. 
• Apply Changes

To make changes in the tables:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Tables 

• Set header font & color, body text & background, footer text & background, cells spacing & border.  
• Apply changes. 

For altering blog settings:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > Blog Settings  

• Hit Blog Post > Make changes in the Content > Container width & Paragraph 
• Selec to Hide/Show author name/time stamp/tags/Related post > Apply Changes

For system pages modifications follow these steps:

• Go to Marketing > Website > Website Pages > Edit Page Panel > Design > Edit Theme Settings > System Page Settings
• Now you can decide which page settings you want to carry out > Apply Changes

• Check the checkbox to enable error image 
• Replace or remove the error banner image 
• Set Alt text and image loading 
• Apply changes 

Under email unsubscribe and password prompt page settings you can 

• Enable disable both these pages
• Replace/Remove banner image, alt text, and loading 
• Apply Changes

To work with the re-usable sections all you need to do is hover over any of the modules > locate and press the plus icon> select from the list of reusable sections > publish changes.

There are 6 re-usable sections in the Environmental HubSpot theme.  

Here is the list of all the modules available in the Environmetal theme. To work with modules, here are the things you need to keep in mind:

1. You need to create a page or use a template for changing modules on the page.
2. Simply select the module, drag it anywhere and drop it on the page.
3. To edit any module hover over the module > locate pencil icon on the top right of the model > Start editing the module from the module settings on the left       
4. To delete any module from the page, hover over the module > locate and click the delete icon 

This module can assist you in creating an area where users can toggle between showing and hiding FAQs or vast sections of text. Its height may be adjusted for different devices, such as mobile, desktop, and tablet. You can also modify the color of the background and heading, as well as the border and shadow.

Enable the benefactor module to display the most precious and revered benefactors of your non-profit organization. You can edit the layout of the module to three or four columns in a single row, edit the content, and style, etc. It is a very attractive module to feature your sponsors and patrons.

In the blog listing module, you can display a set of blogs on your blog page. You can change its content and style. Using a fantastic category of blog entices interested individuals to explore new articles by navigating simple.

The button module will assist you in placing a button on your page. Set the border radius, enable/disable shadow, alter the font color, and more to adjust the look of this button. You can also enable a primary and secondary button and customize its text and add URLs.

The case study module allows you to showcase a comprehensive examination of a single person, service, problem, group, location, event, organization, or phenomenon. In social, educational, clinical, NPO, and business research, case studies are frequently employed.

The Counter module adds a multi-column section to your page. Each of these columns has some content as well as a counter. You can use it to display numbers like the number of businesses you’ve assisted, the number of clients you’ve served, and the nations to which you provide solutions on your about us or home pages.

The donation module is specifically for your website if you want to urge volunteers to donate for your cause. Just select the module and alter settings, i.e. title, amount label, and donation button. You can add multiple fixed amount options.

You will need to create a contact property for the donation amount in your form. This form field shall remain hidden in the form. 

You can choose between image or icon type from this section. List your features on this page. You can use the card or overlay layout. You can add multiple feature cards on your page with a progress bar with customizations in their content, image, links, and alt text. 

Allow users to filter blogs and content by categories with the use of a filter module. You add multiple categories, tabs, and portfolios. By default, all cases are listed. But, the initial filter setting will allow users to set the initial filter only for a single category at a time.

A hero banner is the enormous, oversized banner image that users will view as soon as they arrive on this page. Layout, background color, banner header, heading color, layout, image, banner paragraph, and banner color can all be customized. Update the links and use a banner CTA.

This module provides an area where you can display several cards. Each of these cards has a symbol, and you can choose how many cards to show in each column. You can also change these cards’ layout, count, and text orientation.