The Post Navigation Block creates navigation links between previous and next posts, allowing visitors to easily browse through your content. This Pro block is perfect for custom single post templates that you can create with our DigiFusion theme and its Pro version, enhancing the user experience by providing seamless post-to-post navigation.
Adding the Post Navigation Block
Navigate to the single post template or page where you want to display post navigation. Click the block inserter (+) and search for “Post Navigation” in the DigiBlocks Theme category. The block will be added with default placeholder content showing how the navigation will appear on the frontend with previous and next post links.
Display Configuration
General Options
Control what elements appear in your post navigation through the Options panel:
Show Post Titles – Display the titles of the previous and next posts alongside navigation arrows
Show Navigation Labels – Include descriptive text labels like “Previous” and “Next” above the post titles
Show Featured Images – Display thumbnail images from the featured images of adjacent posts
Custom Labels
When navigation labels are enabled, customize the text that appears:
Previous Label – Set custom text for the previous post link (default: “Previous”)
Next Label – Set custom text for the next post link (default: “Next”)
Image Configuration
When featured images are enabled, select the appropriate image size:
Image Size Options:
- Thumbnail – Small preview images
- Medium – Balanced size for most layouts
- Large – Detailed preview images
- Full – Original uploaded image size
Color Customization
Normal State Colors
Configure default appearance in the Colors style panel:
Text Color – Set the color for navigation text and post titles
Background Color – Choose background color for navigation links
Hover Effects
Define interactive color changes in the Hover tab:
Text Color – Color change when hovering over navigation links
Background Color – Background color change during hover state
Border Color – Border color change on hover interaction
Typography Settings
Control text appearance through comprehensive typography options:
Font Family – Select from Google Fonts collection
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Select 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
Border and Visual Effects
Border Styling
Customize border appearance through the Border style panel:
Border Style – Choose from solid, dotted, dashed, double, groove, inset, outset, or ridge
Border Width – Set thickness for each border side independently
Border Radius – Create rounded corners with responsive controls
Border Color – Select border color for normal state
Box Shadow Effects
Add depth with customizable shadow options:
Shadow Position – Choose between outer or inset shadows
Horizontal Offset – Move shadow left or right
Vertical Offset – Adjust shadow up or down position
Blur Radius – Control shadow softness
Spread Radius – Expand or contract shadow size
Shadow Color – Select shadow color with opacity support
Hover Shadows – Define different shadow effects for hover state
Layout and Spacing
Spacing Controls
Set precise spacing using responsive dimension controls:
Padding – Internal spacing around navigation content
Margin – External spacing around the entire navigation block
All spacing options include individual controls for top, right, bottom, and left sides across desktop, tablet, and mobile devices.
Advanced Features
Animation Effects
Add entrance animations to make navigation links more engaging:
Animation Options – Choose from fade, slide, zoom, bounce, and other effects
Animation Preview – Test animation effects in the editor before publishing
Animations trigger when users scroll to the navigation block, enhancing the interactive experience.
Visibility Controls
Control when the navigation block appears across different devices:
Hide on Desktop – Remove navigation from desktop screens
Hide on Tablet – Hide navigation on tablet devices
Hide on Mobile – Disable navigation on mobile screens
Hidden elements appear with reduced opacity in the editor for easy editing while remaining completely hidden on the frontend.
HTML Anchor and Classes
HTML Anchor – Create unique identifiers for direct linking to the navigation section
Additional CSS Classes – Add custom classes for further styling customization
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust typography sizes, spacing, colors, and layout elements independently for each screen size to ensure optimal navigation display across all devices.
Navigation Behavior
The Post Navigation Block automatically detects adjacent posts based on publication date and post type. On single post pages, it displays links to the chronologically previous and next posts within the same post type. The block adapts to your site’s post structure and only appears when there are adjacent posts available for navigation.
Implementation Notes
The block serves as a template in the editor, displaying placeholder content to show the navigation layout. On the frontend, it dynamically generates links to actual previous and next posts based on the current post context. The navigation respects post status and only links to published posts that are publicly accessible.
For optimal functionality, ensure your theme supports post navigation and that posts have appropriate titles and featured images when using the image display option. The block works seamlessly with custom post types and integrates with most WordPress themes and SEO plugins.