Post Carousel – Responsive Blocks

Post Carousel provides options to showcase custom post types with carousel layout. It provides an option to select available post types – posts, pages, media, or any CPT you have.

How To Add The Post Carousel Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Post Carousel or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get the below design-

How To Configure The Post Carousel Block #

To configure the content of your Post Carousel, switch to the ‘Content’ tab.

General #

• Equal Height: Enable this option to make all posts have equal height.
• Featured Image: Choose to display the featured image in the carousel or not.
• Post Title: Hide or Display the post title.
• Post Author: Hide or Display the name of the author of the post.
• Post Date: Hide or Display the published date of the post.
• Post Comments: Hide or Display the comments of the post.
• Post Taxonomy: Hide or Display the taxonomy of the post.
• Post Excerpt: Hide or Display the excerpt of the post. If you choose to display the excerpt, a slider will appear for you to select the excerpt length for the post.
• Post Link: Hide or Display the link of the post.
• Excerpt Length: Set length of the post excerpt.
• Columns: Responsive options for the number of columns to display for the grid.
• Order by: This option allows you to order posts according to date or alphabetically dependent on the title.
• Category: This control allows you to choose posts according to categories or tags.
• Number of items: This control allows you to choose the number of posts to show.

Carousel #

Carousel tab offer options to customize the post slider. The options are –

• Pause On Hover
• Autoplay
• Autoplay speed
• Infinite Loop
• Transition Speed (ms)
• Show Arrows & Dots
• Arrow Size
• Arrow Border Size
• Arrow Border Radius

Image Settings #

• Size: Select a size for the image as full or thumbnail.
• Image Position: Select the position of the featured image as top or background.
• Opacity: Select the opacity for the image.

CTA Settings #

Under this tab, you will get the option to edit the continue reading text.

• Open link in a new tab: You can choose whether to open the link in a new tab.
• Horizontal Padding: Set the left and right padding for CTA from here.
• Vertical Padding: Set the top and bottom padding for CTA from here.

Border Settings #

• Border Style: You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
• Border Width: Set a width for the border from here.
• Border Radius: You can give border-radius to the button from here.
• Border Color: Select a color for the border from here.Color Settings Under the Colors tab, normal and hover color options are available for Text, Border, and Background for the CTA button.
• Color Settings: Under the Colors tab, normal and hover color options are available for Text, Border, and Background for the CTA button.

How To Style The Post Carousel Block #

Switch to the ‘Style’ tab to customize every element of the Post Carousel block.

Typography #

Under the Typography tab, options for font size, font–weight, color, and line-height are available for Title, Meta, Excerpt, and CTA.

You can now set a responsive font size of Title for Mobile and Tablet view.

Spacing #

Under the Spacing tab, options are available for Content Padding, Gap between Content & Dots, Column Gap, Title Top Margin, and Bottom Margin for Title, Meta, Excerpt & CTA.

Color Settings #

Under the Colors tab, color options are available for Blog Post Background, Title, Text, Content, Author, Date, and Arrow & Dots.