Make your infographics really responsive

Johan Vantomme
Johan Vantomme
Nov 26, 2018 9:47:00 AM
SHARE

Adding an infographic to a blogpost is easy, but when you look at the image on a mobile it seems to small, so tiny. Adding this module to your blog template makes it possible to upload 3 different infographics. One for desktop, tablet & mobile

This module can be used in your blog template.

How to install the custom module

Step 0: (only if you don't have yet the module in your portal): Visit our marketplace, choose and buy the Blogpost Structured Data Module.

Step 1 : open the HubSpot Design Tools

  1. Go to the Design Tools and open your blog template to edit
  2. Add you CM Blogpost Responsive infographic just below the Blog Content module in the template
  3. Save the template
  4. Ready

Step 2 : Each time you add/ edit a new blogpost you will see a cube in the left sidebar

edit-modules

Click It and the module sidebar will open, now click on

CM-Blogpost-responsive-infograhics

The new modules opens:

CM-module

Set alignment to all the infographics, then add a new infographic for each of the 3 different size

CM-module-infographi-desktop

For best result, create 3 different infographic depending the body-width you have available

  1. one for Desktop - example width 1025px
  2. one for Tablet - example width 700px
  3. oen for Mobile - example width 400px

Step 3 : if needed tweak the breaking point in the module itself

 

See it in action on a blog here

Johan Vantomme

Johan Vantomme

Johan is een van de oprichters van leadstreet, Platinum HubSpot Partner. HubSpot-certified op 5 niveau's. Hij weet technische kennis voor het ontwikkelen van websites te koppelen aan een grote kennis van online en de bijhorende commerciele en marketingkant. Johan is (ex-)zeilfanaat en een foodie.