Layouts de coluna

Layouts de coluna são usados para projetar e organizar páginas Construtor de IU.

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

Os layouts de coluna permitem criar 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 que são 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.

Você pode configurar o layout de 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.

Nota:

Atualmente, não há suporte para ocultar/mostrar colunas em um layout de coluna com base em condições.

Adicionar um layout de coluna

Adicione um layout de coluna em Construtor de IU para 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é Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU ou abrir uma página.
4. Selecione + Adicionar componente na árvore de conteúdo.
5. Selecione uma das opções Básicas na guia Layouts.
   
   O layout de coluna aparece na fase para que você possa adicionar componentes às colunas. Para obter mais informações, consulte Adicionar e configurar componentes.
6. Adicione layouts de coluna adicionais acima ou abaixo.
   • Na árvore de conteúdo, mantenha a seleção (ou clique com o botão direito do mouse) em um nome de layout de coluna ou selecione o ícone de menu para um layout de coluna. Em seguida, selecione Adicionar antes ou Adicionar depois na lista e selecione um layout.

     

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

     

Configurar layouts de coluna

Configure layouts de coluna em Construtor de IU para 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é Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU ou abrir uma página.
4. Se a página ainda não contiver um layout de coluna, Adicionar um layout de coluna.
5. Adicione (até um máximo de seis) colunas usando a árvore de conteúdo, a fase ou o painel de configuração.
   • Na árvore de conteúdo, mantenha a seleção (ou clique com o botão direito do mouse) em um nome de coluna ou selecione o ícone de menu de uma coluna e selecione Adicionar coluna antes ou Adicionar coluna após na lista.

     

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

     

   • Na fase, mantenha a seleção (ou clique com o botão direito do mouse) em uma coluna e selecione Adicionar coluna antes ou Adicionar coluna após na lista.

     

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

     

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

     

   Nota:

   As colunas podem ser aninhadas uma dentro da outra, mas esse nível de complexidade geralmente não é 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, mantenha selecionada (ou clique com o botão direito do mouse) o nome de uma coluna ou selecione o ícone de menu de uma coluna, selecione Renomear.
   • Na fase, clique no ícone Menu ao lado de um nome de coluna e selecione Renomear.
   • No painel de configuração, selecione o ícone de informações ao lado do nome da coluna.
   Renomear colunas pode ajudar 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 as colunas.
7. Para mudar a largura de uma coluna em um layout, selecione o layout de coluna (na árvore de conteúdo ou na fase) e arraste um divisor de coluna na fase para a esquerda ou para a direita para tornar a coluna mais estreita ou mais larga.
   
   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 dentro da coluna precisam. Por exemplo, os componentes de lista e de 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, mantenha a seleção (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 Distribuir colunas uniformemente na lista.
   • Na fase, selecione um layout de coluna, clique no ícone Menu ao lado do nome do layout de coluna e selecione Distribuir colunas uniformemente na lista.
   • Selecione um layout de coluna (na árvore de conteúdo ou na fase) e, no painel de configuração, selecione Distribuir colunas uniformemente.
9. Reordene as 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 nova posição (uma linha horizontal azul mostra onde a coluna pode ser solta).
   • Na fase, selecione um cabeçalho de coluna, arraste a coluna para uma nova posição e solte a coluna na zona para soltar definida por uma linha vertical vertical.
   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 as colunas da árvore de conteúdo, da fase ou do painel de configuração.
    • Na árvore de conteúdo, mantenha a seleção (ou clique com o botão direito do mouse) em um nome de layout de coluna ou selecione o ícone de menu para um layout de coluna, selecione Layout na lista e selecione uma opção de tamanho em Lacuna de coluna.
    • Na fase, selecione um layout de coluna, clique no ícone Menu ao lado do nome do layout de coluna, selecione Layout na lista e selecione uma opção de tamanho em Espaço na 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 Lacuna de coluna.
11. Selecione o ícone Árvore para navegar para uma camada diferente de conteúdo, por exemplo, de uma coluna para o layout de coluna primária ou um componente secundário.
    
12. Exclua colunas da árvore de conteúdo ou da fase.
    • Na árvore de conteúdo, mantenha selecionado (ou clique com o botão direito do mouse) um nome de coluna ou selecione o ícone de menu de uma coluna e selecione Excluir coluna na lista.
    • Na fase, selecione uma única coluna, clique no ícone Menu ao lado do nome da coluna e selecione Excluir coluna na lista.
    • Na árvore de conteúdo, selecione um layout de coluna e, no painel de configuração, use o ícone - menos ao lado de Colunas para remover colunas do lado direito do layout de coluna.

Definir lacuna entre e nas colunas

Defina a lacuna entre as colunas em um layout de coluna em Construtor de IU. Se uma coluna contiver vários componentes, defina a lacuna horizontal ou vertical entre os componentes.

Antes de Iniciar

Função necessária: ui_builder_admin

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU ou abrir uma página.
4. Se a página ainda não contiver um layout de coluna, Adicionar um layout de coluna.
5. Especifique a quantidade de espaço entre as colunas da árvore de conteúdo, da fase ou do painel de configuração.
   • Na árvore de conteúdo, mantenha a seleção (ou clique com o botão direito do mouse) em um nome de layout de coluna ou selecione o ícone de menu para um layout de coluna, selecione Layout na lista e selecione uma opção de tamanho em Lacuna de coluna.
   • Na fase, selecione um layout de coluna, clique no ícone Menu ao lado do nome do layout de coluna, selecione Layout na lista e selecione uma opção de tamanho em Espaço na 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 Lacuna de coluna.
6. Para especificar a quantidade de espaço entre vários componentes em uma única coluna, selecione a coluna na árvore de conteúdo.
7. No painel de configuração, selecione uma opção de tamanho em Espaço.
8. Para alternar entre empilhar os componentes e colocá-los um ao lado do outro, selecione o ícone Linha ou Coluna em Direção.

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

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

Antes de Iniciar

Função necessária: administrador

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Criar uma página no Construtor de IU ou abrir uma página.
4. Se a página ainda não contiver um layout de coluna, Adicionar um layout de coluna.
5. Selecione um layout de coluna com pelo menos duas colunas na árvore de conteúdo.
   
6. Para definir uma largura de pilha, vá para Painel de configuração > Layout e selecione Mostrar opções de layout avançadas.
   Nota:

   Definir uma largura de pilha permite que você controle a aparência de uma página com layouts de coluna em uma janela estreita do navegador, tablet ou dispositivo móvel.

   
7. Digite uma largura em Empilhar colunas abaixo.
8. Selecione Salvar.
9. Para testar a nova largura da pilha, selecione a seta ao lado de Visualização e selecione Abrir caminho de URL.
10. Reduza a largura da janela do navegador para menos do que a largura da pilha que você especificou para verificar se as colunas à direita se movem abaixo da primeira coluna.
11. Feche a guia do navegador que foi aberta com o caminho da URL.
12. Para controlar a altura do layout de coluna, selecione um layout de coluna com pelo menos duas colunas na árvore de conteúdo, vá para Painel de configuração > Layoute selecione Mostrar opções de layout avançadas.
    Nota:

    Definir a altura será útil se o layout da coluna contiver um componente que possa ser alto, como o componente Lista.
13. Em Dimensionamento, digite números em uma ou mais das opções (Altura, Mín. He Máx. H) e defina a unidade de dimensionamento (por exemplo, px, %ou em).
    
14. Selecione Salvar.
15. Para testar o novo dimensionamento, selecione a seta ao lado de Visualização e selecione Abrir caminho de URL.
16. Reduza e expanda a altura da janela do navegador para testar os valores especificados.
17. Feche a guia do navegador que foi aberta com o caminho da URL.