Post Grid Carousel
The Post Grid/Carousel Block is a versatile layout engine designed to showcase your content in either a structured, multi-column grid or a fluid, interactive slider. Because this block is built by nesting the native WordPress Query Loop and Post Template blocks, it offers unparalleled flexibility—allowing you to drag and drop standard Gutenberg blocks (like Post Title, Featured Image, or Post Excerpt) directly into your custom-designed grid or carousel.
Settings ⚙
General
- Layout: Select the primary architectural framework for your content:
- Grid: Arranges your posts in a traditional, multi-column format. This is ideal for main archive pages or category sections where you want to show a large volume of content in a stable, organized “wall” of articles.
- Carousel: Transforms the grid into a fluid, horizontal slider. This is perfect for hero sections or sidebars where space is limited, allowing users to swipe or click through featured stories without occupying excessive vertical screen real estate.
- Grid-Specific Controls: When the Grid layout is active, you gain access to fine-tuned structural settings:
- Display Column: Define exactly how many post templates appear side-by-side. You can set different column counts for desktop, tablet, and mobile to ensure your grid remains responsive.
- Column Gap: Use this slider to set the precise horizontal spacing between your post cards, preventing your content from feeling cramped.
- Enable Masonry: Activate this toggle to create a dynamic, “Pinterest-style” layout. Instead of forcing posts into rigid rows, the Masonry effect allows cards of varying heights to tuck into the available space below them, creating a visually engaging and modern flow for your articles.
Slider Settings
The Slider Settings panel provides the core configuration for your Carousel layout, allowing you to define how your posts move, transition, and respond to user interaction. Because this block nests the WordPress Query Loop and Post Templates, these settings control how those individual post cards are sequenced in the slider.
- Slides Per View: Define how many popular posts are visible at once. You can show a single featured story or a dense row of trending topics.
- Centered Slides: When enabled, the active post will stay perfectly centered in the viewport. This is particularly effective for “Showcase” layouts where you want the primary content to be flanked by partially visible neighboring posts.
- Gap: Adjust the padding between each post card or headline to ensure the layout remains legible and professional.
- Autoplay & Autoplay Delay: Enable Autoplay to let the content move automatically. Use the Delay setting to determine how many seconds each post stays on screen before transitioning.
- Loop: Activate this to create an infinite scroll, ensuring that once the last “most-viewed” post is reached, the animation seamlessly restarts from the top.
- Reverse Direction: Toggle this to change the flow of the animation, moving your posts from left-to-right instead of the standard right-to-left.
- Speed (ms): Fine-tune the duration of the transition animation itself. A higher millisecond value creates a smoother, slower glide between posts.
- Enable Navigation & Pagination: Add manual “Next/Previous” arrows or pagination dots to the Carousel, giving users full control over their browsing.
- Display on Hover: A critical user-experience toggle that pauses the animation whenever a reader mouses over a specific post, allowing them time to read the headline or click the link.
Style ◑
Pagination Styles
The Pagination Styles settings is active when layout is Carousel and Pagination is enabled, this allow you to refine the appearance and interactive behavior of the navigation indicators (dots or numbers) for your Carousel. These controls ensure the pagination is both functional and visually aligned with your brand’s UI.
- Vertical Positioning: Fine-tune the vertical offset to control how far the pagination sits below the carousel content.
- Gap: Adjust the specific spacing between each individual pagination dot to ensure they are distinct and easy to click.
- Align: Set the horizontal placement of the indicators. Toggle between Left, Center, or Right to balance the layout against your team member cards.
- Default / Active (Toggle)
- Default:
- Width & Height: Define the base size of the inactive indicators.
- Border Radius: Control the shape, from sharp squares to perfect circles.
- Active:
- Width & Height: Increase these values to make the active slide indicator physically larger or longer (e.g., a “pill” shape) for better visibility.
- Border & Border Offset: Add an outline to the active dot and use the offset to create a “halo” effect (spacing between the dot and its border).
- Border Radius: Independently adjust the curvature of the active indicator.
- Default:
- Color:
- Default: The color of inactive indicators.
- Default Hover: The color shift when a user moves their cursor over an inactive dot.
- Active: The primary color for the dot representing the current slide.
- Active Default: The color of the active dot when hovered.
- Active Border: The specific color of the stroke surrounding the active indicator.
Navigation Styles
- Icon Size: Independently scale the arrow icon within its box. You can create a “minimalist small arrow in a large box” or a “bold arrow that fills the frame.”
- Box Width & Height: Define the clickable area surrounding the navigation arrows. Creating a larger box ensures your gallery is touch-friendly and easy to navigate on mobile devices.
- Border: Add a structural outline to your navigation boxes. This is ideal for “Ghost Button” styles where the background is transparent.
- Border Radius: Use the slider to transition from sharp, modern squares to soft, classic circles.
- Color
- Icon & Icon Hover: Set the color of the arrow itself. Providing a high-contrast hover color gives the user immediate tactile feedback.
- Background & Background Hover: Control the fill color of the navigation box.