How to Create a Popup in Drupal

As an avid user and enthusiast of Drupal, 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).

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’s own popup tool and a standardized popup tool like Picreel.

But first, let me show you an example of how a Picreel popup can enhance your Drupal website:

Now, let’s delve into the comparison between Drupal’s own popup builder and a standardized popup tool using the following criteria:

I highly recommend using Picreel for creating popups, and here are three reasons why:

Multi-platform Support: Unlike Drupal’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.

Extensive Features: Picreel provides many features to enhance your popups. From customizable designs to advanced targeting options, you have more control over how your popups are displayed and who they target.

More Triggers: With Picreel, you can set up triggers based on various actions or behaviors of your website visitors. This allows for more precise targeting and increases the chances of converting your visitors into subscribers or customers.

Now, let’s move on to the step-by-step tutorials for creating Drupal popups using both methods.

Method 1: Using Drupal’s Built-in Popup Tool

Drupal offers a built-in popup tool that you can utilize. Follow the steps below to create a popup using Drupal:

1. Install the simple popup blocks Drupal 8 module by selecting “Manage” > “Extend” and the “Install new module” option.

2. Navigate to the admin panel and go to “Media” > “Configuration” > “Add popup blocks.”

3. Choose the identifier for the popup, either “Drupal blocks” or a custom CSS selector, and provide the correct values.

4. Select the desired position for the popup.

5. Set the visit counts to determine when the popup will trigger. For example:

• 0 = Show the popup on each user visit.
• 1, 2 = Show the popup on the user’s first and second visit.
• 1, 4, 7 = Show the popup on the user’s first, fourth, and seventh visit.

6. Set the trigger method as “Automatic.”

7. Customize the settings for Delay, Overlay, Minimize button, Close button, and ESC key to close the popup based on your requirements.

8. Finally, click the “Convert to popup.”

9. Go to your popup page, and the setup is complete.

Method 2: Using Picreel Popup Builder

Picreel is a popup maker that works seamlessly across multiple platforms, including Drupal.

Watch this video tutorial on how you can create a popup using Picreel:

Here are step-by-step instructions on creating a popup in Drupal using Picreel:

1. Sign up for a Picreel account and log in.

2. Go to the “Campaigns” menu and click “New Campaign” from the top right. Also, you can select the templates option from the drop-down or start from scratch.

3. From the templates menu, choose the type of popup you want to create.

4. Once you select the design, customize it according to your preferences.

5. Configure your targeting and trigger options to specify when and where you want your popup to appear.

5. Click “Save” to activate your popup.

Embedding Picreel HTML Code Inside Drupal

To embed a Picreel popup on your Drupal website, follow these steps:

1. Navigate to campaigns and click on “View Code.”

2. Click on the code to copy it.

3. Log in to your Drupal admin panel, navigate to the content section, and click on “Add content.”

4. Choose the content type that you want to add HTML code to, such as “Basic page” or “Article.”

5. Enter the title for your content, and in the body section, enter your HTML code in the provided text editor.

6. To ensure that Drupal renders the HTML code properly, select the correct text format. You can choose either “Basic HTML” or “Full HTML.” If you have CKEditor installed, you may have additional options available.

7. If you are using CKEditor, make sure to click on the “Source” button before entering the HTML code.

8. After entering your HTML code, click on the “Save” button to publish your content.

9. Preview the page to see how your HTML code is rendered.

Which Is a Better Method: Method 1 or 2?

As I previously stated, Picreel 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.

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.

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’s popup signup form or Picreel will depend on your individual requirements. Start boosting your conversions today.