How to add a link to the WordPress Cover block

Want to link the WordPress Cover block to make it entirely clickable? This powerful technique transforms a visually rich Cover block (with text overlaid on a background image or video) into a single, cohesive link. It’s ideal for building engaging navigational sections, impactful calls-to-action, and creative portfolio or blog layouts.

This article explores the design advantages of making a Cover block fully clickable, walks through the steps to set it up with the Twentig plugin, and introduces hover effects to make your designs even more dynamic.

Why link an entire Cover block?

Adding a link to the Cover block to make it clickable is a strategic design choice that offers distinct advantages:

• Creates a large, intuitive target: A large clickable area is easier to click with a mouse or tap on a screen than a small button. This enhances usability across all devices and helps guide visitors more effectively.
• Offers a more cohesive experience: When a section is presented as a single visual element, making it act as one interactive component feels natural and intuitive to the user.
• Boosts engagement: By making the entire block clickable, you create an appealing and highly interactive element that invites more visitors to engage with your content.

Consider the user experience on a site like TechCrunch, where featured articles are presented as large, visual cover blocks. The natural expectation is that clicking or tapping anywhere on that block (the image, the headline) will lead to the article. This is precisely the intuitive navigation that a linked Cover block creates.

How to link a WordPress Cover block to make it clickable

The WordPress block editor does not have a native feature to add a link to the Cover block. This functionality can be enabled with the Twentig plugin, which adds a “Stretch link” setting to extend a link across its entire parent container.

Here is the step-by-step process:

1. Install the Twentig plugin: First, ensure that Twentig is installed and activated from your WordPress dashboard.
2. Add and design your Cover block: Open a page, add a Cover block, and set your background image or video. Adjust the overlay color and other design settings.
3. Place a link inside: Within the Cover block, insert an element that contains your desired link. This can be a Heading, a Paragraph, or a Button block.
4. Select the parent Cover block: Click on the block to select it and open the block settings sidebar on the right.
5. Enable the stretch link setting: Find the “Link settings” panel and switch on the Stretch link option.
6. Save your changes: Click “Update” or “Publish.”

Note: For the “Stretch link” feature to work as expected, you should generally have only one link inside the Cover block. If you need multiple links, place multiple Button blocks inside a single parent Buttons block. In that case, Twentig will use the link from the first button and apply it to the entire Cover.

Here’s an example of the block code for a linked Cover block, which you can copy and paste in your WordPress block editor:

					
					
<!-- wp:cover {"url":"https://images.unsplash.com/photo-1682685797898-6d7587974771?q=80\u0026w=2000\u0026auto=format\u0026fit=crop\u0026ixlib=rb-4.1.0\u0026ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","dimRatio":50,"minHeight":500,"minHeightUnit":"px","contentPosition":"center center","isDark":false,"align":"wide","twStretchedLink":true} -->
<div class="wp-block-cover alignwide is-light tw-stretched-link" style="min-height:500px">
	<img class="wp-block-cover__image-background" alt="" src="https://images.unsplash.com/photo-1682685797898-6d7587974771?q=80&amp;w=2000&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-object-fit="cover"/>
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
	<div class="wp-block-cover__inner-container">
		<!-- wp:heading {"textAlign":"center","textColor":"white"} -->
		<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color">Your engaging headline</h2>
		<!-- /wp:heading -->
	
		<!-- wp:paragraph {"align":"center","textColor":"white"} -->
		<p class="has-text-align-center has-white-color has-text-color">A compelling sub-headline.</p>
		<!-- /wp:paragraph -->
	
		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
		<div class="wp-block-buttons">
			<!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Learn More</a></div><!-- /wp:button -->
		</div>
		<!-- /wp:buttons -->
	</div>
</div>
<!-- /wp:cover -->

				

Enhancing your linked Cover block with hover effects

A static link works, but visual feedback on hover immediately tells the user an element is interactive. Twentig further empowers your design capabilities by adding a variety of dynamic hover effects directly to the Cover block’s settings.

You can find these in the block settings under Styles > Hover.

• Change overlay opacity: This effect subtly darkens or lightens the color overlay when a user hovers over the block.
• Reveal content: Set content inside the Cover block to be hidden by default and only appear on hover.
• Hide content: The opposite of the reveal effect. Visible content can be hidden on hover, allowing the background image to be seen more clearly.
• Zoom: This applies a subtle zoom to the Cover block’s background image on hover, as seen on the TechCrunch homepage.

Practical use cases for a linked Cover block in WordPress

Featured sections as navigation

A common design pattern is to use large visual sections to guide users to a site’s main offerings. On its homepage, Intercom features two prominent product sections side-by-side. Each section functions as a clickable card that directs visitors to a key page. This clean and effective presentation can be achieved by adding a link to a WordPress Cover block.

Visually-driven portfolio showcases

This technique is perfect for creating stunning portfolio showcases. Digital agencies like Fueled use large, impactful Cover blocks to display their work. By using the Query Loop block, you can automatically populate a grid of your projects, where each item is a clickable Cover block with its featured image as the background. The entire block links to the full case study, creating a highly visual and engaging way for potential clients to explore your work.

Clickable blog post grids

Using the Query Loop block, you can transform a standard list of posts into a visually-rich grid similar to the news feed on Sequoia Capital’s website. Each article can be displayed inside a clickable Cover block that uses the post’s featured image for its background, creating a captivating and magazine-style layout for your readers.

Note: If you place a Cover block inside the Query Loop block and enable the “Stretch link” setting, this feature takes the main post link from the Post Title block and stretches it across the entire Cover block. At the same time, it ensures that other meta links such as categories, tags, or the author link remain independently clickable, directing users to their respective archive pages.

Impactful call-to-action sections

A linked Cover block is an excellent way to create a strong call-to-action (CTA). With a striking image and a clear headline, you can create a highly persuasive section that encourages users to take a specific action. The example from Apple shows how a WordPress Cover block link can be used to create a powerful CTA that guides users to a specific feature page.

Take it further with more clickable blocks

Knowing how to add a link to a WordPress Cover block is a fantastic skill for building modern websites. By combining this feature with built-in hover effects, you can build truly professional and interactive layouts that improve the user experience of your site.

Twentig makes it simple to implement this without any code. This powerful “Stretch link” feature isn’t limited to just the Cover block. Twentig also adds it to the Group and Column blocks, giving you incredible flexibility to build other types of clickable sections and interactive cards across your entire site.