---
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-04-11
lang: en
author: "Aditya Sharma"
description: "With the Hover Card widget from The Plus Addons for Elementor, you can easily create complex layouts by adding multiple elements inside one element. Seamlessly combine images, text, buttons, and..."
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: 402
---

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

## 

- Utilizes the Hover Card widget from The Plus Addons for Elementor to create complex layouts with multiple elements.
- Requires knowledge of HTML nested elements to effectively structure content within the Hover Card.
- Instructs users to select appropriate tags and manage class names for adding images and text inside a container.

With the Hover Card widget from The Plus Addons for Elementor, you can easily create complex layouts by adding multiple elements inside one element. Seamlessly combine images, text, buttons, and more to create captivating designs that grab attention and enhance user engagement.

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

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

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

To do so, add the Hover Card widget on the page and click the **+ADD ITEM** button to add an item.

To create the container which will contain other elements, select the appropriate option from the **Open Tag** dropdown, ideally choose **Div**. 

If you want, you can add a class name in the **Enter Class** field.

Then set **None** as the **Close Tag**. So the tag will remain open.

> *Note: You must have knowledge of HTML nested elements to create complex layouts.*

In the **Content,** ideally you should select **None** because it is a container.

Now whichever element you add before closing the previous tag will be placed inside the container.

Let’s add an image and text content inside the container.

Click on the **+ADD ITEM** button to add an item and select **None** from the **Open Tag** dropdown if you don’t want to wrap the image inside any other tag, or you can select any appropriate tag you want. 

If you want, you can add a class name in the **Enter Class** field.

Then set **None** as the **Close Tag**, but if you have selected any other tag as the opening tag, select **Default** as the **Close Tag**.

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

Follow the same process to add Text content.

Once done, click on the **+ADD ITEM** button to add another item to close the container.

To do so, in the **Open Tag,** select **None** and **Div **or the tag you’ve used to open the container as the **Close Tag**, this will close the previously opened tag.

Set **None** in the **Content** dropdown as well.

![hover card nested element structure](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-nested-element-structure.gif)

Now, the image and text content is inside a div. You can use the browser inspect element to check the structure.

Following this process you can create complex layouts using nested elements.

![hover card nested element inspect element](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-nested-element-inspect-element.gif)

Also, read [How to Add Hover Effect With Custom Hover Class in Elementor Hover Card](https://theplusaddons.com/docs//add-hover-effect-with-custom-hover-class-in-elementor-hover-card/).