Want to showcase your work gallery, JD Builder has just the element for that, you can easily do this using the Gallery element.
From filters to labels & even image captions almost all the options are provided under the main General tab.
First is the General sub tab that has the following options:
- Layout- Choose the layout of your gallery either Grid, Masonry or Justify.
- Add Items- Add the images of your gallery. Set the caption & filters for each of the image separately.
- Columns- If you choose Grid & Masonry layouts then set the numbers columns for the layouts.
- Row Height- If you choose Grid & Justify layouts the adjust the height of the images/rows.
- Margin- If you choose Grid & Masonry layouts then manage the margin spacing for each of the images.
- Justify gallery gap- Only for Justify layout type adjust the gallery gap or the image gap using the slider here.
If you have added filter tags on each of the images then manage its functions under Filter Options tab:
- Category Filter- Enable or disable the category filters for the element.
- Show All- Choose if you want to show the ‘All’ filter or not.
- Label for ‘All’- Set a different label for ‘All’ filter.
- Default Filter- Enter the filter name that will be set as your default filter.
- Filter Alignment- Choose the alignment of the filters.
Styling the added filters is now easy with the different options available for different states under Filter Styling tab:
- Filter Options in Normal State- Add colors, style the text in different font styles, add padding for extra spacing, add border & box shadow to make it look attractive when in normal state.
- Filter Options in Active State- Style the active filter with the same options as in normal state.
- Filter Options in Hover State- Style the filters when on hover to clear out the difference between the three states.
If you would like to add captions on the images then manage its settings under the Caption Options tab:
- Show Caption- Choose how & where you want to show the caption either On Image or On Hover.
- Caption Tag- If you choose to show the caption then add the right tag over it.
- Text Color- Set the caption’s text color.
- Background Color- Set the caption’s background color over the image.
- Typography- Style the caption text via the typography field.
- Padding- Add extra spacing with respect to the caption background.