Documentation

Documentation

Documentation

Subscribe

Looking for Something?

Post Blocks (28)

Box with two dummy images and text

Trending Post

The Trending Post Block is a time-sensitive engagement engine designed to showcase your most viral content. While similar to the Popular Post block, it adds a critical Time-Decay Filter: it specifically tracks and ranks posts based on the highest number of views received within the last 7 days.

By placing the most-viewed post of the week at the top of the list, this block creates a “Heat Map” of what your audience is currently discussing, making it perfect for sidebars, news hubs, or “Breaking” sections.

Settings ⚙

General

  • Display: Choose the architectural style that best suits your layout:
    • Grid: Arranges trending posts in a structured multi-column format.
    • Carousel: Displays posts in a sliding horizontal row to save vertical space.
    • List: Creates a clean, vertical stack of articles, perfect for sidebars.
    • Ticker: Rotates through the most-viewed headlines in a compact, vertical scrolling bar.
  • Column: When using the Grid or Carousel display, use this setting to define how many trending posts appear side-by-side. This helps you balance the density of your content across different screen sizes.
  • Column Gap: Fine-tune the horizontal spacing between your post cards or list items to ensure the layout feels open and legible.
  • Enable Ajax Loader: Toggle this option to allow users to load more of your top-performing content dynamically. When activated, readers can browse further into your all-time most-viewed list without a full page refresh, keeping them engaged with your site’s “greatest hits” for longer.

Post Options

The Post Options panel provides a comprehensive set of toggles to control the visibility and interactivity of your featured content. Each individual element includes an additional nested toggle to link to the post and a secondary option to open the link in a new tab, giving you full control over the user’s navigation experience.

  • Post Per Page: Define exactly how many of your all-time most-viewed articles should be visible in the block at once. This helps you manage the length of your sidebar or “Trending Now” grid.
  • Post Image: Toggle the visibility of the article’s featured image to create a strong visual focal point.
  • Post Categories: Display the category labels to help readers quickly identify the topic of the post.
  • Metadata Controls: Choose to show or hide the Post Author, Post Comments, and Post Date to keep your layout as clean or as detailed as needed.
    • Meta Icon: Enable this to add visual icons (like a clock or user silhouette) next to your post metadata for improved scannability.
  • Post Content: Toggle the article preview text. When enabled, you can use the Post Excerpt slider to define the exact word count for the snippet.
  • Read More: Add a clear call-to-action link at the end of your content, inviting readers to dive into the full story.

Carousel/Ticker Options

The Carousel and Ticker Options panels provide the interactive engine for your trending posts, transforming a static list into a fluid, motion-driven experience. While both sharing a similar technical foundation, the Carousel is designed for horizontal exploration, while the Ticker focuses on high-impact vertical or sequential headlines.

  • Slides Per View: Define how many trending posts are visible at once. You can show a single featured story or a dense row of trending topics.
  • Space Between Slides / 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.
  • 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.
  • Carousel Effects
    • Slide & Fade: Classic transitions for a clean, modern look.
    • Coverflow & Cards: Dynamic 3D-style transitions that add depth and a “stacking” visual to your trending list.
    • Cube: A high-engagement effect where posts rotate as if they are on the faces of a 3D cube.

Ajax Loader Options

The Ajax Loader Options panel allows you to define how your block handles additional content. By enabling these settings, you can provide a seamless browsing experience that allows readers to discover more posts without the interruption of a full page refresh.

Note: This Panel is enabled only when the Display is set to either Grid or List on the General Panel.

  • Loader Type: Choose the interaction method for loading new content:
    • Button: Displays a clickable “Load More” button at the bottom of the block. This gives users manual control over when more posts appear.
    • Scroll: Activates “Infinite Scroll,” where new posts automatically load and append to the grid as the user reaches the bottom of the current list.
  • Load More Content: Define exactly how many additional posts should be fetched in each loading cycle. This helps you manage site performance and page length by controlling the “batch size” of incoming data.
  • Button Label: Customize the text displayed on your loader button (e.g., “Load More,” “Discover More,” or “View Older Posts”) to match your site’s tone of voice.
  • Alignment: Position the loader button to align with your overall design. You can choose to place it on the Left, Center, or Right of the content container.
  • Loading Text: Set the temporary message that appears while the block is actively fetching new data (e.g., “Loading…” or “Fetching stories”). This provides essential visual feedback to the user, ensuring they know the site is responding to their request.

Style ◑

Post Box Style

The Post Box Style panel allows you to design the container for each trending post, providing the structural and visual boundaries that separate your most-viewed content from the rest of the page. These settings are key to creating a uniform, professional “card” look for your trending articles.

  • Padding: Adjust the internal spacing within the header container. Increasing the padding creates more room around the text and tabs, preventing them from feeling cramped against the container’s edges.
  • Border: Define the thickness and style of the container’s outline. You can create a subtle separation or a bold framed effect for your top-ranking posts.
  • Border Radius: Control the roundness of the box corners. Use a high value for a soft, modern card design or 0px for a sharp, editorial aesthetic.
  • Box Shadow: When the Box Shadow toggle is enabled, you can add depth and dimension to your container to make it “pop” off the page:
    • Position: Choose Outline for a traditional drop shadow or Inset to make the shadow appear inside the container, creating a “pressed” effect.
    • Horizontal & Vertical: Shift the shadow’s position along the X and Y axes to simulate a specific light source.
    • Blur & Spread: Blur softens the edges of the shadow for a natural look, while Spread expands or contracts the overall surface area of the shadow.
    • Shadow Color: Select the color and transparency (opacity) of the shadow effect.
  • Color
    • Background (Default & Hover): Set a base fill color for the post container and a distinct hover color. A subtle background shift when a user mouses over a trending post provides immediate interactive feedback.
    • Border Hover: Specific to the interaction, this allows the border color to change dynamically, drawing the reader’s eye to the specific trending story they are about to click.

Post Box Style

The Post Image Styles panel provides the granular controls needed to frame and animate the featured images for your most-viewed content. These settings ensure that the visual element of your trending posts remains consistent across all your trending categories.

  • Width & Height: Precisely define the size of your post images. This is essential for maintaining a uniform grid or list layout, ensuring that all thumbnails are perfectly aligned regardless of their original aspect ratio.
  • Margin Top & Bottom: Control the external spacing above and below the image to separate it from other post elements like the category badge or the article title.
  • Gap: Adjust the specific distance between the image and the adjacent text content, preventing the layout from feeling cluttered.
  • Border Radius: Soften the corners of your images for a modern, approachable look. You can use a small value for a subtle roundness or a higher value for a distinct, pill-like aesthetic.
  • Hover Effect: Enable this toggle to add a dynamic layer of engagement. When a reader mouses over a trending post, the image will subtly scale upward within its container, signaling that the content is interactive and encouraging the user to click.

Post Category Style

The Post Category Style panel allows you to design the taxonomy labels that classify your most-viewed content. These settings help you create eye-catching badges that guide readers toward specific topics while maintaining the visual hierarchy of your trending posts.

  • Gap: Adjust the horizontal distance between multiple category labels if a post belongs to more than one group.
  • Top & Bottom Spacing: Define the external vertical margins to perfectly position the category badge relative to the post image or title.
  • Padding: Set the internal breathing room around the category text, allowing you to create anything from a tight label to a spacious, button-like badge.
  • Border: Define the thickness of the label’s outline and the roundness of its corners
  • Border Radius: Soften the corners of your images for a modern, approachable look. You can use a small value for a subtle roundness or a higher value for a distinct, pill-like aesthetic.
  • Enable Hover Effect: Activate this toggle to add a sophisticated layer of feedback. When a user mouses over the category, the label will subtly shift vertically (upwards or downwards), signaling that the link is active and ready to be clicked.
  • Enable Hover Effect: Activate this toggle to add a sophisticated layer of feedback. When a user mouses over the category, the label will subtly shift vertically (upwards or downwards), signaling that the link is active and ready to be clicked.
  • Typography
    • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
    • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
    • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
    • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
    • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
  • Color:
    • Link (Default & Hover): Customize the text color for the category name. A distinct hover color ensures that readers know exactly which topic they are selecting.
    • Background (Default & Hover): Apply a fill color to the category box. Utilizing a background shift on hover makes the “Trending Post” navigation feel more responsive.
    • Border Hover: Set a specific accent color for the border that activates only when the user interacts with the label.