Device Specific Designs is currently available through Early Access.<\/p>\n\n\n\n
Early Access users get to use and test new features and improvements before other customers (or your competition) in exchange for providing feedback about those features. <\/p>\n\n\n\n
Learn more about how to join our free Early Access program.<\/a><\/p>\n<\/div>\n\n\n\n To get started, open the campaign you wish to edit in the campaign builder.<\/p>\n\n\n\n In the upper right-hand corner of the builder, you\u2019ll find individual toggles that allow you to seamlessly switch between Desktop, Tablet, and Mobile design views.<\/p>\n\n\n\n You can now proceed to edit the styling of your campaign.<\/p>\n\n\n\n \u26a0\ufe0f Important: How Style Cascading Works<\/p>\n\n\n\n By default, styles cascade downwards: Desktop > Tablet > Mobile<\/strong>. All three devices are linked until you choose to customize one of the smaller devices (Tablet or Mobile). The remaining Devices are still linked. <\/p>\n<\/div>\n\n\n\n Beyond styling, you can also choose to show or hide entire block elements depending on the device type.<\/p>\n\n\n\n You can quickly hide individual block elements directly from the design pane:<\/p>\n\n\n\n To manage the visibility of all block elements at once (including finding ones you’ve already hidden), follow these steps:<\/p>\n\n\n\n When devices are linked together, a light blue background appears behind their icons. Wherever the light blue background appears, those devices share the same styles. Any device without the light blue background has been edited independently and is not synced with the others. A small blue dot also appears on the icon of any independent device. To quickly check the status of a device, hover over its icon \u2014 a tooltip will clearly indicate whether it is linked or independent.<\/p>\n\n\n\n No. All OptinMonster templates are automatically designed to be responsive across all devices right out of the box. You should use device-specific designs when you want to take full control over your campaign’s appearance beyond the default responsive styles.<\/p>\n\n\n\n Not at all! You can continue using the Mobile-Only<\/a> and Device Targeting Display Rule<\/a> features if you prefer and some cases, you should! <\/p>\n\n\n\n There are very valid reasons to want entirely separate campaigns on different device types. As an example, your CTA on desktop might be to Contact Us, while on Mobile, it might be to Call Us (since they have their phone in their hand). In scenarios like that (where you intend to track impressions and conversions on Devices uniquely from one another), separate campaigns are the best options. But now, if the only<\/em><\/strong> difference in your needs between Devices is a simple style change, you no longer have to create separate campaigns.<\/p>\n\n\n\n Any campaigns you’ve already created using Mobile-Only Templates or the Device Targeting Display Rule will remain exactly as you built them. Device-specific designs are an added tool<\/em><\/strong> in your toolkit, giving you more options to control how your campaigns look and behave for your site visitors.<\/p>\n","protected":false},"excerpt":{"rendered":" OptinMonster makes it easy to customize your campaign’s appearance across Desktop, Tablet, and Mobile devices. Creating device-specific designs gives you total control over how your campaign looks on any screen size. In this article, you\u2019ll learn how to use device-specific design controls in the campaign builder. Device-Specific Design Controls To get started, open the campaign …<\/p>\n","protected":false},"author":4657,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[8],"documentation\/tags":[31399,31409,32115,31411],"class_list":["post-210338","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-getting-started"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/210338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/4657"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=210338"}],"version-history":[{"count":12,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/210338\/revisions"}],"predecessor-version":[{"id":210379,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/210338\/revisions\/210379"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=210338"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=210338"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=210338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Device-Specific Design Controls<\/h2>\n\n\n\n
![\"The](\"https:\/\/optinmonster.com\/wp-content\/uploads\/2026\/03\/Markup-2026-03-22-at-153226-1024x522.png\")
<\/figure>\n\n\n\n
When you change a style setting or hide a Block on a smaller device (like Tablet or Mobile), you “break the link” for that specific element. It becomes independent and will no longer inherit changes from the larger device views.
Example 1 (Editing Desktop Only):<\/strong> You’ve just created a campaign and have made no edits to any Device yet. At this point, all three Devices are linked, and styles cascade from Desktop. Then, you hide a Block in Desktop. The same Block is hidden in both Tablet and Mobile because you haven’t edited Tablet or Mobile specifically.
Example 2 (Editing Tablet):<\/strong> You’ve changed a Text Block’s font size from 20px to 16px in only the Tablet<\/em> view. Desktop and Mobile will stay at 20px; only Tablet will update to 16px.
Example 3 (Editing Mobile):<\/strong> You’ve changed a Text Block’s font color to red in only the Mobile<\/em> view. Desktop and Tablet will keep their original color, while only Mobile becomes red.
Example 4 (Editing Tablet)<\/strong>: You’ve hidden a Block on Tablet. That Device is now unlinked from Desktop and Mobile. The Block is hidden only on Tablet, and any further changes applied to Tablet apply only to Tablet. Desktop and Mobile are still linked.
The Golden Rule:<\/strong> Once you separate a device view’s style, it cannot be automatically relinked.<\/strong> Unless you immediately use the “Undo” button<\/a> during your current editing session, that element’s style must be controlled independently moving forward.<\/p>\n\n\n\nBlock Visibility<\/h2>\n\n\n\n
Quick-Hide Block Elements<\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/optinmonster.com\/wp-content\/uploads\/2026\/03\/hide-optinmonster-block-element-device.gif\")
<\/figure>\n\n\n\nManage All Block Element Visibility<\/h3>\n\n\n\n
\n
![\"The](\"https:\/\/optinmonster.com\/wp-content\/uploads\/2026\/03\/Markup-2026-03-22-at-153226.png\")
<\/li>\n\n\n\n![\"Manage](\"https:\/\/optinmonster.com\/wp-content\/uploads\/2026\/03\/manage-block-visibility-in-optinmonster.png\")
<\/li>\n<\/ol>\n\n\n\nHow can I tell which Devices’ styles are linked, and which are independent of one another?<\/h3>\n\n\n\n
FAQs<\/h2>\n\n\n\n
Am I required to use this approach to manually control the appearance of my campaign by device type?<\/strong><\/h5>\n\n\n\n
I’ve already created mobile-specific campaigns. Do I need to redo those?<\/strong><\/h5>\n\n\n\n