Layouts de coluna

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

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. Layouts de coluna são layouts simples que são pré-configurados, permitindo que você crie 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 dentro do 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é 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 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 conteúdo 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, selecione e mantenha pressionado (ou clique com o botão direito do mouse) um nome de layout de coluna ou selecione o ícone 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é 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 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é seis) colunas usando a árvore de conteúdo, a fase ou o painel de configuração.
   • Na árvore de conteúdo, mantenha selecionado (ou clique com o botão direito do mouse) o nome de uma coluna ou selecione o ícone de Menu para uma coluna e selecione Adicionar coluna antes ou Adicionar coluna após na lista.

     

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

     

   • Na fase, mantenha pressionada (ou clique com o botão direito do mouse) em uma coluna e selecione Adicionar coluna antes ou Adicionar coluna depois na lista.

     

   • Na árvore de conteúdo, selecione um layout de coluna e, na fase, selecione o + ícone de adição 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 selecionado (ou clique com o botão direito do mouse) o nome de uma coluna ou selecione o ícone Menu de uma coluna e selecione Renomear.
   • Na fase, selecione o ícone de 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, é útil renomear as colunas.
7. Para alterar 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 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 formulário geralmente não são exibidos corretamente 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 selecionado (ou clique com o botão direito do mouse) o nome de um layout de coluna ou selecione o ícone de Menu para um layout de coluna e selecione Distribuir colunas uniformemente na lista.
   • Na fase, selecione um layout de coluna, selecione o ícone de 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 o 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).

     

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

     

   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, selecione e mantenha pressionado (ou clique com o botão direito do mouse) o nome de um 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, selecione o ícone de Menu ao lado do nome do layout de coluna, selecione Layout na lista e selecione uma opção de tamanho em Lacuna de 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 até 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) o nome de uma coluna ou selecione o ícone de Menu para uma coluna e selecione Excluir coluna na lista.
    • Na fase, selecione uma única coluna, selecione o ícone de 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.
    Para obter informações sobre como editar o espaçamento de colunas, consulte Definir a lacuna entre os componentes em colunas.

Definir a lacuna entre os componentes em 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 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. Em uma única coluna, adicione dois componentes
   1. Na árvore de conteúdo, identifique uma coluna e selecione + Adicionar conteúdo sob o 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 de menu aberto (três pontos verticais) e selecione Adicionar após.
      
   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 Espaço.
   
9. Para especificar um tamanho de lacuna exato em pixels, mova o mouse sobre o campo Lacuna, selecione o ícone Usar valor personalizado (lápis) e digite um número, por exemplo, 300px.
   
10. Para alternar entre empilhar os componentes e colocá-los um ao lado do outro na coluna, selecione o ícone Linha ou Coluna em Direção.
    

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

    

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

Defina opções avançadas de layout de coluna em Construtor de IU, incluindo a largura da pilha e a altura do layout de 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 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 que contenha duas ou mais 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 avançadas de layout.
   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 nas colunas Pilha abaixo.
8. Selecione Save (Salvar).
9. Para testar a largura da pilha atualizada, selecione a seta ao lado de Visualizar e selecione Abrir caminho da 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 duas ou mais colunas na árvore de conteúdo, vá para Painel de configuração > Layoute selecione Mostrar opções avançadas de layout.
    Nota:

    Definir a altura será útil se o layout de coluna contiver um componente que pode ser alto, como o componente Lista.
13. Em Dimensionamento, digite números em uma ou mais opções (Altura, Mín. He Máx. H) e defina a unidade de dimensionamento (por exemplo, px, %ou em).
    
14. Selecione Save (Salvar).
15. Para testar o dimensionamento atualizado, selecione a seta ao lado de Visualizar e selecione Abrir caminho da 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.