Style rows add your own CSS to a layout built with the Hover Card widget, for example to style the classes you gave its rows.
The Style content type of the Hover Card widget in The Plus Addons for Elementor prints that CSS in a style tag. Read the limitation below first: the CSS is only printed for administrators.
To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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 Add Style Content
- Add the Hover Card widget and click + Add Item in Content > Hover Card.
- Set Open Tag and Close Tag to None. The style tag is added for you.
- Set Content to Style and write the CSS, without a style tag, in Custom Style. Target the classes you set in Enter Class on other rows.
This CSS adds an orange underline to the title row, which has the class hc-accent:
.hc-accent {
letter-spacing: .5px;
border-bottom: 3px solid #F59E0B;
display: inline-block;
}
How It Behaves
- The widget does not limit your selectors to the widget, so use specific class names.
- A closing style tag typed inside Custom Style is neutralised, so it cannot end the style block early.
Limitations
- The CSS is only printed for logged-in administrators. Logged-out visitors and users with other roles, such as subscribers, do not get it, so the page looks different for them.
- Elementor caches widget output by default (Elementor > Settings > Performance > Element Cache, 1 Day). If an administrator views the page first, visitors get the CSS until the cache expires; if a visitor is first, nobody gets it, administrators included. Set the widget’s Advanced > Cache Settings to Inactive to render it fresh for each viewer.
- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.
Troubleshooting
The CSS works when I am logged in but not in a private window
That is the administrator-only limitation. Put the CSS somewhere every visitor receives it instead.
