1.Get Started

1.1.How to Build a Page

To create a new page, login to your HubSpot account, go to Marketing > Website > select the type of page you want to create. You can choose between Website pages, Landing Pages, or blog.

After selecting the page type, click on Create select WebTrappers theme and choose what type of page you want to create. You can pick among many options like Home, Case Detail, FAQ, Contact, etc.

Once you select the page, enter the Internal Page Name and click on Create Page and your page will be successfully created. You can add or remove modules accordingly, add meta description, page title and other necessary information and publish the page after getting the changes done.

1.2.Edit Global Styles

After you successfully create a page, you get an Edit Page Panel on the right side of the screen. In this panel 3 sections are listed named Add, Content, and Design. Click on Design and you’ll see an Edit Theme Settings button there. Click on it and make changes on theme globally. Here what you change will take effect on all the pages and assets. Through these settings, you can change:

  • Color and Font Setting
  • Layout Setting
  • Blog Setting
  • System Page Setting
  • Thank You Page Setting

1.3.Edit Global Modules

We have create 2 global modules in this theme that are:

  • Website Header
  • Footer 

You can start editing them after successfully creating a page. Once you create a page, you’ll see three sections on the left panel named Add, Content, and Design. Click on Content and at the top, you’ll see the Website Header module and Footer  at the bottom.

  • How to edit Website header module:

Click on Website header module and a popup will appear saying Edit Global Content? Click on Open in Global Content Editor. Once you click, the editor will open where you can make changes to the module. You can change:

  • Logo
  • Primary navigation
  • Header search

After making changes, click on apply changes to save them.

Note: The changes on this module will take effect on all your pages so be sure while doing any modifications.

  • How to edit Footer module.

Click on Footer with Navigation module and a popup will appear saying Edit Global Content? Click on Open in Global Content Editor. Once you click, the editor will open where you can make changes to the module. You can change:

  • Footer Logo Column
    • Logo
    • Alt Text
    • Height/Width
    • Footer Address
  • Footer Nav Column
    • Footer Heading
    • Footer Menu
  • Footer Copyright Text

After making changes, click on apply changes to save them.

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

1.4.Change Blog Templates

Blog templates help you set a template for your blog pages. You can set a template for:

  • Blog page
  • Blog listing page

To do this, go to Settings of your HubSpot account, scroll down on the left panel and click on Website dropdown. Select Blog and click on Templates section. There you’ll see templates for blog posts and templates for listing pages. Click on their dropdown and select WebTrappers template and save the changes.

1.5.Change System Templates

System templates allow you to set a template for the system pages like 404 error page, 500 error page, etc. To change the system templates, go to the Settings of your HubSpot account, then scroll down on the left panel and click on Website drop down and select Pages. You’ll see multiple sections there. Click on System Pages section. After clicking on it, you can set a template for these system pages:

  • Errors
    • 404
    • 500
  • Password Prompt
  • Search Results

Just click on the dropdown on these pages and select the WebTrappers template. Save the changes and the WebTrappers template will be applied to selected pages.

2.Module Library

2.1.Theme Modules

2.1.1.About Us

This module has the ability to create an about us section where you can add a heading with some content as paragraph. You can also add a couple of pictures in this module with some content in a div with a link to another web page.

2.1.2.Accordion

This module can help you in creating a section to add FAQs or large piece of content users can toggle to show or hide. You can adjust its height according to the different devices, i.e. Mobile, Desktop, Tablet. And you can also change its background color and opacity.

2.1.3.Accordion With Filter

This module can help you in creating a section to add FAQs or large piece of content users can toggle to show or hide. Moreover, this module comes with a filter where you can add specific sets of content or questions. Users can click on these filters to find out the query they need.

2.1.4.Blog List

This module helps you create a blog section for your web page. In this module, you can tweak its blog section title, content, and select the blog you want to display there.

blog list

2.1.5.Broken Grid Banner Slider

This module lets you create a slider where you can add multiple banners and change their title, image, image’s alt text, and add a button on it. You can choose the button type as a link or a CTA. Moreover, you can also change the title font size according to the desktop and mobile device.

broken grid with banner slider

2.1.6.Call To Action

With this module, you can create a section with a CTA on a background image and some content on it. You can also enable or disable the background image as per your needs. Moreover, you can also change the background image, its alt text, size, and overlay color. You can also change the content, its width, spacing, and type of button in this section.

call to action

2.1.7.Card Section With Background

Similar to the previous card section module, this module lets you add multiple cards but with a background. You can alter the color of this background according to the requirements and can change the number of columns to be displayed in a row(maximum 4). You can also link each of these cards to another webpage.

card section with background

2.1.9.Client Slider

This module can be very helpful for you if you want to display what businesses or clients you’ve worked for. You can add multiple sliders in it, change the title of the section, and content of every slider. You can also link every slider to a page and change the logo, alt text, and image loading style(between default and lazy).

client slider

2.1.10.Contact Card

This module helps you if your business is situated in multiple locations and you want to display all those locations on your pages. You can add image, alt text, and content(address) on these elements with this module.

contact card

2.1.11.Counter With Grid

This module can help you display the services you offer and the number of businesses you’ve worked with. You can set a heading and subheading for this section, change the icon, loading type, and content for every grid, and add, remove, and tweak the counter settings.

counter with grid

2.1.12.Customizable Button

You can add a button on your webpage using this module. After adding the button, you can change the button text, link it to another URL, allow it to open in a new window, and tell search engines not to follow the given link.

customizable button

2.1.13.Form

This module can help you add forms on your pages which can be used for lead generation, etc. You can select different types of form in this module’s setting and change form content, add or remove fields, change button text, choose a GDPR option. Furthermore, you can also enable/disable the captcha for spam prevention, and set a thank you message which will be displayed on another page or as an inline message after form submission.

form

2.1.15.Google Map

You can use this module to add a map on your pages. This will help users to navigate your business on your website. You can add the Google Map API, latitude, longitude, and Map style JSON file code. Also you can set the map height, zoom level, and text for contact.

google map

2.1.17.Heading

This module adds a heading on your page. You can change the heading text, its alignment and add a subheading to the section.

heading

2.1.18.Image Column With Form

This module adds a form with an image to your webpage. You can select the type of form you want to add, change the form heading/subheading, add/remove fields, change button text, GDPR options, enable/disable captcha like other forms, add a thank you message with the left group setting. In the right group setting, you can alter the image related settings like changing the image, its alt text, size, max. size, loading type.

image column with form

2.1.19.Info Short Text

You can use this module to add your brand review on your page. This module allows you to tweak the left section group settings where you can change the heading/subheading, image, alt text and size. In the right section, you can change the client image, alt text, size, client name, designation, message, signature, etc.

info short text

2.1.21.Number Text Icon

This module can display a number with an icon. You can use it to display the number of businesses that love your brand or businesses you’ve served. You can change the counter icon, its color, title, number, number font, and size for mobile.

number text icon

2.1.22.Number Text Icon With Text

This module displays the counter with a complete piece of text. You can use this for your About Us pages to show your brand authority by adding your brand related stats and story behind it. You can add/remove columns, change counter settings(similar to previous counter modules), column text.

number text icon with text

2.1.24.Pricing Card

This module can be used to display pricing cards on your pages. You can use this on your product pages to display pricing of an individual product. In this module, you can add the best seller tag on this card, change background color, product title, price, price timeframe, product description, features, bullet icon, UI element, etc.

pricing card

2.1.25.Pricing Card Table

This module sets a pricing card table on your pages. You can use this on your services page where the price varies as per the plan. You can add/remove rows and columns, change button text, color, background color, font, etc.

pricing card table

2.1.26.Slider With Filter

This module creates a slider with a filter on it. You can use this on your pages where you want to show multiple sliders that relate to a particular topic. You can change heading, subheading, add/remove filters and sliders in it. Also you can enable/disable View All button, change its text and URL.

slider with filter

2.1.28.Spacer

You can use this module if you want to keep a distance between your modules and sections. In this module, you can adjust the height for different devices and can change the background color.

2.1.29.Step Process

This module can be used to display different steps of a process. You can change the process title and content in this module’s setting.

step process

2.1.30.Team List

You can use this module to add your team members picture on your page. This can be helpful for your About Us page. You can change the member’s title, image, alt text, list background, font size. Also you can enable/disable a View All button and link it to a page.

team list

2.1.31.Team List With Details

Similar to the above module, this one also showcases your team members but with more information. You can add title, position, image, alt text, intro content, and link to the social handles.

team list with details

2.1.32.Testimonial Slider

You can use this module to add multiple testimonials on your pages. The testimonials can play a vital role in creating a trust factor for your brand among new visitors. You can change the image, alt text, loading style, slider content, author name and font.

testimonial slider

2.1.33.Testimonial Slider With 3 Columns

This module creates a slider with three columns which will be perfect if you want to display multiple testimonials on your page at a time. You can change the slider image, alt text, loading style, slider content, and author name. You also get a UI element setting where you can enable/disable the UI element, change UI pattern image, alt text, etc.

testimonial slider with 3 columns

2.1.34.Text Banner

This module adds a banner image on your page with a heading and some content. You can use it on your home page or about us page to give a description to the visitors about your offering. Here you can change the heading, subheading, banner image, alt text, loading style, and banner text. You can also enable/disable the UI and select the UI pattern image which is displayed on the text part of the module.

text banner

2.1.35.Text Card

This module creates cards on your pages with a heading above them. It can be used on your landing pages to capture leads for your different services. You can here change the heading, add/remove card title, change card title, content, button type, button text, and link.

text card

2.1.36.Two Column Image Text

This module creates two columns where text and image are displayed. It can be used on your about us pages or to display case studies. Here you can enable/disable a counter, counter text, column text, column image, alt text, size.

two column image text

2.1.37.Vertical Tab

This module can be a great help if you want to explain multiple topics at a single place through videos or text. It creates several tabs vertically visitors can click to check out the content added on those tabs. You can add a heading, subheading, add/remove tabs, popup video or text content on any tab.

vertical tab
Suggest Edit