Photos and videos

Dial in your perfect photo & video gallery.

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

photos-browser-the7-3-01
Gallery Masonry

EXAMPLE 1

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Layout: Masonry
  • Gap between images: 20px

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Loading mode: Load more
  • Loading effect: None

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/photos-videos/01-gallery/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
photos-browser-the7-3-02
Gallery Masonry

EXAMPLE 2

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Content area: Below gallery
  • Layout: Masonry

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Gap between images: 2px
  • Loading mode: Lazy loading
  • Loading effect: Scale up

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/photos-videos/02-gallery/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
photos-browser-the7-3-03
Gallery Grid

EXAMPLE 3

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Layout: Grid
  • Image proportions: 1×1

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Gap between images: 20px
  • Loading mode: Load more
  • Loading effect: None

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/photos-videos/3-gallery/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
photos-browser-the7-3-04
Gallery Grid

EXAMPLE 4

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Layout: Grid
  • Image proportions: 3×2

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Gap between images: 10px
  • Loading mode: AJAX pagination
  • Loading effect: Flip

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/photos-videos/4-gallery/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
photos-browser-the7-3-05
Gallery Justified Grid

EXAMPLE 5

[dt_vc_list dividers=”false”]

  • Page layout: Full-width
  • Layout: Justified Grid
  • Row target height: 180px

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Gap between images: 0px
  • Loading mode: Load more
  • Loading effect: None

[/dt_vc_list]

[dt_button link=”http://the7.dream-demo.com/gallery/photos-videos/5-gallery/” size=”medium” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” icon_align=”right”]View demo page[/dt_button]
photos-browser-the7-3-06
Gallery Justified Grid

EXAMPLE 6

[dt_vc_list dividers=”false”]

  • Page layout: Content-width
  • Layout: Justified Grid
  • Row target height: 200px

[/dt_vc_list]

[dt_vc_list dividers=”false”]

  • Gap between images: 6px
  • Loading mode: Lazy loading
  • Loading effect: None

[/dt_vc_list]

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