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

Adicione um componente acordeão à tela para criar 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 Crie 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 Abra o editor do Design da 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 de 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 (acordeons) 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 de 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: px: pixel %: porcentagem
   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	A 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 para baixo única à 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 do plano 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 para baixo única à esquerda das setas para cima e para baixo.

Formate o 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 de configurações	Descrição
   Estilização
   Estilo de texto	Permite que você mude rapidamente a aparência do seu 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 - h6.
   Cor do texto	Use este menu suspenso para mudar a cor do seu texto. Suas escolhas são: Primária: 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 do branco. A cor do texto atribui classes CSS predefinidas para a cor do texto.
   Tela	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: 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 componentes de imagem e texto em uma coluna e quiser que a imagem apareça à esquerda e o texto apareça à direita, altere o. Exibição configurações de ambos os componentes para Lado a lado .
   Alinhar	Determina o alinhamento horizontal do texto. Escolha entre: 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	A 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 Salve e conclua .
   Selecionando Salvar salva seu conteúdo e você permanece no Editor de conteúdo avançado tela. Selecionando Salve e conclua salva seu registro e retorna para Novo conteúdo formulário.

O que Fazer Depois

• (Opcional) Traduza seu conteúdo.

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

  Nota:

  Apenas traduza o conteúdo 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 idiomas diferentes, 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 .
  Nota:

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