The Related Posts Block displays a curated selection of posts related to the current post based on shared categories, tags, or both. This Pro block automatically identifies relevant content and presents it in customizable layouts to encourage further reading and improve user engagement. Perfect for single post templates that you can create with our Site Builder feature from our DigiFusion theme and its Pro version.
Adding the Related Posts Block
Navigate to the post or page where you want to display related content. Click the block inserter (+) and search for “Related Posts” in the DigiBlocks Theme category. The block will be added with placeholder content showing how related posts will appear on the frontend.
Relation Configuration
Relation Type
Choose how related posts are determined using the relation type selector:
Category – Shows posts that share at least one category with the current post
Tag – Displays posts that share tags with the current post
Both – Combines category and tag matching for broader related content selection
Posts Display Settings
Posts to Show – Control the number of related posts displayed (1-12 posts)
No Related Posts Text – Set custom message when no related posts are found
Heading Options
Display Heading – Toggle to show or hide the section heading
Heading Text – Customize the heading text (default: “Related Posts”)
Layout Configuration
Post Style Options
Choose between two layout presentations:
Grid Layout – Displays posts in a responsive grid formation
List Layout – Shows posts in a vertical list with horizontal alignment
Grid Layout Settings
When using grid layout, configure the column structure:
Columns – Set responsive column counts (Desktop: 1-6, Tablet: 1-4, Mobile: 1-2)
Item Spacing – Adjust the gap between post items (0-80px)
Card Style Options
Card Style – Enable to display posts within styled card containers with backgrounds and borders
Content Display Options
Featured Image Settings
Display Featured Image – Toggle to show or hide post featured images
Image Size – Select from available WordPress image sizes (Thumbnail, Medium, Large, Full)
Text Content Settings
Display Title – Toggle post title visibility
Display Meta – Enable metadata display with granular controls:
Show Author – Display post author information with avatar
Show Date – Show publication date
Show Categories – Display post categories as clickable links
Show Comments Count – Show comment count with link to comments section
Excerpt Configuration
Display Excerpt – Toggle excerpt visibility
Excerpt Length – Control excerpt word count (5-100 words)
Read More Button
Display Read More Button – Toggle read more button visibility
Read More Text – Customize button text content
Color Customization
Heading Colors
Heading Color – Set the color for the section heading text
Normal State Colors
Configure default colors for various elements:
Title Color – Set color for post titles
Excerpt Color – Choose color for excerpt text
Categories Background Color – Background color for category tags
Categories Color – Text color for category links
Meta Color – Color for metadata elements (author, date, comments)
Button Background – Background color for read more buttons
Button Text – Text color for button content
Hover Effects
Define color changes during user interaction:
Title Hover Color – Post title color on hover Categories Hover Background Color – Category tag background on hover Categories Hover Color – Category text color on hover
Meta Hover Color – Metadata color on hover Button Background Hover – Button background color on hover Button Text Hover – Button text color on hover
Card Colors (when Card Style enabled)
Card Background – Background color for card containers Card Border – Border color for card styling
Typography Settings
Heading Typography
Configure heading text appearance:
Font Family – Select from Google Fonts library
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Choose from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Title Typography
Style post title text independently with complete typography controls including font family, size, weight, and spacing options.
Meta Typography
Configure metadata text styling for author, date, and category information with responsive typography controls.
Excerpt Typography
Set excerpt text appearance with independent font controls and responsive sizing options.
Button Typography
Style read more button text with dedicated typography settings including font family, size, weight, and text decoration options.
Spacing Controls
Block Spacing
Padding – Internal spacing around the entire block with responsive controls
Margin – External spacing around the block with device-specific settings
Element Spacing
Image Margin – Spacing between featured image and content (1-100px)
Content Margin – Gap between content elements like title, excerpt, and meta (1-100px)
Item Spacing – Distance between individual post items (0-80px)
Button Spacing
Button Padding – Internal spacing within read more buttons using responsive dimension controls
Border and Radius Settings
Image Styling
Image Border Radius – Round corners of featured images with responsive controls supporting pixel and percentage units
Button Styling
Button Border Radius – Set corner rounding for read more buttons with responsive dimension controls
Card Styling (when enabled)
Card Border Style – Choose from None, Solid, Dashed, Dotted, or Double border styles
Card Border Width – Set border thickness with responsive dimension controls
Card Border Radius – Round card container corners with pixel or percentage units
Shadow Effects
Card Shadow – Add drop shadows to card containers with Normal and Hover states
Card Shadow Hover – Enhanced shadow effects during user interaction
Configure shadow properties including:
- Horizontal and vertical offset
- Blur and spread radius
- Shadow color with alpha transparency
Animation Effects
Add entrance animations to make related posts more engaging when users scroll to the section. Choose from various animation types including fade, slide, zoom, and bounce effects with preview functionality to test animations before publishing.
Advanced Settings
Visibility Controls
Control block visibility across different devices:
Hide on Desktop – Hide block on desktop screens (992px and above)
Hide on Tablet – Hide block on tablet screens (768px-991px)
Hide on Mobile – Hide block on mobile screens (767px and below)
Hidden elements appear with reduced opacity in the editor while remaining fully hidden on the frontend.
HTML and CSS
HTML Anchor – Add a unique anchor ID for direct linking to the related posts section
Additional CSS Classes – Include custom CSS classes for advanced styling
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust typography sizes, spacing values, column counts, and layout elements independently for each screen size to ensure optimal display across all devices.
Usage Requirements
The Related Posts Block requires existing published posts with shared categories or tags to display related content. The block automatically queries the database to find relevant posts based on the current post’s taxonomy terms and displays them according to your configuration settings.