{"id":1489,"date":"2022-11-22T06:26:58","date_gmt":"2022-11-21T22:26:58","guid":{"rendered":"https:\/\/leadsleap.com\/blog\/?p=1489"},"modified":"2023-09-19T15:57:41","modified_gmt":"2023-09-19T07:57:41","slug":"how-to-make-landing-pages-mobile-responsive","status":"publish","type":"post","link":"https:\/\/leadsleap.com\/blog\/how-to-make-landing-pages-mobile-responsive\/","title":{"rendered":"How To Make Landing Pages Mobile Responsive?"},"content":{"rendered":"\n<p>Today&#8217;s update is about making your landing page mobile responsive.<\/p>\n\n\n\n<p>Before I go into the updates, I want to briefly touch on how our Page Builder creates mobile responsive pages.<\/p>\n\n\n\n<p>It&#8217;s a short refresher course for those who are new to our Page Builder.<\/p>\n\n\n\n<h2>How LeadsLeap Page Builder Creates Mobile Responsive Pages<\/h2>\n\n\n\n<p>LeadsLeap uses the idea of &#8216;<strong>row<\/strong>&#8216; and &#8216;<strong>column<\/strong>&#8216; as the building structure.<\/p>\n\n\n\n<p>A page can have multiple rows.<\/p>\n\n\n\n<p>A row can have 1, 2 or maximum 3 columns.<\/p>\n\n\n\n<p>If a row has 2 or 3 columns, the columns will be collapsible when viewed in mobile phones.<\/p>\n\n\n\n<p>Let me show you some examples.<\/p>\n\n\n\n<p>A row with 1 column looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"552\" height=\"286\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/1column.jpg\" alt=\"\" class=\"wp-image-1494\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/1column.jpg 552w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/1column-300x155.jpg 300w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p>The desktop view and mobile view look exactly the same.<\/p>\n\n\n\n<p>A row with 2 columns looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"552\" height=\"286\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2column-1.jpg\" alt=\"\" class=\"wp-image-1493\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2column-1.jpg 552w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2column-1-300x155.jpg 300w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p>The columns will collapse on top of each other when viewed in a mobile browser.<\/p>\n\n\n\n<h2>More Options For 2-Column Design<\/h2>\n\n\n\n<p>If you use a row with 2 columns, you can decide whether the left column will collapse to the top, or the right column will be to the top.<\/p>\n\n\n\n<p>You can also decide whether you want the left column to be wider, or the right column.<\/p>\n\n\n\n<p>All the options are shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"778\" height=\"169\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columnopt.jpg\" alt=\"\" class=\"wp-image-1495\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columnopt.jpg 778w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columnopt-300x65.jpg 300w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columnopt-768x167.jpg 768w\" sizes=\"(max-width: 778px) 100vw, 778px\" \/><\/figure>\n\n\n\n<p>Now, that&#8217;s where the update comes in.<\/p>\n\n\n\n<p>Previously, you have to make the decision AT THE TIME when you create the row.<\/p>\n\n\n\n<p>If you change your mind, you&#8217;ll have to re-do everything again.<\/p>\n\n\n\n<p>That is really a pain!<\/p>\n\n\n\n<p>Now, you can change the column option anytime.<\/p>\n\n\n\n<p>To change how the columns behave, simply mouse over the 2-column row and then mouse over the setting icon. See the demo below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1123\" height=\"404\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/column.gif\" alt=\"\" class=\"wp-image-1496\"\/><\/figure>\n\n\n\n<p>Please note that this option is only available for 2-column row. For 3-column row, the collapsing will be left on top.<\/p>\n\n\n\n<h2>How To Know Which Column Will Collapse To The Top?<\/h2>\n\n\n\n<p>To know which column will collapse to the top, we&#8217;ve added a ^ to the top column. See the explanation below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"507\" height=\"162\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columntop.jpg\" alt=\"\" class=\"wp-image-1497\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columntop.jpg 507w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/2columntop-300x96.jpg 300w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/figure>\n\n\n\n<p>Another way of course is to see the page in mobile view.<\/p>\n\n\n\n<p>Previously, you will have to really view the page using a mobile phone to see the mobile version. <\/p>\n\n\n\n<p>But now, you can preview in mobile mode.<\/p>\n\n\n\n<p>This brings me to the last update\u2026<\/p>\n\n\n\n<h2>Preview The Page In Mobile Mode.<\/h2>\n\n\n\n<p>When you preview the page, you can view the page in <strong>Desktop<\/strong>, <strong>Tablet <\/strong>or <strong>Mobile <\/strong>mode.<\/p>\n\n\n\n<p>See the demo below<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1169\" height=\"444\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/11\/preview-1.gif\" alt=\"\" class=\"wp-image-1499\"\/><\/figure>\n\n\n\n<p>With these updates, it is now easier to create mobile responsive pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s update is about making your landing page mobile responsive. Before I go into the updates, I want to briefly touch on how our Page Builder creates mobile responsive pages. It&#8217;s a short refresher course for those who are new to our Page Builder. How LeadsLeap Page Builder Creates Mobile Responsive Pages LeadsLeap uses the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[],"_links":{"self":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1489"}],"collection":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/comments?post=1489"}],"version-history":[{"count":8,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions"}],"predecessor-version":[{"id":1712,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions\/1712"}],"wp:attachment":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/categories?post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/tags?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}