Skip to main content

How to customize portal layout and pages

Learn how to customize portal pages in Formaloo by editing structure, renaming pages, adding covers, content, and media.

Updated over 2 weeks ago

In your Formaloo portal, you can fully customize the layout, structure, and content of your pages to create the experience you want. Add menus, groups, and pages, organize your content, and include forms, databases, or any other interactive elements – all tailored to your use case and your users’ needs.

To start customizing your portal structure and content, switch to Edit Mode at the top center of your portal. This will allow you to modify the layout, portal pages, or page blocks directly:


Step 1: Organize your portal menu & structure

Whether you’re starting from scratch or from a template, you can easily remove what you don’t need and add what’s missing to make the portal layout your own.

  • Click the three dots (...) next to any page or group to delete what you don't need,

  • In the same menu, you can duplicate a page – handy if you want to create multiple similar pages (for example, more Lesson pages in your Course materials group):

  • To add a new page, click +New Page at the bottom of the sidebar,

  • To add a new group, click on the arrow next to +New Page, and select New Group,

  • To add a new page within a group, simply click + next to the group name:

ℹ️️ Groups act like folders, turning your sidebar into a neat, structured app menu. Use them to organize content into clear sections.


Step 2: Embed live external content

You can add full-page Live Embed pages to include interactive external content within your portal:

  1. Click the arrow next to +New page, and select Live embed page,

  2. Paste the embeddable URL of the external page you want to display:

💡 This is great for integrating live dashboards, editable documents, sheets, or even collaborative boards (like Miro or Figma).

⚠️ Make sure you're using an embeddable URL, with sufficient permissions (e.g., anyone with the link can view or edit) to avoid any loading or access troubles.


Step 3: Rename pages and update icons

You can rename any page or group to reflect its content and add icons to make navigation more intuitive.

  • Double‑click a page or group title to rename it, or click the three dots (...)Rename.

  • Click the icon beside a page name to choose a new one that visually represents its content:

💡 Renaming and organizing icons help users quickly identify portal sections and navigate more easily.


Step 4: Reorder pages or move them between groups

You can drag and drop portal pages to reorder them or move them between groups. This helps you maintain a logical flow and improve user navigation:

⚠️ It’s currently not possible to reorder the groups themselves.

If you need to change their order, create new groups at the bottom of the sidebar, rename them as needed, and move pages between them to adjust your overall structure and page order.


Step 5: Customize page options

Next to any page, click the three dots (...) and select Page options. From here, you can:

  • Enable or disable the page cover and upload a custom header image for branding,

  • Adjust font style (Default, Serif, or Mono),

  • Set page width (Standard, Wide, or Narrow) to control how the page content appears:

💡 These settings let you personalize the look and feel of each page, improving both usability and design consistency.


Step 6: Customize the content of your app pages

Make your portal pages more engaging and structured by combining text, visuals, and media.

➔ Add text content and format it for better readability

Add text directly to any page and format it however you like:

  • Headings and sub‑headings for titles, key concepts, or summaries,

  • Paragraphs for focused, easy‑to‑digest sections,

  • Checklists, numbered lists, or bullet lists for structured information,

  • Bold, italic, underline, strikethrough, links, or color highlights:

➔ Mix in visuals and media

To make your content more interactive and engaging, combine text with visuals and embedded resources:

  • Add images to illustrate charts, infographics, or diagrams:

    • Resize the image by dragging its sides,

    • Align the image to fit your page layout,

    • Add a caption below the image:

  • Embed documents (Google Docs, Sheets, presentations, or PDFs),

  • Embed videos from YouTube or Vimeo for tutorials or demos:

Customizing your page content improves engagement, makes information easier to digest, and helps create a consistent and interactive user experience.

ℹ️️ Сhanges on your pages are saved automatically.


Step 7: Add forms and data blocks

You can link forms to your portal pages so users can fill them out directly inside the portal, or add data blocks (like tables, kanban boards, galleries, or charts) to display form submissions or stats.

💡 The guide below covers how to embed forms, organize form data, and manage user interactions with it across your portal pages:


Step 8: Manage user access to pages

Each page in your portal can have individual visibility and access settings. You can choose who should be able to view or interact with any page and its content. For example:

  • Restrict admin pages to internal team members only,

  • Make some pages public for visitors or create member‑only areas for logged‑in users,

  • Use user roles (like Member or VIP) to set up tier‑based access – for instance, showing bonus or advanced content to VIP users only:

💡 Learn how you can customize the access through pages' Access settings & custom User roles:


Bottom line

With all these customization options, your Formaloo portal can become a truly personalized & interactive space – structured, branded, and designed to deliver the best experience for your users. Whether you’re creating an internal dashboard, a client hub, or a learning environment, you can make every detail fit your exact needs.

➡️ Next step:
Learn how to brand your portal with your logo, connect a custom domain, fine‑tune its design using custom CSS, and integrate tracking tools like Google Analytics or Tag Manager:

Did this answer your question?