Download Plugin

Gutenberg Post Carousel Block Tutorial

Table Of Content

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.

Visit Demo Page
Free Download

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

  • Columns: Adjust the number of columns to display in the carousel.
  • 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: Select specific categories to include.
  • Authors – Filter Rule: Choose how to filter posts by author.
  • Authors: Select specific authors to include.
  • Posts – Filter Rule: Choose how to filter posts by specific criteria.
  • Posts: 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.
  • No Posts Message: If a Post is not displayed, add the display message you want to preview.
Gutenberg Post Carousel Block set the query options.
Gutenberg Post Carousel Block – Query Options

Carousel

  • Auto Play: Toggle to automatically play the carousel.
  • Autoplay Speed: Adjust the speed of the autoplay.
  • Pause On Hover: Toggle to pause the carousel when the user hovers over it.
  • Navigation Arrows: Toggle to show navigation arrows.
  • Navigation Dots: Toggle to show navigation dots.
  • Infinite Loop: Toggle for an infinite loop of the carousel.
  • Slides To Scroll: Set how many slides to scroll at a time.
  • Slides’ Spacing: Adjust the space between the slides.
  • Fixed Width Slide: Toggle to add a fixed width for the slide.
  • Slide Width: Set the slide width.
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.
  • Image Size: Select the size of the images.
  • Hover Effect: Choose a hover effect for 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.
  • Alignment: Choose the alignment for the content.
Gutenberg post carousel block display options.
Gutenberg Post Carousel Block – Display Options

Post Options

  • Show Title: Toggle to show or hide the title.
  • Show Author: Toggle to show or hide the author.
  • Show Date: Toggle to show or hide the date.
  • Show Comments: Toggle to show or hide the comments.
  • Meta Taxonomies: Select the meta taxonomies.
  • 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.
  • Read More Text: Input field to add text that appears when the button link is enabled.
  • Full Width: Toggle to make the button link full-width.
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 in normal and hover states.
  • CSS Filters: Apply CSS filters to the images for additional styling in normal and hover states.
Gutenberg post carousel block image styles.
Gutenberg Post Carousel Block – Image Style

Meta

  • 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

  • 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 the spacing for the content box.
Gutenberg post carousel block content box styles.
Gutenberg Post Carousel Block – Content Box Style

Button

  • Typography: Customize the font, size, and style of the button.
  • Button Spacing: Adjust the spacing for the button.
  • Color: Set the color for the button in the normal and hover states.
  • Background Color: Choose a background color for the button in the normal and hover states.
  • Border: Customize the border style, width, and color in the normal and hover states.
  • Border Radius: Adjust the border radius to round the corners.
  • Padding: Set the padding around the button.

Box

  • 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 the spacing for the box.
Gutenberg post carousel block box styles.
Gutenberg Post Carousel Block – Box Style

Carousel Dots

  • 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

  • Arrows Size: Adjust the size of the arrows.
  • Arrows Position: Adjust the position of the arrows.
  • Color: Set the color for the carousel 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.

Contact Support
Facebook Group
About Leap13

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

Help Center
Global Features
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