← BACK TO HELP

Linkify Design & Customization - Related Content Styling (Part 4)

In this final installment of our Linkify Pro Design & Customization series, we’ll explore the styling options for Related Content displays. These content recommendation modules help keep visitors engaged with your site by suggesting relevant articles and pages based on what they’re currently viewing.

Understanding Related Content Design

Related Content modules typically appear at the end of posts or in sidebars, showcasing selected content that complements the current page. Their visual presentation significantly influences whether visitors will notice and click through to explore more of your site.

To access the Related Content styling options:

  1. Navigate to the Linkify menu in your WordPress admin panel
  2. Click on “Design” to open the customization interface
  3. Select the “Related Content” tab from the options
  4. Use the live preview panel to see your changes in real-time

Layout Options

Linkify Pro offers several layout options for presenting related content, each with a distinct visual structure.

Available Layouts:

  • Grid: A multi-column display of related posts in a structured grid
  • List: A vertical listing of related content items
  • Card: Content items presented as separate cards with defined borders
  • Compact: A space-efficient list format with minimal details
  • Featured: A prominent featured item with supporting content below
  • In-Content: Recommendations embedded within your post content

How to Use:

  1. Select your preferred layout from the dropdown menu
  2. Watch the live preview update to reflect your choice
  3. Consider which layout best suits your content type and site design
  4. Choose an option that balances visual appeal with information density

For design pattern insights, read this article on content module design patterns.

Color Customization

Fine-tune the visual appearance of your related content displays with these color options.

Available Color Controls:

  • Main Title Color: Sets the color for the section heading
  • Background Color: Determines the module’s background
  • Item Title Color: Controls the color of individual content titles
  • Item Hover Color: Specifies the color when users hover over titles
  • Text Color: Sets the color for descriptive text and excerpts

How to Use:

  1. Click on any color selector to open the color picker
  2. Choose from the spectrum or enter a specific hex code
  3. The live preview updates in real-time to show your changes
  4. Create a cohesive color scheme that draws attention without clashing
  5. Ensure text colors have sufficient contrast with backgrounds for readability

Pro Tip: Consider making your item titles a slightly different color than your main content links to create visual differentiation between content types.

Learn more about color psychology in this guide to using color in UX design.

Base Structure Settings

These settings control the fundamental aspects of how your related content modules function and what information they display.

Key Structure Options:

  • Number of Items: Set how many related posts to display
  • Metadata to Include: Choose what elements to show (thumbnail, title, excerpt, date, author, category)
  • Excerpt Length: Control how much text appears in excerpts
  • Display Position: Set where related content appears
  • Excluded Categories/Tags: Specify content types to exclude
  • Section Title: Customize the heading text (default: “Related Articles”)

How to Use:

  1. Set an appropriate number of items based on your layout choice
  2. Select which metadata elements provide value to your readers
  3. Adjust excerpt length to balance information with space constraints
  4. Choose a position that works with your content flow
  5. Exclude categories/tags that wouldn’t provide relevant recommendations
  6. Customize the title to match your site’s voice and purpose

For content recommendation best practices, check out this guide to content recommendation systems.

In-Content Structure Settings

For the “In-Content” layout, these additional settings control how recommended content appears within your posts.

Key In-Content Options:

  • Selection Algorithm: Choose how related content is selected (relevance, recency, popularity, random, custom)
  • Show Category-Based Content: Toggle inclusion of category-related recommendations
  • Number of In-Content Items: Set how many recommendation blocks appear
  • In-Content Templates: Customize the text patterns for recommendations
  • Category-Based Templates: Customize templates for category-based recommendations

How to Use:

  1. Select an algorithm that aligns with your content strategy
  2. Enable category-based content for more contextual recommendations
  3. Set an appropriate number of recommendation blocks (1-3 is typical)
  4. Customize templates to match your site’s voice and purpose
  5. Use placeholder variables like [related_content] and [category] in your templates

For content personalization insights, read this article on contextual content recommendation strategies.

Designing Effective Related Content Displays

Optimizing for Different Site Types

For Content-Rich Information Sites:
  • Use Grid or Card layouts to showcase variety
  • Include thumbnails and excerpts for content preview
  • Position at the end of content or in sidebars
  • Prioritize relevance in your algorithm
For Conversion-Focused Commercial Sites:
  • Use Featured layout to highlight premium content
  • Include compelling thumbnails but keep text minimal
  • Consider in-content placement before key conversion points
  • Balance relevance with strategic content promotion
For News or Magazine Sites:
  • Use List or Compact layouts for high-density recommendations
  • Include publication dates and categories as metadata
  • Consider recency in your algorithm settings
  • Position at the end of articles to encourage continued reading

Learn more about content presentation in this guide to content display strategies.

Visual Hierarchy in Related Content

Create clear visual hierarchies that guide the eye:

  1. Use size and position to indicate importance
  2. Apply color strategically to highlight key elements
  3. Create clear distinction between titles and supporting text
  4. Use whitespace to improve scannability
  5. Maintain consistent styling for each content element

For hierarchy design principles, read this article on visual hierarchy in web design.

Mobile-Optimized Related Content

Ensure your related content display works well on all devices:

  1. For Grid layouts, reduce column count on smaller screens
  2. Consider using Compact or List layouts as mobile fallbacks
  3. Decrease item count on mobile to prevent overwhelming scrolling
  4. Ensure thumbnails resize appropriately for smaller screens
  5. Test touch targets for easy navigation on touch devices

For responsive design practices, check out this guide to responsive web design patterns.

Practical Implementation Examples

Blog or Personal Site

For content-focused blogs or personal websites:

Layout: Grid or List
Items: 3-4
Metadata: Thumbnail, Title, Excerpt
Colors: Light, integrated with content
Position: End of Content

This configuration creates an inviting selection of additional reading options without overwhelming visitors.

News or Media Site

For news, publication, or media-heavy sites:

Layout: Featured or Card
Items: 4-6
Metadata: Thumbnail, Title, Date, Category
Colors: Bold, attention-grabbing
Position: End of Content or Sidebar
Algorithm: Recency + Relevance

This setup highlights fresh content while maintaining topical relevance, encouraging further exploration.

E-commerce or Business Site

For commercial content or business resources:

Layout: In-Content and End of Content
Items: 2-3 in-content, 3-4 at end
Metadata: Thumbnail, Title, Brief Excerpt
Colors: Brand-aligned, conversion-focused
Templates: Benefit-focused messaging

This approach strategically places recommendations throughout the user journey, maximizing exposure to related products or services.

Advanced Customization Techniques

Custom CSS Enhancements

While Linkify Pro’s settings cover most design needs, you can further refine your related content display with custom CSS:

  1. Use your theme’s custom CSS option or a CSS plugin
  2. Target Linkify Pro’s content containers with selectors like .linkify-related-content
  3. Add subtle enhancements like hover effects, animations, or box shadows
  4. Consider responsive adjustments beyond the built-in mobile optimization

For CSS customization techniques, read this guide to CSS customization best practices.

Creating Specialized Templates

For the In-Content layout, craft templates that:

  1. Use natural, conversational language that flows with your content
  2. Highlight the value proposition of the recommended content
  3. Vary templates to avoid repetition in longer posts
  4. Use category variables to create contextual recommendations

For example:

For more insights on [category], don't miss our guide on [related_content]

A/B Testing for Optimization (continued)

Once you’ve implemented your initial design:

  1. Create variant designs with different layouts, colors, or positions
  2. Test them with actual site traffic
  3. Monitor click-through rates and engagement metrics
  4. Iterate based on performance data
  5. Continuously refine your approach based on user behavior

For A/B testing strategies, check out this guide to effective A/B testing.

Integration with Overall Site Design

For a cohesive user experience, ensure your related content displays:

  1. Complement your site’s existing design language
  2. Use typography that matches or harmonizes with your content
  3. Apply consistent interaction patterns with other site elements
  4. Maintain your brand’s visual identity throughout
  5. Support the site’s overall information architecture

Learn more about cohesive design in this article on creating consistent user experiences.

Conclusion

Linkify Pro’s Related Content styling options give you powerful tools to create engaging content recommendations that keep visitors exploring your site. By thoughtfully designing these modules, you can significantly increase page views, reduce bounce rates, and improve overall user engagement.

Throughout this four-part series, we’ve explored the comprehensive design and customization options Linkify Pro offers for Breadcrumbs, Table of Contents, Contextual Links, and Related Content. By leveraging these tools effectively, you can create a seamless, professional internal linking system that enhances both user experience and SEO.

Remember that the most effective designs often come from continuous refinement based on user behavior and site goals. Start with best practices, test with real users, and iteratively improve your implementation over time.

Ready to create compelling content recommendations? Head to the Linkify Pro Design tab today and create related content displays that keep visitors engaged with your site! For more information, visit the Linkify Pro.

Design & Customization – Breadcrumbs Styling (Part 1)
Design & Customization – Table of Contents Styling (Part 2)
Design & Customization – Contextual Links Styling (Part 3)
Design & Customization – Related Content Styling (Part 4)