---
title: "How to Add Multiple Elements Inside One Element in the Hover Card?"
url: https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/
date: 2024-12-16
modified: 2026-09-16
lang: en
author: "Aditya Sharma"
description: "Every card is really a box with things inside it. The Hover Card block builds that box out of rows: one row opens a tag and deliberately does not close..."
image: https://nexterwp.com/wp-content/uploads/2024/12/add-multiple-elements-inside-one-element-in-elementor-hover-card-1024x519.jpg
word_count: 553
---

# How to Add Multiple Elements Inside One Element in the Hover Card?

## Key Takeaways

- Hover Card block builds a card from rows, where one row opens a tag, later rows add contents, and a final row closes it again.
- Nexter Blocks works with the Hover Card block in Free and Nexter Blocks Pro, and the block is enabled under Nexter > Blocks in the WordPress dashboard.
- Only 21 tags are accepted, including div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td; anything else is silently turned into a div.

Every card is really a box with things inside it.

The Hover Card block builds that box out of rows: one row opens a tag and deliberately does not close it, the rows after it become its contents, and a final row closes it again.

*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.

## 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)

- On the first row set **Open Tag** to **Div**, **Close Tag** to **None**, and give it a class. This is the container.

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

- Add a row for each thing that goes inside, with its own tag and content.

![The Content type chooser](https://nexterwp.com/wp-content/uploads/2026/09/hc-content.webp)

- Add a last row with **Open Tag** set to **None** and **Close Tag** set to **Div**. This closes the container.

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

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

> ***Close Tag = None means “stay open”.** Everything after that row is inside it until a later row closes it.*

## A Worked Example

| Row | Open Tag | Close Tag | Content |
| --- | -------- | --------- | ------- |
| 1 | Div | None | None — the wrapper |
| 2 | H3 | Close | Text |
| 3 | P | Close | Text |
| 4 | None | Div | None — closes the wrapper |

Measured, that renders as one `div` containing an `h3` and a `p` — which is a card you can style as a unit and hover as a unit.

## How It Behaves

- **Rows render in order**, so the order in the repeater is the order of your markup. Drag a row and the structure changes with it.- **Close Tag = Close** closes the same tag that row opened — the everyday case for a heading or a paragraph.- **Wrappers are what make hover effects possible.** A container with a class is exactly what [Custom Hover](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/) needs to watch.- **You can nest as deep as you like**, as long as every open tag gets a later closing row.- **Only 21 tags are accepted** — div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td. Anything else is silently turned into a `div`, measured.

## Limitations

- **Nothing checks your tags.** An unclosed container silently swallows whatever follows it.- There is no visual nesting in the repeater — the rows are a flat list, and the tags do the nesting.- Nothing appears until Render HTML is pressed.

## Troubleshooting

### Everything after my card ended up inside it

A container was never closed. Add a row with **Open Tag** None and **Close Tag** set to the tag you opened.

### My elements are side by side and I wanted them stacked

Set **Display** on the container row — Block stacks, Flex puts them in a line, and the Alignment CSS Options underneath control how they line up.

### I lost track of my structure

Each row’s title reads *content [ open tag — close tag ]*, so the repeater list itself is a summary of the markup you have built.

## Related Docs

- [Hover Card block guide](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/)- [Build a custom layout](https://nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/)- [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/)- [Text content](https://nexterwp.com/docs/use-the-text-content-with-the-hover-card-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding multiple elements inside one Hover Card box?**
A: The setup is simple, but it depends on the Hover Card block being available in Nexter Blocks. The page says the block works in Nexter Blocks free and Nexter Blocks Pro, and it must be enabled under Nexter > Blocks in your WordPress dashboard. It also helps to know basic HTML, because the structure is built from rows that open and close tags rather than from a visual nesting tree.

**Q: How do I keep several elements inside one Hover Card container?**
A: The container stays open until a later row closes it. Start with a row where Open Tag is Div and Close Tag is None, then add separate rows for each inner element, and finish with a row where Open Tag is None and Close Tag is Div. That pattern creates one wrapper around all the content, which is what lets the card behave as a single unit when you style or hover it.

**Q: Why did everything after my card end up inside it?**
A: That usually means the wrapper was never closed. In this block, Close Tag = None means stay open, so every later row becomes part of that container until a closing row appears. The fix is to add a final row with Open Tag set to None and Close Tag set to the same tag you opened, such as Div. An unclosed container silently swallows whatever follows it.

**Q: Why are my elements showing side by side instead of stacked in the Hover Card?**
A: The layout comes from the container’s Display setting, not from the repeater rows themselves. Block stacks items, while Flex puts them in a line, and the Alignment CSS Options underneath control how they line up. If you want a vertical card layout, the container row needs Block rather than Flex. That matters because the markup can be correct while the visual layout still looks wrong.

**Q: Can I use this Hover Card structure for custom hover effects?**
A: The wrapper is built for that kind of use. The page says wrappers are what make hover effects possible, and a container with a class is exactly what Custom Hover needs to watch. That means the important part is not just nesting elements, but giving the outer container a class so the hover behavior has one target to track. The related [Custom Hover](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/) doc covers that pattern.

**Q: What are the main limits of building multiple elements inside one Hover Card?**
A: The structure has a few hard limits: only 21 tags are accepted, nothing checks your tags for you, and there is no visual nesting in the repeater because it is just a flat list of rows. Anything outside div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td is silently turned into a div. Nothing appears until Render HTML is pressed.