1. Home
  2. Docs
  3. Creative Elements
  4. Justified Gallery

Justified Gallery SA Element

The Justified Gallery widget allows you to create spectacular galleries on your WordPress website with the Elementor page builder. This awesome element allows you to make your image gallery more functional and easy to browse with a simple toggle. The Justified Gallery SA Element for Elementor offers full control over how your images are displayed and can showcase each image individually with the Lightbox display. Here in this tutorial, you’re going to learn how to use the Justified Gallery element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Justified Gallery Element

 

 

»Content

 

Gallery

⇒Filter Name: Add the filter name for each item. Filter navigation will be built using the filter name.

⇒Add Image: Add images to the gallery for each item.

⇒Add Item: Use the ‘+Add Item’ button to add more gallery items to the list.

⇒Image Size: Customize the image size using our pre-defined size set.

 

Settings

⇒Show Filter: Enable/disable the filter by selecting Yes or No. Enable to display filter navigation. Filter navigation will be built using a filter name from the gallery.

⇒Show All Filter? Enable to display all filter button

⇒Filter Label: Type all filter label under which all of your media files will be displayed.

 


»Style

 

Image

⇒Border Radius: Set the border-radius around the gallery for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Background Color: Add a custom background color to the gallery.

⇒Opacity: Customize the opacity of the gallery image for both normal and hover view.

⇒CSS Filter: Customize the CSS filter for the blur, brightness, contrast, saturation, and hue of the image.

⇒Transition Duration: Set the transition duration for the hover mode.

⇒Hover Animation: Select a hover animation effect for the hover view.

 

Filter Menu

⇒Margin: Set the margin value for the top, right, bottom and left around the filter menu for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the filter buttons for different dimensions. You can link the values together or customize them individually.

⇒Spacing: Customize the space between the filter buttons for different dimensions.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the filter buttons for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the filter button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Typography: Set the typography options for the filter button texts.

⇒Alignment: Set the alignment of the filter buttons for different dimensions.

⇒Text Color: Customize the filter button text color for Normal, Hover, & Active view.

⇒Background Color: Customize the filter button background color for Normal, Hover & Active view.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Justified Gallery Element.


Was this article helpful to you? Yes No

How can we help?