--- 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 colunas com o Editor de conteúdo avançado # Adicione colunas 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) 2 min. de leitura Use o. Editor de conteúdo avançado tela para criar colunas para ajudar a definir e organizar o layout da sua página. ## Antes de Iniciar Função necessária: sn_cd.content_manager Após concluir o. Novo conteúdo (consulte [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.")) E navegado até a tela de conteúdo avançado, você pode criar conteúdo avançado. Você pode adicionar 1, 2 ou 3 colunas. Cada coluna atua como um contêiner para outros componentes. Cada componente de coluna também pode ser editado selecionando o componente e atualizando as propriedades nas configurações. Nota: A altura mínima de uma célula em uma coluna é 75px. Se você definir a altura da célula menor, a célula transbordará a linha. ## Procedimento 1. Navegue até a tela selecionando Abra o editor do Design da Novo conteúdo formulário. 2. Em Editor de conteúdo avançado você pode usar um método de arrastar e soltar para adicionar colunas. As colunas atuam como contêineres para o conteúdo que você está criando. Depois de soltar um 1 coluna , 2 coluna , ou 3 coluna em Editor de conteúdo avançado tela, há dois separadores que aparecem. O separador externo é rotulado Linha . O separador interno é rotulado Célula . Adicione estilo à linha ou células, como cor de fundo, largura máxima ou preenchimento. Se você não quiser adicionar estilo, você pode prosseguir para os links na parte inferior desta página. 3. Selecione uma linha ou célula para editar. 4. Navegue até Configurações . 5. Use qualquer uma das seguintes configurações de estilo: {#ec-rich-content-canvas__table_zx2_tgw_jyb__entry__2} | Campo de configurações | Descrição | |-|-| | Estilização || | Cor de fundo | Use o seletor de cores (quadrado cinza) 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-canvas__ul_z1t_33z_z5b} | | Altura | Especifique o valor inserindo um número ou arrastando a parte inferior da linha. Selecione a unidade de medida: * px: pixel * %: porcentagem {#ec-rich-content-canvas__ul_dkg_mhw_jyb} | | 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 (somente para linhas) | 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 (somente para células) | Defina a largura, o estilo da borda e a cor. | | Raio da borda (somente para células) | A configuração de raio arredonda o canto da borda. | | Propriedades || | ID | Um ID exclusivo que identifica o elemento HTML. | | Título | Uma dica de ferramenta ou informações que aparecem quando um usuário passa o mouse sobre o componente. | [Tabela 1. Configurações de estilo] {#ec-rich-content-canvas__table_zx2_tgw_jyb} 6. Selecione Salvar. ## O que Fazer Depois Adicione e estilize mais colunas para criar um layout para todo o conteúdo da página. Em seguida, adicione componentes como imagens, vídeos, caixas de texto e botões: * [Adicione guias com o Editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/iaMO~0DdzyqjDtuSHbhz9Q "Adicione guias ao seu conteúdo avançado para ajudar os usuários a navegar com eficiência, permitindo que eles selecionem as várias guias para revelar o conteúdo associado dentro delas.") * [Adicione um divisor com o Editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/yuzN92PRL1TArthrEmnNgw "Adicione um divisor horizontal à sua tela para separar visualmente elementos ou destacar seções importantes.") * [Adicione uma imagem com o editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/hG93Pfj4_GIyzwbXQgX0Qw "Use o. Editor de conteúdo avançado tela para adicionar imagens ao seu conteúdo.") * [Adicione um vídeo com o editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/~W5aTQgEQzx3dwmSgVOzLw "Use o. Editor de conteúdo avançado tela para adicionar vídeos ao seu conteúdo.") * [Adicione texto ou uma seção de texto com o Editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/OQJS5UlB4VoiAtdJ6dVoKQ "Use a tela do Editor de conteúdo avançado para adicionar Texto ou um Seção de texto em seu conteúdo.") * [Adicione um link ou bloco de link com o Editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/pwjmtPQKm8op~SI27N1~pg "Use o. Editor de conteúdo avançado tela para adicionar um link ou um bloco de link para redirecionar os usuários para um conteúdo diferente ou uma página da web. R Link fornece uma caixa de texto e um Bloco de link permite adicionar uma imagem que atua como um link.") * [Adicione um botão com o Editor de conteúdo avançado](https://servicenow-prod.fluidtopics.net/VpBNiGt_9BmUKnLWoG9eCw "Adicione um botão para acionar ações ou redirecionar usuários para conteúdo diferente.") {#ec-rich-content-canvas__ul_ab5_2kw_jyb}