{"id":271,"date":"2021-06-01T12:50:22","date_gmt":"2021-06-01T12:50:22","guid":{"rendered":"https:\/\/wow-company.com\/envato\/?p=271"},"modified":"2021-06-01T12:53:20","modified_gmt":"2021-06-01T12:53:20","slug":"popup-box","status":"publish","type":"post","link":"https:\/\/wow-company.com\/envato\/wordpress-plugins\/popup-box\/","title":{"rendered":"Popup Box"},"content":{"rendered":"\n<section class=\"section is-medium\">\n    <div class=\"container\">\n        <div class=\"block has-text-centered ds-title\">\n            <p class=\"subtitle is-5 is-uppercase has-text-danger\">what you get<\/p>\n            <h2 class=\"title is-2 is-space\">\n                Awesome Features <\/h2>\n        <\/div>\n        <div class=\"columns is-multiline is-variable is-3 feature-boxes\">\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-bullseye-pointer fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Triggers<\/p>\n                        <p class=\"has-text-left\">Add additional triggers to open a popup such as:\n                            <b>Auto show<\/b>, <b>by Click on element<\/b>, <b>by Hover on element<\/b>, <b>Exit\n                                intent<\/b>, <b>Right Click<\/b>, <b>Select Text<\/b>, <b>Scrolling<\/b>. <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-hand-paper fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Forced Interaction<\/p>\n                        <p class=\"has-text-left\">Disabling the close button can be used in a variety of ways, from\n                            protecting content\n                            or areas of your site to forcing users to complete an action before continuing.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-window-frame fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Show only once<\/p>\n                        <p class=\"has-text-left\">Possibility to show the pop-up window only once for the user.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-external-link-alt fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Redirect visitor on close<\/p>\n                        <p class=\"has-text-left\">Defines if the visitor gets redirected to another URL after popup gets\n                            closed.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-window-close fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Auto Close<\/p>\n                        <p class=\"has-text-left\">This will help you lock the screen for some time so that the user can\n                            read the\n                            necessary information.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-calendar-alt fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Scheduling<\/p>\n                        <p class=\"has-text-left\">Add scheduling options to your popups. With multiple schedule types,\n                            you can\n                            precisely schedule your popups in just a few minutes.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-eye fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Display on Taxonomy<\/p>\n                        <p class=\"has-text-left\">The ability to display pop-ups only in taxonomies. Works with\n                            WooCommerce, EDD and\n                            other plugins with taxonomy.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-users-class fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">User Role<\/p>\n                        <p class=\"has-text-left\">Show popup depending on user (for all users, only for logged-in users,\n                            only for not\n                            logged-in\n                            users).<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-language fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Multi language<\/p>\n                        <p class=\"has-text-left\">The condition for display the popup depending on the language of the\n                            site. It is good\n                            to use if you have a website in several languages and you need to show different\n                            popups for a different language.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-browser fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Browsers<\/p>\n                        <p class=\"has-text-left\">Ability to deactivate the display of popups in selected browsers.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-heart-rate fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Live Editor<\/p>\n                        <p class=\"has-text-left\">Creating the popup style live.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-palette fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Highly Customizable<\/p>\n                        <p class=\"has-text-left\">Build a more powerful and influential style for your popups &#8211;\n                            add background\n                            images, add font style for popup overlay, content and close button, set different\n                            close button position.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-swatchbook fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Animation<\/p>\n                        <p class=\"has-text-left\">28 different animations for show and hide popup and overlay. Make the\n                            appearance of\n                            your popup more attractive.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-tablet fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Devices control<\/p>\n                        <p class=\"has-text-left\">You can specify for which devices to show the popup.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-file-alt fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Specific pages<\/p>\n                        <p class=\"has-text-left\">Show the popup on the specific pages.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"fab fa-js fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Without jQuery<\/p>\n                        <p class=\"has-text-left\">The plugin works without jQuery library, only JavaScript.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-cookie fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Without Cookie<\/p>\n                        <p class=\"has-text-left\">The plugin does not use cookies and complies GDPR.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-toggle-on fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Activate\/Deactivate mode<\/p>\n                        <p class=\"has-text-left\">Possibility to activate and deactivate popups.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-tachometer-fastest fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Test Mode<\/p>\n                        <p class=\"has-text-left\">In testing mode, the popup will be displayed only for the site\n                            administrator but not for users.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-globe fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Cross-Browser<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-code fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">W3C Valid Code<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-download fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Free Updates<\/p>\n                        <p class=\"has-text-left\">Product get maintained with improvements and bug fixes.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-headset fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Fast Support<\/p>\n                        <p class=\"has-text-left\">We work closely with the user community and listen to your opinion. We\n                            provide\n                            free\n                            technical and information support for customers.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"section is-medium has-background-white-ter\" id=\"demo\">\n    <div class=\"container\">\n        <div class=\"block has-text-centered ds-title\">\n            <h2 class=\"title is-2 is-space\">\n                Popup Demos\n            <\/h2>\n            <p class=\"subtitle is-6 is-uppercase has-text-danger\">Each popup is fully customizable, styles, colors,\n                sizes, etc.\n            <\/p>\n        <\/div>\n        <div class=\"columns is-multiline is-variable is-3 feature-boxes\">\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">HTML Text<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-3\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Hover on element<\/p>\n                        <p class=\"has-text-left\">\n                            <span class=\"ds-open-popup-10\">Hover on element<\/span>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Right Click<\/p>\n                        <p class=\"has-text-left\">\n                            Please, click on mouse right button.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Select text<\/p>\n                        <p class=\"has-text-left\">\n                            Please, select any text.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Video<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-9\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Iframe<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-8\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Redirect after close<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-11\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Auto Close<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-12\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Google Map<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-13\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-half-tablet is-one-third-desktop is-one-quarter-fullhd\">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Info Bar<\/p>\n                        <p class=\"has-text-left\">\n                            <a href=\"#ds-open-popup-14\">Open Popup<\/a>\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Easy to create Popups<\/p>\n","protected":false},"author":1,"featured_media":272,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-plugins"],"_links":{"self":[{"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/posts\/271"}],"collection":[{"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":1,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/posts\/271\/revisions\/273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/media\/272"}],"wp:attachment":[{"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wow-company.com\/envato\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}