Magazine Theme Modules

A HubSpot theme contains Theme modules & Common modules.
The common modules are supplied to each theme by HubSpot.
Our devs developed these Theme modules!
They have specific behavior that works with the theme.
Here they will be listed how to use them and what you can obtain!

All these modules can be used on webpages & landings pages

Accordion module

magazine-module-accordion

This module is used here to manage a FAQ on an accordion base. The module can collapse / expand. You can choose the initial phase.

magazine-module-accordion-example

 

 

Button module

magazine-module-button

In the general setting you have declared several button style.

Take a look at all the parameters you can manage.

  • alignment
  • add icon
  • link
  • style 
  • size
  • ...

magazine-module-button-example

magazine-module-button-parameter

 

 

 

 

Custom section header module

magazine-module-custom-section-header

This module you can use as a header , as a separator, add text or add a menu

magazine-module-custom-section-header-example-2

magazine-module-custom-section-header-parameter

 

Footer row module

magazine-module-custom-section-header

This module is used in the footer global module, here you can easily control the columns in the footer doormat.

magazine-module-footer-row-example

magazine-module-footer-row-parameter

 

Grid 1 col module

magazine-module-custom-section-header

Use this module in a column / as a vertical element on your webpage. 

  • Select blog, topic, recent popular
  • Select 1,2,3,... articles
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display only first image

Same module used in 3 columns with different parameters
magazine-module-grid-1-col-example

magazine-module-grid-1-col-example-2

magazine-module-grid-1-col-parameter

 

Grid 1 row + 1/4 + 1/4 + 1/4 + 1/4 module

magazine-module-custom-section-header

Use this module in a row / as a horizontal element on your webpage. This module always comes with 1 big article

  • Select blog, topic, recent popular
  • Select 1,5,9,... articles
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display only first image

magazine-module-grid-1-row-4-col-example

magazine-module-grid-1-row-4-col-example-2

magazine-module-grid-1-row-4-col-parameter

 

Grid 1/2 + 1/2 module

magazine-module-2-col

Use this module in a row / as a horizontal element on your webpage. This module gives you the possibility to add a newsletter subscription form.

  • Select blog, topic, recent popular
  • Select 2,4,6,... articles
  • Or select 1,3,5,.. + form
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display only first image

magazine-module-grid-2-col-parameter

magazine-module-grid-2-col-example

magazine-module-grid-2-col-example-3

magazine-module-grid-2-col-example-2

 

 

Grid 1/2 + 1/4 + 1/4 module

magazine-module-grid-1-col-2-col

Use this module in a row / as a horizontal element on your webpage. This module hold 5 articles. First article has a big image, article 2-5 are square

  • Select blog, topic, recent popular
  • Select 5, 9, 13,... articles
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display images

magazine-module-grid-1-col-2-col-parameter

magazine-module-grid-1-col-2-col-example

magazine-module-grid-1-col-2-col-example-2

 

 

Grid 1/3 + 1/3 +1/3 module

magazine-module-grid-1-col-2-col

Use this module in a row / as a horizontal element on your webpage. Default the module holds 3 articles, but you can have 2 or 4

  • Select blog, topic, recent popular
  • Select 5, 9, 13,... articles
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display images

magazine-module-grid-3-col-parameter

magazine-module-grid-3-col-example

magazine-module-grid-3-col-example-4

magazine-module-grid-3-col-example-2

magazine-module-grid-3-col-example-3

magazine-module-grid-3-col-example-5

magazine-module-grid-3-col-example-6

Grid 2/3 + 1/3 module

magazine-module-grid-2-3-col

Use this module in a row / as a horizontal element on your webpage. Default the module holds 1 big article with 2, 3, 4 articles at the right without images.
When you use the display image switch you can obtain some unique variation and use the module in a column modus

  • Select blog, topic, recent popular
  • Select 3 or 4 articles
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display images

magazine-module-grid-2-3-col-parameter

magazine-module-grid-2-3-col-example

magazine-module-grid-2-3-col-example-2

magazine-module-grid-2-3-col-example-3

Grid 3/4+ 1/4 module

magazine-module-grid-3-1-col

Use this module in a row / as a horizontal element on your webpage. Default the module holds 1 big article with 2, articles at the right with images.
You can add an extra 4 articles at the bottom, or remove all the images to make it lighter.

  • Select blog, topic, recent popular
  • Select 3,7 articles
  • Display/hide  date time to read
  • Display/hide topic/read all
  • Display/hide post summary
  • Display images

magazine-module-grid-3-1-col-parameter

magazine-module-grid-3-1-col-example

magazine-module-grid-3-1-col-example-2

magazine-module-grid-3-1-col-example-3

 

Grid 1 col page module

magazine-module-custom-section-header

Use this module in a column / as a vertical element on your webpage. 

  • Select a webpage or a landing page
  • Override the featured image 
  • add a description if needed
  • Display/hide  date 
  • Display/hide topic/read all
  • Display/hide post summary

Same module used in 3 columns with different parameters

 

Icon with Text modules

icon-with-text

This module is a kind of card, can be used in a row or a colum, holds a title, icon or image, description and link. You can add extra hover functionalities.

magazine-module-icon-with-text-parameter

magazine-module-icon-with-text-example

magazine-module-icon-with-text-example-2

magazine-module-icon-with-text-example-3

magazine-module-icon-with-text-example-4

 

 

Instagram feed modules

instagram-feed

This module can hold an embedded code such as a feed from instagram. You can use it in global modules or normal pages. 

magazine-module-instagram-feed-parameter

magazine-module-instagram-feed-example

Map modules

map

Embed a google map in this module, use the greyscale functionality

magazine-module-map-parameter

magazine-module-map-example

Masonry with slideshow modules

masonry-with-slideshow

Use this module to add a gallery, when an image is clicked it will popup and will let you navigate to the next image

magazine-module-masonry-with-slideshow-parameter

magazine-module-masonry-with-slideshow-example

magazine-module-masonry-with-slideshow-example-2

Menu modules

instagram-feed

This module is used as the main navigation for this website. The module will display & control a menu

magazine-module-menu-parameter

magazine-module-menu-example

Office details modules

instagram-feed

Use this module to add information about the company like address, email and phone number

magazine-module-office-details-parameter

magazine-module-office-details-example

Other Office details modules

instagram-feed

Use this module to add the branches of the company from other countries.

 

magazine-module-other-office-details-parameter

magazine-module-other-office-details-example

Pillar Menu modules

instagram-feed

Use this module in a left sidebar, to control the navigation within your page using anchors

magazine-module-pillar-menu-parameter

magazine-module-pillar-menu-example

magazine-module-pillar-menu-example-2

Social follow modules

instagram-feed

This module is typically used on the thank you page. add this module to add the social media of the company

magazine-module-social-follow-parameter

magazine-module-social-follow-example

magazine-module-social-follow-example-2

Subheader modules

instagram-feed

This module add the typical subheader line next to the header

magazine-module-subheader-parameter

magazine-module-subheader-example

Team modules

instagram-feed

Use this module to add the team members of the company

magazine-module-team-parameter

magazine-module-team-example

magazine-module-team-example-2

magazine-module-team-example-3

Testimonial slider modules

instagram-feed

Use this module to add the testimonial-slider members of the company

magazine-module-testimonial-slider-parameter

magazine-module-testimonial-slider-example

Grid 1/3 + 1/3 +1/3 page module

magazine-module-grid-1-col-2-col

Use this module in a row / as a horizontal element on your webpage. Default the module holds 3 articles, but you can have 2 or 4

  • Select a webpage or a landing page
  • Override featured image
  • add a description if needed
  • Display/hide date
  • Display/hide topic/read all
  • Display/hide post summary
  • Display images