# 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 ](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](https://readme.directual.com/data/file-storage) 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](https://readme.directual.com/web-pages/broken-reference) * **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**](https://readme.directual.com/web-pages/broken-reference) 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](https://readme.directual.com/plugins/using-plugins/user-authentication-plugins-not-web3/facebook-oauth-plugin) and [Google](https://readme.directual.com/plugins/using-plugins/user-authentication-plugins-not-web3/google-oauth-plugin) oAuth {% endhint %} #### Custom domain Connect custom domain to your app. See the [custom domain documentation section](https://readme.directual.com/web-pages/web-app-settings/custom-domain) 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) --- # 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/portal.md?ask= ``` 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.