{"id":2488,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-image-widget\/"},"modified":"2022-08-22T04:49:38","modified_gmt":"2022-08-22T04:49:38","slug":"landing-page-image-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/image\/","title":{"rendered":"Landing Page Image Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Image<\/strong> widget helps you add images to your landing page.<\/p>\n<p>Using this widget, you can:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>Hyperlink the image to an external webpage.<\/li>\n<li>As an advanced feature, you can also add different images for the web and mobile for the same campaign. By doing so, you can design different viewing experiences for people who open the campaigns on mobile devices vis-\u00e0-vis the ones who open the campaign on the web.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use an Image widget in a landing page?<\/h2>\n<h2>Step 1<\/h2>\n<h2>Navigate to the landing page builder<\/h2>\n<p>Use the <strong>Main Menu<\/strong> on the left to create a <strong>landing page<\/strong> and subsequently <a href=\"\/hc\/landing-pages\/builder\/create\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to the landing page builder<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>Step 2<\/h2>\n<h2>Add an <strong>Image<\/strong> widget to your landing page<\/h2>\n<p>The blank area on the left is the <strong>work area<\/strong> where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as <a href=\"\/hc\/landing-pages\/builder\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">widgets<\/a>.<\/p>\n<p>In order to add an image to your landing page, drag and drop the <strong>Image widget<\/strong> to the <strong>work area&nbsp;<\/strong><em>(as highlighted in the screenshot below)<\/em>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1772 size-full\" title=\"Landing page image widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-image-widget.png\" alt=\"Landing page builder. The image widget is highlighted\" width=\"521\" height=\"743\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h2>Step 3<\/h2>\n<h2>Upload the required image using the Image <strong>Settings<\/strong><\/h2>\n<p>As you drop the widget into the work area, the widget <strong>S<\/strong><strong>ettings&nbsp;<\/strong>are displayed on the right<strong style=\"box-sizing: border-box; font-weight: bold; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">&nbsp;<\/strong><em style=\"box-sizing: border-box; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; font-style: italic; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">(as highlighted in the screenshot below)<\/em><span style=\"color: rgba(0, 0, 0, 0.8); font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;\">.<\/span><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1774\" title=\"Landing page image settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-image-settings.png\" alt=\"Landing page image widget. The settings tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, you have the option of choosing different images for web and mobile views of this campaign.<\/p>\n<p><strong>In the above screenshot:<\/strong><\/p>\n<p><strong>3.1 Image Gallery<\/strong> &#8211; Use this area to specify the image that you want to display when the campaign is viewed on a web device.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1775 size-full\" title=\"Landing page image gallery\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-image-gallery.png\" alt=\"Landing page image widget, select image\" width=\"555\" height=\"282\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<p><strong>3.2 Select Specific Image for Mobile Display (optional)<\/strong> &#8211; Use this area to specify the image that you want to display when the campaign is viewed on a mobile device.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1776 size-full\" title=\"Landing page image select\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/select-image-gallery.png\" alt=\"Landing page image widget, select mobile specific image function\" width=\"557\" height=\"252\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>For both these areas:<\/strong><\/p>\n<ul style=\"list-style-type: circle;\">\n<li>Use the <strong>Select Image&nbsp;<\/strong>button to upload the required image; and<\/li>\n<li>Use the <strong>Set Image Redirect link<\/strong> field to specify the external URL to which you want to redirect the clicks on this image.<\/li>\n<\/ul>\n<blockquote class=\"elevio-box-info\"><p><strong>Note<\/strong>: This functionality of choosing different images is optional. In case you wish to display the same image in all viewing devices, only use the settings under the Image Gallery heading.<\/p><\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>Step 4<\/h2>\n<h2>Style your image as per your design preferences<\/h2>\n<p>You can edit the appearance of your image using the options available under the <strong>Style&nbsp;<\/strong>tab <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1777\" title=\"Landing page image style tab\" src=\"\/hc\/wp-content\/uploads\/2022\/08\/image-gallery-styling.png\" alt=\"Landing page image widget. The style tab is highlighted\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>Herein, the different design options available are:<\/strong><\/p>\n<h4>4.1 Image Font settings and Background color<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Border Size and Color&nbsp;<\/strong>to change the color of the image border (use the subsequent sizing bar to adjust the thickness of the border)<\/li>\n<li><strong>Border Style<\/strong> to change the type of image border \u2013 solid, dotted, etc.,<\/li>\n<li><strong>Rounded Corners<\/strong> &#8211; sizing bar to add rounded corners to the image.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Image Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Width<\/strong> to adjust the width of the button<\/li>\n<li><strong>Widget Position<\/strong> to change the alignment of the image in the design<\/li>\n<li><strong>Image Opacity<\/strong> to adjust the degree of opacity of the image in the design.<\/li>\n<li><strong>Top Bottom Gap<\/strong> to let you add a gap above the image<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.3 Edge to Edge checkbox<\/h4>\n<p>Select the <strong>Edge-to-Edge<\/strong> checkbox to fit the image to the width of the work area.<\/p>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added an image to your landing page!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a combination of an image and a text to a landing page using the <a href=\"\/hc\/landing-pages\/builder\/image-text\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image + Text Widget<\/a>!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The image widget helps you add images to your landing page. You can also add different images for the web views and mobile views for the same campaign.<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[214],"ht-kb-tag":[],"class_list":["post-2488","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-landing-page-builder"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/comments?post=2488"}],"version-history":[{"count":10,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2488\/revisions"}],"predecessor-version":[{"id":11334,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2488\/revisions\/11334"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/media?parent=2488"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-category?post=2488"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-tag?post=2488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}