How to use Clickable Container

1. Add the Clickable Container Block

Insert the appiapp Clickable Container block into your page or template.
You can place any type of Gutenberg block inside it—images, headings, paragraphs, columns, groups, buttons, and more. Everything within the container will become entirely clickable.

Already built your layout? No problem. Just add the appiapp Clickable Container block and drag your existing content inside it. This way, you can instantly make your entire layout clickable without restructuring it.

📺 Need help? Scroll to the bottom of the page to watch our step-by-step video tutorial.

2. Select the Link Type

After inserting the block, you’ll need to choose how the container should link:

  • Custom URL – Manually enter any destination link, perfect for linking to external pages, specific anchors, or internal pages.
  • Current Post URL – Ideal for use inside Query Loops. This option automatically links each instance of the block to the post being displayed, making it perfect for dynamic lists like blog archives or product grids.

3. Choose the Implementation Method

appiapp Clickable Container gives you flexibility in how the clickable area is applied. You can choose between three methods:

  • Absolute Positioned Link
    This method places a link using CSS absolute positioning. It works well in most cases and maintains accessibility and layout integrity.
  • Wrapper Link
    This wraps all content inside the block within an HTML <a> tag. It’s the simplest method but may not work well if your content includes interactive elements like buttons or other links (since HTML doesn’t allow nested <a> tags).
  • JavaScript Method
    This method uses JavaScript to apply the click functionality. No actual <a> tag is rendered, so it’s fully compatible with nested links and interactive elements. It’s the most flexible and robust method, especially for complex layouts.

4. Customize (Optional)

You can further fine-tune how the link behaves by customizing a few optional settings:

  • Open in New Tab
    Choose whether the link should open in a new browser tab (target="_blank").
  • Add Nofollow Attribute
    Useful for SEO or external links – adds a rel="nofollow" attribute to the link.