Activism HubSpot Theme

• Easy to use, DIY theme settings
• Drag and drop page builder with zero coding 
• Highly customizable HubSpot modules
• High-speed SEO-friendly theme  
• Multi-language support 

1. 25 theme modules 
2. 8 templates
3. 6 reusable sections
4. 6 system pages 

As soon as you buy or download a theme, HubSpot will prompt you to start editing the page templates of the CMS theme. However, before rushing into starting your newly designed pages, consider creating a child theme. 

Why? 

Setting up a child theme of the ACTIVISM HubSpot theme 

• preserves the ability of the updates to be applied to the parent theme. 
• Additionally, anyone including us, a third party, or you can change the code on your portal and extend your requirements and theme styles that are not currently adjustable on the parent theme.  
• Even if you’re not going to edit the theme at all, creating a child theme ensures, you can receive regular updates from the HubSpot marketplace without hindering your customizations. 
• Once the theme has been purchased, you can build up to 5 child themes with separate branding under the same account. In fact, Users of CMS Hub Enterprise can set up as many as 10 child themes.

• Open your HubSpot account > navigate to marketing > choose files and templates > select design tools
• Find the @marketplace folder for the Glambiz theme > right-click on the Activism theme folder > select create child theme > name the child theme 

If you want to change the child theme location, do so by clicking change in the File location section. Select a folder > click select. 

To access the theme settings, you first need to create a page > edit page option > theme > edit theme settings. From the edit theme settings, you can access different settings on the themes like global colors, global fonts, typography, buttons, forms, tables, website header, website footer, spacing, and system page settings.  

To change the colors on your website, you can go to the global colors option. From here, you can change the primary, secondary, background, and heading colors.

From the global fonts option, you can change the heading and body fonts.

The typography settings allow you to change the desktop font, line height, letter spacing, text transformation, etc., and change the mobile font height, line height, and letter spacing for headings, h1, h2, h3, h4, h5, h6, and the body. Additionally, you can alter the normal and hover link color.

There are 4 sub-settings under the buttons option. The buttons of your website can be edited from here. 

• Button: Edit buttons font size, line height, text transformation, spacing, corner radius, and enable/disable animation.   

• Normal: Change the style of the button in a normal state by editing the button text font, button background color, button style, and width.   

• Hover: Change the style of the button in the hover state. Edit text color, background color, button border, style, and width.

• Normal: Change the styles of buttons in the normal state. Edit text color, background color, button border, style, and width.  

Active: Change the style of buttons in the active state. Edit text color, background color, button border, style, and width.

From the forms option, you can edit the following:

• Title: Edit form text, background text, mobile & desktop spacing, and corner radius.
• Labels: Edit the form label texts and spacings.
• Help text: Edit the help text font.
• Fields: Edit the input field placeholder color, text font, background color, background color, border style, spacing, border color on focus, and corner radius. Additionally, you can also change the paragraph content of GDPR texts and form rich text fields. 
• Forms: Edit the form background color, spacing, and border style, and alter the corner radius. The border-radius only alters the bottom left and bottom right of the form 

Error messages: Edit the text, spacing, and border color of error messages.

To edit the tables on the website you have the following 4 sub-settings:

• Table header: Edit the text color and background of the table header.

• Table body: Edit table body text color and background color.

• Table footer: Change the table footer background and text color.  

Table cells: Alter the border and spacing of table cells.

From the website header option, you can control the following:

• Background: Change the header background color. 

Menu: Edit desktop and mobile header text, hover text font, active text font, edit dropdown text color, background color, hover text & background color. Additionally, you can also edit the active text font color which is only for mobile view.

The website footer option has the settings to edit the website footer background color. Edit desktop heading font, size & text transformation, and mobile heading font size & line height. You can edit the desktop and mobile menus.

From the spacing option, you can edit the maximum content width, horizontal spacing, and vertical spacing for desktop and mobile devices.

You can enable the system page image, replace or remove the system page images, add alt text and decide image loading for error page 500, 404, email unsubscribe, and password prompt.  

From blog settings, you can access to two sub-settings:

• Sidebar: You can enable or disable sidebar and other sidebar widgets like, topics, popular posts, and subscription form.  

Blog Post: Edit desktop and mobile content paragraph, alter image corners, enable or disable author name, timestamp, tags, and related posts.   

There are 25 modules in this free HubSpot theme.

The accordion module can help you create a section to add FAQs or a large piece of content users can toggle to show or hide. You can add multiple accordions, as many as you like.

You have the icon position choice of left and right. You can add the title and content of each accordion and replace or remove the opening and closing icons.       

From its style tab, you can edit icons, content, title, and text color. 

 The first thing that the users notice when they land at your website page. You can use it on your home page or about us page to inform the visitors about your marketing or other services.

You can select the layout you want from the Background image, background color, and banner with an image.

• Background image
  
  
• Banner with an image

You can choose to use a breadcrumb or button, change content, and change the background image for the mobile background. 

Add blogs in listings with all other important details. You can display blogs on your website page with the blog listing module.   

You can enable or disable blog meta information like tags, title, author, publish date, description, and button. You can edit the button text, and enable box-shadow and sidebar widgets.

The sidebar widgets include the search, popular posts, category, and subscribe button. You can enable or disable either of these.

From the style tab, you can control widgets and cards. You can change the card background color, content, and background color on hover, featured image corner radius, tags, titles, etc.

Add a donation or sign-up button on your website pages.

You can edit button text, set desired link, select to open link in a separate tab, etc.

From its style tab, you can decide its alignment, and normal settings like button text font, background color, border color, width, corner radius, spacings, change content color from overwriting style option, etc.

Blog-related posts module displays related blogs on the side of any of your website pages. You can edit the section title, and edit button text. 

Recent posts can be shown using blog-related posts at the end of the blog detailed page.

Add title and images in cards on your website pages.

You can select the column layout from one, two, and three. Enable title, description, enable icon box, and button image. 

While you add multiple cards you can edit the card image, image loading, title, content, replace or remove the image at the button, image size adjustments, and maximum size.

From its style tab you can edit image corner radius and content alignment. From the overwrite styles option you can change content color.

Use the copyright module on the footer to show your copyright text along with the privacy policy and terms and conditions text and links.

You can edit the copyright text, privacy policy text, and link. Similar settings are available for terms and conditions.

Add a custom form according to your website’s requirements. You can add any form you want, like subscribe form, donation form, subscribe to the activism news feed, reach form, petition form, or event form. 

You can select form layout from multiple field form, or single field inline form.

You can also add multiple form fields and edit the form content according to your needs.

From the style tab of custom form, you can enable/disable the border button, desktop alignment, enable form max-width, desktop & mobile form spacing, background color, and border of input fields, and overwrite button styles (change normal & hover text background and border color), change button radius, etc.   

Collect donations from volunteers and sponsors via donation form. Contact us for customization. 

You can edit the form contents, fields, etc. like other forms on your website.

From the style tab you can also change the background color max width, form title, and the border and background color of the input field.

List events of your organization in the grid and set the number of rows.

You can add multiple event cards to your landing page.

You can edit each card’s content, tag, add or remove icon box, description, edit buttons, etc.

From its style tab you can edit the cards and modal.

Add multiple images in the gallery with this module.

From the style tab of gallery module, you can edit the image corner radius and navigation image corner radius.

The header controls can be edited from the global content editor. The header appears on the top of your website and landing pages. You can add multiple options for user navigation.

The header control module allows the user to enable a search option, select the display mode of the language switcher (localized, PageLang, hybrid), and button type, link, and text on the website header.

Drag and drop the header above the menu component for best results. You can select an icon or image for the toggle open and close option.

Add multiple icons and their descriptions on landing pages.

You can select the number of columns you want to display, select an image or icon for each column, edit compact content and enable box shadow.

From the style tab you can edit the icon box background and content color, desktop & mobile spacing, and change icon color.  

Add images on landing pages anywhere you want.

You can replace or remove the image, add alt text, image size adjustments, and image loading.

From its style tab, you can set the image alignment for desktop and mobile, set corner radius, etc.

Add your custom logo with a logo module anywhere on your website pages.

You can enable a custom logo, replace or remove the logo, adjust its size, image loading, etc. You can control its visibility from the style tab.

The map module will add a virtual map to your website. If you have a physical office where you carry on your daily activities or ask people to come over for an event, you can definitely add this module.

You can edit the content (title, subtitle, and container), pointer details, Map JSON, alt text, and image loading.

Add a menu bar on your webpage using the menu module. Create a new menu or use an old one on your landing pages.

Under the edit theme settings options > website header > menu, you can change font and edit line-height for mobile and desktop.   

You can edit the dropdown texts, background, hover & active text, and background color. 

The Footer nav module allows you to add all the quick links on the website page bottom.

From edit theme settings > website footer, you can edit the footer background, heading text font, and line height for mobile and desktop, menu text and hover color, etc. 

The social follow module allows you to add your social platforms like Twitter, Instagram, Facebook, and LinkedIn on your website pages, header, or footer.

From the style tab of the social follow module you can overwrite icon color, change the background color, corner radius of the icons, desktop, and mobile horizontal alignments, etc.

The spacer module adds white space to the website and landing pages. With the spacer module, you can add vertical spaces between sections and modules as and when required.  

From its style tab, you can adjust desktop, mobile, and tablet height, and change background color.

Create single consecutive windows to show important details on landing pages along with a form.

You can add multiple contents to your tabs and edit each of its image, title, content, add button and attach form too. 

You can edit navigation title background color, controls background color, overwrite styles, etc.

The testimonial module can be used to display various testimonials on your landing page.

You can add multiple testimonials on your landing pages and replace or remove the slider arrow image for the previous and next testimonials.

For every testimonial you add, you can remove or replace the client image, adjust the size, alt text, image loading, client review content, and replace or remove pattern images.  

The title content module allows you to add a title on any page. There is an option to add a mini title, edit content, and add primary & secondary buttons.

You can enable a mini title, format content, and place a button with the title content.  

From its style tab you can edit the text container background color, enable maximum width, desktop and mobile spacing, and content alignment, description, etc.

Using the video module, you can add a video to your website or landing pages. These are very easy to work with and increase your page’s engagement rate.

You can replace or remove the video poster, select icon content, play icon, etc.

You can select either icon over image or content over the image. The default option for video pop-ups is an icon over the image.  

From the style tab, you can select desktop and mobile alignment, and enable overlay, frame, and corner border radius.

There are 6 reusable sections that you can use with a single click. They are: