{"id":31008,"date":"2024-04-09T16:06:27","date_gmt":"2024-04-09T16:06:27","guid":{"rendered":"https:\/\/doc.probance.com\/?post_type=tutoriels&#038;p=31008"},"modified":"2026-07-26T10:44:20","modified_gmt":"2026-07-26T10:44:20","slug":"adjust-the-mobile-display-of-an-email-template","status":"publish","type":"tutoriels","link":"https:\/\/doc.probance.com\/en\/knowledge-base\/adjust-the-mobile-display-of-an-email-template\/","title":{"rendered":"Adjust the mobile display of an email template"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Templates built with Fast Builder are responsive by default, as each block is configured to adapt to the device it is viewed on.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Several options are available to help you control and optimise how your templates render on mobile.<\/em><\/p>\n\n\n\n<h2 id=\"ancre1\" class=\"wp-block-heading\">1. Hide\/show a block on mobile<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By default, any block added to a template is visible on all devices. You can, however, configure your blocks so that they are hidden on mobile or displayed exclusively on mobile.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select your block in the editor<\/li>\n\n\n\n<li>Go to the <strong>Content<\/strong> tab<\/li>\n\n\n\n<li>In the <strong>Display options<\/strong> section, enable <em>Restrict visibility<\/em><\/li>\n\n\n\n<li>Select the device on which the block must be hidden: <em>Mobile<\/em> if the block should not appear on mobile, or <em>Desktop<\/em> if the block should only appear on mobile.<\/li>\n<\/ol>\n\n\n\n<h2 id=\"ancre2\" class=\"wp-block-heading\">2. Change the layout of a block on mobile<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The layout of each block adapts to the device on which the template is viewed, in order to offer the reader the most optimised display. Some blocks have several possible layouts for mobile, allowing you to select the one best suited to your message and your visual identity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The blocks that offer several layouts on mobile are the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product Block:<\/strong> Products can be displayed on a single row (as on desktop), in one column (default mobile display) or in two columns.<\/li>\n\n\n\n<li><strong>Reco\/Perso column blocks<\/strong> <strong>: <\/strong>Products can be displayed in one or two columns.<\/li>\n\n\n\n<li><strong>Text\/icon menu blocks<\/strong> <strong>:<\/strong> they can be displayed in a row (default layout on desktop and mobile) or in a column.<\/li>\n\n\n\n<li><strong>Keypoints 1-2-3\/icons blocks:<\/strong> Key points can be displayed on a single row (as on desktop), in one column (default mobile display) or in two columns.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To change the mobile layout of a block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select your block in the editor<\/li>\n\n\n\n<li>Select the layout you want in<strong> Mobile mode<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 id=\"ancre3\" class=\"wp-block-heading\">3. Preview a template on mobile<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Fast Builder editor includes a preview tool that lets you check how your template renders on mobile while you are working on it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To open it, click <strong>Preview<\/strong> in the header and select the <strong>Mobile<\/strong> tab in the preview window.<\/p>\n\n<div id=\"wpmem_restricted_msg\"><p>This content is restricted to site members.  If you are an existing user, please log in.  New users may register below.<\/p><\/div><div id=\"wpmem_login\"><a id=\"login\"><\/a><form action=\"https:\/\/doc.probance.com\/en\/knowledge-base\/adjust-the-mobile-display-of-an-email-template\/\" method=\"POST\" id=\"wpmem_login_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_login_nonce\" name=\"_wpmem_login_nonce\" value=\"44c1cda505\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/tutoriels\/31008\" \/><fieldset><legend>Existing Users Log In<\/legend><label for=\"log\">Username or Email<\/label><div class=\"div_text\"><input name=\"log\" type=\"text\" id=\"log\" value=\"\" class=\"username\" required  \/><\/div><label for=\"pwd\">Password<\/label><div class=\"div_text\"><input name=\"pwd\" type=\"password\" id=\"pwd\" class=\"password\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"login\" \/><input name=\"redirect_to\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/en\/knowledge-base\/adjust-the-mobile-display-of-an-email-template\/\" \/><div class=\"button_div\"><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/>&nbsp;<label for=\"rememberme\">Remember Me<\/label>&nbsp;&nbsp;<input type=\"submit\" name=\"Submit\" value=\"Log In\" class=\"buttons\" \/><\/div><\/fieldset><\/form><\/div><div id=\"wpmem_reg\"><a id=\"register\"><\/a><form name=\"form\" method=\"post\" action=\"https:\/\/doc.probance.com\/en\/knowledge-base\/adjust-the-mobile-display-of-an-email-template\/\" id=\"wpmem_register_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_register_nonce\" name=\"_wpmem_register_nonce\" value=\"ae89b4890e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/tutoriels\/31008\" \/><fieldset><legend>New User Registration<\/legend><label for=\"username\" class=\"text\">Choose a Username<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"username\" type=\"text\" id=\"username\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"first_name\" class=\"text\">First Name<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"last_name\" class=\"text\">Last Name<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"last_name\" type=\"text\" id=\"last_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"user_email\" class=\"text\">Email<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"user_email\" type=\"email\" id=\"user_email\" value=\"\" class=\"textbox\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"register\" \/><input name=\"wpmem_reg_page\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/en\/knowledge-base\/adjust-the-mobile-display-of-an-email-template\/\" \/><div class=\"button_div\"><input name=\"submit\" type=\"submit\" value=\"Register\" class=\"buttons\" \/><\/div><div class=\"req-text\"><span class=\"req\">*<\/span>Required field<\/div><\/fieldset><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Templates built with Fast Builder are responsive by default, as each block is configured to adapt to the device it is viewed on. Several options are available to help you control and optimise how your templates render on mobile. 1. Hide\/show a block on mobile By default, any block added to a template is visible [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","sujets":[639],"class_list":["post-31008","tutoriels","type-tutoriels","status-publish","hentry","sujets-templates-en"],"_links":{"self":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/tutoriels\/31008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/tutoriels"}],"about":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/types\/tutoriels"}],"author":[{"embeddable":true,"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/media?parent=31008"}],"wp:term":[{"taxonomy":"sujets","embeddable":true,"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/sujets?post=31008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}