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.