Masonry/Grid Container Module

One amazing module to create structure and fill in the elements

Add the creative and stylish container with elements inside on your page.

This is a nested shortcode – module that includes other modules. You may style the container and then fill it in with elements.

You may add the VC elements inside the container.

Masonry/Grid Container settings

  • Layout mode – select the masonry or grid style for the elements displaying.
    • Masonry – the elements are aligned into a masonry sections. The content takes as much space as needed and the thumbnails are not cropped and adjusted to it.
    • Grid – the elements are aligned into a grid equal sections. The content is adjusted to take equal space and the thumbnails are cropped respectively.
  • Sort panel – set it to Enable to display the sort panel for the elements inside the container.
    • Sort panel alignment – this option allows you to align the sort panel horizontally. Left, right and center positions are available.
    • Categories list – enter the categories for the container.  Please, note! You need to enter each string on a new line, categories should be written in one word in lowercase.
  • Number of columns for wide container – enter the number of columns for the container width more then 1280px. Enter value between 1 to 8.
  • Number of columns for normal container – enter the number of columns for the container width more then 1024px and less then 1280px.  Enter value between 1 to 8.
  • Number of columns for medium container – enter the number of columns for the container width more then 800px and less then 1024px. Enter value between 1 to 8.
  • Number of columns for small container – enter the number of columns for the container width more then 460px and less then 800px. Enter value between 1 to 8.
  • Number of columns for mobiles – enter the number of columns for the container width less then 460px.  Enter value between 1 to 8.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

Masonry/Grid  Item Settings

  • Category – enter the category name for the Masonry/Grid item, the category should be in sort panel category as well. Please note! The category should be written in one word in lowercase.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

By clicking on ‘PLUS’ icon you may add the element inside the container.

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://rnbtheme.com/documentation/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}