Visualizing your campaign on different devices
To ensure your campaign looks good on both mobile and desktop:
Use the toggle in the top right of the campaign editor to switch between Desktop and Mobile views.
Use the preview feature to see how your popup appears on your actual website in both modes.
Customizing your campaign design for mobile
Hiding columns on mobile
Wisepops allows you to hide specific columns on mobile devices:
Hover over the column you want to hide.
Click "Edit Column".
In the left menu, toggle "Display on mobile" to hide the column.
Verify the changes by switching between Desktop and Mobile views.
Note: Many multicolumn templates are pre-edited to hide unnecessary columns on mobile.
Warning: Avoid hiding columns with critical elements, such as buttons linking to next steps.
Hide/Show Blocks on Specific Devices (New Feature)
We've made your Wisepops campaigns even more adaptive with a new device-specific visibility option. You can now show or hide individual blocks depending on the visitor's device type (Desktop or Mobile). This ensures that your popups, bars, and embeds look perfect on every screen.
How to set block visibility:
Select the block you want to edit.
In the left-hand editor menu, find the VISIBILITY section.
Choose one of the following options:
All devices: The block is visible on both Desktop and Mobile.
Only desktop: The block is visible only on Desktop.
Only mobile: The block is visible only on Mobile.
Available for these blocks:
Text
Image
Video
Button (single button only)
Dismiss link
Divider
Common Use Case: Different Image Layouts on Desktop vs. Mobile
A common design challenge is showing an image next to text on Desktop (2-column layout) but having the image stacked above the text on Mobile (1-column layout).
You can achieve this by combining column hiding with block visibility:
Set up the Left Column (Text):
Place your text block in the left column.
In the left column's settings, ensure "Display on mobile" is selected (ON)
Set up the Right Column (Desktop Image):
Place your image block in the right column.
In the right column's settings, toggle "Display on mobile" to unselected (OFF).
This hides the entire column on mobile, meaning the image will not show up here.
Add a Mobile-Only Image (Stacked on Top):
Place a new, identical image block (or one optimized for mobile) into the mobile design (the one that does display on mobile).
Select this new image block.
In its block settings, under VISIBILITY, select the "Only mobile" option. The image will appear only on mobile, creating the desired stacked look.
💡 Pro tip: For full control, you can duplicate a block and tailor each version for a specific device (e.g., different font sizes, button layouts, or image ratios). This is essential for replacing a large image on desktop with a smaller, optimized image on mobile, or showing different versions of a form.
Creating Separate Mobile-Only Popups
In some cases, you may need to create a separate mobile popup for a completely different design or display scenario that cannot be achieved by simply adjusting blocks and columns.
Duplicate your desktop campaign or start from scratch
Set the popup to display on phones:
Click "Display" > "Audience" tab
Select "Display on mobiles" next to Device
3. Adjust content & styling:
Adjust or remove images to improve loading time
Edit copy and font sizes
Adjust call-to-action button
Mobile Best Practices
Easy Closing: Increase the size of the closing 'X' for easier tapping.
Use the Tab Feature: Activate the tab for non-invasive calls to action.
Add a Delay: Implement a page view delay to comply with Google guidelines.
Simplify Design: Remove unnecessary elements and optimize for smaller screens.
Optimize Loading Speed: Minimize image usage and file sizes.