> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/web-pages/setting-up-pages-layout.md).

# Setting Up Page Layout

### Page Header

![](/files/-MXbTfe3cGN1DGev8B_v)

You can enable the page header if you want it to be visible. By default, the header is the page title, but you can edit it as needed.

### Tabs, Sections and Columns

Everything on the page can be dragged and dropped! 

![](/files/-MXbW633iOS1c9NEZK9N)

### Copying Sections with Components

To copy a section with components, select the section you want to duplicate and click the Copy Section button

![](/files/-MjpGGO_AtPmZ4viElg2)

### Adding and Configuring Components

Drop components into columns and configure them according to your preferences.

![](/files/-MXbX6Qdt85xFLwbZ1dC)

Click Preview to see the resulting page.

### Desktop, Tablet and Mobile Views

Each section can contain one or several columns, which serve as containers for components. If a section has more than two columns, you can configure how they are displayed in three different views:

* **Mobile:** width from 0 to 478 px
* **Tablet:** width from 479 px to 768 px
* **Desktop:** width from 768 px and above

Choose the layout direction in the section settings.

![](/files/-MXbZIwOKM6g8Vc6o60L)

{% hint style="info" %}
Each component can have its own layout for mobile, tablet, and desktop views. An icon in the bottom-right corner indicates which option is applied for the specific column width.
{% endhint %}

### Conditional Tabs Visibility

Each tab can be set to be visible for specific groups of users:

* All authorized users
* List of roles only (similar to [security settings for the page](/web-pages/portal.md#page-settings)).

![](/files/-MXbaCOz4RqgUIEMda5C)

### Conditional Sections Visibility

Similarly, each section can be configured to be visible for specific groups of users.

{% hint style="warning" %}
Remember to consider security settings when configuring API endpoints! Configuring conditional visibility alone may not be sufficient.
{% endhint %}