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
- Go to the Design Tools and open your blog template to edit
- Add you CM Blogpost Responsive infographic just below the Blog Content module in the template
- Save the template
- Ready
Step 2 : Each time you add/ edit a new blogpost you will see a cube in the left sidebar
![edit-modules](https://www.leadstreet.be/hs-fs/hubfs/edit-modules.jpg?t=1542310681203&width=50&name=edit-modules.jpg)
Click It and the module sidebar will open, now click on
![CM-Blogpost-responsive-infograhics](https://www.leadstreet.be/hs-fs/hubfs/CM-Blogpost-responsive-infograhics.jpg?t=1542310681203&width=50&name=CM-Blogpost-responsive-infograhics.jpg)
The new modules opens:
![CM-module](https://www.leadstreet.be/hs-fs/hubfs/CM-module.jpg?t=1542310681203&width=50&name=CM-module.jpg)
Set alignment to all the infographics, then add a new infographic for each of the 3 different size
![CM-module-infographi-desktop](https://www.leadstreet.be/hs-fs/hubfs/CM-module-infographi-desktop.jpg?t=1542310681203&width=50&name=CM-module-infographi-desktop.jpg)
For best result, create 3 different infographic depending the body-width you have available
- one for Desktop - example width 1025px
- one for Tablet - example width 700px
- one for Mobile - example width 400px
Step 3 : if needed tweak the breaking point in the module itself