How to choose the right image for your popup
Including a high-quality image to the left, right or top of your popup content can create a beautiful and compelling experience for visitors to your site. In this article, you’ll learn how to add a side image to the popup and selecting an optimal image for it.
On the right side settings panel, ensure that the styles tab is selected.
Under the styles tab, Select where you would like the image to appear.
On selecting an option with side image, you'll see two more options appear below it, Image size and Side image styles.
You can choose how much space the side image takes up relative to the popup using the image size option.
Click on the arrow next to "side image styles" to navigate to the side image styling options.
Here you can change, edit the image, or set other image related styling, clicking on edit will open the image editor.
You can also see the image container size, this will help you select an optimal image that fits perfectly in the image container. Beware that the image container size changes depending on the content of your popup and the window width of the popup. It is recommended that you choose an image once you have finalised the popup content.
By default, the side image will appear on all mobile, table and desktop devices, you can choose to hide the side image on either of these devices.
To hide the side image on mobile devices, switch to mobile mode by clicking on the mobile phone icon on the top bar.
Any styles that you apply in the table or mobile mode will only get applied to these devices, whereas styles applied in the desktop mode will be applied to all devices unless there is a device specific style set on either table or mobile. Once you apply a device specific style, you will see an indication that a device specific style was applied and to clear this, click on the cross icon
Now let us remove the side image for mobile devices, ensure that you are on mobile mode and select the "no side image" option, the side image won't be appearing on mobile devices now.
If you change you mind later and decide that you want a side image for mobile devices, select mobile mode and clear the device specific styles by clicking on the cross icon next to "device specific styles applied".
On the right side settings panel, ensure that the styles tab is selected.
Under the styles tab, Select where you would like the image to appear.
On selecting an option with side image, you'll see two more options appear below it, Image size and Side image styles.
You can choose how much space the side image takes up relative to the popup using the image size option.
Click on the arrow next to "side image styles" to navigate to the side image styling options.
Here you can change, edit the image, or set other image related styling, clicking on edit will open the image editor.
You can also see the image container size, this will help you select an optimal image that fits perfectly in the image container. Beware that the image container size changes depending on the content of your popup and the window width of the popup. It is recommended that you choose an image once you have finalised the popup content.
By default, the side image will appear on all mobile, table and desktop devices, you can choose to hide the side image on either of these devices.
To hide the side image on mobile devices, switch to mobile mode by clicking on the mobile phone icon on the top bar.
Any styles that you apply in the table or mobile mode will only get applied to these devices, whereas styles applied in the desktop mode will be applied to all devices unless there is a device specific style set on either table or mobile. Once you apply a device specific style, you will see an indication that a device specific style was applied and to clear this, click on the cross icon
Now let us remove the side image for mobile devices, ensure that you are on mobile mode and select the "no side image" option, the side image won't be appearing on mobile devices now.
If you change you mind later and decide that you want a side image for mobile devices, select mobile mode and clear the device specific styles by clicking on the cross icon next to "device specific styles applied".
Updated on: 08/12/2022
Thank you!