Configuring Styles Tab

Configuring Styles tab allows you to design and customize the look of your popup. From adjusting its size to applying colors, fonts, and backgrounds.

In this guide, we’ll go through each group of settings available in the Styles tab.

Display Content – This section lets you decide what elements to show inside your popup.

• Show Title – Enable or disable the popup title. If your design uses only images or custom HTML, you may want to hide it.
• Show Description – Enable or disable the popup description.
• Use a different setting for Mobile – Allows you to control title and description visibility separately for mobile devices.

Popup Dimensions #

Here you can define the size of your popup for both PC and mobile.

• Width & Height – Set custom width and height in pixels. Leaving these blank will make the popup automatically adjust.
• Max-width for mobile – Ensures the popup doesn’t stretch too wide on small screens.
• Popup Max-Height & Min-Height – Set maximum and minimum height values to control how tall your popup can be.
• Full-Screen Mode – Enable this option to make the popup cover the entire screen, ideal for special announcements or immersive designs.

Content Style #

The Content Style section controls how the text inside your popup is displayed. This ensures that your titles, descriptions, and other text elements match your website’s branding and remain easy to read.

• Text Color – Choose the color of your popup text. Pick a color that contrasts well with the background for better readability.
• Font Family – Select from one of the 14 available font styles provided in the plugin to change the overall appearance of your text.
• Title Text Shadow – Add a shadow effect behind the title text for extra emphasis or a more dynamic appearance.
• Title Style – This option gives you full control over the appearance of your popup title.

Opening & Closing Effects #

This section allows you to add animations to your popup, making its appearance and disappearance more engaging.

• Opening Animation – Choose how the popup enters the screen (e.g., Fade In, Slide In, Zoom).
• Closing Animation – Select how the popup should exit (e.g., Fade Out, Slide Out).
• Animation Speeds – Control how fast the opening and closing animations play. A lower number means faster animation.
  
  You can set different animations or speeds for mobile devices to maintain smooth performance.

Background Style #

Here you can control the visual background of your popup.

• Background Color – Apply a solid background color.
• Background Image – Upload an image and set its position and sizing (cover, contain, repeat).
• Background Gradient – Add modern gradient effects for a dynamic look.
• Header Background Color – Set a unique color for the popup header.
• Overlay Color – Adjust the background overlay that appears behind the popup when active.

Border Style #

The Border Style section allows you to customize the edges of your popup to better match your website’s design. Borders can add emphasis, improve readability, or help your popup blend naturally with your page layout.

• Border Width – Define how thick the border should be (in pixels).
• Border Style – Choose between solid, dashed, dotted, or other available styles.
• Border Color – Set a custom color for your border. Pick one that contrasts well with the background or matches your brand palette.
• Border Radius – Round the corners of your popup for a softer look. A higher radius makes corners more curved, while 0px keeps them sharp.

Button Style #

The Button Style section focuses on customizing the close button of your popup. Since this is an essential part of user experience, Popup Box allows you to design it to be both functional and visually consistent with your site.

• Close Button Image – Upload a custom image for the close button if you don’t want to use the default icon.
• Close Button Color & Hover Color – Define the normal and hover state colors to make the button stand out or blend with your design.
• Close Button Size – Adjust the size of the close button so it’s noticeable but not intrusive.

Advanced Style #

For more customization, you can go beyond the basics with advanced styling options.

• Box Shadow – Add depth and contrast with a shadow around the popup.
• Custom Class for Popup Container – Use your custom HTML class for adding your custom styles to popup container.
• Custom CSS – Directly insert custom CSS code for complete design freedom.
  
  This section is particularly powerful for developers or designers who want to create unique, branded popups beyond the default design tools.

This was all about configuring Styles tab in the Popup Box plugin. With these tools, you can design popups that perfectly match your website branding, whether you prefer a clean minimal look or a rich, animated design. After setting up the Styles tab, continue to the Limitation Users tab to manage how often your visitors see the popup.

If you have any questions or need further assistance with configuring Styles tab, feel free to reach out to our Support Team. We’re always happy to help you get the most out of Popup Box.