Artigo
Como organizar conteúdos por categoria
Exemplo de item listado automaticamente a partir de uma origem editorial, com imagem, data, resumo e ação de leitura.
Studio Help · Blocos
Componente Lista
O bloco Lista foi pensado para listar conteúdos dinâmicos do Studio CMS a partir de uma origem configurada no backoffice. Permite definir tipo de conteúdo, categoria, template, quantidade, ordenação, paginação, níveis, colunas, carousel e regras visuais da secção, mantendo uma ligação direta aos conteúdos já existentes.
Informações gerais
O bloco Lista é uma solução dinâmica para apresentar conteúdos já existentes no CMS sob a forma de grelha ou carousel. Em vez de construir cartões manualmente um a um, este componente vai buscar conteúdos com base numa origem definida e aplica a mesma lógica visual ao conjunto, o que o torna especialmente útil para notícias, artigos, páginas, recursos, listagens temáticas ou secções editoriais atualizadas com frequência.
Este bloco pode incluir:
- definição da origem através de Tipo de conteúdo, Categoria, Content Type Skins e Template
- controlo da quantidade através de Nº de Itens, ASC / DESC, Paginar e Nº de Níveis
- ajustes de apresentação com Nº of Columns, Gap, Image height(px) e Align Caption
- opções como Hide Date, Hide Caption, Hide Buttons, Button label e Button Style
- controlo visual com Background Color, Background Color Item, Color Item, Card border radius e Image border radius
- regras independentes de carousel para Desktop, Laptop, Tablet e Mobile, além de filtros como Date on/off e Search on/off
Utiliza este componente quando precisas de puxar conteúdos de forma automática e apresentá-los com uma estrutura consistente, sem perder controlo sobre a grelha, a navegação e a experiência por dispositivo. É especialmente útil quando o valor está na atualização contínua da lista e não na construção manual de cada item.
Exemplos visuais do bloco
3 leituras recorrentes da mesma lógica
O bloco Lista pode assumir leituras diferentes consoante a origem dos conteúdos e a forma como os queres apresentar: grelha editorial, conjunto em carousel ou lista com apoio à pesquisa e paginação. Os três exemplos abaixo mostram usos frequentes da mesma base do componente.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para listar conteúdos dinâmicos como notícias, artigos, páginas, recursos ou coleções editoriais já existentes no CMS
- Quando faz sentido controlar a origem da listagem por Tipo de conteúdo, Categoria, Template ou profundidade de navegação
- Para secções que precisam de adaptar grelha, carousel, datas, legendas e paginação por dispositivo
- Quando o valor está na atualização automática da lista e não na construção manual de cada item
Quando evitar
- Quando precisas de construir manualmente cada item com campos próprios e muito diferentes entre si
- Quando a secção tem apenas um único destaque e não existe uma lógica real de listagem ou repetição
- Quando a origem dos conteúdos não está suficientemente organizada e a lista acabaria por devolver resultados pouco coerentes
Nesse caso: se precisares de construir cartões totalmente manuais, com conteúdos muito diferentes entre si, um bloco Lista de Cartões, Mosaico ou Galeria pode ser mais adequado. O bloco Lista ganha valor quando existe uma origem dinâmica real por trás da apresentação.
Como configurar na prática
Sequência de trabalho recomendada
Definir a origem
- Começa por decidir qual é o Tipo de conteúdo que a lista deve puxar e se a origem depende também de Categoria ou Content Type Skins
- Se a listagem estiver demasiado aberta, vale a pena afinar a query antes de mexer no layout
Definir a query
- Configura Tipo de conteúdo a listar, Template, Nº de Itens, ASC / DESC, Paginar e Nº de Níveis
- Confirma se a profundidade e a quantidade pedidas fazem sentido para a experiência que queres criar
Definir a apresentação
- Ajusta Nº of Columns, Gap, Image height(px) e decide onde a grelha deve permanecer estática ou passar para carousel
- Afina Align Caption, cores, filtros e raios para garantir uma leitura limpa e coerente em todos os itens
Validar o comportamento
- Testa a secção em Desktop, Laptop, Tablet e Mobile para perceber se a densidade da lista continua equilibrada
- Confirma se Hide Date, Hide Caption, Search on/off e Paginar estão a ajudar a leitura em vez de a complicar
Boas práticas de conteúdo
Clareza editorial, origem e legibilidade
Origem e coerência da lista
- Antes de publicares a lista, confirma se a Categoria, o Template e o tipo de conteúdo escolhido devolvem resultados realmente relevantes
- Uma lista dinâmica ganha força quando os itens devolvidos têm uma relação editorial clara entre si
- Se o conjunto estiver demasiado heterogéneo, o problema costuma estar na origem configurada e não no layout
Leitura e navegação
- Usa Hide Date, Hide Caption e Hide Buttons apenas quando a informação não acrescenta valor real ao contexto
- Se a lista tiver muitos itens, a combinação entre Paginar e Search on/off pode tornar a navegação mais eficiente
- As cores de fundo e de texto devem preservar contraste suficiente para que o conjunto permaneça legível em qualquer estado do layout
Boa prática: pensa primeiro na qualidade da origem e só depois na decoração da lista. Quando a seleção de conteúdos está bem feita, o bloco quase sempre se torna mais claro e útil com muito menos esforço visual.
Configurações avançadas do componente Lista
Estrutura global, itens, estilos, carousel e filtros
Este ecrã concentra a estrutura base do bloco, as regras de apresentação dos itens, os estilos visuais da lista, a lógica de carousel por dispositivo e os filtros gerais da secção.
Estrutura do bloco
- Skin, Disabled block, Full Width, Block ID e Extra Class definem o enquadramento estrutural da secção
- São campos importantes para encaixar a lista no layout geral da página e articular o bloco com âncoras ou classes específicas
Apresentação dos itens
- Nº of Columns, Gap, Image height(px) e Align Caption ajustam a densidade e a proporção visual da lista
- Hide Date, Hide Caption, Hide Buttons, Button label e Button Style ajudam a simplificar ou enriquecer a leitura conforme o contexto
Estilos e bordas
- Margin, Padding, Background Color, Background Color Item e Color Item afinam a identidade visual da secção e dos items
- Card border radius e Image border radius ajudam a adaptar a lista a uma linguagem mais suave, neutra ou promocional
Carousel e filtros
- Desktop, Laptop, Tablet e Mobile podem ter carousel ativo ou desligado de forma independente, com Dots, Arrows, Slides To Show, Slides To Scroll, Rows e Slides Per Row
- Os controlos Date on/off e Search on/off ajudam a decidir se a lista deve ter um comportamento mais editorial ou mais utilitário
Configuração do conteúdo principal
Origem editorial, quantidade, ordenação e profundidade
Na configuração principal defines a origem da lista, o universo de conteúdos a devolver, a quantidade de resultados, a ordenação e a profundidade da navegação da secção.
Tipo de conteúdo
- Tipo de conteúdo e Categoria ajudam a limitar a origem da listagem e a garantir coerência entre os resultados devolvidos
- Content Type Skins permite afinar ainda mais o universo de conteúdos quando a estrutura editorial assim o justificar
O que listar
- Tipo de conteúdo a listar define a natureza concreta dos itens que a lista deve devolver
- Template ajuda a restringir ainda mais a origem quando existem variantes diferentes dentro do mesmo tipo de conteúdo
Quantidade e ordem
- Nº de Itens define o volume máximo de resultados devolvidos pela lista
- ASC / DESC controla o sentido da ordenação e ajuda a decidir se a lista deve mostrar conteúdos mais recentes, mais antigos ou outra lógica equivalente
Paginação e níveis
- Paginar ativa a divisão dos resultados em páginas quando a coleção é maior e precisa de navegação faseada
- Nº de Níveis ajuda a controlar a profundidade de conteúdos devolvidos, sobretudo quando a hierarquia da árvore editorial é relevante
Guias relacionados
Contexto complementar para este bloco