Adding Custom CSS to Elements

Do you want your popup to look crucial and also compatible with your website design? Here is how you can add custom CSS to elements and create harmony!

Popupsmart offers a powerful feature that allows you to apply custom CSS styles to your elements. This gives you the flexibility to create visually appealing popups that match your website's design and branding.

Let's show you an example of how to customize email input with Custom CSS:

How to Add Custom CSS to Elements

Access Advanced Tab

Go to Popupsmart's popup builder's "Style" step. Look for the "Advanced" tab within the editor and click on it to access the advanced customization options.

Style step of Popupsmart's popup builder

Identify the Element

In the advanced customization tab, you will see a list of elements that make up your popup. Identify the element you wish to modify—this could be the popup headline, button, image, or any other component.

email address element of Popupsmart's popup builder

Copy Element ID

Once you've identified the element, copy the element ID for customization. You'll need this ID to target the specific element in your CSS code.

Write Custom CSS

After copying the desired element ID, you will find a text area where you can add your custom CSS code. Write or paste your CSS code into the designated area, making sure to follow CSS syntax and rules for proper styling.

changing size of the mail address element by using custom css

Preview and Save

Experiment with various CSS properties like font size, color, padding, margin, background, and more. You can preview the changes in real time within the popup editor to see how they impact the selected element.

Example CSS Code

For this kind of change, you can use the code below by changing its element id and color name:

pre code:not(.hljs):not([class*=language-]) { background: #f8f8f8; line-height: 1.5; display: block; overflow-x: auto; padding: 1rem !important; color: inherit; border-radius: 2px; }

#email-input-cqz567kh0280
{
  background-color:skyblue;
  width:150px!important;
}

Don't Forget

Make sure your CSS is correctly formatted. Once you complete all the settings, save and publish the popup. Do not forget to turn the status toggle on to make your popup visible on your website.

Do you have additional questions about how to add custom CSS to your popup? Contact Us!

How is this guide?