Informativo: Bloco Carrossel

Conteúdo

O Carrossel mostra uma série de slides no mesmo lugar, um de cada vez: de um lado um texto (chapéu, título e descrição) e, do outro, uma imagem ou vídeo. O visitante passa de um slide para outro pelas setas. É bom para apresentar a equipe, trabalhos feitos ou etapas de um serviço sem ocupar muito espaço na página.

A diferença para o Hero: no Hero o texto fica por cima de uma imagem que ocupa a faixa inteira; no Carrossel o texto fica ao lado da imagem.

Para acrescentar, mover ou remover blocos numa página, veja a página “Editor de páginas”. Em cada figura, os círculos vermelhos numerados mostram a parte da tela que está sendo explicada. O número do círculo é o mesmo número da lista logo abaixo da figura.

Como o Carrossel aparece no site

Figura 1 — Um Carrossel com três slides, no site.

1. Chapéu — uma frase bem curta acima do título, como “Nossa equipe”.
2. Título — a frase principal do slide.
3. Descrição — um texto curto que explica o slide. Quebras de linha digitadas no campo são mantidas.
4. Imagem ou vídeo — fica colada na borda da página, do lado escolhido nas opções.
5. Seta para trás — mostra o slide anterior. Do primeiro, volta para o último.
6. Seta para frente — mostra o próximo slide. Do último, volta para o primeiro.
7. Contador — qual slide está aparecendo e quantos existem, como “1 / 3”.

Setas e contador só aparecem quando há dois slides ou mais.

Opções do bloco

Figura 2 — Opções gerais do Carrossel.

1. Trocar de slide — tem as opções Não trocar sozinho, a cada 6, 9 ou 14 segundos. Atenção: hoje esta opção fica guardada, mas o Carrossel não troca os slides sozinho no site, seja qual for a escolha. O visitante passa os slides pelas setas.
2. Formato da imagem — Alta (retrato) (a usada quando nada é escolhido), Quadrada ou Larga (paisagem). A imagem é recortada para caber no formato.
3. Fundo — a cor de fundo do bloco: Escuro (padrão), Claro ou Suave (claro com um leve tom de cor).
4. Posição da imagem — À direita (padrão) ou À esquerda do texto.
5. Slides — a lista de slides e, no canto, quantos existem do máximo de 10.
6. Slide — cada linha é um slide, com o número e o chapéu. Clicar abre os campos do slide (Figura 3).
7. Adicionar — cria um slide novo no fim da lista.

Um Carrossel sem nenhum slide não aparece no site. Na prévia do editor, aparece como o aviso “Nenhum slide no carrossel”.

Campos de um slide

Figura 3 — Um slide aberto para editar.

1. Cabeçalho do slide — o número do slide e o chapéu. Clicar abre ou fecha o slide.
2. Setas — ↑ e ↓ mudam a ordem dos slides. O primeiro da lista é o primeiro a aparecer.
3. X — tira o slide do Carrossel. A imagem continua guardada na Mídia.
4. Imagem ou vídeo — escolha da Mídia (Biblioteca) ou envie um arquivo novo (Enviar arquivo). Remover tira o arquivo só deste slide. O site usa o texto alternativo da imagem, preenchido na Mídia; se ele estiver vazio, usa o chapéu do slide.
5. Chapéu — a frase curta acima do título (Figura 1, item 1).
6. Título — a frase principal (Figura 1, item 2).
7. Descrição — o texto do slide (Figura 1, item 3).

Todos os campos são opcionais; o que ficar vazio não aparece. Também dá para editar os textos clicando direto neles na prévia.

Dicas

• Use imagens no mesmo formato em todos os slides; o bloco recorta todas do mesmo jeito.
• Como o Carrossel não troca sozinho, coloque no primeiro slide o que é mais importante.
• Prefira descrições curtas, de uma ou duas frases.

Controle de Mudanças

Notas adicionais

As imagens usam as telas reais do NetCorp em um ambiente de demonstração. Os textos e as imagens (marcadas como “Imagem de exemplo”) são fictícios, não dados de um cliente. Os números vermelhos foram acrescentados às figuras e não aparecem no site nem no painel.

A falta de troca automática foi conferida no código e na tela: com “A cada 6 segundos”, o Carrossel continuou no primeiro slide depois de 8 segundos.

Contato de suporte: a preencher.

Referências

• NetCorp — bloco Carrossel do site e editor de páginas do painel.
• Modelo de página Informativo e blocos de conteúdo da base de conhecimento.