Quando lançamos a versão 7 do Editor GemPages, houve um grande avanço — não apenas em desempenho, mas também na forma como os comerciantes criam. Mas por trás de cada landing page, cada cartão de produto e cada layout de pacote, existe uma constante: Configurações de Elementos.
E com o tempo, essas configurações começaram a mostrar a idade.
Ao longo do último ano, conversamos com comerciantes e uma coisa sempre nos vinha à mente: eles sabiam o que construir — mas as configurações tornavam a tarefa mais difícil do que deveria ser. Então, nos perguntamos:
Como seriam as configurações de elementos se fossem projetadas em torno de como tua pense — não apenas como o código funciona?
Este lançamento, lançado em 29 de julho de 2025, é a nossa resposta.
Nosso foco é tornar a construção mais fluida e intuitiva — com atualizações importantes no novo padrão da interface do usuário e no novo comportamento das configurações. Elas foram projetadas para reduzir o atrito nas tarefas diárias e oferecer melhor suporte à forma como os comerciantes constroem.
Aqui estão as atualizações que transformarão a experiência de construção dentro do GemPages – para melhor:
1. Separação mais clara dos controles de estilo e layout
Por muito tempo, o Inspetor de Elementos do GemPages utilizou um sistema de duas abas — uma para estilização e outra para personalizar a aparência do elemento na página. Funcionava, mas nem sempre era claro por onde começar. Alguns usuários pulavam configurações importantes simplesmente porque elas não eram exibidas da maneira esperada.
Como o melhoramos:
Nesta atualização, mantivemos a estrutura de duas abas, mas esclarecemos suas funções.
- A guia Configurações agora se concentra exclusivamente no apresentação visual de um elemento, incluindo tipografia, cor, fundos, bordas e imagens. Esses controles se aplicam ao área de conteúdo principal do elemento
- A guia Avançado gerencia como o elemento se comporta e se ajusta ao layout, incluindo espaçamento, alinhamento, posicionamento, visibilidade e exibição responsiva. Estes se aplicam a recipiente externo, ou caixa delimitadora, do elemento.
O que isso significa para você:
Ao separar claramente o design visual do posicionamento estrutural, esta atualização traz maior clareza e controle ao seu fluxo de trabalho.
Você não precisa mais ficar pensando em onde uma configuração está localizada ou alternar entre painéis para fazer alterações relacionadas. O estilo visual — como tipografia, cores e imagens — é agrupado onde deve estar. Os controles relacionados a espaçamento, alinhamento e visibilidade são organizados logicamente e mantidos fora do caminho até que você precise deles.
Essa estrutura aprimorada ajuda a reduzir a carga cognitiva, minimiza o retrabalho e permite que você se concentre na criação de páginas que sejam visualmente consistentes e estruturalmente sólidas.
2. Nova interface com um padrão de digitalização mais legível
| Design antigo | Redesenho |
 |
 |
Em versões anteriores do Inspetor de Elementos, a estrutura dos controles variava de acordo com a configuração. Alguns usavam pilhas verticais, outros combinavam rótulos e valores de maneiras inconsistentes. À medida que mais configurações eram adicionadas, o painel se tornava mais difícil de analisar — especialmente ao trabalhar com velocidade ou editar vários elementos em sequência.
Como resolvemos isso:
Um padrão de varredura consistente da esquerda para a direita.
Todas as configurações nesta guia agora seguem um padrão claro da esquerda para a direita: Rótulo → Valor.
À primeira vista, é uma pequena mudança. Mas quando você edita dezenas de elementos, essa consistência se constrói confiabilidadeVocê não precisa reaprender como as configurações são estruturadas de um bloco para o outro. Seus olhos sabem para onde ir.
Esse padrão não apenas melhora a escalabilidade à medida que mais configurações são introduzidas, como também treina os usuários a navegar no Editor de forma mais eficiente, ajudando tanto iniciantes quanto equipes experientes a se moverem mais rápido e com menos erros.
Configurações aninhadas dentro de popovers.
Algumas configurações não se limitam a um único valor — elas se abrem para conjuntos completos de controles relacionados. No passado, essas opções adicionais eram exibidas em linha, o que rapidamente expandia o painel de Configurações e fazia com que a interface parecesse congestionada.
Para resolver isso, introduzimos uma nova estrutura: configurações aninhadas dentro de popovers.
Clicar em uma configuração como "Borda" abre um popover limpo e focado — um modal flutuante ao lado do painel — mostrando apenas os controles relevantes. Esses popovers podem incluir até 3 níveis de profundidade, com cada grupo secundário abrindo apenas quando necessário.
O que isso significa para você:
- It mantém o painel principal de configurações organizado, mostrando apenas opções de nível superior por padrão.
- It reduz a sobrecarga, especialmente para usuários mais novos que não precisam de todas as configurações avançadas antecipadamente.
Ao ocultar a complexidade até que ela seja necessária, o Editor se torna mais fácil de escanear e mais rápido de navegar — sem sacrificar a potência.
3. Novo comportamento das configurações
Esta atualização para a versão 7 introduz novos tipos de configurações e refina o comportamento de algumas configurações existentes, tornando as interações mais rápidas, claras e fáceis de controlar.
Muitas configurações agora seguem um padrão de clique para adicionar e clique para remover. Em vez de começar com um campo vazio, clicar em um controle inserirá automaticamente um valor padrão. A partir daí, você pode ajustá-lo ou removê-lo com um único clique.
Essa simples mudança de interação ajuda a reduzir o esforço manual frequentemente envolvido na configuração. Ela oferece um ponto de partida claro, sem suposições — para que você possa se concentrar em ajustar, em vez de criar do zero.
Por que é importante
Ao aplicar automaticamente valores padrão, o Editor remove etapas desnecessárias e mantém seu fluxo de trabalho em movimento.
Você tomará decisões mais rapidamente, reduzirá entradas repetitivas e evitará ficar lento por causa de configurações que não precisam de personalização profunda.
O que mudou no painel Configurações?
| Configurações | Design antigo | Redesenho |
|---|---|---|
| Layout: As configurações aninhadas agora são agrupadas dentro de um popover, mostrando apenas o rótulo pai e seu valor atual. |
 |
  |
| Fundo: A configuração de plano de fundo atualizada oferece mais flexibilidade ao adicionar vídeo como uma nova opção — junto com cor e imagem. |
 |
 |
| Shape: As configurações de borda são ajustadas dentro de um Popover, incluindo configurações:
|
 |
|
| padding: Em versões antigas, o preenchimento às vezes era colocado na aba Configurações ou na aba Avançado. Nesta atualização, o preenchimento foi movido para a aba Configurações. |
|
|
| Alinhamento: A configuração de Alinhamento agora está localizada na parte inferior do painel do editor, abaixo de Tamanho e Plano de fundo. |
 |
 |
Navegar pelas configurações dos elementos por tipo
Para ajudar você a navegar mais rápido, aqui está uma lista categorizada de todos os elementos suportados no Editor atualizado.
Cada link leva você a um artigo dedicado com detalhes sobre como o elemento funciona e como configurar suas configurações.
1. Elementos básicos
2. Elementos interativos
3. Elementos de mídia
4. Elementos do produto
- Produto
- Lista de Produtos
- Botão do carrinho de produtos
- Título do Produto
- Preço do produto
- Comparar preço de produto
- Descrição do Produto
- Ver mais produtos
- Checkout dinâmico de produtos
- Quantidade de produto
- Fornecedor do produto
- Produto SKU
- Imagem do produto
- Variante e amostra do produto
- Emblema do produto
- Etiqueta de desconto do produto
- Contador de estoque de produtos
- Aderente Adicionar ao carrinho
- Upload de arquivo de produto
- Bundle produto
- Campo personalizado do produto
5. Elementos do artigo
- Lista de artigos
- Imagem do Artigo
- Título do artigo
- Trecho do artigo
- Conteúdo do Artigo
- Data do artigo
- Artigo Autor
- Categoria Artigo
- Etiqueta do artigo
- Artigo Leia mais
6. Elementos do formulário
- Formulário de Contato
- Newsletter
- Suspenso
- Caixa de seleção
- Submeter
- Campo de e-mail
- Campo de texto
- Área de texto
Obrigado por seus comentários