1. Home
  2. Docs
  3. Post Elements
  4. Post Carousel

Post Carousel EA Element

Post Carousel EA Element gives you the opportunity to add transition effects on how the Post carousel will appear and make it absolutely breathtaking for your landing page. Here in this tutorial, you’re going to learn how to use the Post Carousel 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 Post Carousel Element

 

»Content

 

Post Carousel

⇒Source: Select the source post type to fetch posts. If you choose a manual selection, you will get further options to choose posts manually. It can be post or page.

⇒Author: Select the name of the author whose post you want to display on the post carousel.

⇒Categories: Select the category whose post/page you want to view.

⇒Tags: To display posts associated with a particular tag.

⇒Include: If you want to display only certain posts, then you can define the include here.

⇒Exclude: If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

⇒Posts Per Page: You can restrict posts per page to display a specific number of posts on a single page. It takes a numeric value which signifies the number of posts to be displayed at a time.

⇒Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)

⇒Order By: Order your post in a certain manner. You can use different options like Date, Title, etc to filter your post.

⇒Order: Sort your post in ascending or descending order based on the criteria selected in Order By option.

 

Layout Settings

⇒Show Image: Show/hide the image from the post. If select Show, customize the image size to fit in the container.

⇒Show Title: Show/hide the title from here.

⇒Show Excerpt: Show/hide the excerpt here. If the ‘Excerpt’ option is enabled, you will able to set the limit of excerpt words and add the expansion indicator.

⇒Show Read More: Show/hide the read more button from the post. If select Show, enter the button text.

⇒Show Meta: Show/hide the meta here. If the ‘Meta’ option is enabled, you will able to change the position of the meta.

 

Carousel Settings

⇒Effect: Set the post carousel effect on your own preference using the options.

: Set how many items you want to display on the carousel.

⇒Items Gap: Customize items gap.

⇒Image Height: Customize the image height for different dimensions.

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

⇒Autoplay: Enable/disable the autoplay of the post carousel.

⇒Autoplay Speed: Set the autoplay speed in the carousel based on ms.

⇒Pause On Hover: Want to pause your carousel on hover? Enable/disable it here.

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

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

⇒Navigation:

→Arrow: Enable/disable the arrow.

→Dots: Enable/disable the dots.

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

 

Post Style

⇒Post Hover Icon: Add an icon to the post in hover.

⇒Post Background Color: Add custom background color to the post.

⇒Hover Style: Add a hover style.

: Add custom color to the post thumbnail overlay.

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

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

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

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

 

Color & Typography

⇒Title Style:

→Title Color: Add a custom color to the post title and customize the opacity.

→Title Hover Color: Add a custom color to the post title and customize the opacity for the hover mode.

→Title Alignment: Customize the title alignment.

→Typography: Set the typography options for the title.

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

 

⇒Excerpt Style:

→Excerpt Color: Add a custom color to the excerpt and customize the opacity.

→Excerpt Alignment: Customize the excerpt alignment.

→Excerpt Typography: Set the typography options for the excerpt.

 

⇒Read More Style:

→Typography: Set the typography options for the read more button texts.

→Read More Color: Add a custom color to the read more button text and customize the opacity for both normal and hover mode.

→Padding: Set the padding value for the top, right, bottom and left around the read more button for different dimensions. You can link the values together or customize them individually.

 

⇒Meta Style:

→Meta Color: Add a custom color to the post meta and customize the opacity.

→Meta Alignment: Customize the meta alignment.

→Meta Typography: Set the typography options for the meta.

 

Arrow

⇒Choose Arrow: Choose the arrow type from the list.

⇒Arrow Size: Customize arrow size manually for different dimensions.

⇒Align Left Arrow: Customize the left arrow alignments.

⇒Align Right Arrow: Customize the right arrow alignments.

⇒Background Color: Add a custom background color to the arrow icons and customize the opacity for both normal and hover view.

⇒Color: Add a custom color to the arrow icons and customize the opacity 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 arrow for different dimensions. You can link the values together or customize them individually.

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

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

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

 

Dots

⇒Position: Set the dot position either inside or outside of the carousel.

⇒Size: Customize dot size manually for different dimensions.

⇒Color: Add a custom color to the dots and customize the opacity for both normal and hover view.

⇒Active Color: Add a custom color to the active dots and customize the opacity 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 dots for different dimensions. You can link the values together or customize them individually.

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

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

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

 


»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 Post Carousel Element.


Was this article helpful to you? Yes No

How can we help?