{"id":121106,"date":"2023-07-04T18:30:31","date_gmt":"2023-07-04T13:00:31","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=121106"},"modified":"2023-07-05T09:17:00","modified_gmt":"2023-07-05T03:47:00","slug":"add-multiple-elements-inside-one-element-in-elementor-hover-card","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-multiple-elements-inside-one-element-in-elementor-hover-card\/","title":{"rendered":"How to Add Multiple Elements Inside One Element in Elementor Hover Card?"},"content":{"rendered":"\n

With the Hover Card widget from The Plus Addons for Elementor, you can easily create complex layouts by adding multiple elements inside one element. Seamlessly combine images, text, buttons, and more to create captivating designs that grab attention and enhance user engagement.<\/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 do so, add the Hover Card widget on the page and click the +ADD ITEM<\/strong> button to add an item.<\/p>\n\n\n\n

To create the container which will contain other elements, select the appropriate option from the Open Tag<\/strong> dropdown, ideally choose Div<\/strong>. <\/p>\n\n\n\n

If you want, you can add a class name in the Enter Class<\/strong> field.<\/p>\n\n\n\n

Then set None<\/strong> as the Close Tag<\/strong>. So the tag will remain open.<\/p>\n\n\n\n

\n

Note: You must have knowledge of HTML nested elements to create complex layouts.<\/em><\/p>\n<\/blockquote>\n\n\n\n

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

In the Content,<\/strong> ideally you should select None<\/strong> because it is a container.<\/p>\n\n\n\n

Now whichever element you add before closing the previous tag will be placed inside the container.<\/p>\n\n\n\n

Let\u2019s add an image and text content inside the container.<\/p>\n\n\n\n

Click on the +ADD ITEM<\/strong> button to add an item and select None<\/strong> from the Open Tag<\/strong> dropdown if you don\u2019t want to wrap the image inside any other tag, or you can select any appropriate tag you want. <\/p>\n\n\n\n

If you want, you can add a class name in the Enter Class<\/strong> field.<\/p>\n\n\n\n

Then set None<\/strong> as the Close Tag<\/strong>, but if you have selected any other tag as the opening tag, select Default<\/strong> as the Close Tag<\/strong>.<\/p>\n\n\n\n

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

Follow the same process to add Text content.<\/p>\n\n\n\n

Once done, click on the +ADD ITEM<\/strong> button to add another item to close the container.<\/p>\n\n\n\n

To do so, in the Open Tag,<\/strong> select None<\/strong> and Div <\/strong>or the tag you\u2019ve used to open the container as the Close Tag<\/strong>, this will close the previously opened tag.<\/p>\n\n\n\n

Set None<\/strong> in the Content<\/strong> dropdown as well.<\/p>\n\n\n\n

\"hover<\/figure>\n\n\n\n

Now, the image and text content is inside a div. You can use the browser inspect element to check the structure.<\/p>\n\n\n\n

Following this process you can create complex layouts using nested elements.<\/p>\n\n\n\n

\"hover<\/figure>\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":121109,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[574,527],"class_list":["post-121106","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\/121106","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=121106"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121109"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121106"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}