Alterar o layout de uma página criada em Quebec ou Rome

Adicione e modifique o design do layout para mudar a aparência da página. Escolha como os componentes são exibidos em uma página por meio de tecnologias de layout da Web de Folhas de Estilo em Cascata (CSS), como Flexbox e Grade de CSS.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Os layouts controlam quais contêineres e componentes estão disponíveis em uma página e onde eles estão. As regras de CSS se aplicam a eles. Você pode mudar o layout da seguinte forma.

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 > 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. Crie ou abra uma página.
4. Selecione a guia Layout.
5. Dependendo do tipo de página, siga um destes procedimentos para selecionar um contêiner a ser atualizado.

   Tipo de página	Instrução
   Página existente	Selecione o contêiner na página cujo layout você deseja mudar. Nota: Como alternativa, você pode selecionar o contêiner na árvore de conteúdo à esquerda da área da página principal. Quando a estrutura da página está na árvore estruturada, você pode encontrar mais facilmente o contêiner que deseja mudar. Se você tiver muitos componentes e contêineres na árvore de conteúdo, use a barra de pesquisa para encontrar um contêiner específico.
   Nova página	Na árvore de conteúdo à esquerda da área da página principal, selecione o Corpo da sua página. O corpo é o elemento raiz da página.

   Se você estiver iniciando uma nova página, poderá selecionar o layout no nível da página e, posteriormente, no nível do contêiner. Se você não for o proprietário de uma página existente, esteja ciente do impacto da mudança do layout no nível da página.
6. Mude o layout do seu contêiner.
   1. No painel Configuração de página, selecione a guia Layout para selecionar o layout que você deseja usar.

      Você pode mudar o layout atual de uma página existente para um novo. Por exemplo, em um layout de três colunas, você pode clicar no layout de quatro colunas para mudar o layout.

      Você também pode definir o layout de um contêiner. A imagem a seguir mostra as opções de layout do Construtor de IU.

      

   2. Se você estiver criando uma página, adicione componentes às novas áreas no layout.
   3. Clique em Salvar.
   4. Exiba e teste sua página selecionando .
   Para mudar uma página existente, o vídeo a seguir mostra como você pode mudar o layout do contêiner de três para quatro colunas e adicionar um novo componente à quarta coluna.

   

   Para definir o layout de uma nova página, o vídeo a seguir mostra como definir o layout desejado para a página. Por exemplo, você pode definir sua página para ter dois slots ou colunas. Em seguida, você pode adicionar contêineres a cada slot e mudar o layout de cada contêiner. Você também pode definir o layout no nível do contêiner depois de adicionar contêineres à sua página.

   Figura 1. Alterar o layout de uma página

   

7. Adicione componentes a slots.
   Você cria sua página com componentes de contêineres. Para obter mais informações, consulte Personalizar Construtor de IU páginas usando componentes.

   Você pode adicionar componentes usando qualquer uma das maneiras a seguir.

   Para adicionar um componente	Faça o seguinte
   Diretamente da sua página (opção 1)	Selecione o ícone adicionar conteúdo (mais), selecione a guia Componentes e selecione um componente.
   Diretamente da sua página (opção 2)	Em um layout de coluna ou componente, selecione o ícone adicionar antes (mais) ou adicionar depois (mais) e selecione um componente.
   Da árvore de conteúdo	Na árvore de conteúdo, selecione + Adicionar conteúdo e selecione um componente.
   No menu flutuante acima da página	Em um layout de coluna ou componente, selecione o ícone de Menu, selecione Adicionar antes ou Adicionar depoisde e selecione um componente.

8. Modifique as opções de estilo de layout de qualquer uma das maneiras a seguir.

   Opção	Instrução
   Alterar o estilo do layout	Clique em um contêiner cujo layout você deseja mudar. Você pode clicar no contêiner na árvore de conteúdo ou clicar no contêiner na página. No menu flutuante acima da página, clique em Layout. Escolha exibir seu conteúdo como Flex ou Grade. Para obter mais informações sobre opções flexíveis ou de grade, consulte Como usar layouts Flexbox no Construtor de IU ou Como usar layouts de grade de CSS para criar uma página.
   Escolher flexível	Na lista Exibir, selecione Flex. Selecione as seguintes opções com base em como você deseja exibir o conteúdo do contêiner na página. As opções também podem ser inseridas na caixa de estilos CSS: Direção flexível: escolha entre Linha, Reversão de linha, Colunaou Reversão de coluna. Justificar conteúdo: escolha uma das seguintes opções: Início flexível: os itens estão no início da direção flexível, semelhante ao conteúdo justificado à esquerda. Esta é a configuração padrão. Final flexível: os itens estão no final da direção flexível, semelhante ao conteúdo justificado à direita. Espaço entre: os itens são distribuídos uniformemente. Espaço ao redor: os itens são distribuídos uniformemente com o mesmo espaço ao redor deles. Espaçamentouniforme: o espaçamento entre os itens é igual. Alinhar itens: define como você deseja que o conteúdo flexível seja exibido ao longo do eixo cruzado. Estas são as opções: Esticar: estique o conteúdo para preencher o contêiner. Esta é a configuração padrão. Flex-start: coloque o conteúdo no início do eixo cruzado. Flex-end: coloque seu conteúdo no final do eixo cruzado. Centralizar: centralize o conteúdo no eixo cruzado. Linhade base: alinhe o conteúdo da mesma forma que o alinhamento da linha de base. Altura: defina a altura automaticamente ou manualmente. Largura: defina a altura dos itens do flexbox automaticamente ou manualmente. Margem: defina a distância mínima entre os itens do flexbox. Preenchimento: defina o preenchimento para cada lado dos itens do flexbox.
   Selecionar grade	Na lista Exibir, selecione Grade. Preencha as seguintes informações: Altura: defina a altura automaticamente ou manualmente. Largura: defina a altura dos itens da grade automaticamente ou manualmente. Margem: defina a distância mínima entre os itens da grade. Preenchimento: defina o preenchimento para cada lado dos itens de grade.