---
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-09-28
lang: en
author: "Aditya Sharma"
description: "Start from the design, not from the block. Because every row carries its own size, spacing, background and position, a Hover Card structure can be shaped into whatever the design..."
image: https://nexterwp.com/wp-content/uploads/2024/12/create-a-custom-layout-with-the-hover-card-in-wordpress-1024x519.jpg
word_count: 615
---

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

## Key Takeaways

- Hover Card funciona en Nexter Blocks gratis y en Nexter Blocks Pro, y se activa en WordPress desde Nexter > Blocks.
- Cada fila controla Width/Height Options, Margin, Padding, Position, Display, Alignment CSS Options y estilos como Background, Border, Radius y Shadow, con valores distintos para desktop, tablet y mobile.
- La estructura se construye primero con filas y etiquetas Open Tag y Close Tag, luego se pulsa Render HTML; mover una fila después cambia el marcado y obliga a mover la clase hover asociada.
- Las filas Absolute se posicionan respecto al contenedor más cercano con Position en Relative; si el contenedor solo tiene hijos absolutos puede colapsar a nada, así que necesita una altura.

Start from the design, not from the block.

Because every row carries its own size, spacing, background and position, a Hover Card structure can be shaped into whatever the design asks for — including things pinned on top of other things.

*For every Dynamic Device setting in one place, see the [Hover Card block guide](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/).*

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

## Before You Start

- **Edition:** Free — the Hover Card block works in Nexter Blocks (free) and in Nexter Blocks Pro.- **Block to enable:** Hover Card, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A little HTML.** This block builds markup out of the rows you add, so it helps to know what a tag is and which tag wraps which.- **A rough design.** Knowing which parts sit inside which makes the rows obvious.

![Front end of a custom Nexter Blocks Hover Card layout: a photo, the title Fjord Overlook and the trail details](https://nexterwp.com/wp-content/uploads/2026/09/hover-card-custom-layout-preview.webp)

## Steps

- Add the **Hover Card** block to your page.

- Open the row already waiting under **Code Structure**, or press **+ Add Structure** for another one.

![The Code Structure repeater](https://nexterwp.com/wp-content/uploads/2026/09/hc-structure.webp)

- Choose the wrapper in **Open Tag**, and close it in **Close Tag**.

![The Open Tag setting](https://nexterwp.com/wp-content/uploads/2026/09/hc-opentag.webp)

- Build the skeleton first: a container row, the rows inside it, and a row that closes the container.

![The Code Structure repeater](https://nexterwp.com/wp-content/uploads/2026/09/hc-structure.webp)

- Give the container a class so you can style and hover it later.

![The Class Name field](https://nexterwp.com/wp-content/uploads/2026/09/hc-class.webp)

- On each row, switch on **Width/Height Options** and set the size, **Margin** and **Padding**.

- Use **Position** to pin anything that sits on top of something else.

![The Position setting](https://nexterwp.com/wp-content/uploads/2026/09/hc-position.webp)

- Press **Render HTML** to draw the structure, then publish.

![The Render HTML button](https://nexterwp.com/wp-content/uploads/2026/09/hc-render.webp)

> ***Build the structure before the styling.** Moving a row later changes the markup, and any hover class that pointed at it has to move too.*

## What Each Row Can Control

| Setting | What it does | Guide |
| ------- | ------------ | ----- |
| Width/Height Options | Width, min width, height, min height | — |
| Margin, Padding | Spacing outside and inside the row | — |
| Position, offsets, Z-Index | Relative or absolute, with top, right, bottom, left | — |
| Display, Alignment CSS Options | Block or flex, and how children line up | [Nesting elements](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/) |
| Background, Border, Radius, Shadow | The look of the row, with a hover version | [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/) |

## How It Behaves

- **Per-row settings really do render.** A row set to 300 by 120 pixels with 20 pixels of padding, a 12-pixel radius, a green background and white text measured exactly that on a published page.- **Pinning works the normal CSS way.** A row set to Absolute with Top 15 and Right 15 inside a Relative container rendered `position: absolute; top: 15px; right: 15px` — measured. Set the container to Relative first.- **Flex belongs on the container row**, not on the children: set Display to flex there and the rows inside line up.- **Class Name is the escape hatch.** Anything the settings will not do, you can do in your theme’s CSS against that class.- **Rows are responsive.** Sizes and spacing each have desktop, tablet and mobile values.

## Limitations

- **There is no drag-and-drop canvas.** The layout is a list of rows and their settings.- Absolute rows are taken out of the flow, so a container with only absolute children can collapse to nothing — give it a height.- A structure is not reusable on its own: to use the same card twice, copy the block or save it as a pattern.- Nothing appears until Render HTML is pressed.

## Troubleshooting

### My absolute element is in the wrong place

It is positioning against the nearest positioned ancestor. Set the container row’s **Position** to **Relative**, then the offsets are measured from the container.

### The container collapsed to nothing

Absolutely positioned rows do not hold a parent open. Give the container a height under **Width/Height Options**.

### It looks right on desktop and broken on mobile

Size and spacing are set per device. Switch the device icon next to each field and set the tablet and mobile values too.

### My badge is hidden behind the image

Raise **Z-Index** on the badge row.

## Related Docs

- [Hover Card block guide](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/)- [Multiple elements inside one element](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/)- [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/)- [Image content](https://nexterwp.com/docs/use-the-image-content-with-the-hover-card-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before building a custom Hover Card layout in WordPress?**
A: A workable Hover Card layout starts with three basics: the Hover Card block enabled under Nexter > Blocks, a little HTML knowledge, and a rough design that shows which parts sit inside which. Nexter Blocks, part of Nexter Suite from POSIMYTH Nexter, builds the markup from the rows you add, so understanding wrapper tags matters more than dragging visuals around. That structure-first approach keeps the layout predictable when you start pinning elements on top of each other.

**Q: Why is my absolute element not lining up inside the Hover Card?**
A: Absolute positioning follows the nearest positioned ancestor, so the container row has to be set to Relative first. Once that is in place, offsets like Top 15 and Right 15 are measured from the container instead of drifting against something higher up the page. That is why the page stresses setting Position on the container before pinning badges or overlays with absolute rows.

**Q: Can I make a Hover Card layout work on desktop, tablet, and mobile separately?**
A: Responsive control is built in at the row level. Sizes and spacing each have desktop, tablet, and mobile values, so a layout that looks right on desktop can still break on smaller screens if those device-specific values are left untouched. The practical move is to switch the device icon next to each field and set tablet and mobile values too, especially for Width/Height Options and spacing.

**Q: What is the best way to build a Hover Card layout without breaking the markup?**
A: Build the skeleton first: one container row, the rows inside it, and then the row that closes the container. Nexter Blocks renders HTML from that structure, so moving a row later changes the markup and any hover class tied to it has to move too. That is why starting with structure before styling is safer than trying to polish a half-built card.

**Q: What can I use if I need more control than the row settings give me?**
A: Class Name is the escape hatch for anything the row settings will not handle. The page also points to [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/) for hover-specific styling and [Nesting elements](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/) when you need multiple elements inside one element. In practice, that means you can keep the structure in Nexter Blocks and push edge-case styling into your theme CSS.