Blog grid

Dial in your perfect grid blog.

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

blog-browser-the7-3-grid-01
Blog Grid

EXAMPLE 1

[dt_vc_list dividers=»false»]

  • Page layout: Content-width
  • Text alignment: Left
  • Text backgrounds: Disabled
  • Gap between images: 50px
  • Image proportions: 1×1

[/dt_vc_list]

[dt_vc_list dividers=»false»]

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

[/dt_vc_list]

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

EXAMPLE 2

[dt_vc_list dividers=»false»]

  • Page layout: Content-width
  • Text alignment: Center
  • Text backgrounds: Enabled
  • Gap between images: 30px
  • Image proportions: 1×1

[/dt_vc_list]

[dt_vc_list dividers=»false»]

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

[/dt_vc_list]

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

EXAMPLE 3

[dt_vc_list dividers=»false»]

  • Page layout: Full-width
  • Text alignment: Center
  • Text backgrounds: Enabled
  • Gap between images: 10px
  • Image proportions: 5×3

[/dt_vc_list]

[dt_vc_list dividers=»false»]

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

[/dt_vc_list]

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

EXAMPLE 4

[dt_vc_list dividers=»false»]

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

[/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-grid/4-blog-grid/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
blog-browser-the7-3-grid-05
Blog Grid

EXAMPLE 5

[dt_vc_list dividers=»false»]

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

[/dt_vc_list]

[dt_vc_list dividers=»false»]

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

[/dt_vc_list]

[dt_button link=»http://the7.dream-demo.com/blog/blog-grid/5-blog-grid/» size=»medium» icon=»JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF» icon_align=»right»]View demo page[/dt_button]
blog-browser-the7-3-grid-06
Blog Grid

EXAMPLE 6

[dt_vc_list dividers=»false»]

  • Page layout: Full-width
  • Fancy title: Enabled
  • Text alignment: Left
  • Text backgrounds: Disabled
  • Gap between images: 50px
  • Image proportions: 8×5

[/dt_vc_list]

[dt_vc_list dividers=»false»]

  • Fancy date: Enabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: Load more
  • Loading effect: Fade in

[/dt_vc_list]

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