Strontium HubSpot Theme

Going through documentation of any type can wear you out, so for Strontium, we have tried to explain to you about the templates and modules in the best and easiest way possible. Starting off with this theme will give you a new outlook on creating custom web pages. In a nutshell, Strontium is a multi-purpose theme for HubSpot specifically created to bring out the creator in you. We have tried to imbibe all our proficiency in bringing the best features to your website. In case you are stuck at any point, we will help you. With the highest and best quality customer service, you can always be sure to have us as a backup plan. You are also free to share your views and feedback along with queries regarding the theme. Let us then get started. First things first, purchased the theme right here and then all our templates will be available for you. Now, you have got the greatest power to create pages by selecting the templates, or use the drag and drop function and edit our modules. All of which is explained here in our documentation. Demo Setup Here you can check a few demo pages we have created for you. For your deeper understanding, we have also added the links to HubSpot articles. You will find a completely guided tour of our super modules and templates.

Kicking off with basic points:

• Modules : These are elements adding functionality to your page, interchangeable, and independent. They focus on single aspects and when coupled properly they work out perfectly for your UI/UX. In the Strontium theme you will be able to drag and drop these wherever ever you want.
• Templates : This is the specimen layout available already in the theme. You can use these and replace your services and content, or create a fresh for your website.

For creating a fresh page, after you log in,

• Go to Marketing > Website. Now select the type of page you want to create from the available options, i.e, Website Pages, Landing Pages, or Blog Pages.
• Once page type is selected. Go to Create > Page Type > Select Strontium Theme. You will find all page types available. Select from here the page you want to build, for instance, Portfolio page, Pillar page, or Service page, etc.
• Enter the Internal Page name (whatever you want to name it) and click on Create Page. Your page will successfully be created.
• You may remove or add modules according to your requirements. Publish the page after you add the suitable details and necessary information.
• When you purchase and get the theme, you can find the Strontium modules and templates in your HubSpot portal. If you are a hotshot in the codes, then you can directly clone the theme and make changes using your intellect accordingly. Go to Marketing> files and templates> Design Tools. From here, you can edit codes of whatever page you want to work on.
• Start customizing even if you are not a developer or you do not have any developing knowledge with these easy steps: Marketing > Website > Pages(Website, Landing, Blog). You know, the Strontium theme is made for everyone. But, if you are still finding it hard to come around, we have our promise of customizing your website in just one click.

Customer Support Link here. 

Any changes you apply on the global settings will change the look of all your assets entirely. However, you can check the appearance before publishing. 

In this section, you will have 3 selections: 

1. Add
2. Content
3. Design

• After you create a page, come back to the page editor. If you want to make changes for elements on any particular page you need go to Theme Settings > Edit Page > Content.
• After you select Content, you can edit this page content. You can edit the Header, Main Section, and Footer from here. The list of options include:
  

 

• You will find a pop-up option for every particular setting. Just click on them and you can customize everything.

• Accept the “Open in global content editor” and continue editing for global changes.

• Either begin from the header.html option that is the first option after you go to Content, or directly click on the header.html icon on the top right corner.
• Header.html > Navigation. You can edit the navigation section here. We have provided 2 header layout options.

You get options to completely customize the details of the header. You can 

• Add or replace image and logo

• Edit button text, and  search icon
• Edit globe color, and search icon color

• Adjust image width and maximum size, alt text

• Button group related settings (links to buttons)

• After you are done with your desired settings, press “Apply Changes” and it will be done.

Here you can edit modules for your page. 

• Hero Banner : The oversized large banner image that the user will see as soon as they land on this page is called a hero banner. You can customize layout choice, background color, banner heading, heading color, banner paragraph and banner color. Apply banner CTA and update links here. You can also change the logo and image of the banner and adjust its size.

• Video Pop-Up : You can edit the video pop-up on the page from here. Select your video pop-up image, play button, play button color, enable animation, overlay color, video button background color and image border radius.

• Spacer : You can define the space between your modules and content from here. Set your spacing in the settings. Press Apply changes.

 

• Image : You can easily replace or remove images from your page through image settings. Select the animation type for your image from:

• Fade-down
• Fade-Up
• Zoom-in
• Zoom-Out
• Fade-Right
• Fade-left

Select your animation type and overlay options. Then select “Apply-Changes” 

• Section- Heading : You can enable or disable animation for this section. Here you can set and make changes for particular section headings and it’s subheadings.

• Content :  Enable animation on the content page, including your content, and insert a range of elements in the content section. Apply changes.

• Customizable Button : You can edit your buttons here. Insert link and tell search engines not to follow this link. Select arrow visibility, replace or remove button icon. Apply changes.
• Service Listing : You can enable/disable animation and have a hover image or icon choice. You can mention your service details and add more or reduce according to your niche. Then press “Apply Changes”.

• Feature Icon : You can choose between image or icon type from this section. List your features on this page.
  
• Edit CTA : Edit your call-to-action button on this section. Select animation, background image, CTA text, heading, content, and button.
• Contact Form : Customize how your customers can reach you out. Edit details in the form content. Add or remove fields, form button information, and form options. Get your choice layout, thank you a message, GDPR options, Captcha for fraud prevention, and apply changes. Thank you settings will apply on this page only..

In the footer editing, you can change the following set of functions:

1. Footer Layout Choices with vertical or horizontal links
2. Footer logo with height and width
3. Footer content i.e what you want to display on the footer. We have around 10 plus options for this.
4. Footer Navigation
5. Social Icon Choice i.e whether you want an image or icon
6. Social Icon Group
7. Copyright Text
8. Copyright Links including Terms of use and privacy

Complete your desired settings and press Apply Changes.

Go to Edit Page > Add. Here you will have all available number of module options.

You can easily add or remove all the theme modules by using the smooth drag and drop function.

 

Choose yours to edit from the modules used. Here is what they might help you with:

• 2-Col Image Text : Make your site clean and minimal with the two-column image text module. You can add and edit column text and images of your choice. Don’t forget to apply changes.
  

• Banner Home : This one is efficient for homepages. Customize background image, color, video, and align them left, center, or right.
• Blog listing layouts : Choose your listing layouts. Select and create categories and categorize your blogs accordingly. Attract interested users to discover new articles with an amazing category of content by providing easy navigation. 
• Brand slider : Insert brand slider as a widget anywhere on your website. Give visitors an idea of your work and brands you deal with and increase trust and awareness among them. 
• Call to action : Guide your visitors with strong CTA button modules. Direct visitors easily to your destination.   
• Accordion : Use it when you want to display a piece of content but do not actually want it to cover up space. Condense your content in vertical sections. Visitors can reveal or hide associated content in a progressive manner. Try it!
• Circular Progress bar : A circular graphical control representation that visualizes the progress on the page by the user in percentage format also. Make the wait worth it.

• Client review slider: Enrich your customer interest by adding happy and satisfied reviews as proof. Use our client review slider and customize its features as you fancy.
• Counter text layout: Display counter text layouts in clean sections and improve the UI/UX of your website. Edit the text field and add your favorite colors in the background.  
• Page Banner: Use the cost-effective, fast, and easy method to display your most important pages. Add animation and graphics, increase sales and visibility, and build your brand.
• Customizable Button: These make a great tool for marketing. Customize the button text, button link, enable animation, arrow visibility, replace or remove the button icon.
• Event tab: These are handy tabs that help you highlight your events and deliver you multiple benefits. 
• Faq layout: Select from your layouts and display common questions to reduce inquiry time. Choose from the accordion-type and QnA type.
• Footer: Completely customizable footer with numerous features. Also explained in other sections in the documentation.
• Form Layouts: Record and collect information with offered form layouts.
• Google map: Map embedding options available for directions to your physical organization according to your API key.  
• Header: Completely customizable header with numerous features. Also explained in other sections in the documentation.
• Header no navigation: Important UI element linking to other sections of the website.
• Home Banner Slider: These user-directed sliders will give enough control to your users to decide what information they want to access.
• Horizontal tabs: Design your horizontal tabs that are absolutely responsible.
• Icon Feature: Customize icons on your website pages.
• Icon feature para: Add content or update links to the icons.
• Image: Impressive images always improve UI/UX. So, select the best ones for your website.
• Landing Banner: Capture visitor’s attention with custom-made landing banner images and convert visitors into leads.
• Language Switcher: Authorize visitors to switch the language of your content and go through it easily. Add the languages you want to be available for your readers.   
• Meet our team filter slider: Showcase your team members in a slider form that can be filtered according to their commissions. You can edit the slider as well.
• Megamenu: Expandable menu to fit in large amounts of data for users to select from and links to related pages, services, or products. An excellent choice to display multiple pages at a glance.
• Our mission: Edit your mission heading and content. Add or remove any number of points. Enable animation and apply changes.

• Our story: Mention your story in the content section that is provided. Alter your heading and insert images or animation types.
  

• Our team card: Select your team layout, animation, and text alignment with team details.

• Portfolio slider: The portfolio slider has the carousel settings with the portfolio slider. 
• Portfolio tabs: Editing options for this tab are available. You can decide the portfolio layout group, tab group, hover text, hover arrow icon, and images.
• Pricing card: Showcase your pricing plans and edit colors, headings, animation, card button color, and animation type.
• Process: You can define your process with different colors, patterns, icons or images, and animation.
• Progress Bar: Add or reduce horizontal progress bars where activity can be observed. Set, replace, or remove your progress bar image and its size with alt text and image loading.
• Section heading: You have your alignment choices, animation, and section subheading choices.
• Service Listing: Give a list of your services with a choice of hover image or icon. You can quickly edit headings and it’s content here.
• Social Module: Add social platforms like Facebook, Twitter, Instagram, Linked-In, with background settings.

• Spacer Module: Add spacing for a clear understanding of functions using the spacer module. Adjust the desktop, mobile, and tablet height along with background color.
• Subscribe: Create new contacts with the subscribe function. Edit heading, color, animation, animate image, subscribe subheading, email, GDPR options, thank you a message, subscription image, and apply changes.
• Team gallery: Add the image of your team members while enabling or disabling animation. 
• Team member: You can edit individual team member details. Edit alignment of text, add or remove several team members and their name, along with person image border-radius.
• Testimonial layout: Add as many testimonials along with images of your clients.

• Testimonial slider: You can edit the background image in the testimonial slider along with quote choice, alt text, and adjust the size and width of the images.
• Title Content: This can be used on any page. Add your title content and section heading content.  You can edit the title content, section heading, and animation in this setting.
• Vertical Tabs: Transforming old horizontal tabs to vertical ones with settings like, enable animation, tab heading, tab icon, and images.
• Video Popup: Decide animation along with maximum video size, width, height, and link. You can also change the image border-radius, and the background, and play button color.  
• Content: Simply edit the content you want to display with all settings just like your regular documents. Insert aspects according to your requirements. 

• Begin with the basic step: Marketing > Website > Pages(Website, Landing, Blog). Select Design > Edit theme setting.

When you are editing your desired settings for all pages, a panel will open up on the left side with the following options:

1. Colour and Font Setting
2. Layout Setting
3. Blog Setting
4. System Page Setting 
5. Maintenance Page Setting

Let us go through them one by one: 

Select this option for altering colour and font types in your web pages. Press the Edit button and choose from the new set of options.

• Global colours is a drop down where you can change colours based on your priority. It has Primary colour, Secondary, Accent colour, Light Accent colour, Off White colour, Dark Accent/ Subheading Colour, and Body Background colour. Any change made here will be reflected on all related pages.

 

• Global fonts will change the heading font and body font for all pages.

• Global typography will allow you to alter the body font size for mobile or tablet view. 

Here you can change various layout related settings:

Website Header

• You can enable or disable the mega menu for multi-column drop down, or just make use of normal header.

• Go to the Edit option in the menu section. Here, you will find 2 types of menu: Primary Menu and Child Menu. You can adjust the following details in this section:

1. Menu Link Typography
2. Menu Hover Background color
3. Menu Link Hover color

• Change header background color and press “Apply changes” and that will execute all your settings. 

Footer

Customize your footer according to your requirements.We have provided you with 3 different variants of footers. You can perform minute pigmentation variation, like changing:

• Footer Logo Typography
• Footer Background Color
• Footer Copyright: Text Color
• Footer Heading Color
• Footer Heading Text Transform
• Footer Text Color
• Footer Links Text Transform
• Footer Links Hover Color
• Footer Heading Text Transform
• Footer Text Color
• Footer Links Color

Spacing

• • Set spacing between various elements of your UI from this section. 
  • Decide the maximum content width of your container. 
  • Increase, decrease, or change it once and the same pattern will be followed on all pages and modules.
    
    

Shadows

Apply elegant shadow effects and save your UI/UX with the Strontium theme. Pan out the shadow values at your will from the following:

1. Horizontal length
2. Vertical Length 
3. Blur Radius
4. Spread Radius
5. Shadow Color

Rounded Corners

Select the stylish rounded corners for your website that have become more of an industry-standard than a trend. They meet the eyes perfectly adding to your UI/UX. Adjust details like the:

• Card Border Radius where you have used card layouts
• Image Border Radius for where you have used image layouts 

Buttons

The most common yet important element for UI/UX are buttons. We have provided 3 variants of buttons:

1. Primary button i.e the main focus CTA button of your website    
2. Secondary button with White background

You can perform the following alterations for both these buttons:

• Background Color
• Hover Background Color i.e what color appears in the background when you hover over it 
• Text Color
• Hover Text Color i.e what color 
• Border Width 
• Border Color
• Hover Border Color
• Corner Radius

Note: All these changes will by default be done on other modules and pages.

You can change how your blog looks from this section. Perform any of the following blog settings:

• Enable, replace, or remove the banner image
• Exhibit popular post
• Image loading 
• Alt Text

Customize and click “Apply Changes”

Here, you can optimize system error details.

You can edit the following attributes on the 404 and 500 error pages:

• Set, replace, or remove error page banner image
• Alt Text
• Image loading  

Whenever visitors search for an unavailable page or your website is under maintenance, and you’re preparing for something new for your website.

Its settings also have similar options to that of system page settings:

• Maintenance page banner 
• Alt text
• Image loading

Apply changes and you are ready for the maintenance page as well.

For editing website pages, navigate through Marketing > Website > Website Pages.

Subsequently, continue to edit. All the settings on different templates are alike. All you need to do is drag and drop the modules and do your thing. Edit pages by following the same routine for any of the available pages. The strontium theme has especially been made for common users who will not have to work with the backend codes.

You need to drag any module or feature that you want to add and drop it wherever you desire. Then you can navigate the edit icon and continue with the settings that have already been explained. Just ctrl+F a little!

We have provided 3 different designs for your flexibility. You may choose anyone and continue drag and drop editing. After changes publish the page. 

We have 2 variants of the about us page. Here you can mention your organization. Publish the page after editing. 

Stage the services on the Strontium service page, where we have provided you with 2 exceptional instances for that. Drag and drop modules and preview the page before you publish so that you know how exactly the page will come out.     

Create your own product page, or make changes in the available product page template. Add, edit, or remove the modules at hand to see how it works.

Create an exceptional career page to invite potential candidates with the career template provided by the Strontium theme. Edit modules and use them as per your requirements.

We have given 2 variants for the contact page. You can choose the one you like or just edit modules as well.

Edit your event outlines with event overview details. Add your modules and continue.

Edit your event outlines with event overview details. Add your modules and continue.

Display the collection of your resources and assemble them as you wish. Use your favorite modules and improve the UI/UX of the comprehensive resource page.

The Strontium theme gives support to your level of expertise with 2 variants of the testimonial page. Exhibit the recorded satisfied customer statements with the wise use of our modules.

Put together the frequently asked questions regarding your services and products on the FAQ’s page. Add multiple questions and answers and edit modules for its layouts. 

We know you keep coming up with new ideas. So, we have offered 2 variants of the coming soon page. Decide yours and edit modules to make users want to come back to you.

Built a strong and engaging pillar page with collective resources. Combine best modules for best designs. Edit modules with your desired settings. 

Use any of the 3 types of portfolio pages provided:

• Grid

Navigate through Marketing > Website > Blog. On the left side you will see a dropdown to select the blog you want to view.

After selecting it, click on the edit option.

We have provided 2 variants of the blog listing page in the Strontium theme. If you want to edit the blog listing page, you can easily do so. The process is the same as we have told before. Just drag, drop and edit.

Edit all blog related details as you please with easy drag and drop.

Navigate through Marketing > Website > Landing Pages. 

Three variants for landing pages are extended for your use: 

• Event

• Basic

• Mobile Application

Select the edit option and carry on with your landing pages. You can edit the header, main section, and footer of these landing pages through modules and content. This is a similar process as it is in global settings. 

These are the necessary pages for your website. Whenever the user performs a system related action, these pages appear. You can customize these as well in the Strontium theme. 

You will find the following system pages:

• 404 Error Page

The users will know how your current page is unavailable and get a redirection link. You can customize this page.  

• 500 Error Page

Customize your 500 error page for when something goes wrong with your website’s server. 

• Maintenance Page

You can customize the maintenance page that will be visible while your website is under construction, or temporarily unavailable. 

• Search Results

Make it easier for your users to search through your existing content, services, and products. Customize the page according to your requirements.

• Communication Preferences

Allow users to decide how they want you to communicate with them. Customize this page with specified modules and capture leads.

• Email Unsubscribe

The necessary evil page for your website helping users to opt-out of the subscription or mailing list.

• Password

This page adds the protection of passwords to your landing pages. People that visit your website can create passwords. Customize the page for your favorable upshot.

Finally, hinge the required modules according to your needs, and preview the page before you publish so that you know how exactly they will come out and appear for your visitors.