Create a popup featuring an image divided into two sections

To create a popup that features an image divided into two sections, follow these simple steps:
First, create a popup as you normally would.
In the "Design" section of the popup editor, click on "Hero Layout."
Add the image you want to use for the hero section on both desktop and mobile.
Choose where you want the image to appear on desktop (top, left, or right). Note that the image will always appear at the top when viewed on mobile.
In the "Custom Styles" section, enable Custom CSS and paste the following code:

/*Removes the popup padding*/

.modal-content {
    padding: 0px !important;
}

/*Removes the overlap of the popup with the hero image. (when popup’s layout is set to Left*/

.modal-content {
    margin-right: 0px !important;
}

/*Removes the overlap of the popup with the hero image. (when popup’s layout is set to Right*/

.modal-content {
    margin-left: 0px !important;
}

Updated on: 18/04/2023