Use the Glider widget to add Slider or Slideshow

The Glider is a slider creating widget for the Elementor Builder. It is easy to use and flexible widget that can make your site more engaging and interactive. Clear settings allow you to configure the slider and get the desired result in a short time.

For further work, you need the Elementor to be installed on your site. You can download from wordpress.org

Open or create a page using Elementor to start using the Glider Elementor widget. You will find the widget at the end of the general section.

Glider Elementor widget

Drag it into the editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content tab of the Glider Elementor widget, you can manage the general slider settings and each slide content.

Skin

The slider supports two types of display with personal settings.

When choosing the Overlay skin, such options are available:

  • Content Position – choose one of 9 positions to place title text or custom content on each of the slides.
  • Background Type – this setting changes the background for each of the slides. You can choose a color, gradient, or background image.
Background Type of the Overlay skin

When choosing the Cards skin, such option is available:

  • Image Position – select the image display position for each of the slides.
Add item button

The button adds slides for the slider, where you can insert images, text or other custom content for each of the slides.

The slide settings of the Glider
  • Choose Image – select image for the current slide.
  • Image Size – select one of the predefined image sizes or specify your custom size.
  • Content – select which content you want to display on the current slide except the image. It can be Attachment Details, Title or Custom Content. Select None to hide the content and display only the image.
  • Link – add a link for the current slide or leave the field blank.
Random Order

The toggle to enable/disable random order of slides in the slider.

Style tab

On the styles tab of Glider widget, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.

Card Section

The section settings are available only if the Card Skin is selected in the Content tab. You can manage the background, border types and Border Radius of the cards.

  • Background Type – this setting changes the background for all cards. Choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – the option allows you to adjust the border radius for all cards of the slider.
  • Box Shadow – this setting creates a shadow for the cards and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Title Section

There are many options in the section to change the style of the title and create your own design. Apply if the Title in the Сontent field is selected in the slide settings.

Color

Specify the font color and opacity for the text of the current block using the color picker.

Font color settings of the Title

Typography

This group of settings controls everything about typography: font-size, font-weight, and other parameters.

Typography settings
Typography settings of the Title

Text shadow

This setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Text shadow settings of the title text

Margin

This setting allows managing the margin of the title block in different units(px, em, %) for desktop, tablets or phones.

Margin settings of the title text

Padding

This setting allows managing the padding of the title block in different units(px, em, %) for desktop, tablets or phones.

Padding settings of the title text

Background Type

This setting changes the background of the title block. You can choose a color, gradient, or background image.

Border Type

Select one of the available border types (solid, double, dotted, dashed, groove) for the current title block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.

Title border types of the title block

Content Section

There are many options in the section to change the style of the content and create your own design. Apply if the Custom Content in the Сontent field is selected in the slide settings.

  • Color – specify the font color and opacity for the content using the color picker.
  • Typography – the group of settings controls everything about typography: font-size, font-weight, and other parameters.
  • Text shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Margin – the setting allows managing the margin of the content in different units(px, em, %) for desktop, tablets or phones.
  • Padding – this setting allows managing the padding of the content in different units(px, em, %) for desktop, tablets or phones.
  • Background Type – the setting changes the background of the content. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current title block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.

Columns Section

The settings allow you to adjust the adaptability of the slider for different devices.

  • Gutter – select spacing for the items of the slider.
  • Phone Portrait – select the number of slides to displayed per screen for phones
  • Phone Landscape – select the number of slides to displayed per screen for phones. Affects device widths of 640px and larger.
  • Tablet – select the number of slides to display per screen for tablets. Affects device widths of 960px and larger.
  • Desktop – select the number of slides to display per screen for desktop. Affects device widths of 1200px and larger.
  • Large Screens – select the number of slides to displayed per screen for large screens. Affects device widths of 1600px and larger.

Navigation Section

The settings allow adjust the type of navigation of the slider and select a display location.

Slidenav Options

Defines navigation with previous and next buttons to flip through items.

  • Slidenav – select where the navigation arrows will be displayed. Set “None” to hide the navigation
  • Always Shown – the toggle to control the display of navigation arrows. When the option is disabled, the navigation will be displayed only when hovering.
  • Size – specify the size of the navigation arrows
  • Color – specify the color of the navigation

Dotnav Options

Create dot navigation to operate items or to scroll to a different set.

  • Dotnav – select where the dot navigation will be displayed. Set “None” to hide the navigation
  • Size – specify the size of the dot navigation
  • Color – specify the color of the dot navigation

Height Section

The setting allows selecting the way to set the height of the slider. There are 3 options available: Auto, Viewport, Custom. The height will adapt automatically based on its content. Alternatively, the height can adapt to the height of the viewport.

Animations Section

  • Slide Sets – enable to loop through a set of slides instead of single items.
  • Infinite – when the option is enabled, items are looped and you can scroll endlessly.
  • Center – when the option is enabled, the active item is centered.
  • Autoplay – enable automatic item switching.

Advanced Tab

The settings in the advanced tab Glider Elementor widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.