{"id":13528,"date":"2024-10-24T08:44:21","date_gmt":"2024-10-24T08:44:21","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13528"},"modified":"2025-01-28T07:20:20","modified_gmt":"2025-01-28T07:20:20","slug":"expressionengine-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/expressionengine-popup\/","title":{"rendered":"How to Create a Popup in ExpressionEngine: A Step-By-Step Guide"},"content":{"rendered":"<p>ExpressionEngine is a brilliant open-source CMS, and I\u2019ve been using it to build websites, manage digital content, and create blogs.<\/p>\n<p>It&#8217;s a versatile tool that works well for both small static sites and large, dynamic content-rich websites, and that has helped me immensely. However, there\u2019s a small caveat \u2014 ExpressionEngine does not have an in-built popup creator.<\/p>\n<p>So, can we create ExpressionEngine popups? Absolutely! The best workaround is using a popup extension.<\/p>\n<p>Here\u2019s a peek at one of the popups I created for the platform using\u00a0<a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13531\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/11\/PP_PIC_SBS-ExpressionEngine-1.png\" alt=\"ExpressionEngine Popup\" width=\"1076\" height=\"657\" \/><\/p>\n<div class=\"banner-btn newuishow\" style=\"text-align: center;\"><a class=\"round_btn try-btn\" href=\"https:\/\/www.picreel.com\/templates\/black-friday-sales-popup\">Use This Popup<\/a><\/div>\n<p>Looks pretty cool, huh?<\/p>\n<p>You can create a popup in ExpressionEngine using any third-party extension, but since Picreel is my go-to tool of choice, let\u2019s take a look at how you can do so by using it.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Create_Popups_in_ExpressionEngine_Using_Picreel_Popup_Builder\"><\/span>Create Popups in ExpressionEngine Using Picreel Popup Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>What drew me to Picreel was its robust features and cross-platform adaptability. You can have a popup up and running in minutes without needing to mess with complex coding.<\/p>\n<p>It offers\u00a0exit-intent technology, mobile popups, extensive customization,\u00a0<a href=\"https:\/\/www.picreel.com\/features\/popup-ab-testing\/\">A\/B testing<\/a>, and various targeting options, making it an excellent starting point.<\/p>\n<p>Let\u2019s look at the steps now.<\/p>\n<p><strong>Step 1: Sign Up for Picreel<\/strong><\/p>\n<p>First, you&#8217;ll need to\u00a0create a Picreel account. Head over to their website and sign up. They offer a\u00a0free trial, so you can test it before committing.<\/p>\n<p><strong>Step 2: Create a New Popup<\/strong><\/p>\n<p>Once you\u2019re in the Picreel dashboard, the next step is to create your first popup. Here\u2019s how &#8211;<\/p>\n<ul>\n<li>Go to the\u00a0<strong>\u201cCampaigns\u201d<\/strong>\u00a0menu.<\/li>\n<li>Click the\u00a0<strong>&#8220;+ New Campaign&#8221;<\/strong>\u00a0button.<\/li>\n<li>You\u2019ll be asked to\u00a0<a href=\"https:\/\/www.picreel.com\/templates\/\">select a template<\/a>\u00a0for your popup. You can also start from scratch.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13532 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/11\/PP_PIC_SBS-ExpressionEngine-2.png\" alt=\"Create a New Popup\" width=\"1592\" height=\"807\" \/><\/p>\n<p>Once you\u2019ve chosen your template, you&#8217;ll be directed to the customization screen, where you can modify the text, colors, images, and the overall design of the popup.<\/p>\n<h3>Step 3: Customize Your Popup<\/h3>\n<p>Picreel\u2019s drag-and-drop editor makes customizing your popups a breeze. You can tweak the colors, fonts, and images to align perfectly with your brand.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13439 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/06\/PP_PIC_EPPE-G-popup-using-elements.png\" alt=\"Customize Your Popup\" width=\"1600\" height=\"724\" \/><\/p>\n<p>Here\u2019s what you can do:<\/p>\n<ul>\n<li><strong>Edit Texts:<\/strong>\u00a0Click on any text in the popup to update the message. Keep it short and to the point.<\/li>\n<li><strong>Add Images:<\/strong>\u00a0Upload your own or pick from Picreel\u2019s stock image library. Just make sure the images match your brand style.<\/li>\n<li><strong>Colors &amp; Fonts:<\/strong>\u00a0Apply your brand colors for a cohesive look. You can adjust the background, text, and button colors so everything blends nicely with your site.<\/li>\n<li><strong>Button Links:<\/strong>\u00a0Make sure your call-to-action (CTA) button leads to the right page\u2014whether it&#8217;s a signup form or a product page.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13533 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/11\/PP_PIC_SBS-ExpressionEngine-3.png\" alt=\"Customized popup\" width=\"1076\" height=\"657\" \/><\/p>\n<h3>Step 4: Set Up Targeting Options<\/h3>\n<p>With Picreel, you have precise control over who views your popup, when it appears, and how frequently it\u2019s shown. You can pick from various targeting options, such as:<\/p>\n<ul>\n<li><strong>Exit Intent:<\/strong>\u00a0Display the popup just as a visitor is about to leave your website.<\/li>\n<li><strong>Time on Page:<\/strong>\u00a0This option triggers the popup after a visitor has stayed on your page for a specified amount of time.<\/li>\n<li><strong>Scroll Depth:<\/strong>\u00a0Show the popup when a visitor scrolls down a certain percentage of the page.<\/li>\n<li><strong>Page Targeting:<\/strong>\u00a0Set the popup to appear on particular pages or URLs.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13409 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/09\/PP_PIC_HCPC-GoCampaignsss-1.png\" alt=\"Set Up Targeting Options\" width=\"1602\" height=\"2212\" \/><\/p>\n<p><strong>Want a visual guide to see how each step works? Watch this video &#8211;<\/strong><\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=t9V_CUTSzimZHIFk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Embed HTML Code Inside ExpressionEngine<\/h3>\n<p>After finalizing your popup, Picreel will provide an embed code. Here\u2019s a quick breakdown of the steps:<\/p>\n<p><strong>1.<\/strong> Head to the \u201c<strong>Installation<\/strong>\u201d section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13416\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/09\/PP_PIC_HCPC-Gwe-copy-the-code.png\" alt=\"copy the code\" width=\"1160\" height=\"408\" \/><\/p>\n<p><strong>2.<\/strong> Click on \u201c<strong>Copy Code<\/strong>\u201d to copy the embed code.<\/p>\n<p><strong>3.<\/strong> In your\u00a0<strong>ExpressionEngine CMS<\/strong>\u00a0admin panel, click on\u00a0<strong>Templates<\/strong>\u00a0in the left sidebar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13534 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/11\/Competitor_PIC_SBS-ExpressionEngine-4.png\" alt=\"ExpressionEngine CMS\u00a0admin panel\" width=\"1306\" height=\"633\" \/><\/p>\n<p><strong>4.<\/strong> Under the Templates section, select\u00a0<strong>layouts<\/strong>, then choose\u00a0<strong>_html-wrapper<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13535 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/11\/Competitor_PIC_SBS-ExpressionEngine-5.png\" alt=\"select\u00a0layouts\" width=\"1306\" height=\"633\" \/><\/p>\n<p><strong>5.<\/strong> Paste the embed code right before the\u00a0<strong>&lt;\/body&gt;<\/strong>\u00a0tag and click\u00a0<strong>Save<\/strong>. Your popup will now display according to the targeting settings you set up in Picreel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13529 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/11\/Competitor_PIC_SBS-ExpressionEngine-6.png\" alt=\"embed code\" width=\"1306\" height=\"633\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ready_to_Create_Stunning_Popups_in_ExpressionEngine\"><\/span>Ready to Create Stunning Popups in ExpressionEngine?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creating popups for ExpressionEngine using a tool like Picreel is straightforward, even if it requires embedding some HTML or JavaScript. Picreel\u2019s ease of use, customization options, and advanced targeting features make it an excellent fit for this platform.<\/p>\n<p>This approach has helped boost my email subscriber list and enhanced user engagement on my site.<\/p>\n<p>The best part? You can try it without spending a dime! Picreel offers a\u00a0<a href=\"https:\/\/www.picreel.com\/pricing\/\">free plan<\/a>\u00a0that includes all the premium features. If you upgrade later, the paid plans start at just\u00a0<a href=\"https:\/\/www.picreel.com\/pricing\/?business\">$9.99<\/a>\u00a0per month.<\/p>\n<p>So, why not give it a try? Test out different designs and targeting settings, and be sure to track your results!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ExpressionEngine is a brilliant open-source CMS, and I\u2019ve been using it to build websites, manage digital content, and create blogs. It&#8217;s a versatile tool that works well for both small static sites and large, dynamic content-rich websites, and that has helped me immensely. However, there\u2019s a small caveat \u2014 ExpressionEngine does not have an in-built&#8230;<\/p>\n","protected":false},"author":26,"featured_media":13530,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-13528","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\/13528","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=13528"}],"version-history":[{"count":2,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13528\/revisions"}],"predecessor-version":[{"id":13956,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13528\/revisions\/13956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/13530"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=13528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=13528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=13528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}