Carrossel
Cartões rolantes (imagens ou vídeos) para serviços, soluções ou cases quando há muitos itens.
Nesta página
Visão geral
Carrossel de cartões (imagem ou vídeo do YouTube) com título, texto e botão por cartão.
| Propriedade | Valor |
|---|---|
| Nome no editor | Carrossel |
| Onde encontrar | Painel de widgets do Elementor, categoria Converto |
| Identificador no Elementor | lgr-carousel-01 |
| Identificador no Markdown | carousel-01 |
| Papel na página | Prova e portfólio |
| Campos de conteúdo | 3 |
| Opções de estilo | 37 (13 responsivas) |
Quando usar
Situações em que este widget é indicado:
- A página precisa apresentar uma coleção de serviços/cases/soluções em cartões roláveis.
- Existe um conjunto de 2 ou mais itens com imagem ou vídeo, título curto e descrição.
Como adicionar
- Abra a página no editor do Elementor.
- No painel de widgets, abra a categoria Converto e arraste Carrossel 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: Soluções de marketing voltadas para performance e autoridade de marca. |
Cartões
| Opção | Tipo | Detalhes |
|---|---|---|
| Cartões | Lista | |
| ↳ Tipo de Mídia | Seleção | Opções: Imagem (image), Vídeo (YouTube) (video), Nenhuma (none) · Padrão: image |
| ↳ Imagem | Imagem ou arquivo | |
| ↳ Link do YouTube | Texto | |
| ↳ Proporção do Vídeo | Seleção | Opções: Horizontal Padrão (16:9) (16/9), Vertical / Shorts (9:16) (9/16) · Padrão: 16/9 |
| ↳ Capa do Vídeo (Opcional) | Imagem ou arquivo | |
| ↳ Rótulo | Texto | Padrão: Marketing |
| ↳ Título | Texto | Padrão: Estratégias de Divulgação |
| ↳ Texto | Área de texto | Padrão: Entenda como alavancar suas campanhas de forma es… |
| ↳ Texto do Botão (Deixe vazio para ocultar) | Texto | Padrão: Saiba Mais |
| ↳ Link do Botão | Link |
Opções da aba Estilo
A aba Estilo reúne 37 opções em 8 seções (a última é Animações, comum a todos os widgets Converto).
| Seção | O que ajusta |
|---|---|
| Textos | Título, Título / Altura da Linha, Descrição, Descrição / Altura da Linha, Cartões / Rótulo, Cartões / Título, Cartões / Título / Altura da Linha, Cartões / Texto, Cartões / Texto / Altura da Linha, Cartões / Botão |
| Cores | Cor do Título, Cor da Descrição, Fundo do Card, Cor da Sombra, Cor, Cor, Cor, Cor do Texto, Cor de Fundo, Cor do Ícone, Cor de Fundo, Cor Inativa, Cor Ativa |
| Vídeos | Capa Padrão (Fallback), Autoplay ao Abrir, Mudo, Repetir |
| 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 | Arredondamento do Cartão, Arredondamento da Mídia, Arredondamento do Botão |
| Animações | Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada) |
Comportamento responsivo
13 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 carousel-01 na linha <!-- converto:carousel-01 -->. Campos de conteúdo (bloco :::content):
| Campo | Tipo | Obrigatório | Detalhes |
|---|---|---|---|
title | Texto | Sim | Título da seção, acima do carrossel. |
description | Texto | Não | |
cards_list | Lista | Não | Cartões do carrossel. |
↳ media_type | Seleção | Não | Opções: image, video, none |
↳ card_image | Imagem ou arquivo | Não | Usado quando media_type = image. |
↳ youtube_url | Link | Não | URL completa do vídeo (padrão ou /shorts/). Usado quando media_type = video. |
↳ video_aspect_ratio | Seleção | Não | Opções: 16/9, 9/16 |
↳ video_cover | Imagem ou arquivo | Não | Capa do vídeo. Se vazio, usa a capa padrão do widget ou a thumb do YouTube. |
↳ card_role | Texto | Não | |
↳ card_title | Texto | Não | |
↳ card_text | Texto | Não | |
↳ button_text | Texto | Não | Deixe vazio para ocultar o botão do cartão. |
↳ button_link | Link | Não |
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
<!-- converto:carousel-01 -->
:::content
title: Nossas Soluções
description: Soluções de marketing voltadas para performance e autoridade de marca.
cards_list:
- media_type: image
card_image: https://exemplo.com/imagem.jpg
youtube_url: https://exemplo.com/oferta
video_aspect_ratio: 16/9
video_cover: https://exemplo.com/imagem.jpg
card_role: Marketing
card_title: Estratégias de Divulgação
card_text: Entenda como alavancar suas campanhas de forma escalável e com ROI positivo.
button_text: Saiba Mais
button_link: https://exemplo.com/oferta
- media_type: image
card_image: https://exemplo.com/imagem.jpg
youtube_url: https://exemplo.com/oferta
video_aspect_ratio: 16/9
video_cover: https://exemplo.com/imagem.jpg
card_role: Marketing
card_title: Estratégias de Divulgação
card_text: Entenda como alavancar suas campanhas de forma escalável e com ROI positivo.
button_text: Saiba Mais
button_link: https://exemplo.com/oferta
:::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).