Mudar 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 estilos em cascata (CSS), como Flexbox e Grade 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.
   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 para atualizar.

   Tipo de página	Instrução
   Página existente	Selecione o contêiner na página para o qual você deseja mudar o layout. 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 alterar. 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 de mudar o layout no nível da página.
6. Altere 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 uma nova. 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, em seguida, 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 aos 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
   Da lista de componentes	Selecione o ícone da caixa de ferramentas na coluna esquerda de Construtor de IU. Arraste um componente da lista de componentes para a página.
   Diretamente da sua página	Na sua página, selecione + e escolha um componente na lista. Você pode pesquisar um componente ou rolar pela lista.
   Menu flutuante acima da página	Selecione o menu flutuante acima do seu componente. Selecione Adicionar antes ou Adicionar depois. Escolha um componente na lista de componentes.
   Árvore de conteúdo	Você pode adicionar um componente da árvore de conteúdo das duas maneiras a seguir. Selecione +Adicionar componente abaixo do contêiner na árvore de conteúdo. Em seguida, escolha um componente na lista de componentes. Selecione +Adicionar à direita da árvore de conteúdo e selecione Componente. Em seguida, escolha um componente na lista de componentes.

8. Modifique as opções de estilização do layout de uma das maneiras a seguir.

   Opção	Instrução
   Alterar o estilo do layout	Clique em um contêiner para o qual você deseja mudar o layout. 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 do Flexbox no Construtor de IU ou Uso de layouts de Grade CSS para criar uma página.
   Escolher Flex	Na lista Exibir, selecione Flex. Selecione as opções a seguir 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, Linha-reversa, Colunaou Coluna-reversa. 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. Flex-end: 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 igual 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 seu conteúdo para preencher o contêiner. Esta é a configuração padrão. Flex-start: coloque seu conteúdo no início do eixo cruzado. Flex-end: coloque seu conteúdo no final do eixo cruzado. Centralizar: centraliza o conteúdo no eixo cruzado. Linhade base : alinhe seu conteúdo igual ao 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 da grade.