---
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
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?

## Key Takeaways

- The Plus Addons for Elementor Hover Card widget allows users to create custom layouts tailored to design preferences.
- Users can add interactive hover effects, such as a scale effect, by using the Transform CSS field with scale(1.1).
- To structure a profile card layout, users must organize elements like image, name, and designation within a div called 'card' using the Hover Card widget.

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

## Frequently Asked Questions

**Q: What should I do if the Hover Card widget isn't displaying correctly?**
A: If the Hover Card widget isn't showing up, ensure that The Plus Addons for Elementor is installed and activated. This widget relies on the plugin to function. If it's activated and still not working, check for any conflicts with other plugins or themes that might interfere with its display.

**Q: What is the best way to style the elements in the Hover Card?**
A: Styling elements in the Hover Card is crucial for achieving your desired look. Use the various styling options available in The Plus Addons for Elementor to adjust colors, fonts, and spacing. This customization enhances the visual appeal and ensures the card aligns with your overall design theme.

**Q: How do I add a hover effect to the Hover Card?**
A: To add a hover effect, select the main div of your Hover Card and enable the Background toggle under the Background Style section. Then, use the Transform CSS field to apply a scale effect, such as scale(1.1). This will create a subtle growth effect when users hover over the card.

**Q: Are there any limitations when using the Hover Card widget?**
A: The Hover Card widget is specifically designed for use with Elementor and does not support other page builders like Gutenberg, Beaver Builder, or Divi. This limitation means you must use Elementor to take full advantage of the widget's features.

**Q: What happens if I forget to close the div in the Hover Card setup?**
A: If you forget to close the div in your Hover Card setup, it can lead to layout issues where elements do not display correctly. Always ensure that you close the main div with the class name 'card' to maintain the intended structure and functionality of your layout.