Change Background Color

Change Background Color

Customizing the background color of your popup can greatly impact the visual appeal and effectiveness of your call to action. Here’s a simple guide to changing the background color of a popup using Poper.ai:

Step 1: Log In and Access Popups

- Sign in to your Poper.ai account.

- Head to your dashboard where your popups are displayed.

- Click on “+ New Popup” if you want to create a new one, or choose an existing popup to modify.

Step 2: Create or Edit a Popup

- For a new popup, type in your requirements and hit “Create Popup,” or click “Choose from Templates” to use a pre-designed one.

- To edit an existing popup, simply click on it to open the editing mode.

Step 3: Template Selection (if starting new)

- Select a suitable template from the collection offered by Poper.ai.

Step 4: Customize the Popup

- Once you’ve chosen a template, you will be directed to the customization interface.

- Your selected popup and the customization options will be visible on this screen.

Step 5: Access Fill Settings


- Find the “Fill” section in the customization panel.

Step 6: Choose a Fill Color


- Click on the color box beside the “Background” label to open the color selection tool.

Step 7: Selecting Your Color

- Pick a new color by:

- Selecting a preset solid color.

- Clicking “Custom Color” to input a specific hex code or select from a detailed color picker.

- Opting for an image background by selecting the “Image” option.

Step 8: Apply the New Color

- The popup preview should update with the new color. Click “Next” to continue once you’re satisfied with the choice.

Step 9: Save Your Popup

- Confirm and save the changes to update your popup’s background color.

Step 10: Preview and Test

- Always preview the updated popup on your website to ensure the new color works well with your overall site aesthetics.


    • Related Articles

    • Understanding Background Style in Poper Popups

      The background style in Poper refers to the visual effect applied to the area behind the popup content when it appears on a webpage. This feature is significant as it helps to draw the user's attention to the popup by differentiating it from the rest ...

    • How to remove Background Overlay in Poper?

      Removing the background overlay in Poper's popups allows users to interact with the background elements while the popup is displayed. This is especially useful for creating popups that slide in from the side and do not obstruct other elements on the ...

    • How to change font family of popup?

      Changing the font family of a popup on Poper.ai is a straightforward process that can significantly alter the appearance and feel of your popup. Follow these simple steps to customize the font style to better match your website's design: 1. Access ...

    • How to change Width/Height of a Popup

      Adjusting the dimensions of your popup is a crucial step in ensuring that it fits well within your website's layout and provides a good user experience. Follow these steps to change the width and height of your popup on Poper.ai: Step 1: Login to ...

    • How to edit Form Success / Error Steps in Poper (Thank You message)

      Poper allows you to customize the user experience after someone submits your popup form. This guide will show you how to edit the "Form Success" and "Form Error" steps, enabling you to create clear and informative messages for your visitors. ...