<aside> ➡️ SHORTCUTS

POPUP

Add border to a popup

Add a space in between GDPR Compliance text and submit button

Make the entire popup display smaller

CLOSE BUTTON

Remove close (X) button

Move popup close (X) button to the left

Change background color of the close (X) button

TEXT BLOCK

Align text to the right and set the text direction to right-to-left (Hebrew)

Justify text in a text block

Increase font size of text block

Text color animation effect

TIMER

Change the color, font size, and width of the timer

Change the color of specific timer counters

Change the color of timer labels

SMART BAR

Make smart bar smaller (mobile & desktop)

Move smart bar close (X) button to the left

Smart bar - make the text move horizontally from right to left in a continuous loop

BUTTON

Increase the font size of the button

Change the length of the button

Make the button transparent (form + button)

Make the button transparent (2 buttons)

Change the submit button's color on hover

Add an outline to the submit button

Add an outline to the email input text field

HERO IMAGE

Change the background color of a popup with a hero image

CONVERSION PAGE

Conversion page: Remove background image & change background color

Conversion Page: Remove hero image

RADIUS

Change the radius of a popup

Change the radius of a popup with a hero image (both popup & hero image)

Change the radius of a popup with a hero image (both popup & hero image - Hero Padding is 0)

Change the radius of a popup with a hero image (inner popup only)

Change the radius of a popup with a hero image (hero image only)

Change the radius of the image content

COUPON POPUP

Hide coupon block in the main popup

UPSELL POPUP

Upsell popup - adjust button height

WHEEL POPUP

Wheel popup - adjust the size

</aside>

Change the background color of a popup with a hero image

Before:

Untitled

After:

Untitled

Custom CSS:

.modal-card{
background-color:blue !important;
}

Add border to a popup

Before:

Untitled

After:

Untitled

image.png

Custom CSS:

.pop-content-blocks{
    border: 5px solid #0000FF;
}
// applies to all popups with hero image
.modal-hero-container{
border: 8px solid #0000FF;
}