[{"data":1,"prerenderedAt":205},["ShallowReactive",2],{"footer-guides.es":3,"posts.es.como-usar-grupos-en-transformaciones-de-imagenes-de-producto":13,"posts.es.como-usar-grupos-en-transformaciones-de-imagenes-de-producto.related":188,"image-size:\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002Fhero-fa340b6f-1400.webp":195,"image-size:\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666553857-group-button.webp":198,"image-size:\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666554665-conditions-on-group.webp":200,"image-size:\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666555241-nested-groups.webp":202,"image-size:\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666557792-wave-design.webp":203,"image-size:\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666557806-simple-design.webp":204},[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":164,"description":165,"draft":166,"extension":167,"hero":168,"heroAlt":169,"image":170,"intro":171,"meta":172,"navigation":174,"path":175,"related":176,"seo":179,"stem":180,"tags":181,"updated":184,"__hash__":185,"slug":186,"sourcePath":187},"blog_es\u002Fblog\u002Fes\u002F2022-10-23-using-groups-in-product-image-transformations.md","Cómo usar grupos en las transformaciones de imágenes de producto","jacob-moelby",{"type":18,"value":19,"toc":155},"minimark",[20,24,33,36,44,47,52,55,58,61,67,70,74,77,83,87,90,98,104,110,114,130,134,147],[21,22,23],"p",{},"¡Ya está aquí la última función del editor: los grupos!",[21,25,26,27,32],{},"Ahora puedes usar grupos en tus ",[28,29,31],"a",{"href":30},"\u002Ffeatures\u002Fimproved-catalog-ads","templates de anuncios de productos",". Así tienes más control sobre tu diseño.",[21,34,35],{},"Para crear un grupo nuevo, haz clic en el nuevo icono que hay encima del panel de capas:",[21,37,38],{},[39,40],"img",{"alt":41,"src":42,"title":43},"Posición del botón de grupo en el editor","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666553857-group-button.webp","Botón de nuevo grupo",[21,45,46],{},"Si tenías elementos seleccionados, pasan automáticamente al nuevo grupo. Si no, se crea un grupo vacío.",[48,49,51],"h2",{"id":50},"qué-pueden-hacer-los-grupos","¿Qué pueden hacer los grupos?",[21,53,54],{},"A diferencia del resto de elementos del editor, los grupos no tienen estilo ni posición. Solo sirven de contenedor para tus otros elementos.",[21,56,57],{},"Lo único que puedes añadir a un grupo son condiciones. Así puedes cambiar fácilmente todo el diseño de tu template según lo que necesites.",[21,59,60],{},"Por ejemplo, puede que tengas algunos elementos que solo deben mostrarse cuando el producto está en oferta. Antes tenías que añadir la misma condición a cada uno de esos elementos. Ahora solo tienes que agruparlos y añadir la condición al grupo.",[21,62,63],{},[39,64],{"alt":65,"src":66,"title":65},"Grupo con la condición \"en oferta\"","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666554665-conditions-on-group.webp",[21,68,69],{},"Como ves en la imagen, todos los elementos heredan la condición de su grupo. Cuando una capa tiene un punto rojo, significa que el propio elemento tiene condiciones que no se cumplen para el producto actual. Si el punto es amarillo, el elemento está dentro de un grupo que no debe mostrarse para el producto actual.",[48,71,73],{"id":72},"grupos-dentro-de-grupos","Grupos dentro de grupos",[21,75,76],{},"Los grupos no se limitan a un solo nivel. Puedes anidar grupos tantas veces como quieras. Así puedes crear diseños condicionales avanzados.",[21,78,79],{},[39,80],{"alt":81,"src":82,"title":81},"Grupos anidados","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666555241-nested-groups.webp",[48,84,86],{"id":85},"crea-diseños-únicos","Crea diseños únicos",[21,88,89],{},"Como los grupos no tienen estilo ni posición, puedes crear diseños muy distintos dentro del mismo template. Por ejemplo, puede que tengas productos de marca propia que quieras mostrar de forma diferente a los productos que vendes de marcas de terceros.",[21,91,92,93,97],{},"En este ejemplo, he creado dos diseños distintos según el nombre de la marca. Si el nombre de la marca contiene ",[94,95,96],"em",{},"Waves",", mostramos un grupo que contiene un diseño completo. Si no, mostramos el otro grupo, con un diseño totalmente diferente.",[21,99,100],{},[39,101],{"alt":102,"src":103,"title":102},"Diseño Wave","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666557792-wave-design.webp",[21,105,106],{},[39,107],{"alt":108,"src":109,"title":108},"Diseño sencillo","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666557806-simple-design.webp",[48,111,113],{"id":112},"atajos-de-teclado","Atajos de teclado",[21,115,116,117,123,124,129],{},"Para que trabajar con los nuevos grupos sea fácil, hemos añadido atajos de teclado. Si has seleccionado varios elementos que quieres agrupar, pulsa ",[94,118,119],{},[120,121,122],"strong",{},"cmd\u002Fctrl + g",". Del mismo modo, si has seleccionado un grupo que ya no quieres, pulsa ",[94,125,126],{},[120,127,128],{},"cmd\u002Fctrl + u"," para desagruparlo.",[48,131,133],{"id":132},"conclusión","Conclusión",[21,135,136,137,141,142,146],{},"Los grupos también funcionan bien con las demás funciones del editor, como los ",[28,138,140],{"href":139},"\u002Fblog\u002Fgradients-in-the-template-editor","degradados"," y los ",[28,143,145],{"href":144},"\u002Fblog\u002Ftransform-your-images-with-ease-introducing-filters-in-our-editor","filtros de imagen",".",[21,148,149,150,154],{},"Seguiremos lanzando nuevas funciones que te ayuden a crear imágenes atractivas para tus anuncios dinámicos de productos, como los ",[28,151,153],{"href":152},"\u002Fchannels\u002Fmeta","anuncios de catálogo de Meta",", para que vendas más y te diferencies de tu competencia conectando con tu público objetivo.",{"title":156,"searchDepth":157,"depth":157,"links":158},"",2,[159,160,161,162,163],{"id":50,"depth":157,"text":51},{"id":72,"depth":157,"text":73},{"id":85,"depth":157,"text":86},{"id":112,"depth":157,"text":113},{"id":132,"depth":157,"text":133},"2022-10-23T22:50:12+02:00","Descubre cómo los grupos del editor de templates de Feedr te permiten mostrar u ocultar varios elementos con una condición y crear diseños distintos.",false,"md","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002Fhero-fa340b6f-1400.webp","Ilustración de un panel de capas con un grupo llamado Sale badge que contiene un precio y un círculo","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002Fhero-fa340b6f-1200.png","Te presentamos la nueva función que te permite organizar mejor tus diseños.",{"source_hash":173},"3fd9b76e0a2b",true,"\u002Fes\u002Fblog\u002Fcomo-usar-grupos-en-transformaciones-de-imagenes-de-producto",[177,178],"gradients-in-the-template-editor","transform-your-images-with-ease-introducing-filters-in-our-editor",{"title":15,"description":165},"blog\u002Fes\u002F2022-10-23-using-groups-in-product-image-transformations",[182,183],"templates","product-updates",null,"sosxPYxuhWZ-t7LqPPFkKjnxpDHQkH2PqREk_8OpgX8","como-usar-grupos-en-transformaciones-de-imagenes-de-producto","\u002Fblog\u002Fusing-groups-in-product-image-transformations",[189,192],{"title":190,"path":191},"Degradados en el editor de templates","\u002Fes\u002Fblog\u002Fdegradados-en-el-editor-de-templates",{"title":193,"path":194},"Transforma tus imágenes fácilmente: llegan los filtros a nuestro editor","\u002Fes\u002Fblog\u002Ftransforma-tus-imagenes-con-filtros-en-nuestro-editor",{"width":196,"height":197},1400,788,{"width":196,"height":199},711,{"width":196,"height":201},705,{"width":196,"height":199},{"width":196,"height":201},{"width":196,"height":201},1794325391598]