{"id":121089,"date":"2023-07-04T18:11:51","date_gmt":"2023-07-04T12:41:51","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=121089"},"modified":"2023-07-05T09:17:28","modified_gmt":"2023-07-05T03:47:28","slug":"use-html-content-with-hover-card-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/use-html-content-with-hover-card-in-elementor\/","title":{"rendered":"How to Use the HTML Content With the Hover Card in Elementor?"},"content":{"rendered":"\n<p>With the Hover Card widget from The Plus Addons for Elementor, you can easily add HTML content to your layout. Using the WYSIWYG editor, you can customise the content to match your needs.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, <a href=\"\/docs\/hover-card-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/advanced-hover-card-animations?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To use HTML content in the Hover Card widget, add the widget on the page and click the <strong>+ADD ITEM<\/strong> button to add an item.<\/p>\n\n\n\n<p>Select the appropriate tag in the <strong>Open<\/strong> tab.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: If you don\u2019t want to wrap the content inside another tag you can set the <\/em><strong><em>Open Tag<\/em><\/strong><em> to <\/em><strong><em>None<\/em><\/strong><em>.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>If you want, you can add a class name in the <strong>Enter Class<\/strong> field.<\/p>\n\n\n\n<p>Then select the appropriate tag in the <strong>Close <\/strong>tab.&nbsp;<\/p>\n\n\n\n<p>From the <strong>Content<\/strong> dropdown, select <strong>HTML<\/strong>, then, in the <strong>HTML Content<\/strong> field, you can add different types of content, such as text, image, link etc. together using the WYSIWYG editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"333\" height=\"959\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/07\/hover-card-html-content-type.png\" alt=\"hover card html content type\" class=\"wp-image-121090\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/07\/hover-card-html-content-type.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/07\/hover-card-html-content-type-104x300.png 104w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>Also, read <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/use-image-content-with-hover-card-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use the Image Content With the Hover Card in Elementor<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":121091,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[574,527],"class_list":["post-121089","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\/121089","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=121089"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121089\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121091"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121089"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}