{"id":27950,"date":"2026-01-28T10:06:13","date_gmt":"2026-01-28T08:06:13","guid":{"rendered":"https:\/\/aivie.ch\/faq\/how-can-i-display-images-or-buttons-only-on-desktop-or-only-on-mobile\/"},"modified":"2026-01-28T10:12:05","modified_gmt":"2026-01-28T08:12:05","slug":"how-can-i-display-images-or-buttons-only-on-desktop-or-only-on-mobile","status":"publish","type":"faq","link":"https:\/\/aivie.ch\/en\/faq\/how-can-i-display-images-or-buttons-only-on-desktop-or-only-on-mobile\/","title":{"rendered":"How can I display images or buttons only on desktop or only on mobile?"},"content":{"rendered":"\n<p>I would like to display certain content in an email \u2013 e.g. <strong>buttons, images or entire sections<\/strong> \u2013 <strong>only on desktop<\/strong> or <strong>only on mobile<\/strong>. Aivie offers a <strong>Visibility option per block<\/strong>, which allows content to be specifically shown or hidden depending on the device. <\/p>\n\n<!--more-->\n\n<p>This function is particularly suitable for:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>different button layouts<\/li>\n\n\n\n<li>Mobile-optimized call-to-actions<\/li>\n\n\n\n<li>alternative image sections for desktop and mobile<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Control visibility per block<\/h2>\n\n<p>The button block has the <strong>Visibility<\/strong> option in the <strong>Settings<\/strong>.<\/p>\n\n<p>There you can select:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>All Devices<\/strong><\/li>\n\n\n\n<li><strong>Desktop only<\/strong><\/li>\n\n\n\n<li><strong>Mobile only<\/strong><\/li>\n<\/ul>\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-a74c641\" data-block-id=\"a74c641\"><figure><span class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-27960\" src=\"https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-scaled.png\" width=\"2560\" height=\"1116\" alt=\"Control Desktop Mobile Visibility in the Aivie Email Builder\" title=\"\" srcset=\"https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-scaled.png 2560w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-960x419.png 960w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-1920x837.png 1920w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-768x335.png 768w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-1200x523.png 1200w, https:\/\/cdn.aivie.ch\/media\/wp\/2026\/01\/28101055\/Visibilitat-Desktop-Mobile-Steuern-im-Aivie-Email-Builder-480x209.png 480w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/span><\/figure><\/div>\n\n<p>The content will then only be rendered on the selected devices.<\/p>\n\n<h2 class=\"wp-block-heading\">Show or hide entire sections<\/h2>\n\n<p>The visibility option can also be applied to entire <strong>Sections<\/strong>.<\/p>\n\n<p>Typical use:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Desktop section with multi-column layout<\/li>\n\n\n\n<li>Mobile section with simplified display<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Typical applications<\/h2>\n\n<h3 class=\"wp-block-heading\">1. Different buttons for desktop and mobile<\/h3>\n\n<p>Example:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Desktop: wide button, aligned to the left<\/li>\n\n\n\n<li>Mobile: large full-width button<\/li>\n<\/ul>\n\n<p>You create <strong>two buttons<\/strong> for this:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Button A \u2192 Visibility: <strong>Desktop only<\/strong><\/li>\n\n\n\n<li>Button B \u2192 Visibility: <strong>Mobile only<\/strong><\/li>\n<\/ul>\n\n<p>Both can use the same link, but be designed differently.<\/p>\n\n<h3 class=\"wp-block-heading\">2. Different images depending on the device<\/h3>\n\n<p>Example:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Desktop: wide screenshot image<\/li>\n\n\n\n<li>Mobile: compressed section or simplified motif<\/li>\n<\/ul>\n\n<p>Here too:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Image A \u2192 <strong>Desktop only<\/strong><\/li>\n\n\n\n<li>Image B \u2192 <strong>Mobile only<\/strong><\/li>\n<\/ul>\n\n<p>This ensures that the image effect remains controllable per device.<\/p>\n\n<h2 class=\"wp-block-heading\">Technical note<\/h2>\n\n<p>The visibility control in Aivie is based on <strong>client-compatible CSS rules<\/strong> that are supported by common email clients (including iOS Mail and Gmail).  <\/p>\n\n<p>However, no guarantee can be given that the rule will be applied in all cases.  <\/p>\n\n<h2 class=\"wp-block-heading\">Recommendation<\/h2>\n\n<p>Use \u201cDesktop only\u201d \/ \u201cMobile only\u201d specifically for:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Call-to-actions<\/li>\n\n\n\n<li>complex layouts<\/li>\n\n\n\n<li>image-heavy content<\/li>\n<\/ul>\n\n<p>For normal text content, <strong>a uniform layout<\/strong> is usually sufficient.<\/p>\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n<p>With the visibility option in Aivie, content can be displayed or hidden device-specifically.<br\/>This allows emails to be optimally tailored to desktop and mobile \u2013 without separate templates or manual CSS adjustments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I would like to display certain content in an email \u2013 e.g. buttons, images or entire sections \u2013 only on desktop or only on mobile. Aivie offers a Visibility option per block, which allows content to be specifically shown or hidden depending on the device.<\/p>\n","protected":false},"featured_media":0,"template":"","categories":[],"tags":[],"FaqCategories":[281],"FaqTags":[1504,1505,1507],"class_list":["post-27950","faq","type-faq","status-publish","hentry","FaqCategories-emails","FaqTags-email-builder","FaqTags-mobile","FaqTags-responsive"],"acf":[],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","post-thumbnail":"","aiv_480w":"","woocommerce_thumbnail":"","woocommerce_single":"","woocommerce_gallery_thumbnail":""},"post_excerpt_stackable_v2":"<p>I would like to display certain content in an email \u2013 e.g. buttons, images or entire sections \u2013 only on desktop or only on mobile. Aivie offers a Visibility option per block, which allows content to be specifically shown or hidden depending on the device. This function is particularly suitable for: different button layouts Mobile-optimized call-to-actions alternative image sections for desktop and mobile Control visibility per block The button block has the Visibility option in the Settings. There you can select: All Devices Desktop only Mobile only The content will then only be rendered on the selected devices. Show or&hellip;<\/p>\n","category_list_v2":"Uncategorized","author_info_v2":{"name":"","url":""},"comments_num_v2":"0 comments","_links":{"self":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq\/27950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/types\/faq"}],"version-history":[{"count":2,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq\/27950\/revisions"}],"predecessor-version":[{"id":27964,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/faq\/27950\/revisions\/27964"}],"wp:attachment":[{"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/media?parent=27950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/categories?post=27950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/tags?post=27950"},{"taxonomy":"FaqCategories","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/FaqCategories?post=27950"},{"taxonomy":"FaqTags","embeddable":true,"href":"https:\/\/aivie.ch\/en\/wp-json\/wp\/v2\/FaqTags?post=27950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}