1. Home
  2. Docs
  3. Post Elements
  4. Card Slider

Card Slider EA Element

The EA Card Slider widget lets you create beautiful Content Sliders on your WordPress website built with Elementor Builder. This element can be used to display featured posts, announcements, latest posts, etc without touching a single line of code. The Card Slider widget can display your website’s posts as well as custom content and you can alter them easily with the Elementor Page Builder for WordPress. Here in this tutorial, you’re going to learn how to use the Card 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 Card Slider Element

 

»Content

 

Content

⇒Source: Select the source you want to get the content of the card slider from. You can either choose from the posts or add your custom content.

If you select the source as Post, then customize the following items:

      • Posts Count
      • Link Type
      • Date
      • Date Icon

And If you select the source as Custom, then customize the following items:

      • Link Type
      • Date
      • Date Icon
      • Add Content
      • Add Image

 

Additional Options

⇒Slider Speed: Set the slider speed, duration of transition between slides (in ms)

⇒Autoplay: Enable/disable the autoplay of slider.

⇒Autoplay Speed: Set the autoplay speed.

⇒infinite Loop: Enable/disable the infinite loop of the slider.

⇒Grab Cursor: Show/hide grab cursor when you hover over the slider

⇒Navigation:

→Pagination: Enable/disable the pagination.

→Pagination Type: Select the type of pagination.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.


»Style

 

Card

⇒Max Width: Set the max-width of the card for different dimensions.

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

⇒Padding: Padding is the space between the edge of the card and the content inside it. Adjust the padding using pixels, em or %.

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

⇒Background Color: Add a custom background color to the card for both normal and 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 card 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 view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the card 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.

⇒Title:

→Text Color: Select text color and opacity for the title.

→Typography: Set the typography options for the title.

→Spacing: Customize the spacing between title and content.

⇒Date:

→Color: Select color and opacity for the date.

→Typography: Set the typography options for the date.

→Spacing: Customize the spacing between date and title.

⇒Content:

→Color: Select color and opacity for the content.

→Typography: Set the typography options for the content.

 

 

Image

⇒Direction: Set the image direction either left or right

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

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

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the image. You can adjust the border-radius in pixels, % or em.

⇒Max Width: Set the max-width of the image for different dimensions.

⇒Height: Set the height of the image for different dimensions.

⇒Margin: Margin is the space between the image and the container. Adjust the margins for all sides or individually using pixels, em or %.

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

⇒Overlay:

→Background Type: Select a background type for the image overlay. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library.

 


»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 Card Slider Element.


Was this article helpful to you? Yes No

How can we help?