---
title: "How to Create a Custom Layout With the Hover Card in Elementor?"
url: https://theplusaddons.com/docs/create-custom-layout-with-hover-card-in-elementor/
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 create a completely custom layout tailored to your unique design preferences. Easily add and arrange elements, customise..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Create-a-Custom-Layout-With-the-Hover-Card-in-Elementor_-1024x536.jpg
word_count: 468
---

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

## 

- Creates custom layouts using the Hover Card widget from The Plus Addons for Elementor.
- Structures layout by adding profile image, name, and designation inside a div called 'card'.
- Applies hover effect by enabling the Background toggle and adding scale(1.1) in the Transform CSS field.

With the Hover Card widget from The Plus Addons for Elementor, you can create a completely custom layout tailored to your unique design preferences. Easily add and arrange elements, customise styles, and add interactive hover effects to craft visually captivating and engaging content.

*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 create a custom layout using the Hover Cards widget, 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, and on hover, the card will grow.

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 widget on the page and click the **+ADD ITEM** button to add an 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 ITEM** button to add the next item, select **Div** from the **Open Tag** dropdown. 

Then set **Default** as the **Close Tag**, so the tag closes there.

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

Again click on the **+ADD ITEM** button to add the next item for the name, select **H3** from the **Open Tag**. 

Then set **Default** as the **Close Tag** to close the h3 tag.

From the **Content** dropdown, select **Text** and add the content in the **Text** field.

To add the designation, click the **+ADD ITEM** 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** dropdown, select **Text** and add the content in the **Text** field.

Now to close the main div i.e. “*card*” click the **+ADD ITEM** 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 from the different styling options according to your need.*

So the layout is ready, now for the hover effect, since we want the entire div to grow on hover, select the first item and turn on the **Background** toggle under the **Background Style** section.

To add the scale effect, go to the **Transform CSS** field, and add *scale(1.1)*.

Now if you hover over the div, it will grow slightly.

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