Branding a V2 Hub

Modified on Wed, 6 Nov at 10:03 PM

A Hub includes default branding elements and looks as follows:

 

Branding enhances visual appeal, increases mindshare, and promotes brand recall. Therefore, it follows that branding a Hub is essential. Using Hushly, you can define a Hub's Fav Icon, Header, Footer, Menu, and Content area.

To define your Hub's brand elements:

  1. From the Hubs page, select the Hub.

  2. From the Hubs menu, click Branding to view the Hub Branding page. You can select the header background color, main menu text color, button text color, menu background color, button text color, and button background color.
    • Enter the color code using RGB, HEX, or HSB schemes.
    • Use the cursor to select the color.
    • Move the arrow marks to define the color.  
  3. Enter the font family that your brand uses for all communications. You can paste the font family details in Font Family. You can refer to Google for Font families.
    • For a generally available font from the Google fonts family, enter the font family name in the Font Family field.
      Example: "Courier New", Courier, monospace
    • For a custom font family, enter the font-family value and the Font Family and URL in the Header section, and Save it:
      Example: Font Family: 'Roboto Slab', serif;
      Header: <link href="  https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap ">

  4. Enter the Fav Icon URL. The Fav Icon is displayed in the tab title when you open a web page using a browser’s tab. After adding the Fav Icon, the browser tab displays the Fav Icon.  
  5. Add a Branding URL - Click here to learn more about the Branding URL. 
  6. Click Show Advanced Options to define the Head, Header, Footer, the Cascading Style Sheet (CSS), and JavaScript. Copy the code into the respective windows.

    Adding a Head
    Any metadata content can be placed in the Head section, paste the JavaScript code to define a head.

    Adding a Header
    Paste HTML code to define a header.
    After Adding a Header
    Adding a Footer
    Paste HTML Code to define a footer.
    After Adding the Footer

    Adding a CSS
    Paste the Cascading Style Sheet (CSS) code to configure the display styles on the page.
    After Adding a CSS
    Adding JavaScript
    Paste JavaScript code, if any.

    Adding ABM Page Head
    Paste the code, if any.  
  7. Click Save. You can preview the Hub page and it looks as follows:

Next Topic

Adding a Stream


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article