> 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/portal.md).

# Web-App Builder basics

Create marvelous, mobile-friendly web apps 🦄

The Directual web page builder allows you to create beautiful, mobile-friendly web apps in just a few minutes.

Take a look at [an app](https://library.directual.app/) that is 100% built on Directual

There are two ways to apply Directual web pages:

* Using the Directual Web portal (as shown the example above)
* Embedding Directual web pages into your application, whether it's developed traditionally or with other no-code tools

## Web Pages Home Screen

![You can view all the pages of your app In the Web Pages section ](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MBcUObOABk1KaO1d802%2F-MBcVKrhu7oVZhLeW6SW%2Fmain.jpg?alt=media\&token=817907d6-9488-40e0-b5d3-6f699319e814)

### Portal Settings

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXXMl1MyT8h_jaUSUCV%2F-MXaIELoQiYTJnCwnIrg%2Fportal-settings.gif?alt=media\&token=329dbf08-4dc4-4930-aec0-b9f6b151ad35)

#### General settings

* **Portal Title.** Your site name to be displayed in the browser
* **Link to Logo Picture**. Insert the link to your logo. You can upload it using the [Directual file storage](/data/file-storage.md) structure and copy the link from there
* **Site Locale.** Choose the language for the messages in the interface:
  * English
  * Russian
  * Spanish
  * German
  * French
  * Japanese

#### Appearance

* **Menu** appearance. Place at the top or on the left
* **Color scheme**. [Colors of your app](broken://pages/u0owb1qncaofOFG4ZUx7)
* **Border radius**. Affects text inputs, buttons and cards in your app
* **Fonts**. Choose the font-face for headers and texts in your app. You can find an example of applying fonts below
* [**White-label**](broken://pages/-MjYSgdQgXWgiMH4wsZu) option

#### Security

* **Turning on authentication for the site**. This will require your app users to authorize before they get access to the portal (you can also choose to open certain pages for non-authorized users)
* **Turning on sign-up for new users**. This will allow new users to sign up (often unnecessary for different admin portals)

![Sign-up is ON (on the left) and OFF (on the right)](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXXMl1MyT8h_jaUSUCV%2F-MXaL8k6KGoIrRwbHdYR%2Fsign-up.png?alt=media\&token=7cde5497-1491-45a7-babd-086aff81dffe)

* **Login format**. `email`/`phone`/`string`. This is just a visual check of the user's login.

{% hint style="info" %}
If you want to provide your clients with a sign-in link, it is '`yourapp.directual.app/signin' and`, the sign-up link is: '`yourapp.directual.app/signin?signup=true'`
{% endhint %}

{% hint style="info" %}
Remember, that the user's login is *always* stored in the App users (`WebUser`) data structure, field `ID`, despite the chosen format
{% endhint %}

{% hint style="info" %}
You can use authentication plugins for [Facebook](/plugins/using-plugins/user-authentication-plugins-not-web3/facebook-oauth-plugin.md) and [Google](/plugins/using-plugins/user-authentication-plugins-not-web3/google-oauth-plugin.md) oAuth
{% endhint %}

#### Custom domain

Connect custom domain to your app. See the [custom domain documentation section](/web-pages/web-app-settings/custom-domain.md) further.

### Page settings

Click on **Edit page settings** icon on the page card.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXaOsMMaLFO6qxa3pG6%2F-MXaROVFNURWTYW5Ij0e%2Fpage-settings.gif?alt=media\&token=984d6946-ad50-4f88-b977-168f25e66dd4)

#### General

* **Page title**
* **Page route**. The path of the page
* **Icon**. The icon in the portal menu. Choose icon name [form the list](https://design.directual.app/system-icons)
* **Order**. Position in the app menu
* **Group**. Grouping in the app menu (e.g. it may be `Admin pages` group)
* **Include to the portal**. If you want to use the page as a part of the portal, turn this setting ON. If you only want to embed the page, turn it OFF

#### Access & Security

* **Overriding portal security settings**. If this setting is OFF, the page inherits portal security settings. If it is ON, you can set up security for the page independently, including the limit access for *certain roles* (list the roles, comma separated) — users (objects from `WebUser` data structure) should have the roles in the `role` field (comma separated as well)

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FR5crE1ObB0p48SnDoLUZ%2Fpage-settings2.png?alt=media\&token=63cf65e4-18a5-4268-91a2-4444091dc4f2)

If you want to enable authentication for the whole app but keep some pages public, use the security overriding feature for those pages.

#### 🚫 Delete page

Be careful, the action is irreversible.

## Profile page

`profile` is a system page. You can edit it as you want, but you cannot delete it or change its path. The link to the page is at the bottom of the menu.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MXaZ1ds2mmaoycoHJ-D%2F-MXabtr2hJVrHMAsrLWR%2Fprofile.png?alt=media\&token=85d01beb-fe01-4bba-8056-6866682838d2)