Biblioteca de widgets

Cartões Empilhados

Pilha de cartões com foto fixada na tela enquanto o visitante rola — perfis de público, casos de uso ou resultados com números.

Intermediário6 min de leitura

Nesta página

Visão geral
Quando usar
Como adicionar
Opções da aba Conteúdo
Conteúdo
Opções da aba Estilo
Comportamento responsivo
Campos no Converto Construtor (Markdown)
Exemplo
Recursos comuns a todos os widgets

Visão geral

Pilha de cartões com imagem de fundo (título, uma frase e até 2 destaques flutuantes: ícone, rótulo, valor grande e selo). A seção fica fixa na tela enquanto a página rola e, a cada trecho de rolagem, o cartão de cima sai da pilha e revela o seguinte, até o último; a direção da saída é vertical (sobe, padrão) ou horizontal (sai para a esquerda). Responsivo: no celular os destaques ficam menores e a pilha usa a largura da tela.

Propriedade	Valor
Nome no editor	Cartões Empilhados
Onde encontrar	Painel de widgets do Elementor, categoria Converto
Identificador no Elementor	`lgr-stacked-cards`
Identificador no Markdown	`stacked-cards`
Papel na página	Interesse e desejo (perfis e números)
Campos de conteúdo	3
Opções de estilo	35 (16 responsivas)

Quando usar

Situações em que este widget é indicado:

A página fala com vários perfis, áreas ou casos de uso e cada um merece um cartão visual (ex.: executivo, operações, financeiro).
Há resultados em números por área ("30 dias → 2 horas") que ficam mais fortes como destaques sobre uma imagem.

Como adicionar

Abra a página no editor do Elementor.
No painel de widgets, abra a categoria Converto e arraste Cartões Empilhados para a página (ou clique em + em uma área vazia).
Preencha a aba Conteúdo e ajuste a aba Estilo.

O widget também pode vir pronto em um modelo de página ou ser inserido pelo Converto Construtor.

Opções da aba Conteúdo

Conteúdo

Opção	Tipo	Detalhes
Título	Texto	Padrão: Uma visão completa para cada perfil · Título da seção, acima dos cartões. Vazio não exibe.
Descrição	Área de texto	Padrão: Role a página e veja os cartões se empilharem, um por perfil.
Cartões	Lista
↳ Imagem de fundo	Imagem ou arquivo
↳ Título do cartão	Texto	Padrão: Título do cartão
↳ Texto do cartão	Área de texto	Padrão: Explique em uma frase o que este cartão entrega.
↳ Ícone	Ícone
↳ Rótulo	Texto	Padrão: Economia por ano
↳ Valor	Texto	Padrão: R$ 60.000
↳ Selo (opcional)	Texto
↳ Ícone	Ícone
↳ Rótulo	Texto
↳ Valor	Texto
↳ Selo (opcional)	Texto

Opções da aba Estilo

A aba Estilo reúne 35 opções em 7 seções (a última é Animações, comum a todos os widgets Converto).

Seção	O que ajusta
Textos	Título da seção, Título da seção / Altura da Linha, Descrição da seção, Descrição da seção / Altura da Linha, Título do cartão, Texto do cartão, Valor do destaque, Rótulo do destaque
Cores	Título da Seção, Descrição da Seção, Título do cartão, Texto do cartão, Sobreposição da imagem, Destaque / Fundo, Destaque / Rótulo, Destaque / Valor, Destaque / Fundo do ícone, Destaque / Ícone, Selo / Fundo, Selo / Texto, Força da sobreposição
Disposição	Direção da saída dos cartões, Altura do cartão, Largura máxima do cartão, Visibilidade da pilha (cartões atrás), Distância do topo da tela, Rolagem por cartão, Arredondamento do cartão
Plano de Fundo	Plano de Fundo
Sobreposição de Fundo	Sobreposição de Fundo, Opacidade
Espaçamentos	Espaço superior, Espaço inferior, Anular espaço de cima, Anular espaço de baixo
Animações	Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada)

Comportamento responsivo

16 opções deste widget são responsivas: o Elementor permite definir valores diferentes para desktop, tablet e celular (ícones de dispositivo ao lado do campo). Para ajustes finos por largura de tela, use a sintaxe curta de media queries no campo CSS da aba Avançado.

Campos no Converto Construtor (Markdown)

Use o identificador stacked-cards na linha . Campos de conteúdo (bloco :::content):

Campo	Tipo	Obrigatório	Detalhes
`title`	Texto	Não	Título da seção, acima dos cartões. Escreva um título próprio para a página; o padrão é genérico. Vazio não exibe.
`description`	Texto	Não
`cards_list`	Lista	Sim	Cartões na ordem de exibição: o primeiro aparece no topo da pilha e sai primeiro; o último fica por último. De 3 a 5 cartões.
↳ `card_image`	Imagem ou arquivo	Sim	Imagem de fundo do cartão (cobre todo o cartão, é cortada para caber; deixe o assunto no centro e o canto inferior esquerdo calmo, onde fica o texto). Sempre uma imagem própria para cada cartão.
↳ `card_title`	Texto	Sim	Título do cartão (1 a 3 palavras: o perfil, a área ou o resultado).
↳ `card_text`	Texto	Não	Uma frase curta sob o título.
↳ `chip1_icon`	Ícone	Não	Ícone do destaque 1 (Font Awesome).
↳ `chip1_label`	Texto	Não	Rótulo do destaque 1 (ex.: "Custo evitado / ano"). O destaque só aparece se tiver rótulo ou valor.
↳ `chip1_value`	Texto	Não	Valor grande do destaque 1 (ex.: "R$ 60.000", "30 dias → 2 h"). Use só números reais do briefing.
↳ `chip1_badge`	Texto	Não	Selo pequeno sob o valor do destaque 1 (ex.: "Build vs. Buy"). Vazio não exibe.
↳ `chip2_icon`	Ícone	Não	Ícone do destaque 2 (Font Awesome).
↳ `chip2_label`	Texto	Não	Rótulo do destaque 2 (ex.: "Custo evitado / ano"). O destaque só aparece se tiver rótulo ou valor.
↳ `chip2_value`	Texto	Não	Valor grande do destaque 2 (ex.: "R$ 60.000", "30 dias → 2 h"). Use só números reais do briefing.
↳ `chip2_badge`	Texto	Não	Selo pequeno sob o valor do destaque 2 (ex.: "Build vs. Buy"). Vazio não exibe.

Os controles da aba Estilo também podem ser usados no bloco :::style, pelos identificadores do próprio widget (campo omitido mantém o padrão). Veja a linguagem Markdown Converto.

Exemplo

markdown

<!-- converto:stacked-cards -->

:::content
title: Uma visão completa para cada perfil
description: Role a página e veja os cartões se empilharem, um por perfil.
cards_list:
  - card_image: https://exemplo.com/imagem.jpg
    card_title: Título do cartão
    card_text: Explique em uma frase o que este cartão entrega.
    chip1_icon: fa-regular fa-circle-check
    chip1_label: Economia por ano
    chip1_value: R$ 60.000
    chip1_badge: Texto de exemplo
    chip2_icon: fa-regular fa-circle-check
    chip2_label: Texto de exemplo
    chip2_value: Texto de exemplo
    chip2_badge: Texto de exemplo
  - card_image: https://exemplo.com/imagem.jpg
    card_title: Título do cartão
    card_text: Explique em uma frase o que este cartão entrega.
    chip1_icon: fa-regular fa-circle-check
    chip1_label: Economia por ano
    chip1_value: R$ 60.000
    chip1_badge: Texto de exemplo
    chip2_icon: fa-regular fa-circle-check
    chip2_label: Texto de exemplo
    chip2_value: Texto de exemplo
    chip2_badge: Texto de exemplo
:::

Recursos comuns a todos os widgets

Textos aceitam variáveis de página ({{rotulo}}) e marcação de texto.
Aba Avançado: campos CSS e JS por elemento (CSS e JS personalizado).
Seção Animações na aba Estilo (Animações de entrada).