{"id":15265,"date":"2019-11-05T21:44:09","date_gmt":"2019-11-05T21:44:09","guid":{"rendered":"http:\/\/www.glitnir.com\/?page_id=15265"},"modified":"2019-11-08T15:04:36","modified_gmt":"2019-11-08T15:04:36","slug":"hiding-content","status":"publish","type":"page","link":"https:\/\/www.glitnir.com\/index.php\/using-the-editor\/hiding-content\/","title":{"rendered":"Hiding content on mobile or desktop devices"},"content":{"rendered":"
\n
\n\t

\"mobilehide.gif\"<\/p>\n

 <\/p>\n

NEW: hide on desktop!<\/h2>\n

We recently released a highly requested update to this handy feature:\u00a0hide on desktop<\/strong>. That's right, you are now able to toggle between always showing a specific content element...<\/p>\n

\"hide_on_disabled.jpg\"<\/p>\n

 <\/p>\n

... hiding it when the email is opened on a desktop computer...<\/p>\n

\"hide_on_enabled_desktop.jpg\"<\/p>\n

 <\/p>\n

... or hiding it when it's opened on a mobile device:<\/p>\n

\"hide_on_enabled_mobile.jpg\"<\/p>\n

 <\/p>\n

Optimizing for mobile<\/h2>\n

Mobile design is not only about the layout responsiveness, but also about having the appropriate content in the right context.<\/p>\n

An email that may yield excellent results on desktop screens may not work as well when the user needs to scroll on his mobile device to reach the call to action.<\/p>\n

The best way to solve this challenge is to hide unnecessary design and\/or content elements when the message displays on mobile devices. And that's what this new feature is all about!<\/p>\n

 <\/p>\n

Content block options<\/h2>\n

When this feature is turned on, all content blocks in the editor will include a new \"Hide on\" setting in the property panel. To use it, simply scroll down in the right panel until you see the \"Block options\" section.<\/p>\n

\"hide_on_disabled.jpg\"<\/p>\n

 <\/p>\n

You can check the result of turning this property on for a specific content block by going into the\u00a0Preview<\/em>\u00a0and selecting the\u00a0Mobile\u00a0<\/em>view. You will see that as you toggle between\u00a0Desktop\u00a0<\/em>and\u00a0Mobile<\/em>\u00a0the content blocks for which \"Hide on\" has been turned on will not be shown.<\/p>\n

 <\/p>\n

An example<\/h2>\n

To illustrate how this feature can be used, let's take the\u00a0New Year Event<\/em>\u00a0template.<\/p>\n

\"newyearevent.png\"<\/p>\n

 <\/p>\n

This beautiful template uses an excellent image as the content background to capture the user interest.\u00a0The design uses\u00a0large empty spaces to balance background and content in order to increase the aesthetic impact of the message.<\/p>\n

\"NYE_desktop.png\"<\/p>\n

 <\/p>\n

This template was built before the \"Hide on mobile\" option was available, and it had a problem: when viewed on mobile devices, the top part of the message had an empty space that took too much of the screen, pushing some of the key content below the fold and thus requiring unnecessary vertical scrolling.<\/p>\n

\"NYEmob.png\"<\/p>\n

 <\/p>\n

By leveraging \"Hide on mobile\", the problem can now easily be corrected. We can use\u00a0transparent dividers to create the empty spaces over the image background needed for the desktop view, and hide them on mobile devices to change the way the message renders there.<\/p>\n

\"NYE_edit.png\"<\/p>\n

 <\/p>\n

Thanks to this useful new feature, we can now build a message that has an optimized layout for desktop screens while also providing a better viewing experience when opened on mobile devices.<\/p>\n

As you can see from this updated screenshot, much more of the content is now immediately shown when the message is viewed on a mobile device. This reduces the need for vertical scrolling and can certainly contribute to higher engagement on that email campaign.<\/p>\n

\"NYEmob_2.png\"<\/p>\n

 <\/p>\n

 <\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

  NEW: hide on desktop! We recently released a highly requested update to this handy feature:\u00a0hide on desktop. That’s right, you are now able to toggle between always showing a specific content element…   … hiding it when the email is opened on a desktop computer…   … or hiding it when it’s opened on […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15226,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15265"}],"collection":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/comments?post=15265"}],"version-history":[{"count":3,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15265\/revisions"}],"predecessor-version":[{"id":15406,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15265\/revisions\/15406"}],"up":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15226"}],"wp:attachment":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/media?parent=15265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}