Plone Cover · collective.cover

Tutorial: Componente Capa do Plone

Aprenda a montar uma página de capa utilizando linhas, colunas e os tiles disponíveis no editor visual do Plone Cover.

O componente Cover permite criar páginas visuais por meio da organização de blocos de conteúdo, sem a necessidade de desenvolver toda a estrutura manualmente em HTML.

1. O que é o componente Capa

Entenda a função do collective.cover

O Cover, disponibilizado pelo produto collective.cover, é um tipo de conteúdo do Plone que permite construir páginas visuais utilizando blocos chamados tiles.

Cada tile representa um tipo de conteúdo, como imagem, texto, carrossel, calendário, coleção, arquivo ou conteúdo incorporado.

Esses elementos são organizados dentro de linhas e colunas, formando a estrutura visual da página.

Quando utilizar o Cover: páginas iniciais, capas de seções, páginas institucionais ou outros conteúdos que necessitem de uma composição visual personalizada dentro do Plone.

2. Conhecendo a interface

Principais elementos do editor visual

Ao criar uma Capa e acessar a aba Compor, o Plone apresenta os elementos utilizados para montar a página.

2.1 Barra de Layout

A barra de Layout contém os elementos Linha e Coluna. Eles são responsáveis pela estrutura da página.

2.2 Barra de Tiles

A barra de conteúdo disponibiliza os tiles Banner, Básico, Calendário, Carrossel, Coleção, Corpo de texto, Embed, Arquivo, Lista e Texto Rico.

2.3 Área de edição

A área localizada abaixo das ferramentas é o espaço onde os elementos são arrastados e organizados.

  • O símbolo × permite remover um elemento.
  • A engrenagem abre as configurações disponíveis para o tile.
  • As setas nas laterais permitem ajustar a largura das colunas.

3. Linha e Coluna

Estrutura básica da página

Linha

Container horizontal

A Linha é o primeiro elemento utilizado na composição. Ela funciona como uma faixa horizontal que receberá uma ou mais colunas.

Quando usar: sempre que for necessário iniciar uma nova fileira de conteúdo.

Coluna

Subdivisão interna da linha

Uma Coluna deve ser arrastada para dentro de uma Linha. Cada linha pode ser dividida em várias colunas, permitindo diferentes proporções de conteúdo.

As colunas podem ser redimensionadas utilizando os controles disponíveis nas laterais.

Importante: os tiles de conteúdo devem ser inseridos dentro de uma coluna.

Hierarquia visual

Linha 1 — uma coluna
Coluna inteira
Tile
Linha 2 — duas colunas
Coluna
Coluna
Linha 3 — três colunas
Coluna
Coluna
Coluna
Regra básica: Linha → Coluna → Tile. A composição deve seguir sempre essa sequência.

4. Os 10 tiles disponíveis

Conheça a função de cada componente

Cada tile possui uma finalidade específica e pode ser utilizado conforme o tipo de informação que será exibida.

Banner

Imagem de destaque

Utilizado para apresentar uma imagem de destaque acompanhada de título e, quando configurado, link para outro conteúdo.

Configuração: imagem, título, descrição, link e demais opções disponibilizadas pelo tile.
Quando usar: destaques principais, campanhas e chamadas visuais.

Básico

Título, descrição, imagem e link

Permite apresentar um item do site com título, descrição, imagem e link.

Configuração: arraste um conteúdo existente para o tile ou configure as informações permitidas pelo componente.
Quando usar: destaques individuais e chamadas para páginas, notícias ou eventos.

Calendário

Visualização de eventos

Exibe um calendário contendo os eventos publicados no site.

Configuração: utiliza os eventos existentes no Plone.
Quando usar: agendas institucionais, eventos e programações.

Carrossel

Sequência de imagens ou destaques

Apresenta vários itens em formato de slideshow. Cada item pode possuir imagem, título e link.

Configuração: adicione os conteúdos desejados conforme as opções disponíveis.
Quando usar: para exibir diferentes destaques em um mesmo espaço.

Coleção

Listagem dinâmica

Exibe os resultados de uma Collection já existente no Plone.

A listagem é atualizada conforme os critérios definidos na própria coleção.

Configuração: associe a Collection ao tile e defina as opções de apresentação disponíveis.
Quando usar: últimas notícias, próximos eventos, documentos recentes e outras listagens automáticas.

Corpo de Texto

Bloco de conteúdo textual

Permite inserir conteúdo textual simples dentro da composição.

Quando usar: pequenos textos de apoio e conteúdos que não necessitem de formatação mais elaborada.

Embed

Conteúdo incorporado

Permite inserir códigos externos, como vídeos, mapas, formulários e outros elementos compatíveis.

Configuração: insira o código de incorporação fornecido pelo serviço externo.
Quando usar: vídeos, mapas, formulários e conteúdos externos.
Atenção: determinados conteúdos externos podem depender das políticas de segurança configuradas no site.

Arquivo

Documento para acesso ou download

Permite apresentar um arquivo existente no Plone, oferecendo acesso ao documento.

Configuração: arraste o arquivo existente no site para o tile.
Quando usar: editais, relatórios, formulários, documentos e demais arquivos institucionais.

Lista

Conjunto manual de conteúdos

Permite selecionar manualmente vários itens para apresentação em uma sequência definida.

Configuração: adicione os itens e organize a ordem desejada.
Quando usar: links úteis, páginas em destaque ou conteúdos selecionados manualmente.

Texto Rico

Conteúdo formatado

Utiliza o editor visual do Plone para criar textos com títulos, listas, links, imagens, tabelas e demais recursos disponíveis.

Configuração: edite o conteúdo diretamente pelo editor disponibilizado no tile.
Quando usar: textos institucionais, apresentações, introduções e conteúdos que necessitem de formatação.

Resumo comparativo

Tile Conteúdo principal Atualização
Banner Imagem de destaque e link Manual
Básico Conteúdo individual Manual ou por referência
Calendário Eventos Automática
Carrossel Vários destaques Manual
Coleção Resultados de uma Collection Automática
Corpo de Texto Texto simples Manual
Embed Conteúdo externo Manual
Arquivo Documento Manual
Lista Itens selecionados manualmente Manual
Texto Rico Conteúdo formatado Manual

5. Exemplo prático

Montando uma página de departamento

Como exemplo, podemos montar uma página de departamento contendo banner, apresentação, carrossel, notícias, calendário, links úteis e vídeo institucional.

Estrutura sugerida

Linha 1 — destaque
Banner
Linha 2 — apresentação
Texto Rico
Carrossel
Linha 3 — informações
Coleção
Últimas notícias
Calendário
Lista
Links úteis
Linha 4 — vídeo
Embed

Passo a passo

1

Crie a Capa

Navegue até a pasta desejada e utilize Adicionar item → Capa. Informe um título e salve.

2

Abra a aba Compor

Após salvar, acesse a aba Compor para abrir o editor visual.

3

Crie a primeira Linha

Arraste uma Linha, depois uma Coluna e, por último, o tile Banner.

4

Adicione Texto Rico e Carrossel

Crie uma nova Linha com duas colunas. Na primeira, insira um Texto Rico. Na segunda, utilize um Carrossel.

5

Adicione informações dinâmicas

Crie uma Linha com três colunas.

  • Primeira coluna: Coleção para últimas notícias.
  • Segunda coluna: Calendário.
  • Terceira coluna: Lista com links úteis.
6

Adicione o vídeo institucional

Crie uma Linha com uma coluna e insira um tile Embed. 

<iframe
  width="100%"
  height="500"
  src="https://www.youtube.com/embed/SEU_VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>
7

Salve e publique

Após finalizar a composição, salve as alterações e publique a página conforme o fluxo de trabalho disponível no site.

Dica: organize primeiro a estrutura de linhas e colunas e somente depois distribua os tiles de conteúdo.

6. Dicas e boas práticas

Organização, acessibilidade e manutenção

Boas práticas de composição

  • Planeje a estrutura de linhas e colunas antes de inserir os conteúdos.
  • Evite excesso de colunas na mesma linha.
  • Utilize imagens otimizadas para melhorar o carregamento da página.
  • Prefira Coleções para conteúdos que precisam ser atualizados automaticamente.
  • Utilize conteúdos incorporados somente quando necessários e provenientes de serviços confiáveis.

Controles do editor

  • × remove um bloco.
  • A engrenagem abre as configurações.
  • Os controles laterais permitem ajustar a largura das colunas.
  • Um tile já inserido pode ser reposicionado conforme os recursos disponíveis no editor.

Acessibilidade

  • Preencha textos alternativos das imagens sempre que aplicável.
  • Utilize títulos claros e descritivos.
  • Evite vídeos com reprodução automática.
  • Sempre que possível, disponibilize legendas para conteúdos em vídeo.

Resolução de problemas

Problema Possível causa Ação recomendada
Tile desapareceu após salvar Estrutura da coluna foi alterada ou removida Verifique a composição e recrie a coluna, se necessário
Conteúdo Embed não aparece Restrição de segurança do domínio incorporado Solicite a verificação da configuração do site
Coleção não apresenta itens Os critérios da Collection não retornam resultados Edite a Collection e revise os filtros
Imagens aparecem cortadas no carrossel Imagens com proporções diferentes Padronize as dimensões e proporções das imagens