Layouts de coluna

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 10 min. de leitura

    • Os layouts de coluna são usados para projetar e organizar Construtor de IUpáginas.

    Este vídeo mostra como executar o procedimento a seguir.

    Os layouts de coluna permitem que você crie páginas úteis e visualmente atraentes em uma experiência. Um layout de coluna é um tipo de contêiner flexível que pode conter componentes. Os layouts de coluna são layouts simples pré-configurados, permitindo que você projete uma página eficiente e atraente rapidamente. É útil definir e definir a estrutura da página com layouts de coluna antes de adicionar componentes.

    Os layouts de coluna podem ter colunas de larguras iguais ou diferentes.

    Exemplos de layouts de coluna disponíveis no Construtor de IU.

    Você pode configurar o layout da coluna como um todo e as colunas individuais no layout. Por exemplo, defina uma largura e cor de borda diferentes para um layout de coluna e para as colunas individuais no layout.

    Página do Construtor de IU com um layout de coluna única contendo um cabeçalho e, em seguida, um layout de três colunas abaixo.

    Nota:
    Não há suporte para ocultar/mostrar colunas em um layout de coluna com base em condições.

    Adicione um layout de coluna

    Adicione um layout de coluna em Construtor de IUpara criar estrutura e organizar componentes em uma página de experiência.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página em Construtor de IU ou abra uma página.
    4. Selecione - Adicionar conteúdo na árvore de conteúdo.
    5. Selecione um dos Básico opções no Layouts .
      Menu de componente flutuante no Construtor de IU com a guia layouts exibida listando as opções básicas de layout da coluna.
      O layout da coluna aparece na fase para que você possa adicionar componentes às colunas. Para obter mais informações, consulte Adicionar e configurar componentes.Layout de coluna com três colunas vazias.
    6. Adicione layouts de coluna adicionais acima ou abaixo.
      • Na árvore de conteúdo, selecione e mantenha pressionado (ou clique com o botão direito do mouse) em um nome de layout de coluna ou selecione o ícone Menu para um layout de coluna. Em seguida, selecione Adicionar antes ou Adicionar após na lista e selecione um layout.

        Árvore de conteúdo com o ícone de menu de layout de coluna selecionado mostrando as opções para adicionar antes ou depois do layout de coluna selecionado.

      • Na fase, selecione um layout de coluna e, em seguida, selecione o sinal de adição na parte superior ou inferior.

        Layout de duas colunas existente com ícones de sinal de adição para adicionar layouts de coluna adicionais.

    Configure layouts de coluna

    Configure layouts de coluna em Construtor de IUpara adicionar o número apropriado de colunas e a aparência desejada em uma página de experiência.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página em Construtor de IU ou abra uma página.
    4. Se a página ainda não contiver um layout de coluna, Adicione um layout de coluna.
    5. Adicione (até no máximo seis) colunas usando a árvore de conteúdo, a fase ou o painel de configuração.
      • Na árvore de conteúdo, selecione e mantenha pressionado (ou clique com o botão direito do mouse) no nome de uma coluna ou selecione o ícone Menu de uma coluna e selecione Adicione coluna antes ou Adicione coluna após da lista.

        Árvore de conteúdo com o ícone de menu de coluna selecionado mostrando as opções para adicionar uma coluna antes ou depois da coluna selecionada.

      • Na fase, selecione uma única coluna, selecione o ícone Menu ao lado do nome da coluna e selecione Adicione coluna antes ou Adicione coluna após da lista.

        Fase mostrada com o ícone de menu de coluna selecionado mostrando as opções para adicionar uma coluna antes ou depois da coluna selecionada.

      • Na fase, selecione e segure (ou clique com o botão direito do mouse) em uma coluna e selecione Adicione coluna antes ou Adicione coluna após da lista.

        Fase mostrada com o menu de coluna aberto e setas pretas apontando para as opções para adicionar uma coluna antes ou depois da coluna selecionada.

      • Na árvore de conteúdo, selecione um layout de coluna e, em seguida, na fase, selecione o ícone de mais para adicionar colunas ao lado direito do layout de coluna.

        Fase mostrada com um layout de coluna selecionado e uma seta preta apontando para o ícone de mais para adicionar colunas adicionais.

      • Na árvore de conteúdo, selecione um layout de coluna e, em seguida, no painel de configuração, use o ícone de mais ao lado de Colunas para adicionar colunas ao lado direito do layout da coluna.

        Painel de configuração de layout de coluna com seta preta apontando para a opção de colunas de layout.

      Nota:
      As colunas podem ser aninhadas umas dentro das outras, mas esse nível de complexidade não é frequentemente necessário nas páginas.
    6. Renomeie uma coluna editando o rótulo da coluna na árvore de conteúdo, na fase ou no painel de configuração.
      • Na árvore de conteúdo, selecione e mantenha pressionado (ou clique com o botão direito do mouse) no nome de uma coluna ou selecione o ícone Menu de uma coluna e selecione Renomeie .
      • Na fase, selecione o ícone Menu ao lado de um nome de coluna e selecione Renomeie .
      • No painel de configuração, selecione o ícone de informações ao lado do nome da coluna.

        Seta que aponta para o ícone de informações do nome da coluna do painel de configuração e a janela pop-up expandida mostrando o campo do rótulo da coluna.

      Renomear colunas pode ajudar você a distinguir entre diferentes colunas na fase e na árvore de conteúdo. Se você tiver uma página complexa com muitos layouts de coluna e colunas, será útil renomear colunas.
    7. Para mudar a largura de uma coluna em um layout, selecione o layout da coluna (na árvore de conteúdo ou na fase) e arraste um divisor de coluna na fase para a esquerda ou direita para tornar a coluna mais estreita ou mais larga.
      Animação mostrando como redimensionar uma coluna arrastando o divisor de coluna.
      As porcentagens de largura na parte superior das colunas mudam automaticamente conforme você arrasta o divisor de coluna. As porcentagens somam 100%. Ao redimensionar uma coluna, esteja ciente de quanto espaço o componente ou componentes na coluna precisam. Por exemplo, os componentes de lista e formulário geralmente não são exibidos bem em colunas estreitas.
    8. Distribua colunas em um layout uniformemente na horizontal usando a árvore de conteúdo, a fase ou o painel de configuração.
      • Na árvore de conteúdo, selecione e mantenha pressionado (ou clique com o botão direito do mouse) em um nome de layout de coluna ou selecione o ícone Menu de um layout de coluna e selecione Distribua colunas uniformemente da lista.
      • Na fase, selecione um layout de coluna, selecione o ícone Menu ao lado do nome do layout da coluna e selecione Distribua colunas uniformemente da lista.
      • Selecione um layout de coluna (na árvore de conteúdo ou na fase) e, no painel de configuração, selecione Distribua colunas uniformemente .
    9. Reorganize colunas (incluindo seu conteúdo) em um layout de coluna usando a árvore de conteúdo ou a fase.
      • Na árvore de conteúdo, selecione a coluna e arraste-a para uma posição diferente (uma linha horizontal azul mostra onde a coluna pode ser solta).

        Seta apontando da coluna na árvore de conteúdo para o novo local na árvore indicado por uma linha horizontal azul.

      • Na fase, selecione um cabeçalho de coluna, arraste a coluna para uma posição diferente e solte a coluna na zona de soltar definida por uma linha magenta vertical.

        Seta apontando do cabeçalho da coluna no palco para uma zona para soltar indicada por uma barra vertical magenta.

      Se você reordenar a coluna na árvore de conteúdo, a fase será atualizada e, se você reordenar na fase, a árvore de conteúdo será atualizada.
    10. Especifique a quantidade de espaço entre colunas da árvore de conteúdo, da fase ou do painel de configuração.
      • Na árvore de conteúdo, selecione e mantenha pressionado (ou clique com o botão direito do mouse) em um nome de layout de coluna ou selecione o ícone Menu para um layout de coluna e selecione Layout na lista e selecione uma opção de tamanho em Espaço da coluna .
      • Na fase, selecione um layout de coluna, selecione o ícone Menu ao lado do nome do layout da coluna e selecione Layout na lista e selecione uma opção de tamanho em Espaço da coluna .
      • Selecione um layout de coluna (na árvore de conteúdo ou na fase) e, no painel de configuração, selecione uma opção de tamanho em Espaço da coluna .

        Painel de componente com campo de espaçamento de coluna expandido para mostrar opções.

    11. Selecione o ícone Árvore para navegar até uma camada diferente de conteúdo, por exemplo, de uma coluna para o layout da coluna primária ou um componente secundário.
      Seta apontando para o ícone de árvore para navegar por layouts de coluna, colunas e componentes no palco.
    12. Exclua colunas da árvore de conteúdo ou da fase.
      • Na árvore de conteúdo, selecione e mantenha pressionado (ou clique com o botão direito do mouse) no nome de uma coluna ou selecione o ícone Menu de uma coluna e selecione Excluir coluna da lista.
      • Na fase, selecione uma única coluna, selecione o ícone Menu ao lado do nome da coluna e selecione Excluir coluna da lista.
      • Na árvore de conteúdo, selecione um layout de coluna e, em seguida, no painel de configuração, use o ícone - menos ao lado de Colunas para remover colunas do lado direito do layout de coluna.
      Para obter informações sobre como editar o espaçamento da coluna, consulte Defina o espaço entre os componentes nas colunas.

    Defina o espaço entre os componentes nas colunas

    Em Construtor de IU, se uma coluna contiver vários componentes, defina o espaço entre os componentes.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página em Construtor de IU ou abra uma página.
    4. Se a página ainda não contiver um layout de coluna, Adicione um layout de coluna.
    5. Em uma única coluna, adicione dois componentes
      1. Na árvore de conteúdo, identifique uma coluna e selecione - Adicionar conteúdo no nome da coluna.
      2. Na janela da caixa de ferramentas, selecione um componente, por exemplo, Avatar .
      3. Na árvore de conteúdo, mova o mouse sobre o nome do componente que você acabou de adicionar, selecione o ícone Abrir menu (três pontos verticais) e selecione Adicionar após .
        Na árvore de conteúdo, uma seta apontando para o ícone de menu Abrir para o componente de avatar e uma segunda seta apontando para a opção Adicionar após no menu flutuante.
      4. Na janela da caixa de ferramentas, selecione outro componente, por exemplo, Botão .
    6. Selecione Save (Salvar).
    7. Na árvore de conteúdo, selecione a coluna à qual você adicionou os dois componentes.
    8. No painel de configuração, selecione uma opção de tamanho em Lacuna .
      No painel de configuração, uma seta apontando para o campo de lacuna e uma segunda seta apontando para o menu suspenso de lacuna com vários tamanhos listados.
    9. Para especificar um tamanho exato do espaço em pixels, mova o mouse sobre Lacuna , selecione Usar valor personalizado (lápis) e digite um número, por exemplo, 300px .
      No painel de configuração, uma seta preta apontando para o campo de lacuna e uma segunda seta preta apontando para o ícone Usar valor personalizado.
    10. Para alternar entre empilhar os componentes e colocá-los próximos uns dos outros na coluna, selecione Linha ou Coluna ícone em Direção .
      No painel de configuração, uma seta preta apontando para o campo Direção e uma segunda seta preta apontando para os ícones de linha e coluna.

      Para reverter a ordem e o posicionamento dos componentes na coluna, selecione Avançado (três pontos horizontais) em Direção e, em seguida, selecione Reverta opção.

      No painel de configuração, uma seta preta apontando para o campo de direção e uma segunda seta preta apontando para o ícone de direção avançada.

    Defina opções avançadas de layout de coluna

    Defina opções avançadas de layout de coluna em Construtor de IUincluindo largura da pilha e altura do layout da coluna.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Procedimento

    1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
    3. Crie uma página em Construtor de IU ou abra uma página.
    4. Se a página ainda não contiver um layout de coluna, Adicione um layout de coluna.
    5. Selecione um layout de coluna que contenha duas ou mais colunas na árvore de conteúdo.
      Árvore de conteúdo com o layout de coluna um selecionado.
    6. Para definir uma largura de pilha, acesse Painel de configuração > Layout e selecione Mostrar opções de layout avançadas .
      Nota:
      A configuração de uma largura de pilha permite que você controle como uma página com layouts de coluna será exibida em uma janela estreita do navegador, tablet ou dispositivo móvel.
      Painel de configuração com seta preta apontando para mostrar o link de opções avançadas de layout.
    7. Digite uma largura em Empilhar colunas abaixo .
    8. Selecione Save (Salvar).
    9. Para testar a largura da pilha atualizada, selecione a seta ao lado de Visualização e selecione Abrir caminho do URL .
    10. Reduza a largura da janela do navegador para menos do que a largura da pilha especificada para verificar se as colunas à direita se movem abaixo da primeira coluna.
    11. Feche a guia do navegador que abriu com o caminho do URL.
    12. Para controlar a altura do layout da coluna, selecione um layout de coluna com duas ou mais colunas na árvore de conteúdo, acesse Painel de configuração > Layout e selecione Mostrar opções de layout avançadas .
      Nota:
      A definição da altura é útil se o layout da coluna contiver um componente que pode ser alto, como o componente Lista.
    13. Em Dimensionamento , digite números em uma ou mais das opções ( Altura , Mín. . , e. Máx. . ) e defina a unidade de dimensionamento (por exemplo, px , % , ou em ).
      Painel de configuração com seta preta apontando para a opção de dimensionamento avançado.
    14. Selecione Save (Salvar).
    15. Para testar o dimensionamento atualizado, selecione a seta ao lado de Visualização e selecione Abrir caminho do URL .
    16. Reduza e expanda a altura da janela do navegador para testar os valores especificados.
    17. Feche a guia do navegador que abriu com o caminho do URL.