Post Carousel

The Post Carousel widget allows you to create dynamic carousels showcasing your WordPress posts. With this widget, you can display posts in a sliding manner, complete with images, post titles, excerpts, and “Read More” buttons. It’s an excellent way to highlight blog content, recent articles, or featured posts.

View Live Demo

Content Tab

Layout

  • Content Layout: Choose the layout for the content relative to the image, such as 'Content Under Image'.
  • How many posts?: Specify the total number of posts to display in the carousel, for instance, '10'.
  • Posts per View: Select how many posts should be visible at one time within the carousel view, such as '3'.
  • Slides to Scroll: Determine the number of posts the carousel should scroll at one time, '1' for single-slide scrolling.
  • Media Aspect Ratio: Set the aspect ratio for the media in the carousel; '0.63' is a specific ratio option.
  • Media Position: Choose the position of the media, like 'Center Center' for a centered alignment.
  • Image Resolution: Define the resolution of the images, for example, 'Large - 1024 x 1024'.
  • Block Hover: Select a hover effect for the entire post block, 'None' for no effect.
  • Featured Image Hover: Choose a hover effect for the featured images, 'None' for no effect.
  • Load Effect: Set an effect for when the carousel loads, 'None' for no effect.
  • Author Spotlight: Toggle 'No' to hide the author's information in the carousel.

Settings

  • Transition Duration: Input the time in milliseconds for the transition between slides, such as '500'.
  • Autoplay: Toggle 'No' to disable autoplaying the carousel.
  • Infinite Loop: Set to 'Yes' to enable continuous loop scrolling of the carousel.
  • Overflow Visible: Toggle 'No' to hide overflow content that doesn't fit in the carousel view.
  • Pagination: Choose 'Hide' to not display pagination dots for the carousel.
  • Title HTML Tag: Select the HTML tag for the post titles, 'H3' for heading 3.
  • Meta Position: Specify the position of the meta information, 'After Title' to place it following the title.
  • Elements
    • Featured Image: Toggle 'Show' to display the featured image.
    • Post Title: Toggle 'Show' to make the post titles visible.
    • Date: Set to 'Show' to display the date of the post.
    • Date Type: Select the type of date to display, like 'Published Date'.
    • Date Format: Choose the format for the date, such as 'March 6, 2023'.
    • Author: Toggle 'Show' to include the author's name.
    • Categories: Toggle 'Show' to display post categories.
    • Tags: Toggle 'Show' to display the tags associated with the post.
    • Comments: Toggle 'Show' to display the number of comments.
    • Excerpt: Set to 'Show' to include a post excerpt.
    • CTA Button: Toggle 'Show' to display a call-to-action button.
    • Arrows: Toggle 'Show' to display navigation arrows on the carousel.

Query

  • Is Archive Template: Toggle 'No' if this carousel is not being used as an archive page template.
  • Source: Choose the source of the content, 'Posts' for blog posts.
  • Posts: List specific posts by ID to include them in the carousel.
  • Categories: Enter specific categories to pull posts from those categories.
  • Tags: Specify tags to show posts associated with these tags.
  • Authors: Include posts by specific authors by entering their IDs.
  • Ignore Sticky Posts: Toggle 'Yes' to ignore sticky posts.

Sort & Filter

  • Order By: Select the parameter to sort the posts, such as 'Date'.
  • Order: Choose 'DESC' for descending order.
  • Offset: Input a number to skip over a certain number of posts, '0' for no offset.
  • Excludes: Specify posts to exclude from the carousel, like the 'Current Post'.

Style Tab

Block

  • Parent Padding: Adjust the padding around the carousel container with pixel values for top, right, bottom, and left.
  • Height: Set a specific height for the carousel block in pixels.
  • Space Between: Control the space between individual carousel items; '30' pixels is an example setting.
  • Background Color Type: Choose between a solid or gradient background color.
  • Border:
    • Border Type: Select a border type for the carousel items, like 'Default'.
    • Border Radius: Define the radius for the carousel item borders to control the curvature of corners.
    • Box Shadow: Apply a shadow effect to the carousel items for added depth.

Content

  • Alignment: Choose the alignment of the carousel content (left, center, right).
  • Padding: Adjust the padding inside the carousel items.

Featured Image

  • Image Width: Define the width of featured images as a percentage.
  • Spacing: Control the space around the image with pixel values for top, right, bottom, and left.
  • Alignment: Set the alignment for the featured images within their frames.
  • Opacity: Adjust the opacity of the featured images.
  • Border:
    • Color: Pick a border color for the images.
    • Border Type: Choose a border type like 'Default'.
    • Border Radius: Set the radius for the image borders.

Post Title

  • Max Width: Specify the maximum width of the post titles in pixels.
  • Typography: Customize the typography settings for post titles.
  • Spacing: Adjust the space around the post titles.
  • Alignment: Align the post titles within the carousel items.
  • Color: Choose a color for the post title text.

Meta

  • Typography: Set the typography for the meta information.
  • Meta Divider: Choose a divider character, like '/' to separate meta elements.
  • Divider Spacing: Adjust the space around the meta divider.
  • Spacing: Control the spacing around the meta section.
  • Alignment: Set the alignment for the meta information.
  • Color: Select a color for the meta text.
  • Links Color: Choose a color for the links within the meta section.

Excerpt

  • Excerpt Length: Determine the number of words in the excerpt; '30' is an example.
  • Typography: Customize the typography settings for the excerpt.
  • Spacing: Adjust the space around the excerpt.
  • Alignment: Set the alignment for the excerpt within the carousel item.
  • Color: Choose a color for the excerpt text.

CTA Button

  • Text: Enter the text for the Call-To-Action button, like 'Read More'.
  • Width: Define the width of the button in pixels.
  • Height: Set the height of the button in pixels.
  • Spacing: Adjust the spacing around the button.
  • Alignment: Choose the alignment of the button within the carousel item.
  • Color: Select the color of the button text.
  • Typography: Customize the typography of the button.
  • Background Color Type: Choose between a solid or gradient background for the button.
  • Border:
    • Border Type: Select a border type for the button.
    • Border Radius: Adjust the radius of the button's corners.
    • Box Shadow: Apply a shadow to the button for a 3D look.

Arrows

  • Color: Set the color of the carousel navigation arrows.
  • Background Color: Choose a background color for the arrow buttons.
  • Size: Adjust the size of the arrows.
  • Padding: Set the padding around the arrows.
  • Spacing: Adjust the space between the arrows and the carousel content.
  • Border:
    • Border Type: Choose a border style for the arrows.
    • Border Radius: Define the border radius for the arrows.
    • Box Shadow: Apply a shadow effect to the arrows.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles