Adicionar um acordeão com o Editor de conteúdo avançado

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 6 min. de leitura

    • Adicione um componente de 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 novos campos de formulário de conteúdo. Veja Criar conteúdo avançado

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

    Procedimento

    1. Navegue até a tela selecionando o botão Abrir editor na guia Design do novo formulário de conteúdo.
    2. Arraste e solte o componente acordeão na tela.
    Configure o comportamento do componente acordeão e o design do botão/alternância e adicione mais painéis.
    1. Navegue até o Configurações > Propriedades seção para configurar o componente do 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 A seleção desta 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 A seleção desta 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 será fechado automaticamente.
      Design de botão
      Estilo Selecione o estilo do botão de 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) para selecionar uma cor ou insira o código de cor que representa a cor que você deseja que apareça.

      Todas as cores HTML são compatíveis. Para obter mais informações, consulte Nomes de cores HTML.
    2. Para adicionar mais painéis ao acordeão, clique em Adicionar item, localizado em Configurações > Propriedades.
    Configure o estilo do acordeão, como cor de fundo ou borda. Clique no contêiner do componente externo (Acordeões) para configurar todos os painéis de uma vez. Para configurar painéis individuais, clique nos respectivos contêineres.
    1. Navegue até o painel 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) para selecionar uma cor ou insira o código de cor que representa a cor de fundo que você deseja que apareça.

      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
      • %: percentual
      Preenchimento Preenchimento é o espaço entre o conteúdo e a borda de um elemento. Especifique o valor do 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 do 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 botão usando a paleta de cores e as barras deslizantes, semelhante à forma 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.
    Formate o texto do título do acordeão.
    1. Para formatar o texto do título do acordeão, clique no contêiner Título do acordeão e navegue até o Configurações > Estilização seção.
      Tabela 3. Configurações de estilo do título do acordeão
      Campo de 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 aos marcadores HTML h1 - h6.
      Cor do texto Use esta lista suspensa para mudar a cor do texto.
      Suas opções são:
      • Primária: a cor primária definida pelo tema do portal.
      • Silenciado: 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:
      • Superior e inferior (padrão): a imagem aparece acima do outro componente.
      • Lado a lado: a imagem aparece com o outro componente ao lado.
      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 à direita, altere as configurações de exibição de ambos os componentes para Lado a lado.
      Alinhar Determina o alinhamento horizontal do seu texto. Escolha entre:
      • Justificar à esquerda
      • Centralizar justificativa
      • Justificar à direita
      • Justificar (o texto está alinhado com ambas as margens)
      Estilo avançado
      Preenchimento Preenchimento é o espaço entre o conteúdo e a borda de um elemento. Especifique o valor do 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 do 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 o quão negrito ou claro o texto aparece.

      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.
    2. Crie o conteúdo do acordeão adicionando imagens, vídeos, texto ou links aos painéis.
    3. Selecione Salvar ou Salvar e concluir.
      Selecionar Salvar salvará seu conteúdo e você permanecerá na tela do Editor de conteúdo avançado. Selecionar Salvar e concluir salva seu registro e retorna para o formulário de conteúdo Novo.

    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:
      Somente traduza o conteúdo depois de terminar de modificar o conteúdo. Para obter melhores resultados, não recomendamos que você adicione ou remova componentes ou altere a formatação após a tradução.

      Para criar conteúdo avançado com formatação 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 usuários por idioma. Veja Públicos

    • Visualize seu conteúdo na guia 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 ter uma aparência diferente depois de publicado devido a variações na resolução do dispositivo, diferença de tema ou configuração de 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: Criar um plano de publicação para o seu conteúdo.