1. Home
  2. Docs
  3. Carousel & Slider
  4. Gallery Slider

Gallery Slider EA Element

The Gallery Slider widget allows you to create spectacular sliders on your WordPress website with the Elementor Page Builder. The EA element offers significant customization options and design options that you can change without touching a single line of code. Show your next portfolio in a new way using this stunning element. Let your visitors browse your images through thumbnails. Here in this tutorial, you’re going to learn how to use the Gallery Slider 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 Gallery Slider Element

 

»Content

 

Gallery

Adding the Image: Click the Add Images button to select images to display. Once selected, click Add to Gallery button and then click the Insert Gallery button.

Thumbnails

⇒Thumbnails: Show/hide the thumbnails and then customize the settings.

⇒Image Size: Choose the size of the image, from thumbnail to full, or enter a custom size

⇒Columns: Set the number of columns you want to show on your gallery slider.

⇒Ordering: Select the ordering of the images either random or default.

⇒Caption: Set image captions to None, Title, Caption, or Description

 

Preview

⇒Image Size: Choose the size of the image, from thumbnail to full, or enter a custom size

⇒Link to: Link images to their respective Media Files, Custom URLs, or None

⇒Image Stretch: Select Yes or No

⇒Caption: Set image preview captions to None, Title, Caption, or Description

⇒Arrows: Enable arrows as the navigation in the gallery slider.

⇒Autoplay: Choose Yes or No to rotate slides automatically

⇒Autoplay Speed (ms): Set the time it takes for the next slide to start rotating. This time is in milliseconds, so 1000 ms is equal to 1 second.

⇒Pause On Hover: Select whether or not to pause autoplay when a user interacts with the gallery slider. Yes or No.

⇒Infinite Loop: Show the slider in a continuous loop, infinitely. Yes or No

⇒Adaptive Height: Select Yes or No to have an adaptive height.

⇒Effect: Add a slider effect to the gallery.

⇒Animation Speed: Set the speed of slide animation, in milliseconds

⇒Direction: Choose to have the slides rotate from left or right

 


»Style

 

Preview

⇒Layout: The following options are for customizing the gallery slider preview layout:

→Position: Set the layout position either left, center or right.

: Select the stack on either Tablet & Mobile or Mobile only.

→Width: Set the layout width manually for different dimensions.

: Set the spacing between gallery image and thumbnails.

 

⇒Images: The following options are for customizing the gallery slider preview images:

→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 gallery 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 gallery border 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.

Preview Captions

⇒Vertical Align: Set the preview caption vertical alignment either left, right or center.

⇒Horizontal Align: Set the preview caption horizontal alignment either left, right, center or justified.

⇒Text Align: Set the text alignment either left, right or center.

⇒Typography: Set the typography options for the preview caption text.

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

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

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

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

⇒Border Radius: And if you want to control the border-radius manually then use this option. Set the border radius for the top, right, bottom and left around the preview caption for different dimensions.

 

Preview Hover Effects

⇒Captions

→Transition: Customize the caption hover effects transition of the preview.

Effect: Add a hover effect to the captions.

⇒Color: Add a custom color to the preview hover effects for both default and hover view.

⇒Background Type: Set the background type either Classic or Gradient for the chart. And then customize the style according to your preference for both default and hover view.

⇒Opacity: Control the opacity for both default and hover mode.

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

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

 

Thumbnails

⇒Alignment: Set the alignment of the image thumbnail either left, right or center.

⇒Vertical Align: Set the thumbnail vertical alignment either left, right, center or justified.

⇒Image Size Ratio: Customize the image size ratio for different dimensions.

⇒Horizontal Spacing: Customize the horizontal spacing manually for different dimensions.

⇒Vertical Spacing: Customize the vertical spacing manually for different dimensions.

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

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

⇒Border Radius: And if you want to control the border-radius manually then use this option. Set the border radius for the top, right, bottom and left around the thumbnail for different dimensions.

 

Thumbnail Captions

⇒Vertical Align: Set the thumbnail caption vertical alignment either left, right or center.

⇒Horizontal Align: Set the thumbnail caption horizontal alignment either left, right, center or justified.

⇒Text Align: Set the text alignment either left, right or center.

⇒Typography: Set the typography options for the thumbnail caption text.

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

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

⇒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 thumbnail caption for different dimensions. You can link the values together or customize them individually.

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

⇒Border Radius: And if you want to control the border-radius manually then use this option. Set the border radius for the top, right, bottom and left around the thumbnail caption for different dimensions.

 

Thumbnails Hover Effects

⇒Images

→Transition: Customize the thumbnails image hover effects transition.

→Background Color: Add a custom background color to the thumbnails hover effects for both default hover and active view.

→Opacity: Control the opacity for both defaults, hover and normal mode.

→Scale: Control the scale of the thumbnail hover effects for both defaults, hover and normal mode.

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

⇒Captions

→Transition: Customize the thumbnails captions hover effects transition.

Effect: Add a hover effect to the captions.

→Color: Add a custom color to the thumbnail captions for both default and hover view.

→Background Color: Add a custom background color to the thumbnails caption hover effects for both default hover and active view.

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

⇒Overlay

→Transition: Customize the thumbnails overlay hover effects transition.

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

→Blend Mode: Select the blend mode for the overlay.

→Margin: Customize the margin of the overlay for different dimensions.

→Opacity: Control the opacity for both defaults, hover and normal mode.

→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 thumbnail overlay for different dimensions. You can link the values together or customize them individually.

→Border Color: Add a custom color to the border for normal 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 Gallery Slider Element.


Was this article helpful to you? Yes No

How can we help?