Portfolio masonry

Dial in your perfect masonry portfolio.

Mix and match different portfolio layouts, appearances and settings.
See example of some ideas for your portfolio below.

portf-browser-the7-3-masonry-01
Portfolio Masonry

EXAMPLE 1

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Text position: Below images
  • Text alignment: Center
  • Text backgrounds: Enabled
  • Hover icons: Enabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: Load more
  • Loading effect: Move up

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/1-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
portf-browser-the7-3-masonry-02
Portfolio Masonry

EXAMPLE 2

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Text position: Below images
  • Text alignment: Left
  • Text backgrounds: Enabled
  • Hover icons: Enabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Categorization: Enabled
  • Sorting: Disabled
  • Loading mode: Lazy loading
  • Loading effect: Fade in

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/2-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
portf-browser-the7-3-masonry-03
Portfolio Masonry

EXAMPLE 3

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Text position: On image
  • Text alignment: Left
  • Hover: Text in the bottom
  • Hover icons: Disabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: Load more
  • Loading effect: Helix

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/3-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
portf-browser-the7-3-masonry-04
Portfolio Masonry

EXAMPLE 4

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Text position: On image
  • Text alignment: Center
  • Hover: Colored background
  • Hover animation: Reverse direction aware

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Hover icons: Enabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: Lazy loading
  • Loading effect: Fall perspective

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/4-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
portf-browser-the7-3-masonry-05
Portfolio Masonry

EXAMPLE 5

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Text position: On image
  • Hover: Animated lines
  • Hover animation: Effect 3
  • Hover icons: Disabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: AJAX pagination
  • Loading effect: Scale up
  • Sidebar: Enabled

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/5-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
portf-browser-the7-3-masonry-06
Portfolio Masonry

EXAMPLE 6

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Text position: Below image
  • Text alignment: Center
  • Text background: Disabled
  • Hover icons: Enabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: Lazy loading
  • Loading effect: Move up
  • Content area: Before projects

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/6-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
portf-browser-the7-3-masonry-07
Portfolio Masonry

EXAMPLE 7

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Text position: On image
  • Text alignment: Left
  • Hover style: Dark gradient
  • Hover icons: Enabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: Lazy loading
  • Loading effect: Scale up
  • Fancy title: Enabled

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/portfolio/portfolio-masonry/7-portfolio-masonry/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]