---
title: "How to Create a Custom Layout With the Hover Card in WordPress?"
url: https://qa.nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/
date: 2024-12-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "With the Hover Card block from Nexter Blocks, you have the flexibility to design a completely custom layout that matches your unique preferences. You can effortlessly add and arrange elements,..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/12/create-a-custom-layout-with-the-hover-card-in-wordpress-1024x519.jpg
word_count: 402
---

# How to Create a Custom Layout With the Hover Card in WordPress?

## Key Takeaways

- Utilizes the Hover Card block from Nexter Blocks to design a custom layout with interactive hover effects.
- Creates a profile card layout by organizing elements like profile image, name, and designation within a div called 'card'.
- Incorporates structured tags such as Div, H3, and p to format content effectively within the Hover Card block.

With the Hover Card block from Nexter Blocks, you have the flexibility to design a completely custom layout that matches your unique preferences. You can effortlessly add and arrange elements, customize styles, and incorporate interactive hover effects to create visually stunning and engaging content.

*To check the complete feature overview documentation of the Nexter Blocks Hover Card block,* *[click here](https://qa.nexterwp.com/docs/create-hover-card-animation-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://qa.nexterwp.com/nexter-blocks/blocks/hover-card-animations-wordpress/)

To create a custom layout using the Hover Cards block, ideally, you should have the design ready. 

For example, here, we’ll create a simple profile card. Where we’ll have a profile image, name and designation.

For the layout structure, we’ll keep all the profile image, name and designation inside a div called “*card*”.

To create the layout, add the Hover Card block on the page and open the repeater item.

Set **Div** as the **Open Tag** and **card** as the class name since we want to add other elements inside the div, set **None** as the **Close Tag**. In the **Content,** select **None** because this div is just a container.

Click the **+Add Structure** button to add the next item, and select **Div** from the **Open Tag** dropdown. 

Then set **Default** as the **Close Tag**, so the tag closes there.

From the **Content** section, select **Image**.

Again, click on the **+Add Structure** button to add the next item for the name, and select **H3** from the **Open Tag**. 

Then set **Default** as the **Close Tag** to close the h3 tag.

From the **Content** section, select **Text** and add the content in the **Content** field.

To add the designation, click the **+Add Structure** button to add an item, then select **p** from the **Open Tag**. 

Then set **Default** as the **Close Tag** to close the p tag.

From the **Content** section, select **Text** and add the content in the **Content** field.

Now to close the main div i.e. “*card*” click the **+Add Structure** button to add another item. In the **Open Tag,** select **None** and **Div **as the **Close Tag**, this will close the div with the class name “*card*”.

> *Note: Make sure to style the elements according to your needs.*

So the layout is ready, where we have an image, heading and text inside a div called “*card*”.

This is how you can create a custom layout.