Albums grid

Dial in your perfect grid photo albums.

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

album-browser-the7-3-grid-01
Photo Albums Grid

EXAMPLE 1

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Text position: Below images
  • Text alignment: Center
  • Text backgrounds: Enabled
  • Hover miniatures: Enabled

[/dt_vc_list]

[dt_vc_list dividers=”false”]

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

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/albums-grid/1-albums-grid/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
album-browser-the7-3-grid-02
Photo Albums Grid

EXAMPLE 2

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Text position: On images
  • Text alignment: Center
  • Hover layout: Colored background
  • Hover animation: Direction aware

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Hover miniatures: Disabled
  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: Load more
  • Loading effect: Fall perspective

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/albums-grid/2-albums-grid/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
album-browser-the7-3-grid-03
Photo Albums Grid

EXAMPLE 3

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Text position: On images
  • Hover layout: Dark gradient
  • Text alignment: Center
  • Text visibility: Always

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Hover miniatures: Enabled
  • Categorization: Enabled
  • Sorting: Enabled
  • Loading mode: AJAX pagination
  • Loading effect: Helix

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/albums-grid/3-albums-grid/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
album-browser-the7-3-grid-04
Photo Albums Grid

EXAMPLE 4

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Sidebar: Enabled
  • Text position: On images
  • Hover layout: Animated lines
  • Hover animation: Effect 2

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Hover miniatures: Disabled
  • Categorization: Disabled
  • Sorting: Disabled
  • Loading mode: AJAX pagination
  • Loading effect: Flip

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/albums-grid/4-albums-grid/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
album-browser-the7-3-grid-05
Photo Albums Grid

EXAMPLE 5

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Content area: Below albums
  • Text position: On images
  • Text alignment: Left
  • Text visibility: Always
  • Hover layout: Dark gradient

[/dt_vc_list]

[dt_vc_list dividers=”false”]

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

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/albums-grid/5-albums-grid/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
album-browser-the7-3-grid-06
Photo Albums Grid

EXAMPLE 6

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Fancy title: Enabled
  • Content area: Below albums
  • Text position: Below images
  • Text alignment: Center

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Hover miniatures: Disabled
  • Categorization: Enabled
  • Sorting: Disabled
  • Loading mode: Lazy load
  • Loading effect: Scale up

[/dt_vc_list]

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