{"id":9920,"date":"2023-11-17T12:54:58","date_gmt":"2023-11-17T12:54:58","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=9920"},"modified":"2025-10-14T06:43:44","modified_gmt":"2025-10-14T06:43:44","slug":"drupal-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/drupal-popup\/","title":{"rendered":"Drupal Popup Guide for Beginners Who Want Quick Setup"},"content":{"rendered":"<p>\u201cPopups are one of the most effective ways to grow your email list and generate more leads.\u201d &#8211; Neil Patel.<\/p>\n<p>As an avid user and enthusiast of\u00a0<strong>Drupal<\/strong>, I know firsthand how powerful and versatile this content management system can be. Recently, I came across the idea of using popups to enhance my website, particularly in growing my email list and improving click-through rates (CTRs).<\/p>\n<p>I was delighted to discover that Drupal offers options for creating popups. In this blog post, I will explore the two methods of creating popups in Drupal: using Drupal&#8217;s own popup tool and a standardized popup tool like\u00a0<strong><u>Picreel<\/u><\/strong>.<\/p>\n<p>But first, let me show you an example of how a Picreel popup can enhance your Drupal website:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9924\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_-Drupal-popup.jpg\" alt=\"Drupal popup\" width=\"1076\" height=\"659\" \/><\/p>\n<p>Now, let&#8217;s delve into the comparison between Drupal&#8217;s own popup builder and a standardized popup tool using the following criteria:<\/p>\n<div id=\"tablepress-177-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">\n\n<table id=\"tablepress-177\" class=\"tablepress tablepress-id-177 tablepress-responsive\">\n<thead>\n<tr class=\"row-1 odd\">\n\t<th class=\"column-1\">Criteria<\/th><th class=\"column-2\">Drupal 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\">Conversion Rate Optimization<\/td><td class=\"column-2\">\u274cPopup Maker offers basic conversion rate optimization features<\/td><td class=\"column-3\">\u2705Picreel provides advanced conversion optimization features, including exit-intent popups, personalized popups, and AB testing<\/td>\n<\/tr>\n<tr class=\"row-3 odd\">\n\t<td class=\"column-1\">Segmentation<\/td><td class=\"column-2\">\u274cNo audience segmentation options<\/td><td class=\"column-3\">\u2705Segmentation based on user behavior, location, and other factors<\/td>\n<\/tr>\n<tr class=\"row-4 even\">\n\t<td class=\"column-1\">Integrations<\/td><td class=\"column-2\">\u2705Designed to connect with Popup Maker service, additional integrations may be required<\/td><td class=\"column-3\">\u2705Integrates with various marketing tools, such as email marketing software, CRM systems, and e-commerce platforms<\/td>\n<\/tr>\n<tr class=\"row-5 odd\">\n\t<td class=\"column-1\">Social Media Integration<\/td><td class=\"column-2\">\u274cNo social media integration functionalities<\/td><td class=\"column-3\">\u2705Social media integration, including social share buttons, to increase page visits and reach<\/td>\n<\/tr>\n<tr class=\"row-6 even\">\n\t<td class=\"column-1\">Design and Customization<\/td><td class=\"column-2\">\u274cLimited design customization options<\/td><td class=\"column-3\">\u2705Extensive design customization options to match the brand and website's style and colors<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div><!-- #tablepress-177 from cache -->\n<p>I highly recommend using Picreel for creating popups, and here are three reasons why:<\/p>\n<p><strong>Multi-platform Support:<\/strong>\u00a0Unlike Drupal&#8217;s popup builder, Picreel offers the flexibility of working across multiple platforms. It ensures that your popup remains intact even if you decide to change your website platform in the future.<\/p>\n<p><strong>Extensive Features:<\/strong>Picreel provides many features to <a href=\"https:\/\/www.picreel.com\/blog\/html-popup\/\">create popups<\/a>. From customizable designs to advanced targeting options, you have more control over how your popups are displayed and who they target.<\/p>\n<p><strong>More Triggers:\u00a0<\/strong>With Picreel, you can set up\u00a0triggers\u00a0based on various actions or behaviors of your website visitors. This allows for more precise\u00a0targeting<strong>\u00a0<\/strong>and increases the chances of converting your visitors into subscribers or customers.<\/p>\n<div class=\"blog-new-ui\">\n<p><strong>Maximize Your Drupal Site\u2019s Potential with Effective Popups<\/strong><\/p>\n<p><strong>Ready to skyrocket your engagement? Get started with Drupal popups today!<\/strong><\/p>\n<div class=\"banner-btn newuishow \" style=\"text-align: center;\"><a class=\"round_btn try-btn\" href=\"https:\/\/www.picreel.com\/signup\/\">Get Started Free<\/a><a class=\"getademobtn\" href=\"https:\/\/www.picreel.com\/signup\/?demo\">Get a Demo<\/a><\/div>\n<\/div>\n<p>Now, let&#8217;s move on to the step-by-step tutorials for creating Drupal popups using both methods.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Using_Drupal%E2%80%99s_Built-in_Popup_Tool\"><\/span>Method 1: Using Drupal\u2019s Built-in Popup Tool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Drupal offers a built-in popup tool that you can utilize. Follow the steps below to create a popup using Drupal:<\/p>\n<p><strong>1.<\/strong> Install the simple popup blocks Drupal 8 module by selecting<strong>\u00a0\u201cManage\u201d &gt; \u201cExtend\u201d<\/strong>\u00a0and the\u00a0<strong>\u201cInstall new module\u201d\u00a0<\/strong>option.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9925\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_Install-new-module.jpg\" alt=\"Install new module\" width=\"1316\" height=\"749\" \/><\/p>\n<p><strong>2.<\/strong> Navigate to the admin panel and go to\u00a0<strong>&#8220;Media&#8221; &gt; &#8220;Configuration&#8221; &gt; &#8220;Add popup blocks.&#8221;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9926\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_Add-popup-blocks.jpg\" alt=\"Add popup blocks\" width=\"900\" height=\"622\" \/><\/p>\n<p><strong>3.<\/strong> Choose the identifier for the popup, either<strong>\u00a0&#8220;Drupal blocks&#8221;<\/strong>\u00a0or a custom CSS selector, and provide the correct values.<\/p>\n<p><strong>4.<\/strong> Select the desired position for the popup.<\/p>\n<p><strong>5.<\/strong> Set the visit counts to determine when the popup will trigger. For example:<\/p>\n<ul>\n<li>0 = Show the popup on each user visit.<\/li>\n<li>1, 2 = Show the popup on the user&#8217;s first and second visit.<\/li>\n<li>1, 4, 7 = Show the popup on the user&#8217;s first, fourth, and seventh visit.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9927\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_blocks-setting.jpg\" alt=\"blocks setting\" width=\"1066\" height=\"637\" \/><\/p>\n<p><strong>6.<\/strong> Set the trigger method as<strong>\u00a0&#8220;Automatic.&#8221;<\/strong><\/p>\n<p><strong>7.<\/strong> Customize the settings for Delay, Overlay, Minimize button, Close button, and ESC key to close the popup based on your requirements.<\/p>\n<p><strong>8.<\/strong> Finally, click the\u00a0<strong>&#8220;Convert to popup.&#8221;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9928\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_Delay.jpg\" alt=\"Delay\" width=\"823\" height=\"544\" \/><\/p>\n<p><strong>9.<\/strong> Go to your popup page, and the setup is complete.<\/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 seamlessly across multiple platforms, including Drupal.<\/p>\n<p>Watch this video tutorial on how you can create a popup using Picreel:<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=lTWMlXNS6b69Yai9\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Here are step-by-step instructions on creating a popup in Drupal using Picreel:<\/p>\n<p><strong>1.<\/strong>\u00a0Sign up for a Picreel account and log in.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9856\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_Sign-up-for-a-Picreel-account-and-log-in.jpg\" alt=\"Sign up for a Picreel account and log in\" width=\"1313\" height=\"658\" \/><\/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. Also, 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-10754\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/PP_PIC_New-Campaign.-2.jpg\" 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-9859\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_templates-menu.jpg\" alt=\"templates menu\" width=\"1313\" height=\"243\" \/><\/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-9929\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_design_customize_\u2013_2.jpg\" alt=\"design_customize\" width=\"1313\" height=\"618\" \/><\/p>\n<p><strong>5.<\/strong> Configure your targeting and <a href=\"https:\/\/www.picreel.com\/features\/popup-triggers\/\">trigger<\/a> 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-9861\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/PP_PIC_Configure.jpg\" alt=\"Configure\" width=\"1313\" height=\"558\" \/><\/p>\n<p><strong>5.<\/strong> Click &#8220;<strong>Save<\/strong>&#8221; to activate your popup.<\/p>\n<h3>Embedding Picreel HTML Code Inside Drupal<\/h3>\n<p>To embed a Picreel popup on your Drupal website, follow these steps:<\/p>\n<p><strong>1.<\/strong> Navigate to campaigns and click on &#8220;<strong>View Code.<\/strong>&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10760\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/12\/PP_PIC_View-Code-2.jpg\" alt=\"View Code\" width=\"1601\" height=\"344\" \/><\/p>\n<p><strong>2.<\/strong> Click on the code to copy it.<\/p>\n<p><strong>3.<\/strong> Log in to your Drupal admin panel, navigate to the content section, and click on<strong>\u00a0&#8220;Add content.&#8221;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9930\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_Add-content.jpg\" alt=\"Add content\" width=\"1066\" height=\"496\" \/><\/p>\n<p><strong>4.<\/strong> Choose the content type that you want to add HTML code to, such as\u00a0<strong>&#8220;Basic page&#8221;<\/strong>\u00a0or<strong>\u00a0&#8220;Article.&#8221;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9931\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_Basic-page.jpg\" alt=\"Basic page\" width=\"1066\" height=\"304\" \/><\/p>\n<p><strong>5.<\/strong> Enter the title for your content, and in the body section, enter your HTML code in the provided text editor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9932\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_HTML-code.jpg\" alt=\"HTML code\" width=\"1312\" height=\"1060\" \/><\/p>\n<p><strong>6.<\/strong> To ensure that Drupal renders the HTML code properly, select the correct text format. You can choose either\u00a0<strong>&#8220;Basic HTML&#8221;<\/strong>\u00a0or\u00a0<strong>&#8220;Full HTML.&#8221;<\/strong>\u00a0If you have CKEditor installed, you may have additional options available.<\/p>\n<p><strong>7.<\/strong> If you are using CKEditor, make sure to click on the\u00a0<strong>&#8220;Source&#8221;<\/strong>\u00a0button before entering the HTML code.<\/p>\n<p><strong>8.<\/strong> After entering your HTML code, click on the<strong>\u00a0&#8220;Save&#8221;\u00a0<\/strong>button to publish your content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9933\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/11\/Drupal-_PIC_Save.jpg\" alt=\"Save\" width=\"1312\" height=\"1255\" \/><\/p>\n<p><strong>9.<\/strong> Preview the page to see how your HTML code is rendered.<\/p>\n<pre><strong>Read More - <a href=\"https:\/\/www.picreel.com\/blog\/best-pop-up-maker-for-wordpress\/\">Best Popup Maker Tools: Top 8 Choices to Boost Conversions<\/a><\/strong><\/pre>\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>As I previously stated, <a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a> proves to be a more advantageous solution in the long term due to its advanced features, ability to support multiple platforms, and increased customization options.<\/p>\n<p>Also, Picreel comes with a forever-free plan for startups and small businesses and allows you to create unlimited popups with all premium features. I feel the free version does the job, however, you can always look for paid options that start as low as $9.99\/month.<\/p>\n<p>To summarize, popups can serve as a potent tool in improving the growth of your email list and increasing click-through rates. Whether you choose to utilize Drupal&#8217;s popup signup form or Picreel will depend on your individual requirements. Start boosting your conversions today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cPopups are one of the most effective ways to grow your email list and generate more leads.\u201d &#8211; Neil Patel. As an avid user and enthusiast of\u00a0Drupal, I know firsthand how powerful and versatile this content management system can be. Recently, I came across the idea of using popups to enhance my website, particularly in&#8230;<\/p>\n","protected":false},"author":21,"featured_media":9921,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-9920","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\/9920","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/comments?post=9920"}],"version-history":[{"count":19,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/9920\/revisions"}],"predecessor-version":[{"id":15233,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/9920\/revisions\/15233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/9921"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=9920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=9920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=9920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}