# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://readme.directual.com/web-pages/setting-up-pages-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.