Adicionar uma tabela 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 uma tabela ao seu conteúdo para organizar as informações em linhas e colunas.

    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 da tabela na tela.
    3. Na janela Criar nova tabela, insira o número de colunas e linhas.
    4. Crie uma linha de cabeçalho de tabela navegando até Configurações > Propriedades e selecionando Habilitar cabeçalho.
    5. Para formatar o texto do título do cabeçalho, clique na caixa de texto na linha do cabeçalho e defina as seguintes configurações:
      Tabela 1. Configurações do cabeçalho da tabela
      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 Configura a aparência de vários componentes na mesma coluna, como uma imagem e um componente de texto.
      Nota:
      Essa configuração se aplica somente no caso de você adicionar outro componente ao lado da caixa de texto do título.
      Selecione uma das seguintes opções:
      • Lado a lado (padrão): o texto aparece com o outro componente ao lado dele.
      • Superior e inferior: a imagem aparece acima do outro componente.
      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.
    Clique em uma célula para definir as configurações dessa célula, como a cor de fundo ou a borda. Para definir as configurações de uma linha ou de todas as células da tabela, clique na seta para cima até que o contêiner desejado seja selecionado.A seta para cima seleciona o contêiner do componente selecionado no momento
    1. Defina as configurações de estilo da tabela:
      As opções de configurações variam, dependendo se você selecionou uma célula, linha ou a tabela inteira.
      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.
      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
      Largura

      Altura

      		 Ajuste a largura e a altura do componente usando os campos Largura e Altura.
      Você também 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. As opções são:
      • automático: o tamanho se baseia no conteúdo da guia. Se você inserir texto adicional na guia, a largura aumentará automaticamente.
      • px: use pixels como sua medição.
      • %: use uma porcentagem como sua medida.
      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.
    2. Com uma célula selecionada, use Configurações > Propriedades para adicionar ou excluir colunas ou linhas, mesclar células e mover linhas para cima ou para baixo.
      Selecione uma célula para adicionar colunas, linhas ou mesclar células
    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.