{"id":20900,"date":"2021-02-26T15:00:21","date_gmt":"2021-02-26T14:00:21","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20900"},"modified":"2021-02-26T12:26:52","modified_gmt":"2021-02-26T11:26:52","slug":"popup-design-examples","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/popup-design-examples\/","title":{"rendered":"20 Most Effective Pop-up Design Examples"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]For many people, pop-ups are the bane of browsing the Internet. They unabashedly appear on your screen, vexing or scaring you into running as fast and as far away as your mouse will take you. Usually, we turn them off without even looking at what they have to offer. That\u2019s because we automatically associate pop-ups with something bad. We tend to dislike anything standing between us and the content we\u2019re looking for. It\u2019s similar to ads on TV or YouTube &#8211; if we could, we would skip them every single time. But the undeniable fact is that pop-ups work, and they work well. Especially when they\u2019re created with care and timed to appear at precisely the right moment.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Almost all brands, no matter how big or small, use pop-ups. The reason they do it is to capture your attention.<\/strong> It\u2019s as simple as that. In most cases, they want to inform you about a special discount or invite you to subscribe to their newsletter. But to prevent you from scurrying away, their pop-ups need to be compelling. The combination of great design and effective copy is a surefire way of ensuring visitors stay on a site, and these brands have excelled at the pop-up game:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#an-other\">A.N Other<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mihan-aromatics\">Mihan Aromatics\u2122<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#red-clay-hot-sauce\">Red Clay Hot Sauce<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#st-leo\">St. Leo<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mysa-skincare\">Mysa Skincare<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#provider-store\">Provider Store<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#starface\">Starface<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#moooi\">Moooi<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#chicolle\">Chicolle<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#monoware\">Monoware<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#dims\">Dims.<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#marco-ice-cream\">Marco Ice Cream<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#gantri\">Gantri<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#not-another-bill\">Not-Another-Bill<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#maisonette\">Maisonette<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#living-edge\">Living Edge<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#salt-surf\">Salt Surf<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#another-tomorrow\">Another Tomorrow<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#name-of-love\">Name of Love<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#ji-oh\">Ji Oh<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"an-other\"><\/a>A.N Other<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/A.N-Other.jpg\" class=\"attachment-full size-full\" alt=\"A.N Other\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/A.N-Other.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/A.N-Other-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/A.N-Other-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/A.N-Other-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The pop-up on <a href=\"https:\/\/an-other.com\/\" target=\"_blank\" rel=\"noopener\">A.N Other<\/a>\u2019s website <strong>appears after several scrolls<\/strong> when you\u2019ve already reached the bottom of their homepage. By that time, you\u2019ve already met the brand and seen their products. A pop-up that invites you to leave your email address and get a 10% discount off your first purchase is actually a more-than-welcome intruder. Aesthetically speaking, the pop-up looks<strong> clean and elegant, matching the vibe of the site<\/strong>. The copy is on-point, too. It\u2019s short and informative, ensuring the visitors immediately understand how subscribing can benefit them.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mihan-aromatics\"><\/a>Mihan Aromatics\u2122<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mihan-Aromatics.jpg\" class=\"attachment-full size-full\" alt=\"Mihan Aromatics\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mihan-Aromatics.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mihan-Aromatics-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mihan-Aromatics-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mihan-Aromatics-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.mihanaromatics.com\/home\" target=\"_blank\" rel=\"noopener\">Mihan Aromatics\u2122<\/a>\u2019s pop-up <strong>looks like an integral part of their site<\/strong>. The photo featured on it shows one hand gently touching the palm of the other. It is beautifully edited so that it appears <strong>dreamlike<\/strong>. It also matches the fullscreen video placed at the top of the page, showing a close-up shot of a girl\u2019s back. The pop-up also contains a succinct invitation to subscribe to the company\u2019s newsletter, written in a refined, sans-serif font.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"red-clay-hot-sauce\"><\/a>Red Clay Hot Sauce<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Red-Clay-Hot-Sauce.jpg\" class=\"attachment-full size-full\" alt=\"Red Clay Hot Sauce\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Red-Clay-Hot-Sauce.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Red-Clay-Hot-Sauce-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Red-Clay-Hot-Sauce-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Red-Clay-Hot-Sauce-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/redclayhotsauce.com\/\" target=\"_blank\" rel=\"noopener\">Red Clay Hot Sauce<\/a> enriched their pop-up with some <strong>witty copy<\/strong>. This is a company that makes hot sauces, hence their \u201c<strong>saucy offer<\/strong>\u201d to get a 15% discount off the first order upon signing up for their newsletter. The pop-up is further adorned with an <strong>illustration of a hand holding a pepper<\/strong>, which is one of the base-ingredients found in their products. They found a way to create an interesting pop-up by combining elements associated with what they do, which is a nice way of encouraging users to press the \u201cSubscribe\u201d button. Another great thing is that the <strong>pop-up does not show up immediately, but only after several scrolls.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"st-leo\"><\/a>St. Leo<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/St.-Leo.jpg\" class=\"attachment-full size-full\" alt=\"St. Leo\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/St.-Leo.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/St.-Leo-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/St.-Leo-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/St.-Leo-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Pop-ups don\u2019t necessarily have to be displayed in the middle of the screen. On <a href=\"https:\/\/stleointeriors.com\/\" target=\"_blank\" rel=\"noopener\">St. Leo<\/a>\u2019s site, you will find the pop-up<strong> at the bottom of the page<\/strong>. It appears without fanfare, so subtly you may even miss it or mistake it for a sticky footer. The invitation to subscribe to the company\u2019s newsletter is written in an all-caps, black, serif font, placed on a white background. <strong>It\u2019s simple, unobtrusive, yet effective.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mysa-skincare\"><\/a>Mysa Skincare<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mysa-Skincare.jpg\" class=\"attachment-full size-full\" alt=\"Mysa Skincare\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mysa-Skincare.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mysa-Skincare-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mysa-Skincare-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Mysa-Skincare-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To ensure people don\u2019t click the \u201cX\u201d button immediately upon seeing the pop-up, brands come up with <strong>appealing offers that are hard to say no to<\/strong>. <a href=\"http:\/\/mysa-skincare.com\" target=\"_blank\" rel=\"noopener\">Mysa Skincare<\/a>\u2019s pop-up invites you to subscribe to their newsletter and save a tempting 15% off the first order. They\u2019ve also placed a photo of one of their products next to the text, creating a gorgeously designed pop-up that you will most likely close only after having entered your email address.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"provider-store\"><\/a>Provider Store<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Provider-Store.jpg\" class=\"attachment-full size-full\" alt=\"Provider Store\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Provider-Store.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Provider-Store-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Provider-Store-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Provider-Store-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.providerstore.com.au\/\" target=\"_blank\" rel=\"noopener\">Provider Store<\/a> creates slow made Japanese homewares. A gentle color palette is widely used throughout the site, and the pop-up is no different. It includes a picture of two bowls in predominantly <strong>pastel hues that look very appealing to the eye<\/strong>. There\u2019s also a <strong>cute illustration<\/strong> of a shopping bag, positioned just above the text that tells you that you can get a discount for the first purchase if you sign up for their newsletter.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"starface\"><\/a>Starface<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Starface.jpg\" class=\"attachment-full size-full\" alt=\"Starface\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Starface.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Starface-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Starface-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Starface-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/starface.world\/\" target=\"_blank\" rel=\"noopener\">Starface<\/a>\u2019s pop-up looks too cute to be closed the moment you see it. It\u2019s colored in a candy pink shade that most users will find appealing. The pop-up\u2019s design is essentially simple, containing the brand\u2019s logo, two empty fields where you can enter your email address and phone number, and a disclaimer. But what\u2019s interesting, aside from the color of the background, are the <a href=\"https:\/\/qodeinteractive.com\/magazine\/google-font-combinations\/\"><strong>attractive font combinations<\/strong><\/a>. The logo is written in large, all-caps letters. The invitation to get in touch with the company is in an outlined font, while the rest of the text is written using a monospace font. What\u2019s also interesting is the <strong>mouse cursor, shaped like a literal starface<\/strong>. When you see a mix of all of these elements, it\u2019s hard not to cave in and fill in your details.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"moooi\"><\/a>Moooi<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Moooi.jpg\" class=\"attachment-full size-full\" alt=\"Moooi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Moooi.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Moooi-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Moooi-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Moooi-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/moooi.com\/en\/\" target=\"_blank\" rel=\"noopener\">Moooi<\/a>\u2019s pop-up features a recreation of a <strong>well-known illustration<\/strong>. The picture, which was created by Alcide Dessalines d&#8217;Orbigny and first appeared in the book \u201cVoyage dans l&#8217;Am\u00e9rique m\u00e9ridionale,\u201d is of a specific type of monkey &#8211; the white-eared titi a.k.a. the Bolivian gray titi. On Moooi\u2019s site, the monkey is not hugging a branch, as it is in the original. Instead, he\u2019s standing on a bank, holding what looks like a snowball. Aside from <a href=\"https:\/\/qodeinteractive.com\/magazine\/floral-illustrations-in-web-design\/\">floral illustrations<\/a>, Moooi\u2019s designs often feature monkeys, so it\u2019s not surprising one of them is there to greet you as soon as you visit the site. You can also choose to subscribe as a customer, professional, or a member of the press. Based on your selection, Moooi will send you unique offers.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"chicolle\"><\/a>Chicolle<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Chicolle.jpg\" class=\"attachment-full size-full\" alt=\"Chicolle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Chicolle.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Chicolle-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Chicolle-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Chicolle-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.chicolle.com\/\" target=\"_blank\" rel=\"noopener\">Chicolle<\/a> is a skincare brand with an urban website. Their <strong>simple<\/strong> pop-up gives off <strong>slightly brutalist vibes<\/strong>. It contains just the offer to get a discount upon signing up for their newsletter. The fonts used for the text are black, large, and bold, and they are beautifully contrasted by a yellow background. The pop-up is <strong>placed on the left-hand side of the screen<\/strong>, letting you uninterruptedly enjoy the main content. In fact, if it wasn\u2019t background color, you probably wouldn\u2019t even notice it. This is another wonderful example that proves you don\u2019t have to use an in-your-face pop-up to grab the users\u2019 attention. Sometimes all it takes is a<strong> clever combination of typography and colors<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"monoware\"><\/a>Monoware<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Monoware.jpg\" class=\"attachment-full size-full\" alt=\"Monoware\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Monoware.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Monoware-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Monoware-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Monoware-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On <a href=\"https:\/\/www.monoware.com\/\" target=\"_blank\" rel=\"noopener\">Monoware<\/a>\u2019s site, the pop-up subtly appears on the screen <strong>on the left side of the page<\/strong>. Once you discover what the company does and see the striking imagery on their site, only then does the \u201cKeep in touch\u201d pop-up emerge. It\u2019s <strong>clean and minimal<\/strong>, written using the same fonts as on the rest of the site. Its simple design makes it blend in well with the rest of the content, while its position ensures it does not annoy users.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"dims\"><\/a>Dims.<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Dims.jpg\" class=\"attachment-full size-full\" alt=\"Dims\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Dims.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Dims-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Dims-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Dims-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.dims.world\/\" target=\"_blank\" rel=\"noopener\">Dims.<\/a> have opted for a <strong>simple, yet interesting pop-up design<\/strong>. The pop-up emerges on the right side of the screen, and again, it does not disrupt the aesthetic cohesiveness of the site. As for the text in the pop-up, the simple syntagma \u201c<strong>nice emails<\/strong>\u201d makes all the difference. Along with some other cool words, such as \u201ctidbits\u201d, it makes their suggestion to subscribe sound warm and friendly.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"marco-ice-cream\"><\/a>Marco Ice Cream<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Marco-Ice-Cream.jpg\" class=\"attachment-full size-full\" alt=\"Marco Ice Cream\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Marco-Ice-Cream.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Marco-Ice-Cream-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Marco-Ice-Cream-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Marco-Ice-Cream-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.marcoicecream.com\/\" target=\"_blank\" rel=\"noopener\">Marco Ice Cream<\/a>\u2019s pop-up combines dark, <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a>, <strong>monospace fonts, and a contrasting pastel yellow background<\/strong>. This symbiosis is <strong>highly effective<\/strong>, so much so that it\u2019s almost impossible for anyone to close the pop-up before reading what the text says first. And it tells you that you can get a discount if you sign up. The cursor is also interesting \u2013 it\u2019s quite big, and it looks like a hand-drawn arrow.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"gantri\"><\/a>Gantri<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gantri.jpg\" class=\"attachment-full size-full\" alt=\"Gantri\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gantri.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gantri-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gantri-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gantri-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.gantri.com\/\" target=\"_blank\" rel=\"noopener\">Gantri<\/a> invites you to join their email list with a beautifully designed pop-up. It is divided into two parts \u2013 the left side features a photo of one of Gentri\u2019s lamps, while the right includes inciting copy and a space to enter your email address. <strong>The colors on the image are calming and the text is concise, resulting in a pop-up that is very pleasing to the eye.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"not-another-bill\"><\/a>Not-Another-Bill<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Not-Another-Bill.jpg\" class=\"attachment-full size-full\" alt=\"Not-Another-Bill\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Not-Another-Bill.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Not-Another-Bill-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Not-Another-Bill-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Not-Another-Bill-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.notanotherbill.com\/\" target=\"_blank\" rel=\"noopener\">Not-Another-Bill<\/a>\u2019s pop-up is <strong>divided into several sections, each colored in a different hue<\/strong>. Blocks of soft pink, navy blue, dark green, and beige wonderfully complement each other. They also work great as a background for the contrasting white text and fields where you can enter your details to sign up for their newsletter.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"maisonette\"><\/a>Maisonette<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Maisonette.jpg\" class=\"attachment-full size-full\" alt=\"Maisonette\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Maisonette.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Maisonette-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Maisonette-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Maisonette-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The pop-up on <a href=\"https:\/\/www.maisonette.com\/\" target=\"_blank\" rel=\"noopener\">Maisonette<\/a>\u2019s site emerges after several scrolls. It\u2019s shaped like a large, blue circle that takes up a significant portion of the screen. At the top of the pop-up, there is a cute <strong>photo of a boy holding an envelope, inviting you to become \u201cEmail Buddies\u201d with the brand<\/strong>. Maisonette makes clothes for children, so such visuals and copy make perfect sense. They also inform you about the discount you can get off your first order and what kind of content they will send to you if you decide to sign up for the newsletter.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"living-edge\"><\/a>Living Edge<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Living-Edge.jpg\" class=\"attachment-full size-full\" alt=\"Living Edge\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Living-Edge.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Living-Edge-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Living-Edge-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Living-Edge-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/livingedge.com.au\/\" target=\"_blank\" rel=\"noopener\">Living Edge<\/a> is an Australian furniture retailer. Their website is filled with gorgeous images of their products, and one such photo is added to the pop-up. The image shows<strong> two figurines greeting each other, with raised arms and painted smiley faces<\/strong>. It\u2019s fun to look at and the pop-up itself is not obtrusive (it\u2019s displayed in the bottom left corner of the screen). You can also choose between two options \u2013 \u201chome\u201d and \u201cprofessional\u201d, where the latter refers to architects and interior designers. Depending on your choice, you will receive newsletters tailored to your needs.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"salt-surf\"><\/a>Salt Surf<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Salt-Surf.jpg\" class=\"attachment-full size-full\" alt=\"Salt Surf\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Salt-Surf.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Salt-Surf-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Salt-Surf-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Salt-Surf-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is an example of a <strong>pop-up that grabs your attention because of its bold color<\/strong>. <a href=\"https:\/\/saltsurf.com\/\" target=\"_blank\" rel=\"noopener\">Salt Surf<\/a> have opted for a medium light shade of blue that is impossible to miss. The black and white text looks beautiful on such a background. The concoction of all these elements results in a <strong>contemporary-looking pop-up that is bold but not overwhelmingly so<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"another-tomorrow\"><\/a>Another Tomorrow<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Another-Tomorrow.jpg\" class=\"attachment-full size-full\" alt=\"Another Tomorrow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Another-Tomorrow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Another-Tomorrow-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Another-Tomorrow-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Another-Tomorrow-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/anothertomorrow.co\/home\" target=\"_blank\" rel=\"noopener\">Another Tomorrow<\/a> is a sustainable fashion brand. Their pop-up includes a picture of a model wearing one of their creations. <strong>The colors are soft, delicate, easy on the eye. The copy content is particularly effective<\/strong>. If you subscribe, the brand promises to get you a 50% discount off your first purchase and allows you early access to pre-sale.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"name-of-love\"><\/a>Name of Love<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Name-of-Love.jpg\" class=\"attachment-full size-full\" alt=\"Name of Love\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Name-of-Love.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Name-of-Love-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Name-of-Love-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Name-of-Love-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The pop-up on the <a href=\"https:\/\/anothertomorrow.co\/home\" target=\"_blank\" rel=\"noopener\">Name of Love<\/a>\u2019s website is not subtle at all. <strong>It stretches almost over the entire screen<\/strong>, addressing you with \u201cHey, Girl\u201d. This is a brand that makes dresses for bridesmaids. They\u2019re all about women and love, hence the greeting. The pop-up background is colored in a soft red-ish color, which is omnipresent on their site and is also used on the brand\u2019s favicon.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"ji-oh\"><\/a>Ji Oh<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Ji-Oh.jpg\" class=\"attachment-full size-full\" alt=\"Ji Oh\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Ji-Oh.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Ji-Oh-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Ji-Oh-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Ji-Oh-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/jiohny.com\/\" target=\"_blank\" rel=\"noopener\">Ji Oh<\/a>\u2019s pop-up overlay includes a <strong>dreamy, black-and-white background picture<\/strong> of a girl wearing one of the brand&#8217;s outfits. The aesthetic of the image matches that of their homepage, which also includes black-and-white visuals. The text inserted on the pop-up is short and simple, written in white, refined letters that perfectly complement the featured picture.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As the examples from our roundup demonstrate, it\u2019s essential to <strong>give your pop-ups character and make them compelling<\/strong>. Design them so they <strong>match the aesthetic of your site and brand<\/strong> and <strong>ensure your main message is front and center<\/strong>. In that case, users won\u2019t be so quick to close them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Use images that depict what you do and showcase your products<\/strong>, and combine them with text that explains how people can benefit from pressing that call-to-action button. <strong>Keep your copy short and straight-to-the-point<\/strong>. You can also lure people in with attractive <a href=\"https:\/\/qodeinteractive.com\/magazine\/color-combinations\/\">color combinations<\/a> or <strong>just one bold color<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re scared that your users might run away if a pop-up appears the instant your site loads, go for <strong>scroll-triggered pop-ups<\/strong>. You can even place them on either side of the screen, to not disrupt the visitor\u2019s browsing experience.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Pop-ups can be a great marketing tool that helps you capture the attention of your visitors and turn leads into customers. We will introduce you to some of the most effective and engaging examples of pop-up designs that you can use as inspiration for your work<\/p>\n","protected":false},"author":4,"featured_media":20986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,68,43],"class_list":["post-20900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-pop-ups","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=20900"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20900\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/20986"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=20900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=20900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=20900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}