Web-page builder guide

Compose your marvellous mobile-friendly web-app 🦄

Directual web-page builder is a way to develop beautiful mobile-friendly web-app in a few minutes.
Have a look at the example of an app 100% built on Directual
There are two options of applying Directual web-pages:
Using Directual Web-portal (as in the example above);
Embedding Directual web-pages into your application (developed traditionally or on other no-code tools).
Web-pages home screen
At the web-pages section you see all the pages of your app.
Portal settings
General settings
Portal title. Your site name to be displayed in the browser;
Link to logo picture. Here you have to insert the link to your logo. You can upload it using Directual file storage structure and copy the link from there;
Site locale. Language of the messages in the interface:
English
Russian
Spanish
German
French
Japanese
Appearance
Menu appearance. Put it on the top, or on the left.
Colour scheme. Colours of your app.
Border radius. Affect text inputs, buttons and cards in your app;
Fonts. Choose the font-face for headers and texts in your app. Find the example of applying chosen fonts below.
​White-label option.
Security
Turning on authentication for the site. That will require your app users to authorise before they get access to the portal (you may open certain pages for non-authorised users);
Turning on signing up for new users. This will allow new users to sign up (often that is not needed for different admin-portals);
Signing up is ON (on the left) — Signing up is OFF (on the right)
Login format. email/phone/string. Just a visual check of user's login.
If you want to provide your clients with sign in link, it is yourapp.directual.app/signin, sign up link is yourapp.directual.app/signin?signup=true
Remember, that user's login is always stored in App users (WebUser) data structure, field ID, despite the chosen format
You may use authentication plugins for Facebook and Google oAuth
Custom domain
Connect custom domain to your app. See the custom domain documentation section further.
Page settings
Click on Edit page settings icon on the page card.
General
Page title;
Page route. The path of the page;
Icon. The icon in the portal menu. Choose icon name form the list;
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 are going only to embed the page, turn it OFF;
Access & Security
Overriding portal security settings. If that 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)
If you want to turn on authentication for the whole app, but keep some pages public, use the security overriding 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 menu.

App interface - Previous

Options for building an app interface

Setting up pages layout

Last modified 23d ago