--- title: "Product update: criar seus componentes ficou mais fácil!" slug: "componente" locale: "pt-br" description: "Neste post, você vai saber tudo sobre nossa última atualização de produto que irá facilitar a jornada de personalização para os nossos usuários." published_at: "2024-08-20" updated_at: "2025-01-28" image: "https://storage.googleapis.com/croct-assets-b931d070/blog/Blog_covers_text_version_1_c49db0d522/Blog_covers_text_version_1_c49db0d522.png" authors: ["Mariana Bonanomi","Isabella Beatriz Silva"] category: "Novidades" tags: ["Updates","Changelog"] canonical: "https://blog.croct.com/pt-br/post/componente" --- # Product update: criar seus componentes ficou mais fácil! Na Croct, estamos sempre aprimorando nossa plataforma para tornar a personalização de sites intuitiva e os processos de otimização mais ágeis. Sabemos que a tarefa de gerenciar seus componentes pode ser desafiadora quando se trata de um headless CMS, e é por isso que estamos ansiosos para compartilhar esta novidade! Neste post, você vai saber tudo sobre nossa última atualização de produto que irá facilitar a vida dos nossos usuários. ## O que mudou Na versão anterior do nosso produto, nossos usuários precisavam editar código em JSON para definir a estrutura de um componente. ![Estrutura do componente no editor de esquema JSON exibida no painel descontinuado.](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_1_fdef3ca036/component_update_1_fdef3ca036.png?updated_at=2024-08-12T11:17:24.431Z "Editor de schema em JSON") No mundo da tecnologia, é comum que as startups lancem versões mais simples de uma plataforma para aprimorarem o produto aos poucos, conforme coletam feedbacks dos usuários. Mesmo assim, essa não foi uma decisão fácil para nós. No entanto, nos surpreendemos de maneira positiva com o quão bem os clientes se adaptaram a esse formato! Saber que o nosso produto trouxe valor mesmo nessa etapa nos motivou a continuar trabalhando para tornar o gerenciamento de conteúdo ainda mais simples e intuitivo. ### Como funciona Sabemos que o nosso editor em JSON era desafiador mesmo para profissionais com conhecimento técnico. Mas agora é possível criar componentes com apenas alguns cliques. Desenvolvemos uma interface user-friendly para facilitar a criação e gerenciamento dos componentes que definem as estruturas dos conteúdos. Veja o que ficou mais fácil e eficiente: #### Reordenação de atributos Para alterar a ordem entre os atributos adicionados ao componente é necessário apenas clicar e arrastar. #### Busca de atributos Em componentes grandes, pode ser desafiador encontrar o atributo desejado. Com a interface nova, você consegue pesquisar por nomes, tipos e labels. Por exemplo, pesquisando por "text", todos atributos do tipo "text" são visualizados. ![Schema de busca de atributos da Croct com atributos correspondentes em título, subtítulo e CTA.](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_2_e3c72c4dab/component_update_2_e3c72c4dab.png?updated_at=2024-08-12T11:17:18.897Z "Schema de busca de atributos da Croct") #### Edição de referências Já passou pela situação de precisar modificar um componente referenciado? Agora você consegue clicar no atributo que deseja alterar e ser automaticamente direcionado para onde a modificação precisa ser feita. ![Menu de edição de atributo de CTA](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_3_ba0df5d123/component_update_3_ba0df5d123.png?updated_at=2024-08-12T11:17:16.736Z "Menu de edição de atributo de CTA") #### Visualização de uso de componentes Ao modificar um componente, você pode verificar primeiro todos os locais onde ele é utilizado para evitar impactos negativos. Você pode ver todos os slots ou referências que usam esse componente com poucos cliques. ![Exemplo de visualização de uso de componente, incluindo definição, nome, ID e descrição dos componentes](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_4_0fd47e2cb0/component_update_4_0fd47e2cb0.png?updated_at=2024-08-12T11:17:22.134Z "Exemplo de visualização de uso de componente") #### Identificação da complexidade do componente Agora é possível saber quando você está próximo de atingir os limites de complexidade do componente — dessa maneira, você evita refatorações futuras. ![Indicador de complexidade do componente exibindo o número de atributos restantes dentro de um componente.](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_5_22dd988223/component_update_5_22dd988223.png?updated_at=2024-08-12T11:17:22.734Z "Indicador de complexidade do componente") #### Importação de componentes Se você utiliza estruturas muito parecidas entre si, pode simplesmente exportar o schema e reutilizá-lo na criação de novos componentes, reaproveitando a mesma estrutura. ![Schema de empty state da Croct com opções para adicionar atributos de imagem, texto e elemento booleano](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_6_d5b0830975/component_update_6_d5b0830975.png?updated_at=2024-08-12T11:17:18.710Z "Com esta atualização de produto, você pode adicionar novos atributos ou importar um schema existente") ![Exemplo de visualização de uso de componente, incluindo definição, nome, ID e descrição dos componentes](https://storage.googleapis.com/croct-assets-b931d070/blog/component_update_7_40939f5eea/component_update_7_40939f5eea.png?updated_at=2024-08-12T11:17:18.904Z "Opções de importação e exportação dentro do menu de edição de componente") ## Teste hoje mesmo A nova interface de gerenciamento de componentes já está disponível para todos os usuários. Para qualquer dúvida ou sugestão, [entre em contato conosco](https://croct.com/contact/support). Se você ainda não experimentou a Croct, [crie sua conta gratuita](https://app.croct.com/signup) hoje mesmo e descubra por que somos a plataforma ideal para personalização de sites.