> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Elementos > Selecione e edite as peças individuais dentro de um frame no Canvas. Um **Elemento** é uma peça individual dentro de um frame, como um título, um botão, uma imagem, um campo de formulário ou qualquer outro componente que o frame renderiza. Elementos são o que você seleciona quando quer mudar uma parte de um frame sem regenerar tudo. A ferramenta Edit ativa em um site de aluguel de supercarros com um elemento div selecionado, e o painel do Visual Editor mostrando os controles Text, Layout, Color e Border, além dos botões Discard e Save edits ## Selecionando um elemento Use a [ferramenta Edit](/pt/design/toolbar#edit) na barra de ferramentas. Com o Edit ativo, clique dentro de um frame ativo para selecionar o elemento sob o cursor. O elemento selecionado recebe um contorno de destaque e um pequeno prompt em linha onde você pode pedir ao Agent para alterá-lo. O Edit fica desabilitado até que exista pelo menos um frame no Canvas, e é exclusivo para desktop. ## Agindo sobre um elemento selecionado ### Peça ao Agent para alterá-lo Peça ao Agent para atualizar o texto, a cor, o layout, o espaçamento ou o comportamento do elemento com o prompt em linha. Detalhe do prompt em linha para um elemento selecionado no Canvas: um chip 'img' seguido pelo texto de espaço reservado 'Ask about selected element…' e um botão de enviar. ### Trocar uma imagem diretamente Selecione um elemento de imagem e a seção **Image** do Visual Editor mostra o caminho de origem com um botão **Upload Image**, para que você possa trocar o arquivo sem escrever um prompt. Uma página de detalhes do McLaren 765LT em um frame de site com o elemento de imagem do McLaren selecionado (destacado em azul com um chip 'img'). O painel do Visual Editor está aberto, mostrando o caminho de origem da imagem, um botão Upload Image e as seções Layout, Color e Border. ## Visual Editor Selecionar um elemento abre o **Visual Editor** — um painel do lado direito emparelhado com o prompt em linha. O painel agrupa cada controle em seções claras para que você encontre o que precisa mais rápido: **Text**, **Layout**, **Color** e **Border**. (A seção **Image** também aparece quando você seleciona um elemento de imagem.) Canvas com um elemento div selecionado (a barra lateral de reserva do McLaren). O painel do Visual Editor à direita mostra as seções Text (tamanho da fonte 16, peso da fonte Regular, alinhamento), Layout (espaço externo com um valor inferior de 24px, espaço interno 20/20 com alternadores de vínculo) e Color (texto #e4e4e7, fundo #0f0f12). ### Layout A seção **Layout** é onde você ajusta como os elementos filhos se posicionam dentro de um contêiner sem passar pelo Agent. Selecione um contêiner flex, expanda o Layout e você terá: * **Alinhamento**: um seletor de pontos 3×3 para onde os itens ficam ao longo de ambos os eixos dentro do contêiner. * **Direção**: dois botões de seta que empilham os filhos em linha ou em coluna. * **Espaçamento (Gap)**: um valor em pixels para o espaço entre os itens. O ícone ao lado do campo Gap muda para corresponder à direção atual, para que você sempre saiba se está ajustando o espaçamento horizontal ou vertical. Ao lado dele, um ícone de seta alterna **Distribute space between items**, que empurra os filhos para as bordas opostas do contêiner. * **Espaço externo**: campos por lado para o espaço fora do elemento (um campo por lado, com um alternador de vínculo para travar os quatro lados de uma vez). * **Espaço interno**: campos para o espaço dentro do elemento ao longo de cada eixo, com um alternador de vínculo para ambos os eixos de uma vez. A seção Layout só aparece quando pelo menos um controle de layout se aplica ao elemento selecionado. Nós de texto simples sem propriedades de espaçamento ou layout ocultam a seção completamente, para que o editor permaneça compacto. Para as seções **Text**, **Color**, **Border** e **Image**, veja o [guia do Visual Editor](/pt/design/visual-editor). ## Páginas relacionadas * [Canvas](/pt/design/canvas) — visão geral e anatomia. * [Frames](/pt/design/frames) — os contêineres onde os Elementos vivem. * [Toolbar](/pt/design/toolbar) — onde a ferramenta Edit vive. * [Visual Editor](/pt/design/visual-editor) — passo a passo completo de edição de elementos.