Modelo de Capa

Seguem abaixo exemplos de linhas com destaques secundários de notícias usando as seguintes classes CSS:

- Foto Sobreposta Pequena

- Foto Sobreposta

- Foto Sobreposta Grande

Ao final, uma linha usando a configuração padrão das notícias (imagem e textos separados).

Por último, um botão "Mais notícias" remetendo para a pasta onde as notícias estão armazenadas.

Para criar um botão numa capa basta usar o tile "Cabeçalho" e preencher apenas os dois últimos campos (o "texto" do botão e a URL de destino do botão)

Para adicionar Serviços em destaque, basta criar uma linha e adicionar o tile de Serviços.

Depois procure no portal gov.br os serviços digitais do seu órgão (https://www.gov.br/pt-br/servicos/listar_orgaos)

No modo "Compor" do Plone, clique no link "Editar" do tile de serviços e cole a URL dos serviços escolhidos no campo "Serviços" (um por linha).

OBS: O Plone monta sempre TRÊS serviços por linha. Se você adicionar ao tile 4 URLs de serviços ele vai montar um linha com 3 cards de serviços e depois uma segunda linha com 1 card de serviço.

Banners são bastante utilizados nos portais gov.br. Contudo, é preciso ter cuidado com a responsividade desses banners quando visualizados em dispositivos mobile (celular e tablet).

Caso as informações do banner que você publicou fiquem ilegíveis (muito reduzidas) quando visualizadas em dispositivos mobile, você pode criar uma versão específica do banner para desktop e outra versão para tablet/celular.

Basta acessar "Layout" no menu do Plone, clicar na "engrenagem" do tile do banner, clicar no botão de Classes CSS e selecionar em que dispositivo você vai ocultar o banner. As classes utilizadas são:

• Visualização - Ocultar em Phone
• Visualização - Ocultar em Desktop
• Visualização - Ocultar em Tablet

Logo após esse texto o usuário vai visualizar um dos dois banners que aparecem na edição desta página no Plone. Se acessar via desktop, verá o banner de 1150 x 90 px. Se acessar via tablet ou celular, verá o banner de 550 x 250 px.

Para inserir uma agenda na capa, basta ir na opção "Layout" no menu do Plone, criar uma linha e inserir o tile de agenda.

Depois acesse a opção "Compor" no menu do Plone, clique no botão "Adicionar conteúdo" (no canto superior direito da tela) e procure pela agenda da autoridade máxima do órgão. Depois é só "arrastar e soltar" sobre o tile de agenda.

Você pode ainda editar algumas informações da agenda clicando no link "Editar" do tile de agenda.

É interessante também que você aplique a classe CSS "Linha Destacada Escura" à linha onde está o tile da agenda. Basta acessar a opção "Layout" do menu do Plone e clicar na engrenagem da linha onde está o tile. A engrenagem da linha é sempre a que está mais acime e à direita. Depois é só clicar no botão azul de Classes CSS e escolher a opção "Linha Destacada Escura".

Segue abaixo um exemplo de agenda de autoridade...

É possível criar uma área de cards, com links para conteúdos importantes do portal (ou conteúdos externos).

Você pode criar um card usando uma pasta, uma página ou um link.

Usando uma pasta ou página como card, o card vai automaticamente linkar com eles. Usando um link, você pode configurar qual o destino do usuário quando clicar no card.

Para criar um card a partir de uma pasta/página/link faça o seguinte:

- Acesse a opção "Compor" do menu do Plone, clique no botão "Adicionar conteúdo" (canto superior direito da tela), procure a pasta/página/link que você vai usar para criar o card... clique, arraste e solte na área do tile de card.

Você pode modificar as informações da "frente" e do "verso" do card acessando o objeto que foi usado para criar o card (pasta, página ou link), clicando na opção "Edição" no menu do Plone, e depois na opção "Card" no menu interno de edição do objeto.

(Clique no "i" azul dos cards para ler as informações no "verso" do card)

OBS: No exemplo abaixo, a linha onde estão os cards está com a Classe CSS "Linha Discreta" aplicada.

Para embutir (embed) um vídeo na capa, basta copiar o código de incorporação do vídeo e colar num tile "embed" ou no tile "texto rico". Caso opte pelo tile de "texto rico", é preciso alterar (no menu do editor de texto rico) a opção "Formato de Texto" para "text/x-web-textile" antes de colar o código do vídeo.

OBS.: Para visualizar um exemplo de página com conteúdo externo embutido (painel de BI), clique aqui.

DICA:
Sempre que puder, edite a largura (width) do vídeo para "100%". Isso vai evitar que o vídeo extrapole a largura da área de conteúdo na visualização em celulares (criando uma rolagem horizontal).

Ex.: <iframe width="100%" height="315" src="https://www.youtube.com/embed/SjuwnVSk1F8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Por padrão, o tile de Canais de Atendimento é sempre posicionado ao final da área de conteúdo da página inicial, antes do rodapé.

Para criar um tile com os Canais de Atendimento basta acessar a opção "Layout" do menu do Plone, criar uma linha e inserir o tile "Canais".

Depois é só acessar a opção "Compor" no menu do Plone e clicar no link "Editar" do tile "Canais". Você precisa inserir a URL de destino de cada um dos cards "Denúncia", "Solicitação", "Sugestão" e "Elogio". Normalmente, a URL utilizada em todos é a página inicial do sistema de ouvidorias da CGU (http://sistema.ouvidorias.gov.br/).