---
sourceDocument: Yokohama Employee Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/employee-service-management

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Yokohama Employee Service Management

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

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

# Adicione um Acordeão com o Editor de Conteúdo Avançado {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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](https://servicenow-prod.fluidtopics.net/ffs50BrToVgNm5QEac0icg "Use o Editor de conteúdo avançado para criar conteúdo de formato longo com uma ferramenta de estilo web fácil de usar.")  
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](https://servicenow-prod.fluidtopics.net/XaLRwok~oLyO2MSSuGALIg "Use módulos para adicionar facilmente novos layouts de conteúdo com cabeçalhos, texto de parágrafo e imagens. Escolha entre layouts compostos por três cartões verticais, três cartões horizontais ou uma configuração lado a lado com uma imagem posicionada à direita de um bloco de texto.")
* As colunas são contêineres que permitem definir um layout personalizado. Veja [Adicione colunas com o Editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/uD3etZHAViNVinc22IfWNA "Use o. Editor de conteúdo avançado tela para criar colunas para ajudar a definir e organizar o layout da sua página.")
{#ec-rich-content-editor-accordion__ul_jzv_qft_wxb}

## 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çõesPropriedades seção para configurar o componente acordeão:  
   {#ec-rich-content-editor-accordion__table_qf1_vlw_cdc__entry__2}

   | 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](https://htmlcolorcodes.com/color-picker/). |
   [Tabela 1. Configurações de propriedades do acordeão]

   {#ec-rich-content-editor-accordion__table_qf1_vlw_cdc}
4. Para adicionar mais painéis ao acordeão, clique em Adicionar item , localizado em ConfiguraçõesPropriedades.

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:  
   {#ec-rich-content-editor-accordion__table_zx2_tgw_jyb__entry__2}

   | 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](https://htmlcolorcodes.com/color-picker/). |
   | 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 {#ec-rich-content-editor-accordion__ul_z1t_33z_z5b} |
   | 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. |
   [Tabela 2. Configurações de estilo]

   {#ec-rich-content-editor-accordion__table_zx2_tgw_jyb}

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çõesEstilização seção.  
   {#ec-rich-content-editor-accordion__table_pm1_w4w_cdc__entry__2}

   | 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. {#ec-rich-content-editor-accordion__ul_mfb_k5h_vvb} 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. {#ec-rich-content-editor-accordion__ul_f4z_hxk_gvb} 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) {#ec-rich-content-editor-accordion__ul_j3v_plj_bvb} |
   | 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. |
   [Tabela 3. Configurações de estilo de título acordeão]

   {#ec-rich-content-editor-accordion__table_pm1_w4w_cdc}
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](https://servicenow-prod.fluidtopics.net/W_gQ~dPXNXEurii9LC462Q "A Biblioteca de conteúdo inclui dois recursos para criação de conteúdo multilíngue: Traduzir conteúdo (fluxo de trabalho de tradução de conteúdo) e Alternar idioma (muda o idioma da interface).").{#ec-rich-content-editor-accordion__p_vtc_nfg_h1c}

  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](https://servicenow-prod.fluidtopics.net/hB9RlmxHCy2kAeRoWfJddw "Segmente o conteúdo do portal e as atividades de evento de ciclo de vida para públicos especificados com registros de público.")
* 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](https://servicenow-prod.fluidtopics.net/zC7MinePYIEkTxAkvExrlQ "Depois de criar conteúdo na Biblioteca de conteúdo, adicione um ou mais planos de publicação para controlar onde o conteúdo será entregue, o público e o período de tempo em que ficará disponível.").
{#ec-rich-content-editor-accordion__ul_ogf_pv5_nyb}