INTRODUCTION
OptiMonk's background image cropping tool allows you to adjust images directly within the Campaign Editor. Since popup size is determined by its content, cropping your background image is an effective way to control your campaign's dimensions and ensure optimal visual presentation.
In this article, we'll show you step by step:
How to crop background images of your popups
Step 1: Access Your OptiMonk Account
Log in to your OptiMonk account at https://app.optimonk.com/
Step 2: Navigate to Campaigns
Select Campaigns from the navigation bar.
Step 3: Choose Your Campaign
Select the campaign you want to edit, or create a new campaign.
Step 4: Open Campaign Editor
Click on the variant you want to edit to open the Campaign Editor. Select a template with a background image, then click on the image to reveal background settings on the right side.
Step 5: Replace Background Image
Click on the image preview thumbnail and select Replace image.
Step 6: Select Your Image
Choose an image from your library of previously uploaded images.
Step 7: Set Image Position to Crop
After selecting your image, set the image position to Crop in the settings panel.
Step 8: Access Cropping Tool
Double-click on the background image in your popup to access the cropping interface.
Step 9: Adjust Image Position and Size
Use your mouse or touchpad to:
Scale the image to your desired size
Drag the image to position it within the crop area
The visible portion of the image will become your background.
Step 10: Adjust for Multi-Page Campaigns
If your campaign has multiple pages, repeat the cropping process for each page. Different page sizes may require unique cropping adjustments to maintain visual consistency.
What do different image positions mean?
When setting a background image, you can choose from five position options. Each affects how the image displays within your campaign:
Original Positions the image in the top-left corner at its original size without any resizing.
Contain Resizes the image to fit within the popup boundaries without stretching, maintaining aspect ratio. The entire image remains visible.
Cover Ensures the image fills the entire space, even if it requires slight stretching or cropping portions of the image.
Stretch Resizes the image to fill the space completely without maintaining the original aspect ratio, which may cause distortion.
Crop Allows manual scaling and cropping while maintaining the image's original aspect ratio for precise control over the visible area.
Need Help?
If you have any further questions or need any help, just let us know at [email protected], and we would be happy to assist you!