# Setting Up Page Layout

### Page Header

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXabwNwcOYI2M5yUYX6%2F-MXbTfe3cGN1DGev8B_v%2Ffps-header.gif?alt=media\&token=0c9ff1db-5f94-4d19-aadb-56d5edaca93d)

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! 

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXabwNwcOYI2M5yUYX6%2F-MXbW633iOS1c9NEZK9N%2Ffps-dnd.gif?alt=media\&token=0444f916-ba9e-48fb-99ec-1b29bab6e6d4)

### Copying Sections with Components

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

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MjpFmEmGjfg1ijkWwFM%2F-MjpGGO_AtPmZ4viElg2%2Fcopy_sections.gif?alt=media\&token=68704266-a7e1-443b-ad83-f379e9bd4a9a)

### Adding and Configuring Components

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

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXabwNwcOYI2M5yUYX6%2F-MXbX6Qdt85xFLwbZ1dC%2Ffps%3Dpreview.gif?alt=media\&token=57a08740-8b3c-477d-8429-3eaac4fa22b6)

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.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXabwNwcOYI2M5yUYX6%2F-MXbZIwOKM6g8Vc6o60L%2Ffps-direction.gif?alt=media\&token=6dba34e5-86ae-4c65-8e5c-de25deef6635)

{% 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](https://readme.directual.com/portal#page-settings)).

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXbZMwniyIS1Rfn4xuw%2F-MXbaCOz4RqgUIEMda5C%2Ftab-security.png?alt=media\&token=82d2112b-d3ad-4e74-8d01-d04c830f2d99)

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