<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1593488450678541&amp;ev=PageView&amp;noscript=1">

Theme Elements

Global elements are pieces of your website that are the same on every page.  The menu, header, and footer are the most common global modules but in some instances, these can extend to forms, banners, call-to-actions, and sidebar content. 

 

Content Area

The content area is the part of your website which changes from page to page.   The content area consists of flexible modules built on a grid system to create a layout of columns and rows.  Within those columns and rows are modules. Modules are the elements that contain your text, and graphics to display on the page. LMS-Single-Page-template

Screen Shot 2020-09-03 at 10.32.09 PMRows, more commonly referred to as sections in HubSpot themes are horizontal and span the width of the page.  There are two options for the in which a section can display its contents, a container is an imaginary box that restricts the size of the content to ensure it occupies a certain amount of space within the section, the alternative is to use full-width content which covers the size of the viewer's device from edge to edge.  These methods of displaying content are can both be utilized throughout the page to create the desired layout for the design.

Screen Shot 2020-09-03 at 10.38.56 PMWithin the section are columns, columns allow marketers to place content side by side within a section. The number of columns placed within a section is up to the designer, but columns will often shift size and change based on the type of device your website is being viewed on.  For mobile websites, it is common for pages to shift all content into a single column view allowing the user to easily scroll down the page.  The text and images that would normally be side by side are now displayed vertically.  

Sections and columns both offer styling options for:

  • Background Colors
  • Background Images
  • Margin
  • Padding
  • Alignment

Modules

Modules are essential to displaying page content. From the text to images, forms, and call to actions, the modules control the entire user experience and make or break any website pages.  Modules offer complete customization and can do just about anything you can imagine within your page, but these are the 6 most commonly used modules.

Screen Shot 2020-09-03 at 11.30.57 PM

Rich Text versatile block of text that allows marketers and designers to control the style of the text, as well as embed video, images, call to actions, tables. 

Screen Shot 2020-09-03 at 11.31.18 PM

Image embed allows marketers to place images and control the exact size and position of the image.  Alt text tells search engines what is in the image for indexing. 

Screen Shot 2020-09-03 at 11.31.39 PM

Headers a single line of bold text to clearly divide a section and call attention to what is coming next.  Headers are also essential for search engine optimization.

Screen Shot 2020-09-03 at 11.32.20 PM

The Gallery module is a group of images that share a common theme to allow for contextual design within the page.

Screen Shot 2020-09-03 at 11.31.56 PM

Call-To-Action is a button, image, or linked text designed specifically to entice the visitor to click through to another page.

Screen Shot 2020-09-03 at 11.32.07 PM

Forms are visitor conversion points within your website. Forms gather vital information about your visitors for future sales and marketing activities.

Visitor Data Mapping

How the CRM learns from the website visitor experience

There is a lot of information available about Inbound Marketing, Content Marketing, and Customer Relationship Management systems.  But, how does the website impact the CRM, Sales, and Marketing process? With HubSpot CMS having deep integration with HubSpot CRM your website visitor behaviour is actually important information you can use to generate more leads, and increase your sales opportunities by extension increasing revenue.

What the visitor sees

Pages - Your visitor sees you have many pages with information about your company, your products and services, and other useful information.

Buttons & Links -  Every linked item on your website could be considered a Call-To-Action.  The visitor uses these CTA's to navigate through the website and view the content that interests them.

Forms - Your website visitor sees a form on your website one of two ways; either it is a way to contact you and start a conversation, or it is a trap to gather their personal data for your marketing purposes. 

Blog - The blog is a useful tool to educate visitors about a variety of topics related to your industry, products, services.  The visitor may revisit your blog in the future if they found it to be a valuable resource. 

Personalized Content - Personalized content is created when you have insights into the visitor from previous interactions, and you use that information to offer a unique page viewing experience upon each visit.

Live Chat & Chat Bots - Offering live chat to a visitor is a way of quickly answering their immediate questions. A chatbot is a useful tool for helping visitors filter through the information and easily find what they are looking for. 

Social Media Channels - Visitors may view social media as a way to view more of your content in the channel of their choice. If they like your content they are likely to share it with their network.

What the CRM sees

Intent - Page views offer valuable insights to your visitor's intentions. Viewing a service page shows a different interest level than the about page.

Insights & Triggers - HubSpot CRM tracks when a CTA is viewed/clicked, CTA conversion rates measure the effectiveness of your messaging.  A clicked CTA can also trigger a workflow within the CRM.

Conversions - When the form is submitted on your website, whether the visitor is known or unknown this is considered a conversion and can be used to enroll the visitor in a list and/or workflow.

SEO - The blog is a content strategy tool for search engine optimization and increasing organic visitor traffic to your website.  It is also useful for segmenting your visitors by interest and sharing related information.

Segmentation - Using the data stored in the CRM you can segment your returning visitors into lists. SMART in HubSpot tools uses lists to create personalized content to help your visitor move forward in their buyers' journey.

Conversion - Just like forms, a live chat or chatbot is a conversion opportunity. It is also an important metric in understanding your user behaviour and contributes to help identify the best way to interact with them in the future. 

Additional Insights & Growth - Your social media channels play a vital role in the organic traffic coming to your website, sharing your social media channels presents an opportunity to expand your audience reach and overall growth.

Considering HubSpot CMS?

Fill in the form to receive a free evaluation of your website based on performance, SEO, and security.  We will also provide you with a free estimate to migrate your website to HubSpot Themes.

Get an Estimate


Theme Development - Complete Walkthrough

Website Review

The first step is to clearly understand what we will be migrating, whether you are doing a theme only, or a complete website migration we need to review all of the active pages, blogs,  system pages, and any other relevant pages to the migration.  What we are looking for is an account of all the elements to be created including headers, footers, animations, and any custom modules required to build your pages in the HubSpot page builder.

Theme Set-Up

Once we’re armed with this information, we’ll set to work creating layouts for 3-5 core website pages, including the home, about, contact, services/pricing, landing page, the blog templates, as well as any additional templates needed.  

Each theme will include a blank website page consisting of only the header and footer to be used as a template for new page development in the future.

Each theme includes up to 4 global modules for the header and footer with and without navigation to be used throughout the theme. 

Each theme will include all custom modules required based on the website review.  A custom module is defined as any module which can not be created in the HubSpot page builder using standard modules.

Content Migration

***If you are looking for Theme Creation only, ignore this section.***

For clients needing a full website migration including content, the next step is to build all of the website pages within HubSpot. Depending on the project there are multiple ways to do this depending on where your existing content is hosted.  Speak with your project manager about the best way to migrate your website content. 

We will only migrate content already existing on pages when the project was started, additional pages added after the project begins are subject to a new-page design fee.

Content includes:

  • Header text
  • Paragraph text
  • Buttons/CTA's
  • Images & Icons
  • Forms

Testing

We'll test the theme utilizing HubSpot preview pages and testing tools. 

Edits and Changes

We want you to be completely satisfied with your new theme if you require edits to any styling or theme settings we will provide these at no additional cost. You have 90 days from launch to request edits.  

Where edits are considered to be minor adjustments to page styling and content, changes will be defined as any request that alters the layout or functionality of the page. Some change requests may result in additional design fees.  Discuss your change requests with your project manager to see if additional fees are applicable.