{"id":121111,"date":"2023-07-04T18:33:38","date_gmt":"2023-07-04T13:03:38","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=121111"},"modified":"2023-07-05T09:17:14","modified_gmt":"2023-07-05T03:47:14","slug":"create-custom-layout-with-hover-card-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-custom-layout-with-hover-card-in-elementor\/","title":{"rendered":"How to Create a Custom Layout With the Hover Card in Elementor?"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

To create a custom layout using the Hover Cards widget, ideally, you should have the design ready. <\/p>\n\n\n\n

For example, here, we\u2019ll create a simple profile card. Where we\u2019ll have a profile image, name and designation, and on hover, the card will grow.<\/p>\n\n\n\n

For the layout structure, we\u2019ll keep all the profile image, name and designation inside a div called \u201ccard<\/em>\u201d.<\/p>\n\n\n\n

To create the layout, add the Hover Card widget on the page and click the +ADD ITEM<\/strong> button to add an item.<\/p>\n\n\n\n

Set Div<\/strong> as the Open Tag<\/strong> and card<\/strong> as the class name since we want to add other elements inside the div, set None<\/strong> as the Close Tag<\/strong>. In the Content,<\/strong> select None<\/strong> because this div is just a container.<\/p>\n\n\n\n

Click the +ADD ITEM<\/strong> button to add the next item, select Div<\/strong> from the Open Tag<\/strong> dropdown. <\/p>\n\n\n\n

Then set Default<\/strong> as the Close Tag<\/strong>, so the tag closes there.<\/p>\n\n\n\n

From the Content<\/strong> dropdown, select Image<\/strong>.<\/p>\n\n\n\n

Again click on the +ADD ITEM<\/strong> button to add the next item for the name, select H3<\/strong> from the Open Tag<\/strong>. <\/p>\n\n\n\n

Then set Default<\/strong> as the Close Tag<\/strong> to close the h3 tag.<\/p>\n\n\n\n

From the Content<\/strong> dropdown, select Text<\/strong> and add the content in the Text<\/strong> field.<\/p>\n\n\n\n

To add the designation, click the +ADD ITEM<\/strong> button to add an item, then select p<\/strong> from the Open Tag<\/strong>. <\/p>\n\n\n\n

Then set Default<\/strong> as the Close Tag<\/strong> to close the p tag.<\/p>\n\n\n\n

From the Content<\/strong> dropdown, select Text<\/strong> and add the content in the Text<\/strong> field.<\/p>\n\n\n\n

Now to close the main div i.e. \u201ccard<\/em>\u201d click the +ADD ITEM<\/strong> button to add another item. In the Open Tag,<\/strong> select None<\/strong> and Div <\/strong>as the Close Tag<\/strong>, this will close the div with the class name \u201ccard<\/em>\u201d.<\/p>\n\n\n\n

\n

Note: Make sure to style the elements from the different styling options according to your need.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

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<\/strong> toggle under the Background Style<\/strong> section.<\/p>\n\n\n\n

To add the scale effect, go to the Transform css<\/strong> field, and add scale(1.1)<\/em>.<\/p>\n\n\n\n

Now if you hover over the div, it will grow slightly.<\/p>\n\n\n\n

Also, read How to Add Hover Effect With Custom Hover Class in Elementor Hover Card<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":121113,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[574,527],"class_list":["post-121111","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-hover-card","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=121111"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121111\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121113"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121111"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}