---
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-09-14
lang: en
author: "Aditya Sharma"
description: "A custom layout is easiest to build when you know its structure first: which box holds which element. This guide builds a product card with the Hover Card widget in..."
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: 553
---

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

## 

- The Plus Addons for Elementor Hover Card widget builds a product card with six rows: Card, Image, Title, Price, Button, and Close the card.
- Hover Card uses Display set to Block on rows 1 to 4, plus Width/Height Options on row 1 with a width such as 320 px and padding, so the card respects its own width.
- Hover Card is deprecated since The Plus Addons for Elementor 6.5.0 and is removed once The Plus Addons for Elementor 6.6.0 is released; the post says to avoid it for new pages.

A custom layout is easiest to build when you know its structure first: which box holds which element.

This guide builds a product card with the **Hover Card** widget in The Plus Addons for Elementor: an image, a title, a price and a button inside one card that grows slightly when the pointer is over it.

*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 Create a Custom Layout

- Add the **Hover Card** widget and create six rows with **+ Add Item**, set up like this:

| Row | Open Tag / Enter Class | Close Tag | Content |
| --- | ---------------------- | --------- | ------- |
| 1 Card | Div / product-card | None | None |
| 2 Image | Div / product-image | Default | Image |
| 3 Title | H3 / product-title | Default | Text: product name |
| 4 Price | p / product-price | Default | Text: price |
| 5 Button | a / product-button, with a Link | Default | Text: Shop now |
| 6 Close the card | None | Div | None |

![The six rows of the product card in the Hover Card section, with the finished card on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-add-item.webp)

- On rows 1 to 4, set **Style > Display** to **Block**. The default Initial keeps every tag inline, so the title and price would share a line and the card would ignore its width.- On row 1, switch on **Width/Height Options** and set **Width** (for example 320 px), then add **Padding**.

![Width/Height Options switched on for the card row with Width set to 320 pixels](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-width-height.webp)

- Still on row 1, switch on **Background Style > Background**. On the **Normal** tab set a white background, a **Border Radius** and a **Box Shadow**.

![Background switched on for the card row with the Normal tab settings](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-background.webp)

- Open the **Hover** tab and type **scale(1.05)** in **Transform css**. Style the text and button rows under Text Style and Background Style, then publish.

![Hover tab of the card row with Transform css set to scale(1.05)](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-transform-hover.webp)

The card at rest and while hovered:

![Product card at rest](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-card.webp)

![The same product card slightly larger while hovered](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-card-grow-hover.webp)

Building a layout from rows, in motion:

## How It Behaves

- The card grows over 0.3 seconds and shrinks back when the pointer leaves. Add **Transition css** on the Normal tab, for example **all 1s linear**, to change the speed in both directions.- A **Transform css** value on the **Normal** tab is applied all the time, not only on hover.- Rows can also be placed freely: set **Position** to Absolute on a badge row inside the card and use the Top and Right offsets. The card row keeps the default Relative position, so the badge is placed inside it.

![A New badge row with Position Absolute and Top and Right offsets, placed in the corner of the card image](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-position.webp)

## Limitations

- Width, Height and offsets have no visible effect while **Display** is Initial.- The product image gets no alt text.- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.

## Troubleshooting

### The card is already bigger before I hover

The Transform css value is on the Normal tab. Move it to the **Hover** tab.

### The title and price are on one line

Set **Display** to **Block** on those rows.

## Related Docs

- [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [Add multiple elements inside one element](https://theplusaddons.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/)- [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: What do I need before building a custom hover card layout in Elementor?**
A: The key requirement is that Hover Card is already installed and activated inside The Plus Addons for Elementor. The page also says the widget is free and works the same with the Pro plugin installed. Since you build the HTML structure row by row, basic HTML and CSS knowledge helps a lot. That matters because the layout depends on tags, classes, display settings, and hover transforms rather than a drag-and-drop card template.

**Q: Why do the title and price end up on the same line in a hover card?**
A: That happens when the rows are still using the default Initial display, which keeps tags inline. The fix is to set Style > Display to Block on rows 1 to 4 so each element behaves like its own block. This is important for product cards because inline elements ignore the structure you expect, which can also make the card width feel wrong.

**Q: How do I make a hover card grow only when I hover it?**
A: The growth effect comes from putting scale(1.05) in Transform css on the Hover tab, not on Normal. The page notes that a Transform css value on Normal is applied all the time, which is why the card can look bigger before hover if it is placed in the wrong tab. A Transition css value such as all 1s linear changes how fast it grows and shrinks.

**Q: Can I use Hover Card to build a product card with an image, title, price, and button?**
A: That is exactly the example shown on the page. The layout uses one Hover Card with six rows: a wrapping div for product-card, an image div for product-image, an H3 title, a p price, an a button with a link, and a closing div. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this kind of structure inside Elementor so you can build the whole card from rows instead of separate widgets.

**Q: What are the main limits of the Hover Card widget?**
A: Width, height, and offsets only matter when Display is not Initial. The page also says the product image gets no alt text, so it is not a fit if that field is essential to your workflow. Another practical limit is lifecycle risk: Hover Card is deprecated since The Plus Addons for Elementor 6.5.0 and will be removed once 6.6.0 is released, so it should be avoided for new pages.

**Q: How do I place a badge inside a hover card without breaking the layout?**
A: Absolute positioning works for nested elements as long as the main card row stays Relative. The page says you can set Position to Absolute on a badge row inside the card and then use Top and Right offsets. That matters because absolute elements are positioned against their nearest positioned parent, so keeping the outer card row Relative makes the badge stay anchored inside it instead of drifting outside.