{"id":1551,"date":"2023-01-31T10:53:31","date_gmt":"2023-01-31T02:53:31","guid":{"rendered":"https:\/\/leadsleap.com\/blog\/?p=1551"},"modified":"2023-09-19T15:25:07","modified_gmt":"2023-09-19T07:25:07","slug":"3-page-builder-updates-preview-image-favicon-and-mobile-only-page-design","status":"publish","type":"post","link":"https:\/\/leadsleap.com\/blog\/3-page-builder-updates-preview-image-favicon-and-mobile-only-page-design\/","title":{"rendered":"3 Page Builder Updates – Preview Image, Favicon and Mobile Only Page Design"},"content":{"rendered":"\n

We have just completed 3 updates for LeadsLeap Page Builder.<\/p>\n\n\n\n

1) Social Media Preview Image<\/h2>\n\n\n\n

Recently, more and more members ask us to add a Preview Image to their Page.<\/p>\n\n\n\n

What does a Preview Image do?<\/p>\n\n\n\n

If you have a Preview Image, when sharing your Page in Social Media sites, the Preview Image will be shown in the shared content. This will increase the click through rate.<\/p>\n\n\n\n

The option to add Social Media Preview Image is now available in your Page Manager.<\/p>\n\n\n\n

Go to the Page Campaign, click the edit button (arrow 1), you’ll see the option (arrow 2).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2) Favicon<\/h2>\n\n\n\n

Favicon is an icon that is displayed in the address bar of the visitor’s browser. It’s more for branding purpose.<\/p>\n\n\n\n

For example, see Gmail’s favicon below:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you have a personalized favicon and would like to standardize it in your Page, you may do so now.<\/p>\n\n\n\n

The way to add Favicon is similar to Social Media Preview Image.<\/p>\n\n\n\n

Go to the Page Campaign, click the edit button (arrow 1), you’ll see the option (arrow 2).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3) Mobile Only Page Design<\/h2>\n\n\n\n

Although Pages built using our Page Builder is mobile responsive, it is still not good enough for some of our members.<\/p>\n\n\n\n

If you are one of them, you can now create a Page that is specifically for mobile phones.<\/p>\n\n\n\n

This means you can have 2 Designs in one Page – one Design for PC only and another Design for Mobile only.<\/p>\n\n\n\n

When someone visits the URL of your Page, if the visitor uses a PC or tablet, the ‘PC’ version will be shown. If the visitor uses a mobile phone, the ‘mobile’ version will be shown.<\/p>\n\n\n\n

In other words, the SAME URL<\/strong> can now show a different design to visitors using different devices, so that the best design can be shown.<\/p>\n\n\n\n

How to Set Up A Mobile Only Design?<\/h3>\n\n\n\n

Go to your Page and add 2 Designs into it.<\/p>\n\n\n\n

For one Design, you set the ‘Device<\/strong>‘ to ‘PC<\/strong>‘. <\/p>\n\n\n\n

For the other Design, you set the ‘Device<\/strong>‘ to ‘Mobile<\/strong>‘. <\/p>\n\n\n\n

See the example below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Using the above screenshot as an illustration, if the visitor uses a PC or tablet, the Test Design 1 will be shown. If the visitor uses a mobile phone, the Test Design 2 will be shown.<\/p>\n\n\n\n

Is it a MUST to have 2 designs now?<\/em><\/h3>\n\n\n\n

No. <\/p>\n\n\n\n

By default, the ‘Device<\/strong>‘ setting is set to ‘PC <\/strong>, Mobile<\/strong>‘, meaning the design will be shown in all devices.<\/p>\n\n\n\n

Our page is mobile responsive. It will resize automatically to fit into any device.<\/p>\n\n\n\n

So in most cases, one Design is good enough for all devices.<\/p>\n\n\n\n

What if I have multiple designs, some set to ‘PC’, some set to ‘Mobile’, some set to ‘PC, Mobile’?<\/em><\/h3>\n\n\n\n

They will all be rotated depending on the device. <\/p>\n\n\n\n

A visitor using PC or tablet will randomly see a design that is set to either ‘PC<\/strong>‘ or ‘PC, Mobile<\/strong>‘. <\/p>\n\n\n\n

A visitor using mobile phone will randomly see a design that is set to ‘Mobile<\/strong>‘ or ‘PC, Mobile<\/strong>‘.<\/p>\n\n\n\n

What if I accidentally set the ‘Device’ setting to ‘PC’ only? Does it mean visitors using mobile phone can’t see anything?<\/em><\/h3>\n\n\n\n

The basic rule is this:<\/p>\n\n\n\n

In the absence of an Active design that matches the device, the system will show any Active design.<\/strong><\/em><\/p>\n\n\n\n

So, if you accidentally set the ‘Device<\/strong>‘ setting to ‘PC<\/strong>‘, and it is the only Active Design in the Page, visitors using mobile phone will see that PC only Active Design.<\/p>\n","protected":false},"excerpt":{"rendered":"

We have just completed 3 updates for LeadsLeap Page Builder. 1) Social Media Preview Image Recently, more and more members ask us to add a Preview Image to their Page. What does a Preview Image do? If you have a Preview Image, when sharing your Page in Social Media sites, the Preview Image will be […]<\/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\/1551"}],"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=1551"}],"version-history":[{"count":28,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1551\/revisions"}],"predecessor-version":[{"id":1711,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1551\/revisions\/1711"}],"wp:attachment":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/media?parent=1551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/categories?post=1551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/tags?post=1551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}