Blog masonry

Dial in your perfect masonry blog.

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

blog-browser-the7-3-mas-01
Blog Masonry

EXAMPLE 1

[dt_vc_list dividers=»false»]

  • Page layout: Full-width
  • Text alignment: Left
  • Text backgrounds: Enabled
  • Gap between images: 30px
  • Image proportions: Original

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Enabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: Lazy load
  • Loading effect: Fade in

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-masonry/1-blog-masonry/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
blog-browser-the7-3-mas-02
Blog Masonry

EXAMPLE 2

[dt_vc_list dividers=»false»]

  • Page layout: Full-width
  • Text alignment: Center
  • Text backgrounds: Disabled
  • Gap between images: 44px
  • Image proportions: Original

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Disabled
  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: Lazy load
  • Loading effect: Scale up

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-masonry/2-blog-masonry/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
blog-browser-the7-3-mas-03
Blog Masonry

EXAMPLE 3

[dt_vc_list dividers=»false»]

  • Page layout: Content-width
  • Text alignment: Left
  • Text backgrounds: Enabled
  • Gap between images: 12px
  • Image proportions: 3×2

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Enabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: AJAX pagination
  • Loading effect: Move up

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-masonry/3-blog-masonry/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
blog-browser-the7-3-mas-04
Blog Masonry

EXAMPLE 4

[dt_vc_list dividers=»false»]

  • Page layout: Content-width
  • Sidebar: Enabled
  • Text alignment: Left
  • Text backgrounds: Enabled
  • Gap between images: 20px
  • Image proportions: Original

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Enabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: AJAX pagination
  • Loading effect: None

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-masonry/4-blog-masonry/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
blog-browser-the7-3-mas-05
Blog Masonry

EXAMPLE 5

[dt_vc_list dividers=»false»]

  • Page layout: Content-width
  • Sidebar: Enabled
  • Text alignment: Left
  • Text backgrounds: Disabled
  • Gap between images: 22px
  • Image proportions: 3×2

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Disabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: AJAX pagination
  • Loading effect: None

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-masonry/5-blog-masonry/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
Blog Masonry

EXAMPLE 6

[dt_vc_list dividers=»false»]

  • Page layout: Full-width
  • Fancy title: Enabled
  • Text alignment: Center
  • Text backgrounds: Enabled
  • Gap between images: 20px
  • Image proportions: Original

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Disabled
  • Categorization: Enabled
  • Sorting: Disabled
  • Loading mode: Load more
  • Loading effect: Scale up

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-masonry/6-blog-masonry/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]