Get Oxygen
Learn Reference Builder Elements Gallery

Gallery

The Gallery element displays a customizable image gallery with options for captions, hover effects, and a lightbox.

Add a Gallery element to your page from Add+ > Helpers > Gallery.

Adding Images to the Gallery

Gallery Source

The Gallery Source is where you populate your Gallery with images. You have three options:

  • Media Libraryspecify Image IDs that exist in your WordPress media library. Click Browse to select images from your WordPress media library.
  • ACF - use a Gallery field from the Advanced Custom Fields plugin
  • WooCommerce - display the images product gallery for the specified WooCommerce product

Link Images

Choose yes to link the image to its full size image file, or no to disable the link.

Add Lightbox

This option appears when Link Images is set to yes. Instead of linking to the image file itself, the image will be displayed in a lightbox.

Gallery Styling

Layout

This controls the layout of the gallery, including the image aspect ratio, number of images per row, and spacing between images.

  • Layout - choose either flex or masonry. Flex keeps all images in orderly rows, while masonry arranges images based on their own sizes and the number of images per row.
  • Image Aspect Ratio - if flex is chosen for the Layout, specify an image aspect ratio like 16:9 (widescreen), 21:9 (cinematic), 1:1 (square), etc.
  • Images Per Row - set the maximum number of images displayed in each row.
  • Space Around Image - control the spacing between each image.
  • Image Min Width - Use this property to make the gallery responsive. Images will not be displayed narrower than this width.

Captions

  • Show Captions - choose yes or no.
  • Caption Color - set the text color of the captions.
  • Caption Background Color - set the background color where captions are displayed.
  • Show Captions Only On Hover - choose yes or no.
  • Hide Captions Below - set a screen size below which captions will not be displayed.

Hover

  • Image Opacity - the image opacity when not hovered.
  • Hover Image Opacity - the image opacity when hovering over it with the mouse.
  • Transition Duration - set the duration of the transition for the image hover opacity, and the display of the caption if it is present.
Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2019
Designed with Oxygen.
LegalTrademark Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram