Cartões Rolantes

Linhas infinitas de cartões em rolagem — portfólio visual, categorias, galeria de resultados.

Intermediário5 min de leitura

Nesta página

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

Visão geral

Linhas de cartões com rolagem contínua (marquee), cada linha com sentido e velocidade próprios.

Propriedade	Valor
Nome no editor	Cartões Rolantes
Onde encontrar	Painel de widgets do Elementor, categoria Converto
Identificador no Elementor	`lgr-marquee-01`
Identificador no Markdown	`marquee-01`
Papel na página	Reforço
Campos de conteúdo	12
Opções de estilo	25 (17 responsivas)

Quando usar

Situações em que este widget é indicado:

A página precisa exibir vários cartões (projetos, cases, categorias) em linhas com rolagem automática infinita.
Existe mais de uma linha de conteúdo, cada uma podendo rolar em sentido diferente.

Como adicionar

Abra a página no editor do Elementor.
No painel de widgets, abra a categoria Converto e arraste Cartões Rolantes 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 da Seção	Área de texto	Padrão: Nossas Soluções
Descrição	Área de texto	Padrão: Veja tudo que produzimos.

Estrutura

Opção	Tipo	Detalhes
Layout do Grid	Seleção	Opções: Largura Total (`full`), Largura Personalizada (Box) (`custom`) · Padrão: full
Largura do Box	Medida	responsivo
Espaçamento entre Linhas	Medida	responsivo
Espaçamento entre Colunas (Cartões)	Medida	responsivo
Definição de Largura dos Cartões	Seleção	Opções: Por Quantidade na Tela (`qty`), Tamanho Fixo Personalizado (`fixed`) · Padrão: qty
Cartões por Visualização	Número	Padrão: 4 · responsivo
Largura do Cartão	Medida	responsivo
Alinhamento do Texto	Escolha	Opções: [object Object] (`left`), [object Object] (`center`) · Padrão: left
Sobreposição de Fundo	Sim/Não	Aplica um filtro escuro na base dos cartões para melhorar a legibilidade dos textos com imagem de fundo.

Cartões

Opção	Tipo	Detalhes
Itens	Lista
↳ Tipo de Item	Seleção	Opções: Configurar Nova Linha (`track`), Cartão (`card`) · Padrão: card
↳ Sentido da Animação	Seleção	Opções: Normal (`normal`), Reverso (`reverse`) · Padrão: normal
↳ Velocidade (s)	Medida
↳ Imagem de fundo	Imagem ou arquivo
↳ Título	Texto	Padrão: Novo Cartão
↳ Descrição	Área de texto	Padrão: Sua descrição aqui.

Opções da aba Estilo

A aba Estilo reúne 25 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, Título do Cartão / Altura da Linha, Texto do Cartão, Texto do Cartão / Altura da Linha
Cores	Título da Seção, Descrição da Seção, Título do Cartão, Texto do Cartão, Fundo do Cartão Padrão, Cor da Borda, Personalizar Sobreposição, Sombra do Cartão, Altura Mínima
Plano de Fundo	section_bg
Sobreposição de Fundo	section_bg_overlay, Opacidade
Espaçamentos	Espaço superior, Espaço inferior, Anular espaço de cima, Anular espaço de baixo
Arredondamento	Raio da Borda do Projeto
Animações	Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada)

Comportamento responsivo

17 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 marquee-01 na linha . Campos de conteúdo (bloco :::content):

Campo	Tipo	Obrigatório	Detalhes
`title`	Texto	Sim	Título da seção, acima das linhas de cartões.
`description`	Texto	Não
`grid_layout`	Seleção	Não	Opções: `full`, `custom`
`custom_width`	Medida responsiva	Não	Usado apenas quando grid_layout = custom.
`row_gap`	Medida responsiva	Não
`col_gap`	Medida responsiva	Não
`card_width_type`	Seleção	Não	Opções: `qty`, `fixed`
`cards_per_view`	Número	Não	Quantidade de cartões visíveis por vez. Usado quando card_width_type = qty.
`custom_card_width`	Medida responsiva	Não	Usado apenas quando card_width_type = fixed.
`card_alignment`	Seleção	Não	Opções: `left`, `center`
`enable_overlay`	Sim/Não	Não	Aplica uma sobreposição escura na base dos cartões com imagem de fundo.
`cards_list`	Lista	Não	Itens da sequência: linhas ("track", define sentido/velocidade da rolagem) e cartões ("card") que ficam dentro da linha atual.
↳ `item_type`	Seleção	Não	Opções: `track`, `card`
↳ `track_direction`	Seleção	Não	Usado quando item_type = track. · Opções: `normal`, `reverse`
↳ `track_speed`	Medida	Não	Velocidade da linha em segundos por ciclo. Usado quando item_type = track.
↳ `card_bg_image`	Imagem ou arquivo	Não	Usado quando item_type = card.
↳ `card_title`	Texto	Não	Usado quando item_type = card.
↳ `card_description`	Texto	Não	Usado quando item_type = card.

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:marquee-01 -->

:::content
title: Nossas Soluções
description: Veja tudo que produzimos.
grid_layout: full
custom_width: Texto de exemplo
row_gap: Texto de exemplo
col_gap: Texto de exemplo
card_width_type: qty
cards_per_view: 0
custom_card_width: Texto de exemplo
card_alignment: left
enable_overlay: yes
cards_list:
  - item_type: track
    track_direction: normal
    track_speed: Texto de exemplo
    card_bg_image: https://exemplo.com/imagem.jpg
    card_title: Novo Cartão
    card_description: Sua descrição aqui.
  - item_type: track
    track_direction: normal
    track_speed: Texto de exemplo
    card_bg_image: https://exemplo.com/imagem.jpg
    card_title: Novo Cartão
    card_description: Sua descrição aqui.
:::

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).