Enlighten IC

Book A Call

Want To Sell Better With HubSpot? Check Out eZo eCommerce...

Latest Blog PopUp - Documentation

PopUp - Latest Blog

This module allows you to add a subtle PopUp to promote the most recent blog post on your website. The documentation will walk you through how to set up and install the Latest Blog PopUp. Should you have any questions, please click on the support link to get in touch.

Setting Up The Latest Blog PopUp

  1. After purchasing the module from the HubSpot Marketplace the first step is to set up the module, to do this navigate to Marketing > Files and Templates > Design Manager and select Latest Blog PopUp from the left hand side menu (It will be listed in a folder named Marketplace).

    latest-blog
  2. Select Edit global module from the right hand side to open HubSpot's Global Content Editor.

  3. latest-blog-1

 

Choosing Which Blog Post You Want To Promote

The options on the left hand side are:

Type Of Module - This option allows you to choose what type of module you wish to include on your page. By default the module is Global but can be changed to a Local module if you wish. Follow the guide at the end of this documentation on how to switch your module from a Global module to a Local module.

Show PopUp - This option acts as a global switch to enable / disable the Latest Blog PopUp. This option is set to no by default so make sure you set it to yes when you want to make the PopUp live on your website.

Link Source - This option allows you to choose how the module decides which blog post (or web page) to promote on your website. The options are Latest Blog or Choose Page. If you select Latest Blog an option will appear called Blog which will allow you to choose which of your blogs the module will use as the source from which the Latest Blog Post will be pulled. If you select Choose Page an option called Link will appear allowing you to choose a specific blog post or page from your website to promote. The module will automatically pull in the post's title and featured image to display.

Button Text - This allows you customise the button text on your PopUp. The default value is Read More and can be changed to whatever you prefer.

 

Styling Your Latest Blog Post PopUp

Styles - This section contains customisable settings to help you style the module so it falls more inline with your website’s brand identity. The options in this panel are:

Layout - This option allows you to set whether you want to have the layout Text/Image orImage/Text.

Position - This allows you to modify how your Latest Blog PopUp is docked to the visitor's screen. The module can be docked to either the top left, middle left, bottom left, top right, middle right, bottom right or centre of a visitor's screen. If Centreis selected as the position an option titled Filter Colour will appear.

z-index - This option is used if you discover the Latest Blog PopUp overlaps other elements on your web page. The element with the highest z-index will always display on top of other elements on your website. The default value is "100000000" but you may need to increase this if other elements on your website use a similar high numbered z-index.

Filter Colour - Use this property to customise the background colour of the PopUp's filter when Position is set to Centre.

Filter z-index - This option is used if you discover the filter overlaps other elements on your web page when Position is set to Centre. The element with the highest z-index will always display on top of other elements on your website. The default value is "10000000" but you may need to increase this if other elements on your website use a similar high numbered z-index.

Background Colour - Use this property to customise the background colour of the PopUp panel.

Border Radius - This allows you to customise the CSS border-radiusvalue of the PopUp panel. By default the panel has a Border Radius of 5px.

Headline Colour - This value allows you to customise the colour of the headline within the PopUp panel.

Button Background Colour - This value allows you to customise the background colour of the button within the PopUp panel.

Button Border Radius - This value allows you to customise the CSS border-radiusvalue of the button within the PopUp panel.

Button Text Colour - This value allows you to customise the colour of the button text within the PopUp panel.

Close Button Colour - This value allows you to customise the colour of the PopUp's close button.

Settings - This section contains customisable settings to help you personalise the Latest Blog PopUp to your website. The options in this section are:

Reset after 'X' days? - This value controls the time it takes for the Latest Blog PopUp to reappear after it has been shown to a visitor on your website. By default when a visitor views the Latest Blog PopUp and closes it to navigates to another page on your website the Latest Blog PopUp will not reappear for 2 days, however, you can set this value to what ever you prefer.

Show after elapsed time? - This value allows you to enable / disable whether or not the Latest Blog PopUp is triggered after a certain amount of time has elapsed. This is useful if a visitor lands on a page but doesn’t take any further action such as scrolling, using an elapsed time allows another opportunity to catch their attention.

Scroll Value - This value can be used to control how scrolling affects the Latest Blog PopUp. The option Pixelsallows you to show the Latest Blog PopUp after the visitor has scrolled a certain amount of pixels. The option Percentageallows you to show the Latest Blog PopUp after the visitor has scroll a certain percentage of your web page, this value is defined in multiples of 10% e.g. 10%, 20%, 30% etc.



  • Choose The Pages Your Module Is Displayed On

    This section allows you to control the pages the module is displayed on. By default the module is set up to appear on every page of your website, however, you have two ways to control this.

    whitelist

    Whitelist
    The module can be setup using a whitelist meaning that by default the module will be hidden on all website pages except the approved URLs on the whitelist. If the Display Type option is set to Whitelist the module will not appear on any of your website and blog pages except those with the page URLs defined under Page URL.

    Blacklist
    The module can also be setup using a blacklist meaning that by default the module will appear on all website pages except those restricted URLs via the blacklist. If the Display Type option is set to Blacklist the module will appear on all your website and blog pages except those with the page URL's defined under Page URL.

    Wildcards

    If you would like to restrict the Latest Blog PopUp so it doesn't appear on a whole section of your website you can use a wildcard operator to limit this. For example, if you want to turn off the Latest Blog PopUp in your Services section and every page in the section follows the same URL pattern e.g. www.yourdomain.com/services/service-name you could use the wildcard operator '/*' to easily exclude this section by adding: www.yourdomain.com/services/*

 

How To Install The Latest Blog PopUp

Now you have set up the Latest Blog PopUp you are ready to make it live on your website. There are several ways to add a HubSpot module into your website but to provide maximum flexibility and ease of control we recommend you follow the process below:

  1. Navigate to Marketing > Files and Templates > Design Tools and select Latest Blog PopUp from the left hand side menu (It will be listed in a folder named Marketplace).

    latest-blog
  2. Right click and select Copy Snippet

    copy-snippet-1
  3. Select the Settings icon (⚙) which will load your HubSpot portal's settings

    settings-latest-blog
  4. From the left menu select Website to open the submenu...

    hubspot-portal-settings-website
    ...and then select Pages
    screenshot-4
  5. Paste the module's snippet into the section titled Site footer HTML and click Save.

    site-footer-html-1
  6. A Save button will appear and once you click this your Latest Blog PopUp will be live across the pages you have specified.

    latest-blog-save

 


How To Convert The Latest Blog PopUp Into A Local Module

  1. Navigate to Marketing > Files and Templates > Design Manager and select the page template you would like to add a local version of the module to.

  2. From the right hand menu select +Add and then drag Latest Blog Post into the Header section of your template.

    add-latest-blog
  3. Select the module on the template editor (1) and then select Edit (2) and from the More menu select Make a local copy (3).

    create-local-copy
  4. A window will appear asking if you would like to confirm this action. Select Create copy.

    confirm
  5. After clicking Create copy scroll to the Default Content section on the right hand toolbar and change the setting for Type of Module to Local and the setting for Show PopUp to No.

    default-content
    show-popup
  6. Click Publish changes to make the changes live.

  7. Navigate to Marketing > Website > Website Pages and select one of your pages using this template and select "Edit".

    edit-4
  8. From the Left hand menu select Latest Blog PopUp copy and begin editing your settings. Any edits made to the module will appear on only this page as the module is now a local module.

    edit-in-page


CSS Styles

This module has been designed to be as flexible as possible. All the CSS required to style the Announcement Bar is included within the module. It can be edited to suit your needs although we recommend using the built-in styling options as we can’t take responsibility for any CSS edits you make that break the module (or your website).

Final Thoughts

We have tried to build as much functionality into this module as possible without making it too complicated. If, however, you have specific requirements for your business, please get in touch and we will see if this module can be customised further to meet your needs or if a bespoke module would be more appropriate.

Looking For
Custom Development?

We provide development solutions for companies and agencies who need help building their websites from scratch or adding custom functionality along the way

Get In Touch