> 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

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 ](/files/-MBcVKrhu7oVZhLeW6SW)

### Portal Settings

![](/files/-MXaIELoQiYTJnCwnIrg)

#### 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)](/files/-MXaL8k6KGoIrRwbHdYR)

* **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.

![](/files/-MXaROVFNURWTYW5Ij0e)

#### 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)

![](/files/gYi6srzcmrvge7KaSYtW)

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.

![](/files/-MXabtr2hJVrHMAsrLWR)