XQuiz

Transformação

A comparação do antes e depois lado a lado — duas imagens, duas barras de nível e uma nota com ícone em cada lado, dentro de um card

Transform

O elemento Transformação põe o "antes" e o "depois" lado a lado para mostrar o contraste entre o problema e o resultado. Na paleta, ele fica na categoria Vendas, e já nasce preenchido: títulos "Antes" e "Depois", subtítulos, descrições e duas imagens de demonstração.

Os dois lados

Na aba Conteúdo, a seção Geral traz a Imagem de fundo: a arte atrás das duas fotos, na faixa central do bloco. Sem imagem escolhida, entra uma arte padrão do tema, clara ou escura — essa faixa nunca fica vazia.

Depois vêm as seções Antes e Depois, com os mesmos seis campos cada: Imagem, da biblioteca de mídia da organização (a mesma do elemento Imagem); Título; Subtítulo; Nível (%); Ícone (busca de ícones); e Descrição. Os campos de texto são de uma linha só, sem formatação, e aceitam variáveis no formato {{nome}}. O Nível (%) vai de 0 a 100, aceita variável e vira a barra de progresso daquele lado — nenhum número aparece na tela; sem valor, valem 25% no Antes e 80% no Depois. Ícone e Descrição formam a nota no rodapé de cada lado; sem os dois, a célula fica vazia.

Aparência

A aba Tema tem o toggle Container, aqui já ligado por padrão, e três cores: a Cor primária pinta os acentos do lado Depois, a Cor secundária os do Antes e a Cor do texto, os textos dos dois lados. Com ele ligado, aparecem também a Cor de fundo, a Cor da borda e os controles de estilo, espessura e raio da borda. Não há largura, tamanho de fonte nem alinhamento.

Configurações

A aba Configurações traz o Nome do elemento, o Delay — por tempo ou sincronizado com um Vídeo da mesma página — e a Exibição condicional.

No funil publicado

As duas barras preenchem de 0 até o nível em cerca de 5 segundos, desacelerando no fim; a animação roda igual no editor. Não há arrasto nem comparador: a comparação é estática, e os dois lados ficam sempre lado a lado, inclusive no celular. Lado sem imagem mostra um quadrado cinza. O elemento não gera resposta nem evento: nada dele aparece na tabela de Leads nem nos números de Analytics. Atenção: se a variável usada no Nível (%) não tiver valor na sessão, o elemento inteiro não aparece.

Nesta página