Academia HubSpot Theme

1. 27 Drag and drop modules  
2. 20 Ready to use templates & 11 System pages   
3. Zero coding lightweight theme with high speed 
4. Responsive HubSpot theme with a mobile-first approach 

1. Modules: They are interchangeable objects that add various functionality to your page. You can simply drag and drop these on your page and start editing. There are 27 modules in the Academia HubSpot theme.
2. Templates: Templates are sample layouts for your ease in the Academia HubSpot theme. You can use these templates and replace the images and text according to your organization. There are 20 templates and 11 system pages in the Academia HubSpot theme.

Global Theme Settings: Any global setting on your website pages changes all the asses linked to it. Global content will be applied all over your website universally. Similarly, the settings remain unchanged for every page using that module with the global modules.

For creating a page in your HubSpot CMS using our Academia theme, follow these steps:

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

• Locate Create option on the top right corner > Select the type of page you want to create from Website Page or Landing Page

• Name the page > Select Academia theme > Select desired template from the dropdown > Press Select Template

• Add meta description, add or remove modules, and other details before publishing the page. A page title is necessary before publishing any page.

Any customization done in the global settings will be applied to all Pages using those modules. It is a good option to keep your customizations constant across Collections and Default Pages.

To edit global styles, follow these steps:

• Locate the Edit Page Panel on the left side of the screen. Three options are available on this panel. Namely, Add, Contents, and Design.

In the academia theme, there are 2 global modules:

1. Website Header
2. Website Footer 

• Once you create a page, you can start editing them. There are 3 sections on the left panel named Add, Content, and Design. 
• Click on Content > View Website Header with navigation module and Footer at the bottom.
• Now you can edit the one you want first.

• From the Page Editor > Go to Content > Go to Header with navigation

• A Pop up will appear > Click Open in the global content editor

• Change the header according to your requirements > Publish the changes.

• From the Page Editor > Go to Content > Go to Footer

• A Pop up will appear > Click Open in the global content editor

• Change the header according to your requirements > Publish the changes.

Note: Publishing any change in the website header and footer will change all your website assets.

Changing blog templates allows you to decide your blog pages’ look and feel. To do so:

• From your HubSpot account > Go to settings > On the left panel, locate and go to Website option > Select Blog > Select Template. 

• Select the edit page option and continue editing if you want to start editing this blog page.  

To change system templates,   

• From your HubSpot account > Go to settings > On the left panel, locate and go to the Website option > Select Pages

• Select System Pages > Choose the Academia system page type from the dropdown 
• Save the changes > You will have applied system templates on your website.

You can edit the theme settings through the following:

• Go to Marketing > Website > Website Pages > Choose any page to edit or create one
• Go to Edit Page Panel on the left > Design > Edit Theme Settings

Here you have the following options, under which you can make a set of changes.

You can make changes in the Global Colors, Global Fonts, and typography. Press Apply Changes after editing these.  

You can edit the header, footer, spacing, corners, buttons, tables, image performance, and forms. Press Apply Changes after editing these.

Under the blog setting, you can edit the sidebar of the blog post. Press Apply Changes after editing these. 

Under system page settings, you can edit the Error 404, Error 500, Password Prompt, Reset Password Request, and Email Unsubscribe. Press Apply Changes after editing these.

Under the scroll to top option, you can edit the Icon fill color, Icon background color, and Icon corners. Press Apply Changes after editing it. 

There are 6 re-usable sections in the Academia HubSpot theme. For implementing re-usable sections all you need to do is 

• Hover over any of the sections > locate and click the plus icon> Choose from the list of reusable sections > Publish changes.

You can show and hide FAQs or vast sections of text, adjust their height for mobile, tablet, and desktop appearances, and modify the background color, heading, border, and shadow.

Here you have the banner layout choice, banner content, banner image, banner breadcrumb choice, Enable reverse order (mobile), Background overlay, Banner content alignment, Banner inner spacing, and content color.  

Under the blog grid module, you can display the list of blogs on the page. You can edit the content and style select the bogs to display, title color, and button of the card.

You can place a button anywhere on your page using the button module. You can set the border radius, enable/disable box-shadow, alter the font color, and more to adjust the look of this button, enable a primary and secondary button and customize its text and add URLs.

If you want to edit the blog listing details, you need to go to Settings > Website > Blog > Select Academia Theme in Current View > Template > Set the number of posts per listing page > Save 

The Counter module adds a multi-column section to your page. You can use it to display numbers like the number of scholars you’ve assisted, the number of schools you’ve served, and the NGOs through which you provide free education. You can edit the icon image, counter text display condition, and counter spacing. 

The footer copyright module allows you to display your copyright text on the bottom of the page along with terms and conditions, and privacy policy page links. 

The footer navigation module is only for the footer menu where you can show a few quick links to your website.

The form module allows you to include forms on the page. You can select any form from the list of existing forms or create a new one too along with Recaptcha.

Header control module enables adding search, language switcher, button links, button type, button style, button text, add editing box-shadow, select display mode, and placeholder text on the website header.

Header toggler is left-aligned by default. However, you can choose an icon or image for the toggle open and close option. You can further edit image size, maximum size, image loading, etc. 

Under the icon box, you have the edit column count choice, icon or image selection, editable icon box, icon styling, content, icon box spacing, and card background.

The image module allows adding images anywhere on the page. You can edit the image size, set alt text, image loading, image alignment, and image border-radius.  

Under the listing layout choice module you can choose the listing layout, column count choice, enable different tabs and descriptions for each, edit listing content, box-shadow, background color, enable overwrite icon color, title color, border-radius, content color, alignment, grid button, and edit tag text and background.

You can enable the custom logo under the logo module. The logo is a very crucial aspect of your educational website.

Use the map module to display your location on the map for the visitors. Under the map module, you can edit the map API, pointer detail, map JSON, map zoom level center latitude and longitude, enable overwriting corners and height.

Add a menu bar on your webpage using the menu module. Select a menu from the existing option or create a new one. You can also decide the maximum levels that can be expanded from the tree menu. Other options include adding texts, background, border, etc.

The notice module allows you to display any kind of notice on your website page. As an educational website, you will need to display multiple notices for students, faculty members, and visitors. Under the notice module, you can add multiple notice cards and edit their content like title, links, date, description, etc.    

Our partner module helps you to show your collaborators or sponsors on your web page. There is layout choice (slider & listing), enable description, slider settings, navigation, alignment, corner, inner spacing, and background color.   

Using the team module you can display the team members on your webpage. With the layout choice, you can select the layout. You can also add or remove team members along with the image, image size, designation, name, and text.

Portfolio tabs allow you to add portfolios to your webpage. Select layout, enable or disable tabs, add or remove tabs, enable/disable item link, border radius, background, add mini title, and enable/disable box-shadow. 

Through the sidebar module, you can edit the primary and secondary buttons, icon boxes, and title tags.

The social follow module allows you to add your social media links along with an icon, icon color, size, background, corner spacing, and alignment.

The spacer module allows you to add space on your web page and add a space between modules etc. You can set the background color, height for desktop, mobile, and tablet respectively.    

For displaying testimonials on your landing page, you can use this module. You have the testimonial layout choice, option to hide/show social icons, enable/disable slider dots, navigation, and change navigation icon.    

The title content module allows adding content anywhere on your website page. You can edit the title content on your website page along with adding a subtitle, primary CTA, and secondary CTA.

The video popup module is for adding a video to your landing page or website page. You can edit the video icon or image, add a video link, enable/disable overlay, and corners. 

There are 20 templates in the Academia HubSpot theme. You can simply select the template you want to use and edit the content, title, logos, and modules