Gutenberg Post Carousel Block Tutorial

Introduction

Welcome to the ultimate guide on mastering the Gutenberg Post Carousel Block, which was brought to you by Premium Blocks for Gutenberg. This tutorial is your key to unlocking the full potential of carousel layout customization, allowing you to design responsive post sliders that captivate and engage your audience. With carousel customization, you’ll learn how to apply post-carousel styling with ease, ensuring your website stands out. Whether you’re showcasing the latest posts, featured articles, or portfolio items, our guide will equip you with the skills to create visually stunning and responsive carousels that adapt seamlessly to any device.

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Post Carousel Block?

  • Start by opening the Gutenberg editor in your WordPress dashboard.
  • Choose the Premium Post Carousel Block from the block list.
  • Post Carousel Variations: Choose from different layout styles to best fit your website’s design.
  • Customize the Carousel with the available settings to customize the number of columns, number of posts per page, and other carousel settings.
Gutenberg post carousel block four different variations.
Gutenberg Post Carousel Block – Variations

General Settings

  • Number of Columns: Adjust the number of columns to display in the carousel.
  • Number of Posts Per Page: Set how many posts should be displayed on each page. This number should be equal to or greater than the number of columns to ensure everything works properly.
  • Equal Height: Toggle to ensure all carousel items have the same height.
Gutenberg post carousel block general settings.
Gutenberg Post Carousel Block – General Settings

Query

  • Post Type: Select the type of posts to display.
  • Categories Filter Rule: Choose how to filter posts by categories.
  • Categories Filter: Select specific categories to include.
  • Author Filter Rule: Choose how to filter posts by author.
  • Author Filter: Select specific authors to include.
  • Post Filter Rule: Choose how to filter posts by specific criteria.
  • Post Filter: Select specific posts to exclude.
  • Order By: Choose how to order your posts, such as newest to oldest.
  • Ignore Sticky Posts: Toggle to ignore sticky posts.
  • Offset: Exclude a number of initial posts from being displayed.
  • Exclude Current Post: Toggle to exclude the current post from the carousel.
  • If Post is not displayed, add the display message you wish to be previewed.
Gutenberg Post Carousel Block set the query options.
Gutenberg Post Carousel Block – Query Options

Carousel

  • Pause On Hover: Toggle to pause the carousel when the user hovers over it.
  • Auto Play: Toggle to automatically play the carousel.
  • Autoplay Speed: Adjust the speed of the autoplay.
  • Infinite Loop: Toggle for an infinite loop of the carousel.
  • Slides To Scroll: Set how many slides to scroll at a time.
  • Navigation Dots: Toggle to show navigation dots.
  • Navigation Arrows: Toggle to show navigation arrows.
  • Arrows Position: Adjust the position of the arrows.
Gutenberg post carousel block carousel options.
Gutenberg Post Carousel Block – Carousel Options

Featured Image

  • Show Feature Image: Toggle to show or hide the feature image.
  • Hover Effect: Choose a hover effect for the images.
  • Image Size: Select the size of the images.
  • Height: Adjust the height of the images.
  • Thumbnail Fit: Choose how the thumbnail images fit.
  • Shape Divider: Select a shape divider for the images.
Gutenberg post carousel block featured image settings.
Gutenberg Post Carousel Block – Featured Image Settings

Display Options

  • Title HTML Tag: Choose the HTML tag for the title.
  • Column Spacing: Adjust the spacing between columns.
  • Row Spacing: Adjust the spacing between rows.
  • Alignment: Choose the alignment for the content.
Gutenberg post carousel block display options.
Gutenberg Post Carousel Block – Display Options

Post Options

  • Show Author: Toggle to show or hide the author.
  • Show Date: Toggle to show or hide the date.
  • Show Category: Toggle to show or hide the category.
  • Show Comments: Toggle to show or hide the comments.
  • Open Links in New Tab: Toggle to open links in a new tab.
  • Separator: Choose a separator style for the posts.
Gutenberg post carousel block post options.
Gutenberg Post Carousel Block – Post Options

Post Content

  • Show Post Content: Toggle to show or hide the post content.
  • Get Content From: Choose where to get the content from.
  • Excerpt Length: Adjust the length of the excerpt.
  • Show Button Link: Toggle to show or hide the button link.
gutenberg post carousel block post content controllers.
Gutenberg Post Carousel Block – Post Content Controllers

Styling Controllers

Title Style

  • Typography: Customize the font, size, and style of the title text.
  • Color: Set the color for the title text.
  • Hover Color: Set the hover color for the title text.
  • Bottom Spacing: Adjust the spacing below the title.
Gutenberg post carousel title style controllers.
Gutenberg Post Carousel Block – Title Style

Image Style

  • Overlay Color: Choose an overlay color for the images.
  • CSS Filters: Apply CSS filters to the images for additional styling.
Gutenberg post carousel block image styles.
Gutenberg Post Carousel Block – Image Style

Meta Style

  • Typography: Customize the font, size, and style of the meta text.
  • Metadata Color: Set the color for the metadata text.
  • Links Hover Color: Set the hover color for the links.
  • Separator Color: Choose the color for the separator.
Gutenberg post carousel meta controllers.
Gutenberg Post Carousel Block – Meta Style

Content Box Style

  • Typography: Customize the font, size, and style of the content box text.
  • Color: Set the color for the content box text.
  • Text Margin: Adjust the margin around the text in the content box.
  • Background Color: Choose a background color for the content box.
  • Box Shadow: Add a shadow effect to the content box.
  • Padding and Margin: Set if for the content box.
Gutenberg post carousel block content box styles.
Gutenberg Post Carousel Block – Content Box Style

Box Style

  • Background Color: Choose a background color for the box.
  • Border: Customize the border style, width, and color.
  • Border Radius: Adjust the border radius to round the corners.
  • Box Shadow: Add a shadow effect to the box.
  • Padding and Margin: Set if for the box.
Gutenberg post carousel block box styles.
Gutenberg Post Carousel Block – Box Style

Carousel Dots Style

  • Color: Set the color for the carousel dots.
  • Active Color: Choose the color for the active dot.
  • Margin: Adjust the margin around the carousel dots.
Gutenberg post carousel block carousel dots style.
Gutenberg Post Carousel Block – Carousel Dots Style

Carousel Arrows Style

  • Color: Set the color for the carousel arrows.
  • Size: Adjust the size of the arrows.
  • Background Color: Choose a background color for the arrows.
  • Border Radius: Adjust the border radius of the arrows.
  • Padding: Set the padding around the arrows.
Gutenberg post carousel block carousel arrows styles.
Gutenberg Post Carousel Block – Carousel Arrows Style

Need Further Help?

Have a question or need assistance? Premium Blocks dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Join Our Newsletter

Subscribe to our newsletter and be the first to know our latest updates!

Copyright © 2026 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks