WebTrappers HubSpot Theme

Web Trappers is a responsive free HubSpot theme that works best for marketing your business. Choose the best out of HubSpot themes and templates, and go WebTrappers! It works seamlessly with HubSpot CMS.  It comes with

• 41 drag and drop modules, 12 easy-to-use templates, 2 blog pages, 11 system pages, and 5 reusable sections.  
• Flexible easy-to-use DIY theme settings.   

A 2-hour theme setup and training session for the Webtrappers HubSpot theme is free of cost. Claim it here.

HubSpot CMS allows you to install and use themes of free and paid nature for your website. In order to know more about using, installing, activating, deleting, and cloning HubSpot CMS themes you can go through this page.

Before getting website pages, landing pages, and blog pages, here are a few terms you should know:

• Modules: There are 41 modules in the Webtrappers theme. These are all those elements you can easily just drag and drop anywhere on a website page and edit its style and content to fit your requirements. The way you place them determines the look and feel of your website pages.  
• Templates: The templates are pre-built layouts of different pages offered to save your time while you create enticing website pages. You just have to edit the content and images to make them suit your business marketing.
• Global Theme Style & Settings: The global settings are for modules and stylings that are repeated on different pages and have a uniform look throughout. For instance the website header and footer. You just have to edit them in the global settings and they will be reflected similarly everywhere on the pages used.
• Global Content: Likewise global theme settings, the global content is the one that shows up on most of the website pages. You can instantly change content settings from the dag and drop page editor. Usually, the footer and header of the website use global content.
• Reusable Sections: Reusable sections are defined collections of modules designed for certain functions to save time. For instance, the CTA section will allow you to add CTA with a background image. The WebTrappers theme has five reusable sections. You will learn to use these sections later in this documentation.

 

To create a new page, 

• Log in to your HubSpot account and go to Marketing > Navigate to the Website option and select the type of page you want to create.  You can choose between Website pages, Landing Pages, or blogs.
• After selecting the page type, click on Create > Name the page > Choose a template > Select WebTrappers theme. You can pick among many options like Homepage, Case Detail, FAQ, Contact Us, etc. Click on Select Template and the template will be appended.
• 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.

To make edits in the global style, you can select any of the created pages. After you successfully create a page, you get an Edit Page Panel on the left side as you look at 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 to the theme globally. 

What you change here 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

 

We have created two responsive global modules in the WebTrappers HubSpot theme. They are the website header and footer.        

1- Website Header 

From the Page editor, navigate to the Contents tab > Select header no navigation > a dialogue box with a message ‘open in global content editor’ will be prompted > Accept it.

Now, you can edit the logo under global edit. There is an option to upload the logo and link URL.

2- Footer 

Similar to the website header, you can also edit the footer. From the page editor, navigate to the Contents tab > Select footer > a dialogue box with a message ‘open in global content editor’ will be prompted > Accept it.

Under global content, you have 2 more tabs, add and content. Go to the Content tab > Primary Navigation > Click on the edit global module option. The footer settings will open in a new tab.

Now, you can edit the footer logo column, footer copyright text, and footer navigation column, under global edit. 

 

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

1. Blog page
2. Blog listing page

To do this, go to Settings of your HubSpot account > scroll down on the left panel > click on the Website dropdown. 

Select Blog and click on the Templates section. Here you’ll see templates for blog posts and templates for listing pages. Click on their dropdown and select WebTrappers template and save the changes.

System templates allow you to set a template for the system pages like 404 error page, 500 error page, etc. To change the system page templates, 

• Go to the Settings of your HubSpot account > scroll down on the left panel to click on the Website drop–down > select Pages.
• You’ll see multiple sections there. Click on the System Pages section. After clicking on it, you can set a template for system pages.

Errors

From the dropdown menu under the Errors option select the: 

1. Webtrappers- 404 Error template for error 404 page
2. Webtrappers 500 Error  template for error 500 page

Password Prompt

Under the drop-down menu of the password prompt page, select the Webtrappers- Password Prompt.

Search Results 

Under the search results page drop-down option, select  

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

Reusable sections are defined sets of modules created for different functions to save your time. There are 5 reusable sections in the WebTrappers theme. To work with these:

Create a page or edit an existing one > hover over any of the modules > locate and click the plus icon > select from the list of sections > Publish changes.  

 

There are 41 total modules in the WebTrappers theme. You can use any module you like on your website pages, blogs, or landing pages. The following are pre-designed templates for your use:-

The about us module can create an about us section where you can add a heading with some content. You can also add a couple of pictures in this module with some content in a div with links to other web pages.

You can effectively use this module to explain the goals and base of your business that works great to build your brand name. You can edit the section group right and section group left settings.

Under the section group left, you can edit different settings like the about heading, about intro text, and image.

Under the section group right, there are options to set about image, alt text, image loading, about content, etc.

 

There is a read more group where you can edit the read more text, and set the links, etc.

In the style tab, you have a read more group setting options where you can edit the text alignment, content and link color, and image corners.

 

This 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 the tab title, accordion tab content, etc.

You can also change its background color, horizontal outer spacing, and vertical outer spacing. You can add as many accordion tabs as you want.

 

This module can help you create a section to add FAQs or a 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.

In the style tab of accordion with filter you can edit box-shadow color, background color, spacing of the margin above and below, and padding that you can edit separately or use a slider.

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

In the style tab of the blog list module, you can edit the blog feature image overlay color

 

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 devices

Using the blog listing module you can display a number of blog posts on your blog page. You can edit its content ad style. For editing the blog listing module you need to go to:

• Settings > Website > Blog > Select WebTrappers Blog from the Current View option
• Go to Templates > Scroll down to the Blog Listing Page option> Set the number of posts per listing > Click Save     

The CTA module is for adding a call to action button for your audience. With this module, you can create a section with a CTA on a background image and some content. You can also enable or disable the background image as per your needs. It has layout settings and content settings.  

Under the layout Setting,  you can set the content width and spacing ( top and bottom padding). 

Its style tab has options to enable or disable background image, background overlay color, background size, position, alt-text & image.

Under the Content Settings, you can edit the CTA content, select button type, and edit

The style tab has similar settings to change background color, overlay, image corners, and image background settings.

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

There is an option to edit the card too. You can also link each of these cards to another webpage.

From the style tab you can change the background color, content spacing(margin above & below), padding, card corners, and box-shadow color.

You can use this module and add multiple carousels to create a carousel on your webpage. It also lets you add or remove the number of items for different devices and change the image, alt text, title, and subtitle for every item.

From the style tab you can edit the carousel item number for desktop, tab & mobile devices, image corners, and text alignment.

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 to it and change the section’s title 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)

 

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 images, alt text, and content(address) to these elements with this module.

You can edit the contact card text color, alignment, card background color, card inner spacing, etc.

 

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.

As for the style tab, you can edit counter font size for mobile, set card background color, card box-shadow color, and card corners

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.

Under the style tab you can enable or disable the button and choose an alignment.

The footer works with the website pages, blog posts, and blog listings. You can edit the footer from the content tab of the page editor, as already explained above. However, from the drag and drop module, you can edit the copyright border color.

Add a contact us form on your website page. You can select any of the existing forms, and edit the background color, and box-shadow color. 

This module can help you add forms on your pages that can be used for lead generation, etc. You can select different forms in this module’s setting and change form content, add or remove fields, change the button text, and 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.

This gallery module lets you add several images to your web page to create an image gallery. Users can click any one of the images to zoom in. 

You can change the gallery title color, overlay color, and horizontal content padding from the style tab.

 

You can use this module to add a map to 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.

From the style tab, you can enable the map and adjust the mobile and tab height.

 

This module will add a search bar to your header. Users can use it to find content on your website. In this module, you can select the search icon, enable/disable live search and CTA, select button type, link the button to a different URL, and change its text. It works with website pages, blog posts, and blog listing layouts.

You can enable header search and search bar spacing.

 

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

Under the Style tab, you can select the alignment.

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 the button text, GDPR options, enable/disable captcha like other forms, and add a thank you message with the left group setting. You can alter the image-related settings in the right group setting, like changing the image, alt text, size, and max size, loading type.

From the style tab, you can edit the image corners, section left spacing, and padding. The section group right option has settings to add images, alt text, image loading, and maximum size.

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

From its style tab you can edit the left section for background-related settings and client information.

The menu module works with website pages, blog posts, and blog listing layouts. You can create a menu on your page using this module. 

After creating the menu, you can select a menu field, enable/disable CTA, select button type, etc. From the style tab of the menu module you can enable box-shadow and select the color of the link box shadow color.

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

The style tab of the number text icon module allows you to alter the counter icon box shadow.

 

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 their story. You can add/remove columns, change counter settings(similar to previous counter modules), and column text.

Other settings include changing icons, icon color, counter title, font & number, etc. 

You can also edit the counter icon box-shadow from its style tab.

This module will let you add a video from YouTube or Vimeo to your webpage. You can add the video URL, thumbnail, and alt text.

The style tab enables you to change the play icon background color, radius, and play icon color. 

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

Through the style tab, you can change the pricing card box-shadow, pricing card icon color, card header alignment, and card ist alignment.

 

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 the heading and subheading and add/remove filters and sliders. Also, you can enable/disable the View All button and change its text and URL.

From its style tab, you can maintain the text alignment, slide item content, and slide item title font.

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.

From its style tab, you can maintain the text alignment, slide item content, and slide item title font.

With the social follow module you can create icon-based links to your social profiles, such as Facebook, Twitter, Google+, and Instagram, etc. It works with Website pages, Blog posts, and Blog listings of your website. Just drag and drop the module anywhere on the page along with editing the links.

From its style tab, you can edit the social icon background color and social icon color naturally and on hover.

This module allows you to add social media links to your pages. These links can be placed on the footer to redirect users to your social handles. In this module’s settings, you can add/remove social icons and change the icon, URL, social media wrappers, and color. It works with the website pages, blog posts, and blog listings.

For editing the styles of the social media link module, you can enable override style, background color, background hover, and icon hover.   

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

The style tab of the spacer module can be used to define the background color and width on different devices like mobile, tablets, and desktops.

 

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.

You can edit the process title and content in these steps and add multiple steps too. From the style tab, you can change the pattern width, and override text color.

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

From its style tab you can edit the style color, text alignment, width, and border radius.

 

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

Using the style tab, you can change the social icon color, width, and border-radius.

You can use this module to add multiple testimonials to 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.

Similarly from the style tab, you can enable UI element, UI pattern image, alt text, image loading, border style, color, radius, and border-radius. 

This module creates a slider with three columns which will be perfect if you want to display multiple testimonials on your page. 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.

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 describe to the visitors about your offering. Here you can change the heading, subheading, and banner text. You can also enable/disable the UI and select the UI pattern image displayed on the next part of the module.

From its style tab you can edit the banner image, alt text, image size adjustments, maximum size image border-radius, and image top, and bottom spacing.

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 describe to the visitors about your offerings or the values and services you provide.
Add section heading, multiple cards, edit card details

 

This module creates two columns where text and images are displayed. You can use it on your about us pages or display case studies. You can enable/disable a counter, counter text, column text, column image, alt text, and size.

From the style tab you can enable reverse order, set the image border, style, width and image corners.

This module can be a great help if you want to explain multiple topics in 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.

From its style tab you can edit the video overlay color, video border radius, and override the play button style. 

The custom image module allows you to add an image to your website page. You can edit the alt text, size, width, and height of the image.

From the style tab of the custom image module you can edit the image corners and select an alignment option.

 

The WebTrappers theme has very attractive ready-to-use templates that bring out the best of your business website in no time. Just create a page, name it and choose any template you want from the list of the following.