Categories
active arrowAccount
active arrowGetting Started
active arrowCampaign Builder
active arrowAdvanced Design Customization
active arrowEmail Campaign Customization
active arrowSegment & Targeting
active arrowAnalytics
active arrowShopify
active arrowEmail Marketing and CRM Integrations
active arrowHow to Share Your Popup Form and Submission with a Link
active arrowHow to Create a Custom Popup with a Blank Popup Template?
active arrowHow to Create a Full Screen, Lightbox, and Floating Bar Popup
active arrowHow to Create Well-Designed Campaigns with Themes?
active arrowHow to Use Column & Row Structures Efficiently in a Popup?
active arrowDiscover the Customize Step of Popupsmart
active arrowHow to Adjust Popup Style
active arrowHow to Create a Multi-step Popup?
active arrowWhat is a Success Popup? How Does it Work?
active arrowWhich Elements Can I Add to My Popup?
active arrowHow to Add Fonts on Popupsmart
active arrowHow to Prefill Form Fields
active arrowHow to Add Hidden Inputs to Your Popup Campaigns?
active arrowHow to Add New Elements & Use Drag and Drop Editor
active arrowHow to Add New Form Fields to My Popup
active arrowHow to Add a Privacy Policy on Popupsmart?
active arrowHow to Add a Coupon Code to Your Popup
active arrowHow to Activate the Countdown Timer
active arrowHow to Add an Animation to a Popup?
active arrowHow to Create a Video Popup on Popupsmart
active arrowHow to Add Lottery Ball Gamification on The Popup?
active arrowHow Debug Mode Works
active arrowHow Preview Mode Works
active arrowDesktop & Mobile Views Working Method
active arrowHow to Use Smart Tags - Dynamic Text Replacement
active arrowWhat Is Teaser? How Teaser Works
active arrowHow to Set Up Autoresponder Email Notifications
active arrowHow to Set up Self-Email Notifications
active arrowHow to Create an A/B Testing for a Popup Campaign
active arrowHow to Call JavaScript Function with a Button Using Popupsmart

How to Adjust Popup Style

Popupsmart offers highly customizable popups for its users. By customizing your popup independently, you can get the best results from your campaigns.

To learn how to adjust your popup’s layout easily, watch or read this quick guide:

1. Click “New Campaign” to create your popup & choose a template.

create a new campaign

2. Then, you will be redirected to the “Customize” section. Go to the “Style” step. From the “Theme” part, click “Change” to select your popup layout’s theme among well-designed and ready-to-use themes.

style theme

3. From the "Size" part under the Basic, you can quickly determine your popup’s size from the small, medium, and large options.

size style

Customizing your popup’s size is excellent for adjusting how it looks according to your website’s needs.

4. You can determine the position of your popup on the website by choosing the related part.

position

5. From the “Body Style” part, you can select a background color for your popup or add a background image. It’s possible to add a Lottie animation for the background.

Besides, you can determine the popup’s shape and opening effect for your popup from the dropdowns.

body style

You can also add background shadow, overlay color, and opacity from this part.

6. Apart from these, you can set your popup style’s fonts, text size, and colors from the “Text Size & Font and Colors” section. Here are what you can edit:

• The colors of the heading, body, and link texts on the “Colors” part,

• The heading size, heading line height, body size, and body line height on the “Sizes” part,

• The fonts and font weights of the heading and body on the “Heading” and “Body” parts.

text size fonts and colors

✳️ Tip: If you want to add more fonts in this section, you can click on “More fonts” and choose fonts from Google Fonts.

Click on the font you want to add to your campaign and close the Google Fonts window.

Then, the fonts you selected will appear in your Fonts section.

See the "How to Add Fonts" article for further details.

7. By going to the “Form Style” part, you can adjust the form elements’ style.

adjusting form elements style

You can change the form elements’ shape, background fill, accent, and text on this part.

8. From the “Button Style” part, you can adjust the shape and colors of your popups’ buttons.

button

9. By going to the “Close Button Style” part, you can select its background and body colors.

adjusting close button style

10. When there is an extra element on the Success popup, you can adjust its style here as well. For example, since there are social elements on the success popup, you can adjust its Fill and Text colors.

social style

11. For further customization options, you can go to the "Advanced" part and customize your layout's margins and paddings, and add Custom CSS.

advanced customization part

Also, from the “Other options” part, you can select closing options among the “Close with ESC button” and “Close when overlay clicked” options.

other options advanced

See "How to Add New Elements & Use Drag and Drop Editor" to independently customize your popup campaigns' elements.

Have more questions about customizing your popup layout? Contact us for further information!