---
title: "How to Create a Custom Layout With the Hover Card in WordPress?"
url: https://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://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

- Nexter Blocks' Hover Card block allows users to design custom layouts with interactive hover effects.
- Users can create a profile card layout by organizing elements like profile image, name, and designation inside a div called 'card'.
- To structure the layout, users add items using the +Add Structure button and select appropriate tags for each element.

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://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://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.

## Frequently Asked Questions

**Q: What should I do if the Hover Card block isn't displaying correctly?**
A: If the Hover Card block isn't displaying as expected, ensure that the Nexter Blocks plugin is installed and activated. This block relies on the Nexter Blocks to function properly. If itu2019s still not working, check if there are any conflicting plugins or themes that might be affecting its performance.

**Q: What are best practices for styling the Hover Card elements?**
A: When styling the Hover Card elements, consider using consistent font sizes and colors that align with your overall site design. Pay attention to hover effects as they can enhance interactivity. Ensure that the layout is responsive, so it looks good on both desktop and mobile devices.

**Q: What happens if I forget to set the Close Tag for the div in the Hover Card?**
A: If you forget to set the Close Tag for the div in the Hover Card, it can lead to layout issues where elements do not display correctly. Properly closing tags is crucial for maintaining the intended structure of your layout. Always double-check your HTML structure to avoid these problems.