Adicionar colunas com o Editor de conteúdo avançado

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 2 min. de leitura

    • Use a tela do Editor de conteúdo avançado para criar colunas para ajudar a definir e organizar o layout da página.

    Antes de Iniciar

    Função necessária: sn_cd.content_manager

    Depois de preencher o formulário de Novo conteúdo (consulte Criar conteúdo avançado) e navegar até a tela 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 é de 75px. Se você definir a altura da célula menor, a célula estourará a linha.

    Procedimento

    1. Navegue até a tela selecionando o botão Abrir editor na guia Design do formulário Novo conteúdo.
    2. Na tela do 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.

      Editor de conteúdo avançado - Tela e colunas

      Depois de soltar 1 coluna, 2 colunaou 3 coluna na tela do Editor de conteúdo avançado, dois separadores são exibidos. O separador externo é rotulado como Linha. O separador interno é rotulado como Célula.

    Adicione um estilo à linha ou às células, como cor de fundo, largura máxima ou preenchimento. Se você não quiser adicionar estilo, poderá prosseguir para os links na parte inferior desta página.
    1. Selecione uma linha ou célula para editar.
    2. Navegue até a guia Configurações.
    3. Use qualquer uma das seguintes configurações de estilo:
      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.
      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
      Altura Especifique o valor inserindo um número ou arrastando a parte inferior da linha.
      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 (somente para linhas) 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 (somente para células) Defina a largura, o estilo de 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.
    4. 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: