Netfluence Internal Knowledgebase

VPB Lite Feature | Documentation for Global Styling Configuration

Written by Vince Ardina | Nov 12, 2019 9:35:28 AM

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:


+ Website Styling Configuration Page
This is page is where the user will set up their Typography, Color, etc. on a page  level edit.

  • + 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



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




Task

Sub Task

LOE

Status

Notes

Create a layout for how the module drawer will look like when developed (UX/UI)

  8 - 10 Hours In Progress

This task also includes:

- Documentation for the standardization of field labels

- Adding of tool tips

- Suggest ways to organize all the settings to control styling

- Suggest other design/styling aspects of the VPB Lite that the Website Styling Configuration can possibly control.

- Provide brief instructions to the user on how to configure the styling. This can be placed
on the top of the Website Styling Configuration body.

- Suggest to delete any unnecessary settings in the Website Styling Configuration (if any)

Names and Classes Standardization

       
 

Global classes that will be used all throughout the website

  In Progress  
 

Class and ID Naming Convention for various sections and elements.

  In Progress  
 

Themes (Light/Dark)

     
 

Field label standardization

     

Creation of the Global Style sheet page

       
 

UI for text contents (Heading (H1-H6), Paragraph (p), Unordered List (ul), Ordered List (ol), Body)

     
 

UI for Anchor Tags/CTA Buttons

     
 

UI for the Header

     
 

UI for the Footer

     
 

UI for Themes

     
 

UI for Page Pre-loader

     
 

UI for Social Media Icons

     
 

UI for Center Container Width

     
 

UI for Form Styling

     

Creation of Global CSS file where all website styling will be saved

       

Module structure standardization/uniformity

    In Progress

 

 

 

 

 

 

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.

 

 

Action Item

Pros

Cons  

Group settings for desktop, tablet , and mobile. E.g.

- This gives a much clear visualization of items to be styled/configured. Users will know where to modify the styling based on the main categories (desktop, mobile, tablet)

- All styling aspects specific for Desktop only, mobile, and tablet, are contained on a single group. 

- Intuitive and visually appealing than having the style changer modules appear all over the place after the clicking the cube icon.

   

Default module (style changer) for H1 up to H6 tags should be grouped into one default module style changer.

This:

 

Instead of this:

 

 

- Same reason as above. 

   

Rename "Button Primary" to "Primary Button". Remove or hide the settings to change button label and link as these settings should be pre-set

- Changing the button label and URL link is not necessary as we will provide default values for these

- Users will be able to focus more on the styling

   

Adjust the Theme preview into something like this:

 

- This will occupy less space on the preview section