Download Plugin

Clickable Group Extension

Written by

in

Overview

The Clickable Group Extension transforms Group and container blocks into fully clickable elements while preserving individual link functionality within. Perfect for creating card interfaces, feature sections, and interactive content areas where the entire block acts as a clickable target.

Key Features

  • Full Block Clickable: Entire container becomes a link
  • Smart Link Handling: Preserves individual links inside
  • Hover Effects: Visual feedback on interaction
  • Keyboard Accessible: Works with Tab and Enter keys
  • SEO Friendly: Proper link structure for search engines
  • Analytics Ready: Track clicks on container blocks

How to Use

  1. Select a Group, Section, or container block
  2. Find Clickable Group settings in sidebar
  3. Enable “Make this group clickable”
  4. Enter destination URL
  5. Configure link behavior (new tab, nofollow, etc.)
  6. Add hover effects if desired
  7. Preview and test clicking

Settings

Link Settings

  • Destination URL: Where the group links to
  • Open in New Tab: External link behavior
  • Rel Attributes: nofollow, sponsored, ugc
  • ARIA Label: Descriptive label for accessibility

Interaction Settings

  • Hover Cursor: Change cursor to pointer on hover
  • Hover Effect: Scale, shadow, or custom effects
  • Click Animation: Brief feedback on click

Smart Link Behavior

The extension intelligently handles nested links:

  • Clicking on an internal button/link follows that specific link
  • Clicking on empty space in the group follows the group link
  • Prevents nested link conflicts and errors

Common Use Cases

  • Blog Post Cards: Entire card links to post
  • Product Cards: Click anywhere to view product
  • Team Member Cards: Link to profile or bio page
  • Feature Blocks: Link to feature detail pages
  • Call-to-Action Sections: Large clickable conversion areas
  • Portfolio Items: Click to see project details

Best Practices

  • Add hover effects for clear affordance (scale 1.02 or subtle shadow)
  • Use descriptive ARIA labels for accessibility
  • Ensure clickable area is large enough (min 44x44px for mobile)
  • Add visual indication that block is clickable
  • Test that nested links still work correctly
  • Use appropriate rel attributes for external links
  • Keep clickable groups to one main action per block

Hover Effect Examples

  • Subtle Scale: transform: scale(1.02) – professional
  • Shadow Lift: Increase box-shadow depth
  • Border Highlight: Change border color or width
  • Background Shift: Slight background color change
  • Image Zoom: Scale internal image

Card Grid Pattern

Create clickable card grids:

  1. Add Grid Container block
  2. Add Group blocks for each card
  3. Enable Clickable Group on each card
  4. Add card content (image, heading, text)
  5. Set each card link destination
  6. Apply consistent hover effects

Accessibility

  • Add descriptive ARIA labels to clickable groups
  • Ensure keyboard navigation works (Tab to focus, Enter to activate)
  • Provide visible focus states
  • Use semantic HTML where possible
  • Announce link purpose to screen readers
  • Test with keyboard-only navigation

SEO Considerations

  • Use descriptive link text within the group
  • Apply rel=”nofollow” for paid or untrusted links
  • Use rel=”sponsored” for affiliate links
  • Ensure primary content is not hidden behind clicks
  • Avoid excessive clickable groups on one page

Troubleshooting

  • Click not working: Verify URL is correct, check for JavaScript errors
  • Nested links breaking: Update to latest plugin version
  • Hover effect not showing: Check CSS specificity, verify hover settings
  • Mobile tap issues: Ensure touch target is large enough (44px minimum)
  • New tab not opening: Check “Open in New Tab” setting

More posts