Gutenberg Post Carousel Block Tutorial

Intro

Welcome to the ultimate guide on mastering the Gutenberg Post Carousel Block, 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 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.

You can just click on the editor element to select Gutenberg Post Carousel Block settings

Requirements:

• You will need Premium Blocks free plugin installed and activated on your website.
• Also, make sure that this Block is enabled in Premium Blocks Settings.

Key Features 

• General
• Carousel
• Featured Image
• Title
• Post Options
• Post Content

General Settings

• Content Offset: Set the offset of the content. Available only for Modern Variation.
• Number of Columns: Select how many columns per row.
• Posts Per Page: Select how many posts to show per page.
• Equal Height: Enable this option to make all posts the same height.
• Post Type: Select the source of the posts, you can select a custom post type.
• Categories Filter Rule: Show the posts that match specific categories or exclude them.
• Filter By Author Rule: Show the posts that match specific authors or exclude them.
• Filter By Post Rule: Select posts to show or exclude them.
• Order By: You can choose to order the blog posts by the following attributes:
  • None
  • ID
  • Author
  • Title
  • Name
  • Date
  • Last Modified
  • Random
  • Number of Comment
• Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
• Offset: Exclude a number of initial posts from being display.
• Exclude Current Post: Remove the current post from the query.

Gutenberg Post Carousel Block Carousel Settings

• Pause On Hover: enable or disable pause on hover
• Auto Play: Enable or disable autoplay.
  • Autoplay Speed: set the autoplay speed for the carousel in ms.
• Infinite Loop: enable or disable infinite loop
• Slides To Scroll: Set how many slides to show in one scroll.
• Center Mode: Enables a centered view for one of the slides with partial next/previous slides. 
• Slides’ Spacing: set a spacing value in pixels [when Center Mode is enabled], so you can set how much partial view from the next/previous slides should appear.
• Navigation Dots: Enable the navigation dots for the carousel.
• Navigation Arrows: Enable the navigation arrows for the carousel.

Gutenberg Post Carousel Featured Image Settings

• Show Featured Image: Show or hide the featured image for the posts.
• Image Size: Set the featured image sizes.
• Hover Effect: Set a hover effect for the featured image:
  • None
  • Zoom In
  • Zoom Out
  • Scale
  • Grayscale
  • Blur
  • Bright
  • Sepia
  • Translate
• Height: Select the height of the featured images.
• Thumbnail Fit: Select between cover, fill and contain.
• Shape Divider: Graphic shapes that separate between post blog featured image and post blog content.

Gutenberg Post Carousel Display Options

• Title HTML Tag: Select the HTML tag used for the post title. Choose from H1 to H6.
• Show Author Image: Show/hide author image in cards Variation.
• Author Image Position: Set image position vertically.
• Rows Spacing: Adjust the spacing between the rows in pixels, % or em.
• Columns Spacing: Adjust the spacing between the columns in pixels.
• Alignment: Optionally align the text of the blog posts to the left, right, or center.

Gutenberg Post Carousel Post Options

• Show Author Name: Show/hide author name.
• Show Date Meta: Show/hide author name.
• Show Category Meta: Show/hide author name.
• Show Comments Meta: Show/hide author name.
• Links in New Tab: Open post, author, category links in the new tab.

Gutenberg Post Carousel Post Content

• Show Post Content: Enable to show the post’s content.
• Get Content From: Select from where to display the post content, Post Excerpt or Post Content.
• Excerpt Length: Excerpt is used for the article summary with a link to the whole entry. The default excerpt length is 22.
• Excerpt Type:
  • Dots: 3 Dots (ellipsis) will be displayed after the text.
  • Link: If you select Link, a link to the full post will be added after the text, and you can also change the link text. Also, select the width of the button.

Post Carousel Styling

In the Style tab, you will be able to customize your Block the way you want, to make it match and fit your needs.

• Title Style
• Image Style
• Metadata Style
• Content Box
• Button Style
• Box
• Carousel Dots
• Carousel Arrows

Title Style for Post Carousel Gutenberg Block

• Typography
• Color: Select the color of the post title.
• Hover Color: Select the color of the post title when the user hovers over it.
• Bottom Spacing: Set the space below the title in Pixel (px), Em (em), or Percentage (%).

Image Style for Post Carousel Gutenberg Block

• Plus Sign Color: Set a color for the plus sign when hovering on the images.
• CSS Filters: You can also customize the images further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation and Hue.
• Hover CSS Filters: You can also customize the images further by selecting one of the available on hover filters: Blur, Brightness, Contrast, Saturation and Hue.
• Shape Divider
  • Color: Pick a color for shape divider.
  • Height: Set shape divider height in px, em
  • width: Set shape divider width in px,em ,%

Categories Style for Post Carousel Gutenberg Block

Available only with Banner Variation

• Typography
• Categories: Style categories labels.
  • Color: Pick a color for category text.
  • Hover Color: Set a color for category text on hover state.
  • Background Color: Pick a color for category label background.
  • Hover Background Color: Set a color for category label background on hover state.
  • Border Type: Set a border type for category label.
  • Width: Set border width for category label.
  • Color: Pick a color for category label border.
  • Border Radius: Set the border radius for category label border.
• Margin: Creates a space around the categories labels .
• Padding: Creates space around the categories labels .
• Meta Style for Post Carousel Gutenberg Block
• Typography.
• Text Color: Select the text color for the content.
• Text Margin: Creates a space around the contect . You can set the margin in Pixel (PX), Em (em), or Percentage (%).

Content Box Style for Post Carousel Gutenberg Block

• Typography.
• Text Color: Select the text color for the content.
• Text Margin: Creates a space around the contect box in Post Carousel Block , outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Background Color: Select a background color and its opacity.
• Box Shadow: Add a box shadow around the post content.
• Margin: Creates a space around the content box in Post Carousel Block, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the content box in Post Carousel Block, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Button Style for Post Carousel Gutenberg Block

• Typography.
• Spacing: Set the space between the button and the content.
• Color: Select the color of the read more text.
• Background Color: Select the background color of the read more text.
• Hover Color: Select the color of the text when the user hovers over the link.
• Background Color: Select the background color of the text when the user hovers over the link.
• Border Type: Set a border type for button. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Margin: Creates a space around the button in Post Carousel Block, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the filter button in Post Carousel Block, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Box Style for Post Carousel Gutenberg Block

• Background Color: Select the post box background color.
• Border Type: Set a border type for the box. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Advanced Border Radius: Apply custom radius values for Post Carousel Block box. Get the radius value from here.
• Border Radius: Insert border radius values.
• Spacing: Creates a space around the box in Post Carousel Block , outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Padding: Creates space around the box in Post Carousel Block , inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Carousel Dots Style for Post Carousel Gutenberg Block

• Color: Select the color of the Dots.
• Active Color: Select the color of the active Dot.

Carousel Arrow Style for Post Carousel Gutenberg Block

• Color: Select the color of the arrows.
• Size: Set the arrow size in Pixel (px).
• Background Color: Select the arrow background color.
• Border Radius: Set the border radius for the arrow.
• Padding: Creates space around the arrow in Post Carousel Block, inside of any defined borders. You can set the Padding in Pixel (PX).