Shortcodes

[intense_masonry]

[intense_masonry_item]

Description

Masonry is used to layout items on a page that are different size. The items are put together like bricks. Gaps are filled in by other items to get the tightest possible cluster of items.

Screenshots

masonry

Dialog

masonry

Attributes

intense_masonry

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
idtextIDoptional
guttertextGuttermeasured in px10
rtlhiddenright-to-left

intense_masonry_item

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
widthtextManual Widthmeasured as a % or px amount
sizedropdownSize -
1 - 1
2 - 2
3 - 3
4 - 4
5 - 5
6 - 6
7 - 7
8 - 8
9 - 9
10 - 10
11 - 11
12 - 12
medium_sizedropdownMedium Sizeused to change the layout when viewed on medium devices - desktops (≥992px) -
1 - 1
2 - 2
3 - 3
4 - 4
5 - 5
6 - 6
7 - 7
8 - 8
9 - 9
10 - 10
11 - 11
12 - 12
small_sizedropdownSmall Sizeused to change the layout when viewed on small devices - tablets (≥768px) -
1 - 1
2 - 2
3 - 3
4 - 4
5 - 5
6 - 6
7 - 7
8 - 8
9 - 9
10 - 10
11 - 11
12 - 12
extra_small_sizedropdownExtra Small Sizeused to change the layout when viewed on extra small devices - Phones (<768px) -
1 - 1
2 - 2
3 - 3
4 - 4
5 - 5
6 - 6
7 - 7
8 - 8
9 - 9
10 - 10
11 - 11
12 - 12

Examples

[intense_masonry gutter="15"]
[intense_masonry_item width="75%"]
<div style="height: 500px; background: red;"></div>
[/intense_masonry_item]
[intense_masonry_item width="25%"]
<div style="height: 330px; background: orange;"></div>
[/intense_masonry_item]
[intense_masonry_item width="50%"]
<div style="height: 600px; background: blue;"></div>
[/intense_masonry_item]
[intense_masonry_item width="25%"]
<div style="height: 400px; background: green;"></div>
[/intense_masonry_item]
[intense_masonry_item width="25%"]
<div style="height: 300px; background: purple;"></div>
[/intense_masonry_item]
[intense_masonry_item width="50%"]
<div style="height: 250px; background: black;"></div>
[/intense_masonry_item]
[intense_masonry_item width="50%"]
<div style="height: 300px; background: gray;"></div>
[/intense_masonry_item]
[intense_masonry_item width="50%"]
<div style="height: 400px; background: darkblue;"></div>
[/intense_masonry_item]
[intense_masonry_item width="25%"]
<div style="height: 350px; background: lightblue;"></div>
[/intense_masonry_item]
[/intense_masonry]