Use the Glider widget to add Slider or Slideshow

The Glider(called “Carousel” in the Selection pack) 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 and drag the widget to a page using the Elementor 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

Alignment

Specify the title alignment for different devices: desktops, tablets, mobiles.

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.
  • Content Alignment – specify the content alignment for different devices: desktops, tablets, mobiles.
  • 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
  • Previous Icon – select the previous icon from the library or upload your own SVG icon.
  • Next Icon – select the next icon from the library or upload your own SVG icon.
  • Always Shown – the toggle to control the display of navigation arrows. When the option is disabled, the navigation will be displayed only when hovering.
  • Translate X – specify the translation of the icons along the X-axis. Set values for both X and Y-axes to see the result.
  • Translate Y – specify the translation of the icons along the Y-axis. Set values for both X and Y-axes to see the result.
  • Size – specify the size of the navigation arrows
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Margin – the setting allows managing the margin of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER

The navigation arrow style settings for different states.

  • Color – specify the color of the navigation
  • Background Type – the setting changes the background of the nav box. 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 nav box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

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
  • Translate X – specify the translation of the dot nav along the X-axis. Set values for both X and Y-axes to see the result.
  • Translate Y – specify the translation of the dot nav along the Y-axis. Set values for both X and Y-axes to see the result.
  • Size – specify the size of the dot navigation
  • Border width – specify the border width of the dot navigation for different devices: desktops, tablets, mobiles.
NORMAL/HOVER

The navigation dots style settings for different states.

  • Color – specify the color of the navigation
  • Border Radius – specify the border radius of the dots in different units: px, %.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

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.

Was this article helpful to you?