--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Alterar o layout de uma página criada em Quebec ou Rome # Alterar o layout de uma página criada em Quebec ou Rome {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 min. de leitura 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é TodosEstrutura do Now ExperienceConstrutor de IU. 2. Abra uma experiência para trabalhar ou crie uma experiência selecionando CriarExperiência. Consulte [Configure como os usuários interagem com suas aplicações no Construtor de IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências. 3. [Crie](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários.") 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. ![Seta apontando para o elemento do corpo na estrutura da árvore de conteúdo.]() | |-|-| {#change-layout__choicetable_cc5_jsb_dqb} 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 ![o botão Visualizar que abre sua página no tempo de execução, que é uma visualização de como a página aparece em uma página da Web.](). {#change-layout__substeps_j3q_hrb_dqb} 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](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA "Saiba o que é um componente em Construtor de IU. Veja também como os componentes funcionam no Construtor de IU."). 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. | |-|-| {#change-layout__choicetable_dzv_llh_wnb} 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 | 1. 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. 2. No menu flutuante acima da página, clique em Layout. ![Local do ícone de layout de mudança no menu flutuante.]() 3. 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](https://servicenow-prod.fluidtopics.net/oG~8pHQ59UH9_e_htsQANw#flexbox-uib "Crie um layout Flexbox em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.") ou [Como usar layouts de grade de CSS para criar uma página](https://servicenow-prod.fluidtopics.net/whfkxQjXSb1qwWBVX4eolg#css-grid-uib "Crie um layout de grade de CSS em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho."). {#change-layout__ol_ncw_hms_tjb} | | Escolher flexível | 1. Na lista Exibir, selecione Flex. 2. 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. {#change-layout__ul_qyp_wxw_pnb} * 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. {#change-layout__ul_blf_bzw_pnb} * 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. {#change-layout__ul_yrc_qvw_pnb} {#change-layout__ol_gpf_mvw_pnb} | | Selecionar grade | 1. Na lista Exibir, selecione Grade. 2. 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. {#change-layout__ul_jqq_5bx_pnb} {#change-layout__ol_zzl_pbx_pnb} | |-|-| {#change-layout__choicetable_n3q_gmd_jjb}