[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"footer-guides.es":3,"posts.es.como-anadir-precios-y-logos-a-imagenes-de-anuncios-de-catalogo":13,"posts.es.como-anadir-precios-y-logos-a-imagenes-de-anuncios-de-catalogo.related":238,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002Fhero-9197c05b-1400.webp":239,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665928989-d22e227d-d796-40a0-acfc-daccda5f401b.webp":242,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665929019-1ee6eb4c-ff8e-4861-b31f-874aab9bc200.webp":244,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665929052-7a77a604-1c48-4a66-828e-baddfc126cac.webp":246,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665929079-7f82bba9-f0c3-4859-8c6c-5434a417bc54.webp":248,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665929098-10c76ee0-1c81-4e6e-8928-51db2836eb6d.webp":250,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665929109-41daee5d-0c39-4c6d-9526-71c5e0edc145.webp":252,"image-size:\u002Fblog\u002Fintroducing-image-transformations\u002F1665929120-4f705229-44da-4afe-8211-c2dc9feffae2.webp":253},[4,7,10],{"title":5,"path":6},"Anuncios de catálogo de Meta: guía práctica para tiendas online","\u002Fes\u002Fblog\u002Fanuncios-de-catalogo-de-meta-guia-practica",{"title":8,"path":9},"¿Qué es un feed de productos?","\u002Fes\u002Fblog\u002Fque-es-un-feed-de-productos",{"title":11,"path":12},"Cómo optimizar los títulos de tus productos en Google Shopping","\u002Fes\u002Fblog\u002Fcomo-optimizar-titulos-de-productos-google-shopping",{"id":14,"title":15,"author":16,"body":17,"date":218,"description":219,"draft":220,"extension":221,"hero":222,"heroAlt":223,"image":224,"intro":225,"meta":226,"navigation":228,"path":229,"related":230,"seo":231,"stem":232,"tags":233,"updated":230,"__hash__":235,"slug":236,"sourcePath":237},"blog_es\u002Fblog\u002Fes\u002F2022-08-26-introducing-image-transformations.md","Cómo añadir precios y logos a las imágenes de tus anuncios de catálogo","jacob-moelby",{"type":18,"value":19,"toc":206},"minimark",[20,30,33,38,48,55,59,62,65,71,75,78,84,88,94,100,104,107,126,138,144,148,151,157,161,164,184,187,193,197,200,203],[21,22,23,24,29],"p",{},"Para añadir precios y logos a las imágenes de tus anuncios de catálogo, diseñas un template y Feedr lo aplica a cada imagen de producto de tu feed. Sube tu logo, añade el precio como un texto que se rellena con los datos de cada producto y define condiciones para que la etiqueta de oferta solo aparezca en los productos rebajados. En este artículo te enseñamos el editor que lo hace posible. Si quieres ver lo que añadimos un mes después del lanzamiento, como nuevos tamaños de imagen y colores de fondo automáticos, lee la ",[25,26,28],"a",{"href":27},"\u002Fblog\u002Fimage-transformations-feature-update","actualización de las transformaciones de imagen",".",[21,31,32],{},"Nos enorgullece presentar nuestra nueva función: las transformaciones de imagen. Con ellas puedes transformar tus imágenes de producto de forma dinámica y con mucho control. Las superposiciones de imagen actuales tienen muchas limitaciones, así que queríamos mejorar la experiencia. Hemos trabajado mucho para crear un editor moderno que permite retocar las imágenes de formas más complejas, para que tus anuncios reciban la atención que merecen.",[34,35,37],"h2",{"id":36},"templates","Templates",[21,39,40,41,47],{},"En Feedr encontrarás un nuevo botón en la barra lateral: ",[42,43,44],"em",{},[45,46,37],"strong",{},". En esta página ves un resumen de tus templates actuales. Puedes crear templates nuevos o ver todos los templates de un producto concreto.",[21,49,50],{},[51,52],"img",{"alt":53,"src":54,"title":53},"Templates de las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665928989-d22e227d-d796-40a0-acfc-daccda5f401b.webp",[34,56,58],{"id":57},"editor","Editor",[21,60,61],{},"El nuevo editor te permite cambiar las imágenes de producto como quieras. Al hacer clic en un template, se abre a pantalla completa.",[21,63,64],{},"En el centro de la pantalla está el lienzo. Aquí ves y editas los elementos del template. Solo tienes que arrastrarlos o cambiarles el tamaño como quieras.",[21,66,67],{},[51,68],{"alt":69,"src":70,"title":69},"Editor de las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665929019-1ee6eb4c-ff8e-4861-b31f-874aab9bc200.webp",[34,72,74],{"id":73},"capas","Capas",[21,76,77],{},"En el lado izquierdo están las capas. Aquí puedes ver y cambiar el orden de los elementos del lienzo, además de cambiarles el nombre o eliminarlos.",[21,79,80],{},[51,81],{"alt":82,"src":83,"title":82},"Panel de capas de las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665929052-7a77a604-1c48-4a66-828e-baddfc126cac.webp",[34,85,87],{"id":86},"configuración","Configuración",[21,89,90,91,93],{},"También puedes seleccionar ",[42,92,87],{}," en la barra lateral para cambiar el tamaño de la imagen final o el nombre del template. Ahí también ves los atajos de teclado disponibles.",[21,95,96],{},[51,97],{"alt":98,"src":99,"title":98},"Configuración de las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665929079-7f82bba9-f0c3-4859-8c6c-5434a417bc54.webp",[34,101,103],{"id":102},"propiedades","Propiedades",[21,105,106],{},"En el lado derecho está el panel de propiedades, donde editas el aspecto del elemento que tienes seleccionado. Incluye opciones como",[108,109,110,114,117,120,123],"ul",{},[111,112,113],"li",{},"Posición",[111,115,116],{},"Color",[111,118,119],{},"Borde",[111,121,122],{},"Sombra",[111,124,125],{},"...y más",[21,127,128,129,133,134,137],{},"Cuando insertas un texto, tienes control total. Puedes combinar texto dinámico y estático con etiquetas especiales como ",[130,131,132],"code",{},"@PRICE@"," o ",[130,135,136],{},"@TITLE@",". También decides cómo se muestran los números: el redondeo, los decimales y el separador decimal.",[21,139,140],{},[51,141],{"alt":142,"src":143,"title":142},"Contenido dinámico en las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665929098-10c76ee0-1c81-4e6e-8928-51db2836eb6d.webp",[34,145,147],{"id":146},"condiciones","Condiciones",[21,149,150],{},"A cada elemento le puedes aplicar condiciones que deciden si aparece en la imagen final. Por ejemplo, puedes usarlas para mostrar elementos especiales cuando el producto está en oferta.",[21,152,153],{},[51,154],{"alt":155,"src":156,"title":155},"Condiciones de capa en las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665929109-41daee5d-0c39-4c6d-9526-71c5e0edc145.webp",[34,158,160],{"id":159},"barra-de-herramientas","Barra de herramientas",[21,162,163],{},"Desde la barra de herramientas insertas nuevos elementos en el editor. Por ahora puedes elegir entre:",[108,165,166,169,172,175,178,181],{},[111,167,168],{},"Rectángulos",[111,170,171],{},"Elipses (círculos)",[111,173,174],{},"Texto",[111,176,177],{},"Polígonos",[111,179,180],{},"Imágenes que subes tú",[111,182,183],{},"La imagen del producto",[21,185,186],{},"A la derecha puedes cerrar el editor, elegir un producto aleatorio, buscar un producto concreto y guardar el template.",[21,188,189],{},[51,190],{"alt":191,"src":192,"title":191},"Barra de herramientas de las transformaciones de imagen","\u002Fblog\u002Fintroducing-image-transformations\u002F1665929120-4f705229-44da-4afe-8211-c2dc9feffae2.webp",[34,194,196],{"id":195},"ahora-te-toca-a-ti","¡Ahora te toca a ti!",[21,198,199],{},"El editor todavía está en beta, así que es posible que algunas cosas no funcionen bien.",[21,201,202],{},"Eso también significa que seguramente habrá cambios antes de la versión final. Nos encantaría conocer tu opinión. ¿Echas en falta alguna función, hay algo que podría funcionar mejor o has encontrado algún error? ¡Cuéntanoslo! Puedes escribirnos por el chat o por correo electrónico.",[21,204,205],{},"Seguiremos trabajando en el editor para hacerlo mejor y más potente. En el futuro, las nuevas transformaciones de imagen sustituirán a las antiguas superposiciones.",{"title":207,"searchDepth":208,"depth":208,"links":209},"",2,[210,211,212,213,214,215,216,217],{"id":36,"depth":208,"text":37},{"id":57,"depth":208,"text":58},{"id":73,"depth":208,"text":74},{"id":86,"depth":208,"text":87},{"id":102,"depth":208,"text":103},{"id":146,"depth":208,"text":147},{"id":159,"depth":208,"text":160},{"id":195,"depth":208,"text":196},"2022-08-26T00:34:15+02:00","Añade precios, etiquetas de oferta y tu logo a cada imagen de tus anuncios de catálogo con un solo template, y elige qué productos muestran cada elemento.",false,"md","\u002Fblog\u002Fintroducing-image-transformations\u002Fhero-9197c05b-1400.webp","Ilustración de la imagen de unos auriculares para un anuncio de catálogo, con una etiqueta de precio NOW €89 y el logo de una marca","\u002Fblog\u002Fintroducing-image-transformations\u002Fhero-9197c05b-1200.png","Crea un solo template para añadir precios, etiquetas de oferta y tu logo a cada imagen de producto de tus anuncios de catálogo. Así funciona el editor de templates.",{"source_hash":227},"acb95e8060ea",true,"\u002Fes\u002Fblog\u002Fcomo-anadir-precios-y-logos-a-imagenes-de-anuncios-de-catalogo",null,{"title":15,"description":219},"blog\u002Fes\u002F2022-08-26-introducing-image-transformations",[234,36],"catalog-ads","w6BL0xF0DVs1mMZBBO9jrJc6H7Q2M55KSmLe1FmHGBg","como-anadir-precios-y-logos-a-imagenes-de-anuncios-de-catalogo","\u002Fblog\u002Fintroducing-image-transformations",[],{"width":240,"height":241},1400,788,{"width":240,"height":243},757,{"width":240,"height":245},708,{"width":240,"height":247},758,{"width":240,"height":249},760,{"width":240,"height":251},756,{"width":240,"height":249},{"width":240,"height":254},100,1794325391590]