Adicione um Acordeão com o Editor de Conteúdo Avançado

Adicione um componente acordeão à tela para projetar conteúdo que pode ser expandido ou recolhido.

Antes de Iniciar

Função necessária: sn_cd.content_manager

Preencha os campos do formulário Novo conteúdo. Veja Criar conteúdo avançado

Crie o layout da página usando módulos ou colunas.

• Os módulos são layouts de conteúdo predefinidos compostos por cabeçalho, texto de parágrafo e imagens. Veja Adicione layouts de conteúdo predefinidos com o Editor de conteúdo avançado
• As colunas são contêineres que permitem definir um layout personalizado. Veja Adicione colunas com o Editor de conteúdo avançado

Procedimento

1. Navegue até a tela selecionando Editor aberto botão do Design . Novo conteúdo formulário.
2. Arraste e solte o componente acordeão na tela.

Configure o comportamento do componente acordeão e o design de alternância/botão e adicione mais painéis.

3. Navegue até Configurações > Propriedades seção para configurar o componente acordeão:

   Tabela 1. Configurações de propriedades do acordeão

   Campo Configurações	Descrição
   Comportamento do painel
   Expandir primeiro painel ao carregar	Selecionar esta opção carrega o acordeão com o conteúdo no primeiro painel visível. Se você desmarcar esta opção, o acordeão será carregado com todos os painéis fechados.
   Permitir a expansão de vários painéis	Selecionar esta opção permite que os funcionários expandam vários painéis de uma só vez. Se você desmarcar esta opção, quando um funcionário expandir um painel, o painel expandido no momento será fechado automaticamente.
   Design de botão
   Estilo	Selecione o estilo do botão acordeão, ou alterne, em que os funcionários clicam para expandir e fechar painéis.
   Tamanho	Use as setas para cima e para baixo para ajustar o tamanho dos botões.
   Posicionamento	Especifique se os botões aparecem à esquerda ou à direita dos títulos do acordeão.
   Cor	Use o seletor de cores (quadrado quadriculado) para selecionar uma cor ou insira o código de cor que representa a cor que você deseja exibir. Todas as cores HTML são compatíveis. Para obter mais informações, consulte Nomes de cores HTML .

4. Para adicionar mais painéis ao acordeão, clique em Adicionar item , localizado em Configurações > Propriedades.

Configure o estilo acordeão, como cor de fundo ou borda. Clique no contêiner de componente externo (acordeões) para configurar todos os painéis de uma só vez. Para configurar painéis individuais, clique nos respectivos contêineres.

5. Navegue até Configurações para definir as seguintes configurações de estilo:

   Tabela 2. Configurações de estilo

   Campo Configurações	Descrição
   Estilização
   Cor de fundo	Use o seletor de cores (quadrado quadriculado) para selecionar uma cor ou insira o código de cor que representa a cor de fundo que você deseja exibir. Todas as cores HTML são compatíveis. Para obter mais informações, consulte Nomes de cores HTML .
   Estilo avançado
   Largura	Especifique o valor inserindo um número ou arrastando o lado direito da célula. Selecione a unidade de medida: pixel percentual: percentual
   Preenchimento	Preenchimento é o espaço entre o conteúdo e a borda de um elemento. Especifique o valor para preenchimento superior, inferior, direito ou esquerdo inserindo um número.
   Margem	Margem é o espaço entre uma linha e outro elemento/o limite da tela. Especifique o valor para preenchimento superior, inferior, direito ou esquerdo inserindo um número.
   Borda	Edite a borda ao redor da parte externa do botão. Nota: A borda é o contorno ao redor do botão. Largura: Use as setas para cima e para baixo para ajustar a largura da borda. Assim como a largura e a altura, você pode escolher a unidade de medida de sua preferência selecionando a tecla de seta única para baixo à esquerda das setas para cima e para baixo. Estilo: O formato da borda ao redor do botão. Selecione o menu suspenso para selecionar o tipo de borda desejado ao redor do botão. Cor: A cor da borda ao redor do botão. Selecione a cor do seu botão usando a paleta de cores e as barras deslizantes semelhantes a como você seleciona a cor de fundo.
   Raio da borda	Use as setas para cima e para baixo para ajustar o raio da borda. Assim como a largura e a altura, você pode escolher a unidade de medida de sua preferência selecionando a tecla de seta única para baixo à esquerda das setas para cima e para baixo.

Formatar texto do título do acordeão.

6. Para formatar o texto do título do acordeão, clique em Título do acordeão e navegue até Configurações > Estilização seção.

   Tabela 3. Configurações de estilo de título acordeão

   Campo Configurações	Descrição
   Estilização
   Estilo de texto	Permite que você mude rapidamente a aparência do texto selecionando uma opção pré-formatada. Você pode selecionar diferentes títulos ou estilos de parágrafo. O título 1-6 corresponde a marcadores HTML h1 a h6.
   Cor do texto	Use este menu suspenso para mudar a cor do texto. Suas escolhas são: Primário: A cor primária definida pelo tema do portal. Mudo: A cor definida pelo tema do portal. Branco: Muda a cor do texto para branco. Isso é útil ao usar uma cor de fundo diferente de branco. A cor do texto atribui classes CSS predefinidas para a cor do texto.
   Exibição	Configure a aparência de vários componentes na mesma coluna, como uma imagem e um componente de texto. Selecione uma das seguintes opções: Parte superior e inferior (Padrão): A imagem aparece acima do outro componente. Lado a lado : A imagem aparece com o outro componente ao lado dela. Nota: Para obter melhores resultados, defina a mesma exibição para os componentes. Por exemplo, se você tiver uma imagem e componentes de texto em uma coluna e quiser que a imagem apareça à esquerda e o texto apareça à direita, altere Exibição configurações de ambos os componentes para Lado a lado .
   Alinhar	Determina o alinhamento horizontal do texto. Escolha entre: Justificar à esquerda Justificar centralizar Justificar à direita Justificar (o texto está alinhado com as duas margens)
   Estilo avançado
   Preenchimento	Preenchimento é o espaço entre o conteúdo e a borda de um elemento. Especifique o valor para preenchimento superior, inferior, direito ou esquerdo inserindo um número.
   Margem	Margem é o espaço entre uma linha e outro elemento/o limite da tela. Especifique o valor para preenchimento superior, inferior, direito ou esquerdo inserindo um número.
   Nome da fonte	Define a face da fonte usada para renderizar caracteres. Clique na seta suspensa para selecionar uma fonte diferente.
   Tamanho da fonte	Define o tamanho da fonte.
   Peso da fonte	Determina como o texto será exibido em negrito ou claro. Clique na seta suspensa para selecionar um peso diferente.
   Altura da linha	Define a distância vertical entre duas linhas de texto.
   Cor da fonte	Substitui a cor da fonte do tema do portal. Para selecionar uma cor, insira o código hexadecimal ou clique no seletor de cores (quadrado cinza à direita da cor da fonte) e selecione uma cor na paleta de cores.

7. Crie o conteúdo do acordeão adicionando imagens, vídeos, texto ou links aos painéis.
8. Selecione Salvar ou Salvar e Concluir .
   Selecionando Salvar salva seu conteúdo e você permanece no Editor de conteúdo avançado tela. Selecionando Salvar e Concluir salva seu registro e retorna para Novo conteúdo formulário.

O que Fazer Depois

• (Opcional) Traduza seu conteúdo.

  Solicite tradução de idioma para o seu conteúdo. Para obter mais informações, consulte Suporte multilíngue na Biblioteca de conteúdo.

  Nota:

  Traduza o conteúdo somente depois de terminar de modificar o conteúdo. Para obter melhores resultados, não recomendamos adicionar ou remover componentes ou alterar a formatação após a tradução.

  Para criar conteúdo avançado formatado de forma diferente em diferentes idiomas, duplique o conteúdo e modifique a formatação conforme necessário. Em seguida, use Públicos para direcionar o conteúdo para os usuários por idioma. Veja Públicos

• Visualize seu conteúdo do Publicar guia.
  Nota:

  A Visualização de conteúdo foi projetada para fornecer uma ideia geral da aparência do seu conteúdo. Depois de publicado, o conteúdo pode ter uma aparência diferente devido a variações na resolução do dispositivo, na diferença do tema ou na configuração do estilo do aplicativo para celular.
• Configure um plano de publicação para controlar onde o conteúdo é entregue, o público e o período de tempo em que ele está disponível: Crie um plano de publicação para seu conteúdo.