Welcome to the Functional PRO documentation

After purchasing the Functional Pro theme, you will find all the Functional PRO templates and modules on 
your HubSpot portal.

When creating a new website page or landing page, you can select "Functional Pro" to get a list of all 
available templates.

Functional PRO contains a variety of website and landing page templates that serve as a good starting 
point for creating well-designed converting inbound websites.

Visit the demo page to see all the sample pages and module configurations that we have created for you.

This documentation helps you get started with the Functional Pro topic, as do the HubSpot documentation 
articles in case you're unfamiliar with the basics and usage of the HubSpot CMS.

To better understand the topic, this document also contains a reference guide to custom-coded 
Functional Pro modules.

IMPORTANT

We recommend that you set up a version child theme of the Functional Pro theme before you start setting 
up and building your site. This will help you or a third party to be able to change the code, extend it with 
specific requirements or change styles that cannot be modified at the moment.

To create a child theme see the following HubSpot documentation: Creating a Child Theme.

 jQuery Versión 

To keep your website up to date and secure we have loaded the latest version of jQuery, 
all you need to do is disable the option of the subdomain with which you are going to use the 
Functional Pro Theme.

To do so, just follow the steps in the video. 

To learn more about how themes work in the CMS and how you can start to creating, you can check out the Hubspot knowledge base: 

The theme settings allow you to control the global style such as colors, fonts, borders, as well as layout, performance, and some others aspects of styles for Functional Pro modules. 

You can access these settings through "Settings"> "Website"> "Themes"> "Functional Pro" or from the design tab of Hubspot´s page editor. 

To make it easier to understand the settings, we have included a template called Style Guide, there are the most used elements on a website. To access this and other templates, in the top menu select View in: Style Guide.

In the same way, this option is useful for you to observe how the styles that you have changed are applied in the templates included in Functional Pro. 

To learn more about setting up a theme, see de Hubspot documentation:

In this block you must configure the background color and the color of the elements such as fonts or icons for Dark and also for Light, there are several templates that use custom modules where you can see that changes. 

Note: you can change the color individually in each of the custom modules, if you prefer a different style. 

The colors in buttons and forms can be configures individually, as well as in the Functional Theme´s  theme settings. 

These options area found for buttons: More settings> Buttons for forms More Settings> Forms and Tables: More settings> Tables. 

Like the global configuration, each element has individual style options from the page editor, later we will show you how to do it.

Globally you can configure a main source and a secondary source. 

You choose the fonts from the Google Fonts Library, which is natively integrated into de Hubspot CMS. 

To adjust each element used to represent text, you have the following option: More settings> Typography, where you can choose the font family established in your brand identity. 

For better readability we have used the following tool: https://type-scale.com/ so, in case you need to change the sizes of the elements, you can do so, preserving the harmony in the design. 

In each of the elements you will be able to choose a different font, size and color, as well as 2 more options that will allow you to define the space between lines "line Height" , and the space between letters "Letter Spacing" 

When modifying anu setting, you can view it in any of the available templates. Try and see which one is better, you can always return to the original value stablished in the Theme

The Functional Pro Theme includes the option to add rounded edges from the global settings to certain elements included in the theme templates. 

Note: some elements were omitted such as buttons, tables and forms, these elements have the option in their configuration.

In addition to the rounded edges option, we have configured an option so that the sections where you include  a background image, have an effect similar to the Parallax effect,  this is done without adding any script, in order to reduce weight. 

Important: if you activate this option, the first section of any page that you create will not have this effect. 

After activating this option, simply add a background image to any section from the page editor. 

The structure of Functional takes into account two elements, which are the maximum size for elements for which full width and vertical spacing are not set. 

These two elements have pre-established values that we consider to be optimal, but if you still want another size, you can choose the "Custom" option in each these options. 

Both, the header and footer of the Functional Pro Theme have styles that you can edit globally. 

The configuration is available for the global header: More settings> Website header, and for the Footer in More settings> Website Footer. 

In the global configuration of the theme, you can only change the appearance, for other settings ypu must go directly to the global module. 

The most incredible thing about the Hubspot CMS is the Web Page Builder, which allows content creator and designers to build pages in a very agile and uncomplicated way. 

In order to maximize the Hubspot CMS builder, we have created several custom modules which, when combined whit the default modules that exist in the CMS, you can easily create pages that help attract potential customers easily with pillar pages, resources pages, video page, among other options. 

All custom modules have two tabs, the content tab and the style tab. 

Some custom modules have in addition to the content, options that in some cases provide a different structure, here is an example: 

The same module with a different structure. 

By combining the content tab with the style options, we were able to provide you with more options with the same custom module and in this way, deliver more value to you. 

Note: In future updates we will add new structures. 

The styles tab was only available in Hubspot custom modules, now this option is available for custom modules,  and for you, to bring an extraordinary experience we have separated the content from the style to give you more customization options, without this implying complexity. 

Look an example of multiple combinations that are possible thanks to styles:

Note: some adjustments you make, require Apply the style or Refresh de page to  see the changes made.