1. Home
  2. Docs
  3. Marketing Elements
  4. Showcase

Showcase EA Element

 


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 Showcase Element

 

»Content

Items

Adding the Items

⇒Navigation: The following settings are for the navigation items:

→Title: Add the navigation title here.

→Description: Add the navigation description here.

→Icon Type: Select the icon type either icon or image. Then add an icon or upload an image. You also set none.

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

 

Preview

⇒Images:

→Size: Customize the image size

→Caption: Add the image caption.

⇒Videos:

→Aspect Ratio: Set the aspect ratio for the videos on the preview.

→Mute: Enable/disable the mute.

⇒Play Icon:

→Icon Type: Select the play icon type either icon or image. Then add an icon or upload an image. You also set none.

 

Additional Options

⇒Navigation:

→Scrollable Navigation: Show/hide the Scrollable Navigation.

→Columns: Add columns number to add in the navigation.

⇒Preview: 

→Effect: Add an effect to the preview.

→Animation Speed: Set the animation speed of the preview effects.

→Arrows: Enable/disable arrows on the preview.

→Dots: Enable/disable dots on the preview.

→Autoplay: Enable/disable the autoplay option.

→Infinite Loop: On/Off the Infinite Loop,

→Adaptive Height: Show/hide the Adaptive Height.

⇒Lightbox: 

→Lightbox Library: Select the lightbox library here.

 


»Style

 

Preview

⇒Position: Set the preview position on the showcase.

⇒Image Align: Set the image alignment.

: Set the stack on option either tablet or mobile.

⇒Width: Customize the width for different dimensions.

⇒Spacing: Customize the spacing manually.

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

⇒Background Type: Set the background type either Classic or Gradient for the preview. And then customize the style according to your preference.

⇒Border Type: 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 preview for different dimensions. You can link the values together or customize them individually.

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

⇒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.

⇒CSS Filter: Customize the CSS filter options.

 

Preview Captions

⇒Vertical Align: Set the vertical alignment of the preview captions for different dimensions.

⇒Horizontal Align: Set the horizontal alignment of the preview captions for different dimensions.

⇒Typography: Set the typography options for the captions.

⇒Background Type: Set the background type either Classic or Gradient for the preview caption for both normal and hover mode. And then customize the style according to your preference.

⇒Text Color: Customize the text color for Normal & Hover view.

⇒Border Type: 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 preview captions for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover mode.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the captions for different dimensions.

⇒Margin: Set the margin value for the top, right, bottom and left around the captions 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 captions for different dimensions. You can link the values together or customize them individually.

⇒Text-Shadow: Customize the text-shadow color, control the blur radius and set the horizontal and vertical value of the shadow.

⇒Blend Mode: Set the blend mode.

 


»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 Showcase Element.


Was this article helpful to you? Yes No

How can we help?