---
title: "How to Add Multiple Elements Inside One Element in Elementor Hover Card?"
url: https://theplusaddons.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/
date: 2023-07-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Cards, badges and banners need several elements inside one box, so the box can be styled and hovered as one. The Hover Card widget in The Plus Addons for Elementor..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Add-Multiple-Elements-Inside-One-Element-in-Elementor-Hover-Card_-1024x536.jpg
word_count: 560
---

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

## 

- The Plus Addons for Elementor Hover Card widget builds one card by opening a div in one row, adding elements in later rows, and closing the div in a final row.
- The Plus Addons for Elementor Hover Card widget is part of the free plugin, and the editor warns that it is deprecated since The Plus Addons for Elementor 6.5.0 and will be completely removed in 6.6.0.
- Rows print in order, so a closing row must come after the content it wraps; a mismatched close tag like opening H3 and closing p leaves an empty paragraph inside it.

Cards, badges and banners need several elements inside one box, so the box can be styled and hovered as one.

The **Hover Card** widget in The Plus Addons for Elementor does this with its tags: one row opens a div and leaves it open, the next rows add the elements, and a last row closes the div.

*To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, [click here](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hover-card/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — Hover Card is part of the free The Plus Addons for Elementor plugin. It works the same with the Pro plugin installed.- **Widget to enable:** Hover Card, switched on under **The Plus Addons > Widgets**.- **Deprecated:** the editor shows “The Hover Card widget has been deprecated since The Plus Addons for Elementor 6.5.0. Note that Hover Card will be completely removed once The Plus Addons for Elementor 6.6.0 is released.” No replacement widget is named, so avoid it for new pages.- **Skills:** you build the HTML structure yourself, row by row, so basic HTML and CSS knowledge helps.

## How to Put Elements Inside One Element

- Add the **Hover Card** widget and click **+ Add Item**. Set **Open Tag** to **Div**, add a class such as **product-card** in **Enter Class**, and set **Content** to **None**.- On the **Close** tab, set **Close Tag** to **None**. The div stays open for the next rows.

![Close tab of the first row with Close Tag set to None, so the product-card div stays open](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-close-none.webp)

- Add a row for each element: an Image row, a Text row with Open Tag H3, a Text row with Open Tag p, and so on. Give each an Open Tag and leave its **Close Tag** on **Default**, or use Open Tag None and Close Tag None for content without a wrapper.- Add a last row with **Open Tag** None, **Close Tag** Div and **Content** None. It closes the div from step 1.

![The last row, none [ none -- div ], with Close Tag set to Div to close the card](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-close-tag.webp)

![Adding rows inside an open div and closing it with the last row](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-nested-element-structure.gif)

In the browser inspector the image, title, price and button now sit inside the one div:

![Browser inspector showing the elements nested inside the div](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-nested-element-inspect-element.gif)

![Product card whose image, title, price and button are nested inside one div](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-card.webp)

## How It Behaves

- Rows are printed in order. Everything between the row that opens a tag with Close Tag None and the row that closes it ends up inside that tag.- You can nest several levels, for example a card div that holds an image div. Close them in reverse order.- Each row title shows its tags, for example **none [ div -- none ]** for an open card and **none [ none -- div ]** for the row that closes it.

## Limitations

- A closing row with nothing left to close (Open Tag None with Close Tag Default or Div) closes the widget's own wrapper, and every later row ends up outside it.- Closing with a different tag than the one opened, for example opening H3 and closing p, does not close the H3; the browser adds an empty paragraph inside it.- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.

## Troubleshooting

### An element appears outside the card

Check the order of the rows and that the closing row comes after it. Look for an extra row that closes a tag, including rows with Open Tag None and Close Tag Default.

## Related Docs

- [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [Create a custom layout with the Hover Card](https://theplusaddons.com/docs/create-custom-layout-with-hover-card-in-elementor/)- [Add a hover effect with a Custom Hover class](https://theplusaddons.com/docs/add-hover-effect-with-custom-hover-class-in-elementor-hover-card/)

## Frequently Asked Questions

**Q: How do I put multiple elements inside one Hover Card box in Elementor?**
A: The Hover Card widget in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH builds the box with HTML tags row by row. Open the card with a Div row, keep its Close Tag set to None, then add separate rows for the image, title, price, and button. Finish with a last row that closes the Div. That structure is what makes the whole card behave like one styled and hovered block.

**Q: Why is one element showing outside the Hover Card instead of inside it?**
A: That usually means the row order is wrong or an extra closing row ended the wrapper too early. The open row has to come before every nested element, and the closing row has to come after them. A common mistake is adding a row with Open Tag None and Close Tag Default when nothing is left to close, which closes the widget’s own wrapper and pushes later rows outside the card.

**Q: What should I know before using Hover Card for custom card layouts?**
A: Hover Card is part of the free The Plus Addons for Elementor plugin and works the same with Pro installed. It also needs to be switched on under The Plus Addons > Widgets. The page notes that you build the HTML structure yourself row by row, so basic HTML and CSS knowledge helps when you want cards, badges, or banners to act as one unit.

**Q: Can I nest more than one wrapper inside a Hover Card?**
A: The tag system supports nested levels, so you can open a card div and then place another div inside it for an image or other grouped content. The key rule is to close tags in reverse order. That matters because rows are printed in order, so each open tag stays active until its matching close row appears later.

**Q: What happens if I close a tag with the wrong closing tag in Hover Card?**
A: A mismatched close does not end the tag you opened. If you open H3 and close p, the H3 stays open and the browser adds an empty paragraph inside it. That can break your layout in subtle ways, especially when you expect text elements to sit cleanly inside one card wrapper.

**Q: Is Hover Card still a good choice for new pages in The Plus Addons for Elementor?**
A: The page says Hover Card has been deprecated since The Plus Addons for Elementor 6.5.0 and will be completely removed once 6.6.0 is released. That makes it a risky choice for new pages even though it still works now. For related setup details, [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/) covers the widget’s settings, while [Create a custom layout with the Hover Card](https://theplusaddons.com/docs/create-custom-layout-with-hover-card-in-elementor/) shows layout use cases.