Contents:

I. What is the goal?

II. How does it work?

III. Demo Instructions

IV. Which styling aspects can possibly be configured?

V. Steps needed to enable all current modules to play along with site options?

VI. Tasks to undertake

VII. UX/UI Enchancements

I. What is the goal?

Netfluence is a platinum-tiered HubSpot partner agency engaged in selling a Visual Page Builder (VPB) for the HubSpot platform as a standalone product called VPB Lite.

The goal of creating the Site Settings for VPB Lite is to allow global settings for all of the styling of VPB Lite modules. There will be a GUI where the user can update the typography and styling of every element on multiple pages through a single page. This will help the users to come up with the right styling for the page they will develop with VPB lite modules.

II. How does it work?

FOR THE END USER:

End users are able to control website styling via a landing page-based GUI. When users want to change styling, they’ll need to log-in to Hubspot, navigate to landing pages then look for the page called “Website Styling Configuration” and from there, they’ll be displayed a GUI in which they can control the following aspects of their site’s design:

• Typography (H1, H2, H3, H4, H5, H6, P)
• Color Palette
• Social Media Icons
• Styling for Bullets
• Styling for Quotes
• Styling for CTAs
• Styling for Forms

Once the configuration has been set, the user will need to ‘UPDATE’ the page to publish the new settings. Once published, the entire site (including the blog) will inherit the styling changes.

SO, HOW DOES IT WORK TECHNICALLY?

The VPB Lite Settings Page has five (5) components:

• + Site Setting Page Module
• This is the module inside the Website Styling Configuration Page, this module consists of fields where the settings for Typography, Color, Logo, etc.

• HS Site Setting JSON Formatted Code
• This is a JSON code that consists of data (Page Name, Publish Date, Modules,etc.) or content of the actual Page(Website or Landing). 

• + VPB Module Styling Overrider
  This module Converts the JSON code (HS Site Setting JSON Formatted Code) into a CSS

• + VPB Template
• A template where all VPB Modules and VPB Module Overrider lives.

Global styling is made possible by setting up all pages to run on a single VPB template, which will be created to include A) a snippet of code that pulls data from the website styling configuration page and B) a module that is meant to override default styling settings on pages by the styling configuration set and published via the website styling configuration page.

Every time any page that’s running on the VPB template is loaded on the browser, the snippet of code allows for the global styling page to be referenced for styling aspects.

EXAMPLE:

1) The Website Styling Configuration Page is where users change or apply the styling or branding of the site.

2) The Website Styling Configuration page consists of Site Setting Page Modules where you setup Typography, Color, Logo, etc.

3) Every time you configure and "Publish" the Website Styling Configuration Page. HubSpot generates a JSON formatted Code. This code consists of all the data that were configured in the Site Setting Page.

4) From the VPB Template, there is a module that fetches the JSON code from the Site Setting Page. This module converts the JSON into CSS. Then it sends the converted configuration and applies or overrides it to all actual Pages that have a VPB Template.

III. Demo Instructions

1. Using your Netfluence HubSpot credentials, log in to the Netfluence Master Temp development portal
   
2. Navigate to Marketing > Website > Landing pages 
3. Search and open the landing page called: "Website Styling Configuration" 
4. Open the module drawer and configure styling of the page elements, save and update.
5. All changes made to should reflect on this page: https://app.hubspot.com/content/5826867/edit/20892076682/settings

— Additional Links for Reference:

VPB POC Template: https://app.hubspot.com/design-manager/5826867/code/9775895041

Sample VPB POC Module: https://app.hubspot.com/design-manager/5826867/modules/20771877007

• •           Bitbucket SCSS source code: https://bitbucket.org/netfluencecorp/global-styles/src/master/

IV. Which styling aspects can possibly be configured?

1. Typography
2. Theme
3. Form styling
4. CTA / Button styling
5. Header GUI
6. Footer GUI
7. Social Media Icons
8. Center Container Width
9. Page Pre-loader

V. Steps needed to enable all current modules to play along with site options?

1. Identify and group modules to be updated in a single folder
2. Apply default styling to the module (Default styling guide: [ Insert link])
3. Review the module structure and re-structure module when necessary.
4. Re-name classes of the modules to adhere with what's being used in the site options (We need to have a list of standardized classes)
5. Create GUI for themes and other functionalities

VI. Tasks to undertake

VII. UX/UI Enchancements

The list below consists of suggested actions to modify and enhance the current Web Styling Configuration POC. All action items may or may not be implemented depending discussion that will happen between QAs, Developers, and CSMs.