{"id":202,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=202"},"modified":"2026-10-17T22:32:15","modified_gmt":"2026-10-17T22:32:15","slug":"configure-hover-to-flip-interaction","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/configure-hover-to-flip-interaction\/","title":{"rendered":"Configure Hover-to-Flip Interaction"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li>Open the page in the Elementor editor.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> widget.<\/li>\n<li>Open the <strong>Content<\/strong> tab.<\/li>\n<li>Expand <strong>Layout Settings<\/strong>.<\/li>\n<li>Locate <strong>Event Type<\/strong>.<\/li>\n<li>Open the <strong>Event Type<\/strong> selector.<\/li>\n<li>Leave the value at <strong>Default<\/strong>.<\/li>\n<li>Preview the hover behavior and click <strong>Update<\/strong> to save.<\/li>\n<li>For <strong>Post Flipbox<\/strong>, select that widget and use its <strong>Event Type<\/strong> control.<\/li>\n<li>For <strong>Story Flipbox<\/strong>, select that widget and locate <strong>Animation Event<\/strong> instead.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">How the default behavior works<\/h2>\n\n\n<p class=\"wp-block-paragraph\">The frontend JavaScript treats an unset event type as hover, and the stylesheet defines hover states for the supported animation effects. Choosing <strong>Click<\/strong> changes the interaction handling to click events instead. If you want the usual pointer-hover transition, keep the selector on its default value rather than searching for a separate Hover setting.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Check touch and keyboard usability<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Hover is a pointer interaction, so do not assume it behaves exactly like a tap on every phone or tablet. Test the published page at a touch-sized viewport and make sure important back-side text, buttons, and links remain accessible. If the card&#8217;s back contains essential information, do not rely on an untested hover-only experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Screenshot to add: the Flipbox preview showing front and back states, alongside the interaction selector set to Default. This is a placeholder, not a captured screenshot.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Related animation settings<\/h2>\n\n\n<p class=\"wp-block-paragraph\">For explicit click-based activation, see <a href=\"\/docs\/flipbox-addon-for-elementor\/configure-click-to-flip-interaction\/\">Configure Click-to-Flip Interaction<\/a>. You can compare <a href=\"\/docs\/flipbox-addon-for-elementor\/animation-effects\/\">animation styles<\/a> and adjust the <a href=\"\/docs\/flipbox-addon-for-elementor\/set-flip-animation-duration\/\">transition duration<\/a> if the effect moves too quickly or slowly.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Return to <a href=\"\/docs\/flipbox-addon-for-elementor\/animations-interaction\/\">Animations and Interaction<\/a> for related guides.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Understand Flipbox&#8217;s default hover behavior, why there is no separate Hover option, and what to test on touch devices.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":197,"menu_order":0,"template":"","class_list":["post-202","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":6,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/202\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/202\/revisions\/549"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/197"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}