{"id":13159,"date":"2024-08-22T07:07:48","date_gmt":"2024-08-22T07:07:48","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13159"},"modified":"2025-02-13T06:49:18","modified_gmt":"2025-02-13T06:49:18","slug":"magnolia-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/magnolia-popup\/","title":{"rendered":"How to Create a Popup in Magnolia?"},"content":{"rendered":"<p>I have long used Magnolia and built my entire business on top of it. Its robust content management capabilities and user-friendly interface make it an excellent choice for website management.<\/p>\n<p>I\u2019ve heard that popups can significantly help grow your email list and improve CTRs, which piqued my interest. I decided to explore how popups could be integrated into Magnolia.<\/p>\n<p>But does Magnolia offer popups? Yes, it does. In fact, there are two ways to create a popup in Magnolia: using Magnolia&#8217;s built-in tool or an external popup tool like<a href=\"https:\/\/www.picreel.com\/\">\u00a0<\/a><a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a>.<\/p>\n<p>We&#8217;ll also discuss the differences between Magnolia\u2019s popup builder and Picreel, a standardized popup tool. In fact, here\u2019s how my Picreel popup looks within Magnolia:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13164\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/PP_PIC_MP-within-Magnolia.png\" alt=\"Magnolia Popup\" width=\"1076\" height=\"657\" \/><\/p>\n<p>Before diving into the step-by-step guides, let\u2019s compare Magnolia\u2019s own popup tool with Picreel.<\/p>\n<div id=\"tablepress-235-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">\n\n<table id=\"tablepress-235\" class=\"tablepress tablepress-id-235 tablepress-responsive\">\n<thead>\n<tr class=\"row-1 odd\">\n\t<th class=\"column-1\">Criteria<\/th><th class=\"column-2\">Magnolia Popup<\/th><th class=\"column-3\">Picreel Popup<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"row-hover\">\n<tr class=\"row-2 even\">\n\t<td class=\"column-1\">Multi-platform support<\/td><td class=\"column-2\">\u274c Limited to Magnolia's ecosystem, which means popups will only work within sites built on Magnolia.<\/td><td class=\"column-3\">\u2705 Compatible with multiple platforms, including WordPress, Shopify, and custom-built websites, providing broader compatibility.<\/td>\n<\/tr>\n<tr class=\"row-3 odd\">\n\t<td class=\"column-1\">More features<\/td><td class=\"column-2\">\u274c Offers basic popup functionalities such as simple forms and message displays.<\/td><td class=\"column-3\">\u2705 Rich feature set including advanced functionalities like A\/B testing, exit-intent technology, geolocation targeting, and detailed analytics.<\/td>\n<\/tr>\n<tr class=\"row-4 even\">\n\t<td class=\"column-1\">Better customization options<\/td><td class=\"column-2\">\u274c Provides standard customization options like text, images, and basic styling.<\/td><td class=\"column-3\">\u2705 Extensive customization options with a drag-and-drop editor, pre-designed templates, and the ability to add custom HTML, CSS, and JavaScript for greater flexibility.<\/td>\n<\/tr>\n<tr class=\"row-5 odd\">\n\t<td class=\"column-1\">Integrates with various platforms<\/td><td class=\"column-2\">\u274c Primarily integrates within Magnolia's ecosystem, limiting its usage to Magnolia-powered sites.<\/td><td class=\"column-3\">\u2705 Seamless integration with various website platforms and CMS systems like Magento, Joomla, and more, allowing for easier management across different sites.<\/td>\n<\/tr>\n<tr class=\"row-6 even\">\n\t<td class=\"column-1\">Advanced targeting options<\/td><td class=\"column-2\">\u2705 Basic targeting based on simple criteria like page location and user behavior.<\/td><td class=\"column-3\">\u2705 Advanced targeting options, including geolocation, referral source, user behavior tracking, device type, and time-based triggers, enabling highly specific audience targeting.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div><!-- #tablepress-235 from cache -->\n<p>Based on my experience, I recommend using Picreel for the following reasons:<\/p>\n<ul>\n<li><strong>Multi-platform Support:<\/strong>\u00a0Picreel\u2019s compatibility with multiple platforms ensures that your popup strategy remains intact even if you switch your CMS or website platform.<\/li>\n<li><strong>Advanced Features:<\/strong>\u00a0Picreel offers a rich set of features, including\u00a0<a href=\"https:\/\/www.picreel.com\/features\/popup-ab-testing\/\">A\/B testing<\/a>\u00a0and\u00a0exit-intent\u00a0technology, which can significantly enhance the effectiveness of your popups.<\/li>\n<li><strong>Customization Options:<\/strong>\u00a0With Picreel, you get extensive customization options, allowing you to design popups that perfectly match your brand and campaign goals.<\/li>\n<\/ul>\n<p>Nevertheless, in this tutorial, I\u2019m going to explain step-by-step how to create a popup using both methods.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Using_Magnolia%E2%80%99s_Built-in_Popup_Tool\"><\/span>Method 1: Using Magnolia\u2019s Built-in Popup Tool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Magnolia offers a built-in popup tool. Here\u2019s how to create it:<\/p>\n<p><strong>1.<\/strong> Log in to your Magnolia admin interface. Navigate to the Content Apps section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13161 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_MP-Magnolia\u2019s-Built.png\" alt=\"Log in to your Magnolia admin\" width=\"810\" height=\"756\" \/><\/p>\n<p><strong>2.<\/strong> From the main menu, select &#8220;<strong>Content<\/strong>\u00a0<strong>Apps<\/strong>.&#8221; Choose the appropriate app where you want to create the popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13166\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_MP-Content-Apps.png\" alt=\"Content Apps\" width=\"1901\" height=\"901\" \/><\/p>\n<p><strong>3.<\/strong> Click on the &#8220;<strong>Create<\/strong>&#8221; button within the app. Select &#8220;<strong>Overlay<\/strong>&#8221; from the available options to start creating a new overlay.<\/p>\n<p><strong>4.<\/strong> Define when and where the popup should appear. You can set conditions based on page location, user behavior, or specific triggers.<\/p>\n<p><strong>5.<\/strong> Use the editor to add and format text, images, and any other content you want to include in your popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13168 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_MP-format-text.png\" alt=\"Magnolia editor\" width=\"1505\" height=\"651\" \/><\/p>\n<p><strong>6.<\/strong> Customize the targeting options to ensure your popup reaches the right audience. You can target based on user behavior, device type, and more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13167\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_MP-Customize-the-targetin.png\" alt=\"Customize the targeting\" width=\"870\" height=\"543\" \/><\/p>\n<p><strong>7.<\/strong> Once you are satisfied with the configuration and design, click on the &#8220;<strong>Publish<\/strong>&#8221; button to make the popup live on your site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Using_Picreel_Popup_Builder\"><\/span>Method 2: Using Picreel Popup Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Picreel is a popup maker that works across multiple platforms, providing a versatile solution for creating popups. Here&#8217;s how you can create a popup using Picreel:<\/p>\n<p><strong>1.<\/strong> <a href=\"https:\/\/www.picreel.com\/signup\/\">Sign up for a Picreel account<\/a>\u00a0and log in.<\/p>\n<p><strong>2.<\/strong> Go to the \u201c<strong>Campaigns<\/strong>\u201d menu and click &#8220;<strong>New Campaign<\/strong>&#8221; from the top right. You can select the templates option from the drop-down or start from scratch.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12107\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_2Campaigns.png\" alt=\"New campaign\" width=\"1313\" height=\"561\" \/><\/p>\n<p><strong>3.<\/strong> From the templates menu, choose the type of popup you want to create.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12897\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/07\/PP_PIC_CM-templates-menu-1.png\" alt=\"templates menu\" width=\"1873\" height=\"441\" \/><\/p>\n<p><strong>4.<\/strong> Once you select the design, customize it according to your preferences.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13163\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/PP_PIC_MP-acustomize.png\" alt=\"customize design\" width=\"1313\" height=\"607\" \/><\/p>\n<p><strong>5.<\/strong> Configure your targeting and trigger options to specify when and where you want your popup to appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12106\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_2-personalize-targeting.png\" alt=\"configure\" width=\"1308\" height=\"581\" \/><\/p>\n<p><strong>6.<\/strong> Click &#8220;<strong>Save<\/strong>&#8221; to activate your popup.<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=HN1JkxkqAZ_n3k13\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Embedding Picreel HTML Code Inside Magnolia<\/h3>\n<p>To embed a Picreel popup on your Magnolia website, follow these steps:<\/p>\n<p><strong>1.<\/strong> Navigate to campaigns and click &#8220;<strong>View Code.<\/strong>&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12109\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_5-saving-se.png\" alt=\"save code\" width=\"1629\" height=\"806\" \/><\/p>\n<p><strong>2.<\/strong> Click on the code to copy it.<\/p>\n<p><strong>3.<\/strong> Log in to Magnolia and open the Pages app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13160 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_MP-fPages-app.png\" alt=\"open the Pages app\" width=\"1505\" height=\"601\" \/><\/p>\n<p><strong>4.<\/strong> Choose the page where the form will be added. Click &#8220;<strong>Edit<\/strong>&#8221; to enter the editor mode.<\/p>\n<p><strong>5.<\/strong> Click &#8220;<strong>Add<\/strong>\u00a0<strong>component<\/strong>,&#8221; select the HTML component, and paste the code.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13165\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_MP-AAdd-componentt.png\" alt=\"Add component\" width=\"840\" height=\"472\" \/><\/p>\n<p><strong>6.<\/strong> Save the changes and publish the page.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Which_Is_a_Better_Method_Method_1_or_2\"><\/span>Which Is a Better Method: Method 1 or 2?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>From a long-term perspective, Picreel is probably the better option because your popup tool remains intact despite changing platforms, and Picreel provides more sophisticated popup options and triggers.<\/p>\n<p>Picreel also offers a forever-free plan for startups and small businesses, allowing you to create unlimited popups with premium features. Paid options start as low as\u00a0<strong>$9.99\/month.<\/strong><\/p>\n<p>On the other hand, if you prefer using the limited options available with Magnolia\u2019s built-in popup without incurring any additional integrations, it can still serve your needs just fine.<\/p>\n<p>Remember, the goal is to create compelling popups that drive user engagement and conversions, regardless of your chosen method. Ultimately, the choice is yours.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have long used Magnolia and built my entire business on top of it. Its robust content management capabilities and user-friendly interface make it an excellent choice for website management. I\u2019ve heard that popups can significantly help grow your email list and improve CTRs, which piqued my interest. I decided to explore how popups could&#8230;<\/p>\n","protected":false},"author":26,"featured_media":13162,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-13159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-popup"],"_links":{"self":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/comments?post=13159"}],"version-history":[{"count":4,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13159\/revisions"}],"predecessor-version":[{"id":14087,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13159\/revisions\/14087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/13162"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=13159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=13159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=13159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}