{"id":4422,"date":"2017-01-05T18:30:19","date_gmt":"2017-01-05T18:30:19","guid":{"rendered":"https:\/\/help.fromdoppler.com\/?p=4422"},"modified":"2023-05-11T18:21:42","modified_gmt":"2023-05-11T18:21:42","slug":"como-agregar-imagenes-en-tus-plantillas","status":"publish","type":"post","link":"https:\/\/help.fromdoppler.com\/en\/adding-images-to-your-templates\/","title":{"rendered":"Adding Images to your Templates"},"content":{"rendered":"<p>Do you want to insert images into the layout of your HTML so that they look even more attractive? Discover in this article how to do it and you will see how simple it is!<\/p>\n<p><a href=\"https:\/\/help.fromdoppler.com\/en\/como-editar-una-plantilla\/\" target=\"_blank\" rel=\"noopener\">Doppler\u2019s Editor<\/a> allows you to <strong>upload images and also edit them<\/strong> in order to obtain extraordinary results. Here we will explain in detail how to get the most out of it, so that your images look awesome.<\/p>\n<h2>How to insert and edit images in the Editor<\/h2>\n<p><span style=\"font-weight: 400;\">To edit your template and insert your images, you must first have logged into your Doppler account. If you do not have one, you can <a href=\"https:\/\/app.fromdoppler.com\/signup\" target=\"_blank\" rel=\"noopener\">create it for free here<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you have completed the <\/span><a href=\"https:\/\/help.fromdoppler.com\/en\/tus-primeros-pasos-en-doppler\/\"><span style=\"font-weight: 400;\">previous steps<\/span><\/a><span style=\"font-weight: 400;\">, you will come to the creation of the Campaign Content, where you must select a Template. <\/span><b>You will then access the Editor<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p>Here you can see, on the left of your screen, all the Elements that you can add to your design so that it looks exactly like you had thought up.<\/p>\n<p><img class=\"alignnone size-full wp-image-9814\" src=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png\" alt=\"\" width=\"396\" height=\"623\" srcset=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png 396w, https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1-191x300.png 191w\" sizes=\"(max-width: 396px) 100vw, 396px\" \/><\/p>\n<p>In order to add an image (or any other Element) into your design, you just have to <strong>drop and drag<\/strong> it wherever you want it to be displayed.<\/p>\n<p>Once you have done it, you should click on\u00a0<strong>Add Your Image.<\/strong><\/p>\n<p><img class=\"alignnone size-full wp-image-9815\" src=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_2-1.png\" alt=\"\" width=\"663\" height=\"199\" srcset=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_2-1.png 663w, https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_2-1-300x90.png 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/p>\n<p><strong>On the left of your screen<\/strong> you will now see all the possibilities that you have at your fingertips to edit the Element. The first thing you should do is to add the image so that you can see it on your piece and continue editing.<\/p>\n<p>To do so, you must click <strong>Add your Image or Edit<\/strong>.<\/p>\n<p><img class=\"alignnone size-full wp-image-9816\" src=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_3-1.png\" alt=\"\" width=\"454\" height=\"549\" srcset=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_3-1.png 454w, https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_3-1-248x300.png 248w\" sizes=\"(max-width: 454px) 100vw, 454px\" \/><\/p>\n<p>Then you can, for example, change the background, remove or keep the margins given by default, modify the alignment (left, center or right), add a hyperlink (if you want your image to send the user to your site) and add an alternative text .<\/p>\n<p>It is very important <strong>that you always define an alternative text<\/strong> so that, in case the images can not be visualized correctly due to restrictions of the Email Clients, your Subscribers can, anyway, get to know what was there and do not run out of information.<\/p>\n<p>Once you finish customizing the Element, you must click on <strong>Finish Edition<\/strong>.<\/p>\n<h2>Image and Text Element: How to modify proportions<\/h2>\n<p>So far the explanation <strong>applies to any type of image<\/strong>\u00a0and to any\u00a0Element you choose.<\/p>\n<p>On the other hand, in the case of the <strong>Image and Text<\/strong> Element, you can also change the proportions to reduce the image if you want.<\/p>\n<p>By default you will see that it is divided into equal proportions, but <strong>you can shrink the image until you achieve the desired measurement<\/strong>. It will proportionally adapt to the width you determine.<\/p>\n<p><a href=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2016\/12\/Proporciones_im_y_texto.png\"><img class=\"alignnone size-large wp-image-4429\" src=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2016\/12\/Proporciones_im_y_texto-1024x373.png\" alt=\"Proporciones Imagen y Texto\" width=\"640\" height=\"233\" \/><\/a><\/p>\n<p><a href=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2016\/12\/Imagen_achicada.png\"><img class=\"alignnone size-large wp-image-4430\" src=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2016\/12\/Imagen_achicada-1024x378.png\" alt=\"Image 35%\" width=\"640\" height=\"236\" \/><\/a><\/p>\n<h2>Height and width of images<\/h2>\n<p>Finally, we would like you to know how the <strong>measurements that your images should have.<\/strong><\/p>\n<p>When you add an image or use one of those already inserted as part of the Template, the placeholders <strong>usually have a width and a height reference<\/strong>.<\/p>\n<p>The\u00a0<strong>width can\u2019t exceed the given reference <\/strong>and the\u00a0height is just a suggestion.<\/p>\n<p><img class=\"alignnone size-full wp-image-9817\" src=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_4-1.png\" alt=\"\" width=\"492\" height=\"305\" srcset=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_4-1.png 492w, https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_4-1-300x186.png 300w\" sizes=\"(max-width: 492px) 100vw, 492px\" \/><\/p>\n<p>In this case, your image should have a <strong>width that does not exceed 600 px<\/strong> and a height of 290 px is suggested. However, <strong>the height could be larger<\/strong>.<\/p>\n<p>If, for example, you have chosen the <strong>Logo Element<\/strong>\u00a0but you feel it is too small, you can change it for the <strong>Image Element<\/strong>, which fits larger images.<\/p>\n<h2>Put into practice what you have learned<\/h2>\n<p>You see all the possibilities that the powerful Doppler\u2019s Editor offers you. Now that you know exactly how to insert images and customize them according to your preferences, you will not want to miss the opportunity to create the <strong>most effective <a href=\"https:\/\/www.fromdoppler.com\/en\/\" target=\"_blank\" rel=\"noopener\">Email Marketing Campaigns<\/a><\/strong>.<\/p>\n<p><strong>Start to apply all these tips as soon as possible and reach your Subscribers with irresistible pieces!<\/strong><\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Do you want to insert images into the layout of your HTML so that they look even more attractive? Discover in this article how to do it and you will see how simple it is!<\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[580,414,573],"tags":[528,113,318,527,526],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Images to your Templates - Doppler Help Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Images to your Templates - Doppler Help Center\" \/>\n<meta property=\"og:description\" content=\"Do you want to insert images into the layout of your HTML so that they look even more attractive? Discover in this article how to do it and you will see how simple it is!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/help.fromdoppler.com\/en\/adding-images-to-your-templates\/\" \/>\n<meta property=\"og:site_name\" content=\"Doppler Help Center\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-05T18:30:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-11T18:21:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juliana Monacchi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/help.fromdoppler.com\/es\/#website\",\"url\":\"https:\/\/help.fromdoppler.com\/es\/\",\"name\":\"Doppler Help Center\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/help.fromdoppler.com\/es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/help.fromdoppler.com\/es\/?p=4422#primaryimage\",\"url\":\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png\",\"contentUrl\":\"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png\",\"width\":396,\"height\":623},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/help.fromdoppler.com\/es\/?p=4422#webpage\",\"url\":\"https:\/\/help.fromdoppler.com\/es\/?p=4422\",\"name\":\"[:es]C\u00f3mo agregar im\u00e1genes en tus Plantillas[:en]Adding Images to your Templates[:] - Doppler Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/help.fromdoppler.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/help.fromdoppler.com\/es\/?p=4422#primaryimage\"},\"datePublished\":\"2017-01-05T18:30:19+00:00\",\"dateModified\":\"2023-05-11T18:21:42+00:00\",\"author\":{\"@id\":\"https:\/\/help.fromdoppler.com\/es\/#\/schema\/person\/19aa93e91e199e0be36cc17fe4f5c6d1\"},\"breadcrumb\":{\"@id\":\"https:\/\/help.fromdoppler.com\/es\/?p=4422#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/help.fromdoppler.com\/es\/?p=4422\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/help.fromdoppler.com\/es\/?p=4422#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/help.fromdoppler.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo agregar im\u00e1genes en tus Plantillas\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/help.fromdoppler.com\/es\/#\/schema\/person\/19aa93e91e199e0be36cc17fe4f5c6d1\",\"name\":\"Juliana Monacchi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/help.fromdoppler.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a78603f264267ef7584697bee5fec07d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a78603f264267ef7584697bee5fec07d?s=96&d=mm&r=g\",\"caption\":\"Juliana Monacchi\"},\"url\":\"https:\/\/help.fromdoppler.com\/en\/author\/jmonacchi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Images to your Templates - Doppler Help Center","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Adding Images to your Templates - Doppler Help Center","og_description":"Do you want to insert images into the layout of your HTML so that they look even more attractive? Discover in this article how to do it and you will see how simple it is!","og_url":"https:\/\/help.fromdoppler.com\/en\/adding-images-to-your-templates\/","og_site_name":"Doppler Help Center","article_published_time":"2017-01-05T18:30:19+00:00","article_modified_time":"2023-05-11T18:21:42+00:00","og_image":[{"url":"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png"}],"twitter_card":"summary","twitter_misc":{"Written by":"Juliana Monacchi","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/help.fromdoppler.com\/es\/#website","url":"https:\/\/help.fromdoppler.com\/es\/","name":"Doppler Help Center","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/help.fromdoppler.com\/es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/help.fromdoppler.com\/es\/?p=4422#primaryimage","url":"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png","contentUrl":"https:\/\/help.fromdoppler.com\/wp-content\/uploads\/2017\/01\/Screenshot_1-1.png","width":396,"height":623},{"@type":"WebPage","@id":"https:\/\/help.fromdoppler.com\/es\/?p=4422#webpage","url":"https:\/\/help.fromdoppler.com\/es\/?p=4422","name":"[:es]C\u00f3mo agregar im\u00e1genes en tus Plantillas[:en]Adding Images to your Templates[:] - Doppler Help Center","isPartOf":{"@id":"https:\/\/help.fromdoppler.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/help.fromdoppler.com\/es\/?p=4422#primaryimage"},"datePublished":"2017-01-05T18:30:19+00:00","dateModified":"2023-05-11T18:21:42+00:00","author":{"@id":"https:\/\/help.fromdoppler.com\/es\/#\/schema\/person\/19aa93e91e199e0be36cc17fe4f5c6d1"},"breadcrumb":{"@id":"https:\/\/help.fromdoppler.com\/es\/?p=4422#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/help.fromdoppler.com\/es\/?p=4422"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/help.fromdoppler.com\/es\/?p=4422#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/help.fromdoppler.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar im\u00e1genes en tus Plantillas"}]},{"@type":"Person","@id":"https:\/\/help.fromdoppler.com\/es\/#\/schema\/person\/19aa93e91e199e0be36cc17fe4f5c6d1","name":"Juliana Monacchi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/help.fromdoppler.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a78603f264267ef7584697bee5fec07d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a78603f264267ef7584697bee5fec07d?s=96&d=mm&r=g","caption":"Juliana Monacchi"},"url":"https:\/\/help.fromdoppler.com\/en\/author\/jmonacchi\/"}]}},"_links":{"self":[{"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/posts\/4422"}],"collection":[{"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/comments?post=4422"}],"version-history":[{"count":16,"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/posts\/4422\/revisions"}],"predecessor-version":[{"id":9819,"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/posts\/4422\/revisions\/9819"}],"wp:attachment":[{"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/media?parent=4422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/categories?post=4422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.fromdoppler.com\/en\/wp-json\/wp\/v2\/tags?post=4422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}