[{"data":1,"prerenderedAt":205},["ShallowReactive",2],{"footer-guides.pt-br":3,"posts.pt-br.como-usar-grupos-nas-transformacoes-de-imagens-de-produto":13,"posts.pt-br.como-usar-grupos-nas-transformacoes-de-imagens-de-produto.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},"Anúncios de catálogo da Meta: guia prático para lojas virtuais","\u002Fpt-br\u002Fblog\u002Fanuncios-de-catalogo-da-meta-guia-pratico",{"title":8,"path":9},"O que é um feed de produtos?","\u002Fpt-br\u002Fblog\u002Fo-que-e-um-feed-de-produtos",{"title":11,"path":12},"Como otimizar os títulos dos seus produtos no Google Shopping","\u002Fpt-br\u002Fblog\u002Fcomo-otimizar-titulos-de-produtos-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_pt_br\u002Fblog\u002Fpt-br\u002F2022-10-23-using-groups-in-product-image-transformations.md","Como usar grupos nas transformações de imagens de produto","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",{},"O recurso mais novo do editor chegou: grupos!",[21,25,26,27,32],{},"Agora você pode usar grupos nos seus ",[28,29,31],"a",{"href":30},"\u002Ffeatures\u002Fimproved-catalog-ads","templates de anúncios de produtos",". Isso dá a você mais controle sobre o seu design.",[21,34,35],{},"Para criar um novo grupo, clique no novo ícone acima do painel de camadas:",[21,37,38],{},[39,40],"img",{"alt":41,"src":42,"title":43},"Posição do botão de grupo no editor","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666553857-group-button.webp","Botão de novo grupo",[21,45,46],{},"Se você tiver elementos selecionados, eles vão automaticamente para o novo grupo. Se não, um grupo vazio é criado para você.",[48,49,51],"h2",{"id":50},"o-que-os-grupos-podem-fazer","O que os grupos podem fazer?",[21,53,54],{},"Diferente dos outros elementos do editor, os grupos não têm estilo nem posição. Eles servem apenas como um contêiner para os seus outros elementos.",[21,56,57],{},"A única coisa que você pode adicionar a um grupo são condições. Assim, fica fácil mudar todo o design do seu template do jeito que você quiser.",[21,59,60],{},"Por exemplo, você pode ter alguns elementos que só devem aparecer quando o produto está em promoção. Antes, era preciso adicionar a mesma condição a cada um desses elementos. Agora, basta agrupá-los e adicionar a condição ao grupo.",[21,62,63],{},[39,64],{"alt":65,"src":66,"title":65},"Grupo com a condição \"em promoção\"","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666554665-conditions-on-group.webp",[21,68,69],{},"Como você pode ver na imagem, todos os elementos herdam a condição do seu grupo. Quando uma camada tem um ponto vermelho, significa que o próprio elemento tem condições que não são atendidas pelo produto atual. Se o ponto for amarelo, o elemento está dentro de um grupo que não deve aparecer para o produto atual.",[48,71,73],{"id":72},"grupos-dentro-de-grupos","Grupos dentro de grupos",[21,75,76],{},"Os grupos não se limitam a um único nível. Você pode aninhar grupos quantas vezes quiser. Isso permite criar designs condicionais avançados.",[21,78,79],{},[39,80],{"alt":81,"src":82,"title":81},"Grupos aninhados","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666555241-nested-groups.webp",[48,84,86],{"id":85},"crie-designs-únicos","Crie designs únicos",[21,88,89],{},"Como os grupos não têm estilo nem posição, dá para criar designs bem diferentes dentro do mesmo template. Por exemplo, você pode ter produtos de marca própria que quer mostrar de um jeito diferente dos produtos de marcas de terceiros que você vende.",[21,91,92,93,97],{},"Neste exemplo, criei dois designs diferentes com base no nome da marca. Se o nome da marca contiver ",[94,95,96],"em",{},"Waves",", mostramos um grupo com um design completo. Caso contrário, mostramos o outro grupo, com um design totalmente diferente.",[21,99,100],{},[39,101],{"alt":102,"src":103,"title":102},"Design Wave","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666557792-wave-design.webp",[21,105,106],{},[39,107],{"alt":108,"src":109,"title":108},"Design simples","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002F1666557806-simple-design.webp",[48,111,113],{"id":112},"atalhos-de-teclado","Atalhos de teclado",[21,115,116,117,123,124,129],{},"Para facilitar o trabalho com os novos grupos, adicionamos atalhos de teclado. Se você selecionou alguns elementos que quer agrupar, pressione ",[94,118,119],{},[120,121,122],"strong",{},"cmd\u002Fctrl + g",". Da mesma forma, se você selecionou um grupo que não quer mais, pressione ",[94,125,126],{},[120,127,128],{},"cmd\u002Fctrl + u"," para desagrupar.",[48,131,133],{"id":132},"conclusão","Conclusão",[21,135,136,137,141,142,146],{},"Os grupos também combinam bem com os outros recursos do editor, como os ",[28,138,140],{"href":139},"\u002Fblog\u002Fgradients-in-the-template-editor","gradientes"," e os ",[28,143,145],{"href":144},"\u002Fblog\u002Ftransform-your-images-with-ease-introducing-filters-in-our-editor","filtros de imagem",".",[21,148,149,150,154],{},"Vamos continuar trazendo novos recursos para você criar imagens bonitas para os seus anúncios dinâmicos de produtos, como os ",[28,151,153],{"href":152},"\u002Fchannels\u002Fmeta","anúncios de catálogo da Meta",", vender mais e se destacar da concorrência falando direto com o seu público-alvo.",{"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","Veja como os grupos do editor de templates do Feedr permitem mostrar ou ocultar vários elementos com uma condição e criar designs diferentes.",false,"md","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002Fhero-fa340b6f-1400.webp","Ilustração de um painel de camadas com um grupo chamado Sale badge que contém um preço e um círculo","\u002Fblog\u002Fusing-groups-in-product-image-transformations\u002Fhero-fa340b6f-1200.png","Conheça o novo recurso que deixa a organização dos seus designs muito mais fácil.",{"source_hash":173},"3fd9b76e0a2b",true,"\u002Fpt-br\u002Fblog\u002Fcomo-usar-grupos-nas-transformacoes-de-imagens-de-produto",[177,178],"gradients-in-the-template-editor","transform-your-images-with-ease-introducing-filters-in-our-editor",{"title":15,"description":165},"blog\u002Fpt-br\u002F2022-10-23-using-groups-in-product-image-transformations",[182,183],"templates","product-updates",null,"NI_XP_XYuuugQ0jrZRHdgAglNQJK0xF-wj7HNiCY_e4","como-usar-grupos-nas-transformacoes-de-imagens-de-produto","\u002Fblog\u002Fusing-groups-in-product-image-transformations",[189,192],{"title":190,"path":191},"Gradientes no editor de templates","\u002Fpt-br\u002Fblog\u002Fgradientes-no-editor-de-templates",{"title":193,"path":194},"Transforme suas imagens com facilidade: conheça os filtros do nosso editor","\u002Fpt-br\u002Fblog\u002Ftransforme-suas-imagens-com-filtros-no-nosso-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},1794325392158]