Media

This shortcode allows you to add media files. 

This theme includes Grid Gallery, Azyn Masonry Layouts.

Grid Gallery Layout:

Content Settings:

  • Images - Here you can add images to the gallery.
  • Images per row - Here you can set the number of the items in the row.
  • Spaces - Here you can enter spaces between the items.
  • Item per row(lg) - Here you can choose the number on items per row on devices width of <1200px.
  • Spaces (lg) - Here you can enter spaces between the items on devices with a width of <1200px.
  • Item per row(md) - Here you can choose the number on items per row on devices width of <991px.
  • Spaces (md) - Here you can enter spaces between the items on devices with a width of <991px.
  • Item per row(sm) - Here you can choose the number on items per row on devices width of <768px.
  • Spaces (sm) - Here you can enter spaces between the items on devices with a width of <768px.
  • Item per row(xs) - Here you can choose the number on items per row on devices width of <480px.
  • Spaces (xs) - Here you can enter spaces between the items on devices with a width of <480px.
  • Image Height - Here you can set the hight of the image.
  • Hover for images - Here you can choose the type of the hover for the images.
  • Popup for images - Here you can choose the type of the popup for the images.


Azyn Masonry Layout:

Content Settings:

  • Popup for images - Here you can choose the type of the popup.
  • Add images - Here you can add the images.
  • Overlay background color - Here you can choose the color for the background.
  • Lines color for caption on hover - Here you can choose the color for the caption on hover.
  • Use custom font for caption? - Turn on the switch if you want to customize the font for caption.
  • Spaces for desktop version - Here you can set the spaces between the images for desktop.
  • Spaces for tablet version - Here you can set the spaces between the images for tablet.
  • Spaces for mobile version - Here you can set the spaces between the images for mobile.
  • Image size - Here you can choose the image original size.

How to customize typography you can check in Typography Settings Category:

Advanced Settings

  1. Margin: Set the section Margin
  2. Padding: Set the section Padding
  3. Z-index: Set the Z-Index.
  4. CSS ID: Set a CSS ID for your section
  5. CSS Classes: Set CSS Classes for your section

Motion Effects

  1. Sticky (Elementor Pro only): Set your section as Sticky, and choose between Top or Bottom. 
  2. Scrolling Effects (Elementor Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page.
  3. Entrance Animation: Click the dropdown to choose an animation.

Background

The following options can be set independently for both the normal and hover states.

  1. Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border radius to control corner roundness
  3. Box Shadow: Adjust box shadow options

Positioning

  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed are selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Responsive

  1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile