Adicione 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 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.

    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.
    1. 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 .
    2. 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.
    1. 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.
    1. 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.
    2. Crie o conteúdo do acordeão adicionando imagens, vídeos, texto ou links aos painéis.
    3. 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.