Model Layouts
Customizing the Model Layout Framework
The model layout can be customized to suit your target audience. ekphrastic.io offers four general layout frameworks, each giving you control over which components are displayed, as well as branding and additional options.
Default (Single Page Layout – Single Column)
This is the default layout when creating a new model. It presents Inputs followed by Outputs in a clean, vertical single-column format.
Default (Single Page Layout – Dual Column)
You can enable or disable the dual column layout using the toggle in the left-hand toolbar of the Model Builder application. This layout displays Inputs and Outputs side by side in two columns. This is then visible in both Preview and Live models.
Guided (Multi-Page Layout) – Horizontal Top Page Navigation
To set up a multi-page layout with horizontal top-page navigation, follow these steps:
Click the Pages icon in the top menu bar of the ROI Builder application.
Use the +ADD button to create a new page in your model.
Enter a Page Title – This title will appear in the final, live version of the model.
Choose a background color for the page heading/title area.
Select the Page Type:
Inputs – for data collection
Outputs – for displaying results
Set Visibility Conditions (optional):
Use the Visibility Condition toggle to control when a page is shown or hidden.
Define conditions based on any Input or Output value using logical operators like
=,>,<, or+.
Navigation Defaults:
Page navigation is displayed at the top of each page by default.
As users progress, Next and Previous tab buttons appear to guide them through the pages.
Optional Toggle:
If you choose not to enable the multi-page layout while saving, you can activate section navigation instead by toggling the Enable Sections in the Calculator option.
Click Save to apply and store your configuration
4. Guided (Multi Page Layout) Vertical Left Page Navigation
Clicking the Pages icon in the top ROI Builder application Menu Bar.
Click the Vertical Pagination toggle to enable the models Page navigation to be displayed on as a left hand toolbar.
Use the +ADD button to add Pages to your Model
Enter a Page title. (this is displayed in the finished model)
Choose a colour for the background of the page Heading/Title
Choose the Page type: Inputs or Outputs
Visibility Condition toggle allows you to choose a condition to show/hide the page. Select any Input's or Output's value within the model as the condition for when the page is displayed or hidden using operators + = > <
By Default Page navigation will be displayed at the top of each page.( As user progresses each page a TAB to move to next and previous page is also displayed)
The Enable sections in the Calculator Toggle is available if choose to not enable the multi page Framework whilst saving the configuration.
Click the Save button to save these settings.
Last updated