---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Change the layout of a page created in Quebec or Rome

# Change the layout of a page created in Quebec or Rome {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura

Add and modify your layout design to change the way your page looks. Choose how components are displayed on a page through Cascading Style Sheets (CSS) web layout technologies, such as Flexbox and CSS Grid.

## Antes de Iniciar

Role required: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Layouts control what containers and components are available on a page, and where they are. CSS rules apply to them. You can change the layout as follows.

## Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. [Create](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.") or open a page.
4. Select the Layout tab.
5. Depending on the type of page, do one of the following to select a container to update.

   | Type of page | Instruction |
   | Existing page | Select the container on your page for which you want to change the layout. Nota: Alternately, you can select the container in the content tree to the left of the main page area. When the page structure is in the structured tree, you can more easily find the container you want to change. If you have many components and containers in the content tree, use the search bar to find a specific container. |
   | New page | In the content tree to the left of the main page area, select the Body of your page. Body is the root element of the page. ![Arrow pointing to body element in the content tree structure.]() |
   |-|-|

   {#change-layout__choicetable_cc5_jsb_dqb}  
   If you are starting a new page, you can select the layout at the page level, and later at the container level. If you are not the owner of an existing page, be aware of the impact of changing the layout at the page level.
6. Change the layout of your container.
   1. In the Page configuration pane, select the Layout tab to select the layout that you want to use.  
      You can change the current layout of an existing page into a new one. For example, in a three-column layout, you can click the four-column layout to change the layout.

      You can also set the layout for a container. The following image shows the layout options for the UI Builder.  
   2. If you are creating a page, add components to the new areas in your layout.
   3. Click Save.
   4. View and test your page by selecting ![Preview button that opens your page in runtime, which is a preview of how the page looks on a web page.]().

   {#change-layout__substeps_j3q_hrb_dqb}  
   For changing an existing page, the following video shows how you can change the container layout from three to four columns, and then add a new component to the fourth column.  
   For setting the layout of a new page, the following video shows you how to set the layout that you want for the page. For example, you can set your page to have two slots or columns. Then, you can add containers to each slot and change the layout for each container. You can also set the layout at the container level after you add containers to your page. Figura 1. Change the layout of a page
7. Add components to slots.  
   You build your page with containers components. See [Customize UI Builder pages using components](https://servicenow-prod.fluidtopics.net/xCm7DYJv1VhfgAuiOBoijQ "Learn what a component is in UI Builder. Also, see how components work within UI Builder.") for more information.

   You can add components by using any of the following ways.

   | To add a component | Do the following |
   | Directly from your page (option 1) | Select the add content (plus) icon, select the Components tab, and then select a component. |
   | Directly from your page (option 2) | On a column layout or component, select the add before (plus) or add after (plus) icon, and then select a component. |
   | From the content tree | In the content tree, select + Add content and then select a component. |
   | From the floating menu above the page | On a column layout or component, select the Menu icon, select Add before or Add after, and then select a component. |
   |-|-|

   {#change-layout__choicetable_dzv_llh_wnb}
8. Modify the layout styling options in any of the following ways.

   | Option | Instruction |
   | Change the layout styling | 1. Click a container for which you want to change the layout. You can click the container in the content tree, or you can click the container on the page. 2. From the floating menu above the page, click Layout. ![Location of change layout icon on the floating menu.]() 3. Choose to display your content as either Flex or Grid. For more information about flex or grid options, see [Using Flexbox layouts in UI Builder](https://servicenow-prod.fluidtopics.net/It3Jik7AnTlUgu3~x_s8Qg#flexbox-uib "Create a Flexbox layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance.") or [Using CSS Grid layouts to build a page](https://servicenow-prod.fluidtopics.net/1c0FFMNWMO438eEZGSQxjA#css-grid-uib "Create a CSS Grid layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance."). {#change-layout__ol_ncw_hms_tjb} |
   | Choose Flex | 1. From the Display list, select Flex. 2. Select the following options based on how you want to display your container content on the page. The options can also be entered in the CSS styles box: * Flex direction: Choose from Row, Row-reverse, Column, or Column-reverse. * Justify content: Choose from any of the following: * Flex-start: Items are at the start of the flex direction, similar to left-justified content. This is the default setting. * Flex-end: Items are at the end of the flex direction, similar to right-justified content. * Space-between: Items are distributed evenly. * Space-around: Items are distributed evenly with equal space around them. * Space-evenly: The spacing between items is equal. {#change-layout__ul_qyp_wxw_pnb} * Align items: Defines how you want your flex content displayed along the cross axis. Choices are as follows: * Stretch: Stretch your content to fill the container. This is the default setting. * Flex-start: Place your content at the start of the cross axis. * Flex-end: Place your content at the end of the cross axis. * Center: Center your content in the cross axis. * Baseline: Align your content the same as your baseline alignment. {#change-layout__ul_blf_bzw_pnb} * Height: Set the height automatically, or manually. * Width: Set the height of your flexbox items automatically or manually. * Margin: Set your minimal distance between flexbox items. * Padding: Set the padding for each side of your flexbox items. {#change-layout__ul_yrc_qvw_pnb} {#change-layout__ol_gpf_mvw_pnb} |
   | Select Grid | 1. From the Display list, select Grid. 2. Fill in the following information: * Height: Set the height automatically, or manually. * Width: Set the height of your grid items automatically or manually. * Margin: Set your minimal distance between grid items. * Padding: Set the padding for each side of your grid items. {#change-layout__ul_jqq_5bx_pnb} {#change-layout__ol_zzl_pbx_pnb} |
   |-|-|

   {#change-layout__choicetable_n3q_gmd_jjb}