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
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:
- 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
- Alt Text
- 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:
- 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.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.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.
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.
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).
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.
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.
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.
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.
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.
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.
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.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.
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.