O Mover Elemento permite que você clique em qualquer elemento em uma página da web e o arraste fisicamente para uma nova posição. Teste alternativas de layout, prototipe mudanças de design ou reorganize o conteúdo visualmente — tudo sem escrever uma única linha de código. As alterações não são destrutivas e são redefinidas ao atualizar a página.
Discussões de design frequentemente envolvem "E se movêssemos este botão para cima da dobra?" ou "O layout ficaria melhor com a barra lateral à direita?" Normalmente, responder a essas perguntas exige editar o código, reimplantar e visualizar. O Mover Elemento encurta todo esse processo. Basta clicar no elemento, arrastá-lo e ver. A ferramenta aplica alterações de posição CSS ao elemento em tempo real, mantendo sua aparência visual enquanto permite o reposicionamento livre. Guias de alinhamento se ajustam a outros elementos e bordas da página, ajudando você a posicionar as coisas com precisão. Um contorno fantasma marca a posição original para que você possa sempre ver de onde o elemento veio. E se você não gostar do resultado, o desfazer o restaura instantaneamente. Todas as alterações são puramente visuais — elas vivem na memória do navegador e desaparecem completamente ao atualizar a página. Os arquivos HTML e CSS reais nunca são modificados.
Clique em qualquer elemento na página — botões, imagens, blocos de texto, cartões, cabeçalhos — e arraste-o livremente para uma nova posição. O elemento segue seu cursor suavemente, sem atrasos. Funciona com elementos de qualquer tamanho, desde pequenos ícones até seções de largura total.
Enquanto você arrasta, linhas de alinhamento tracejadas aparecem quando o elemento se alinha com as bordas de outros elementos ou com o centro da página. Guias horizontais e verticais ajudam você a colocar elementos em uma grade consistente sem precisar estimar as posições a olho nu.
A posição original do elemento é marcada com um contorno tracejado "fantasma" para que você possa sempre ver onde ele estava antes de movê-lo. Compare a nova posição com a original em um relance.
Fez um movimento que não gostou? Clique em Desfazer para retornar instantaneamente o elemento à sua posição anterior. Suporta várias etapas de desfazer para que você possa experimentar livremente e retroceder nas alterações.
Reorganize vários elementos em sequência. Cada movimento é independente e pode ser desfeito. Construa uma reorganização completa do layout, um elemento por vez, visualizando o efeito cumulativo.
Todas as alterações existem apenas na renderização do navegador. Os arquivos HTML, CSS e JavaScript reais da página nunca são tocados. Atualize a página e tudo retornará ao seu estado original. Seguro para usar em qualquer site.
Quer saber se o botão de CTA teria um desempenho melhor acima da dobra? Ou se a seção de depoimentos deveria vir antes da tabela de preços? Mova os elementos para visualizar diferentes layouts e tomar decisões informadas antes de se comprometer com alterações no código.
Durante uma chamada ao vivo com um cliente, arraste os elementos para explorar as opções de layout em tempo real. "Você prefere a imagem principal à esquerda ou à direita?" torna-se uma demonstração ao vivo em vez de uma discussão verbal.
Reorganize os elementos de uma página existente para prototipar uma nova direção de design. Combine com o Editor de Texto ao Vivo para alterar o conteúdo e o Mover Elemento para alterar as posições — criando um protótipo visual sem tocar em nenhum código.
Se os elementos estiverem se sobrepondo inesperadamente, arraste um para fora do caminho para ver o que está por trás dele. Isso geralmente é mais rápido do que alterar os valores de z-index nas Ferramentas do Desenvolvedor quando você só precisa dar uma olhada rápida no que está por baixo.
Mova os elementos visuais para corresponder à ordem de tabulação esperada. Se o layout visual não corresponder à ordem lógica de leitura, isso revela um problema potencial de acessibilidade, onde o leitor de tela e a navegação pelo teclado não corresponderão à apresentação visual.
Abra o dock flutuante do DevSuite Pro e clique no ícone Mover Elemento. O cursor muda para um ícone de movimento, indicando que a ferramenta está ativa e pronta para selecionar elementos.
Clique no elemento que deseja mover. Ele recebe uma borda destacada em roxo mostrando que está selecionado. Um contorno fantasma marca sua posição atual.
Clique e segure o elemento selecionado e, em seguida, arraste-o para o local desejado. Guias de alinhamento aparecem conforme você se aproxima das bordas de outros elementos ou do centro da página.
Solte o mouse para soltar o elemento em sua nova posição. Compare com o contorno fantasma. Use Desfazer se necessário, ou selecione outro elemento para continuar reorganizando.
Quando terminar de experimentar, atualize a página para restaurar todos os elementos às suas posições originais. Todos os movimentos são apagados completamente.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
