All Collections
Portal management
Creating and managing portal pages in Full Fabric
Creating and managing portal pages in Full Fabric

How to design and build the pages that your applicants, students & alumni see when accessing your school's Student Hub at Full Fabric

ClΓ‘udia Duarte avatar
Written by ClΓ‘udia Duarte
Updated over a week ago

Information needs somewhere to go in order to be shared. A home to invite guests in, strengthen relations and gain social currency. 🍻 The forms you create, the intakes you open, the resources you offer – they're for people. Therefore, you need a way to connect with them and spread your message. πŸ€— On the internet, that's a website – or, as we call in in Full Fabric, the "Student Hub". β˜€οΈ


In this article

(click to jump to topic)

What's the Admissions Portal and how can staff access the Portal module?

The Student Hub is the collection of webpages directed towards prospects, applicants, students, alumni and lecturers to collect applications and convey information. Put simply, it's what users see when they login to Full Fabric. πŸšͺ The module is called "Portal", but the set of resulting pages is often referred to as the "Student Hub" because the standout feature common to every school is the ability to receive applications. Nevertheless, it's also possible to build Portal pages to divulge programme and enrolment information, announce scholarship requisites, give tips on finding local accommodation, promote school services and facilities, and so on.

You can adjust the privacy settings of a Portal page to make it available to a segment of profiles matching certain rules (provided they are logged in); or available to everyone in possession of the URL. πŸ“‡

To access the module, click Apps on the sidebar and then Portal:

How can I manage my Portal pages and create a new page?

The Portal overview is the list of pages of your school's Student Hub. It's a cross between an archive, a site map and a management tool. πŸ—Ί

Five columns tell you everything you need to know at a glance: what is the TITLE & SUBTITLE of a page (in black and grey lettering, respectively), the NAVIGATION path leading to it, the AUDIENCE segment, whether the page is PUBLIC to logged out users (yes) or only visible to those who are logged in (no), and whether it's PUBLISHED (yes) or a draft (no).

The order of your school's Portal pages matters because it's reflective of the website's content. πŸ₯œ In other words, it defines how your Student Hub is structured.

By default, the list follows a top-to-bottom hierarchy in which the top pages are the most restrictive in terms of visibility and the bottom ones are the least restrictive (that is, open to a wider audience).

Ideally, if you're gonna have pages geared to different lifecycle stages, you should also be mindful of "stacking" them in a way that is organised, easy to understand and coherent: for instance, pages that correspond to the early stages of the profile lifecycle (i.e., prospects and applicants) at the bottom, and pages dedicated to the remaining states (students and alumni) on top. πŸ₯ž There are no fixed criteria for this, but making up your organisational style and sticking to it will help as you accumulate a growing number of pages without making a mess. πŸ—‘

In terms of usability, the Portal has a drag-and-drop interface to easily move pages into place. You must always have a homepage to greet visitors, especially registered profiles when they sign in – otherwise, they'll get a standard 404 error. The system recognises a homepage when it precedes subordinate content, has a forward slash (/) in lieu of a navigation path and is published.

  • If the page is a Homepage, i.e, the page profiles should see as soon as they log in the Path should be set only as "/"

  • If the page is secondary (standalone page on the left side menu) then, it should have a Path "/something", and the page should always have a Navigation Label name

  • If the page is a sub-page on the left-side menu, then it should follow the Path structure "/something" and the page should always have a Navigation Label name defined

The path structure allows you to send profiles directly to those pages. For example, if you set a page Path as "/mba/requirements" you can then send profiles to the page https://apply.school.edu/mba/requirements on an email or CTA.

And just like how you may have separate pages targeting different users, you may also have more than one homepage for the same reason. If that's the case, just be careful that the audience segment is accurate, avoid duplicates (e.g., two homepages encompassing the same lifecycle state) and don't leave out any state without a homepage.

Another thing you can do is group pages together, whereby a main page is linked to one or more subpages accessible through a hoverable sidebar menu. πŸ‘©β€πŸ‘§β€πŸ‘¦ To accomplish this, firstly you must create a parent page with zero content, no navigation path (not even a slash) and a navigation label (the name of the soon-to-be sidebar menu). To be clear, a parent page is merely a container to hold the subpages and supply the menu's title. For reference, the image below compares two-parent pages as seen from the back and the front end: Applications and registrations and Student housing.

Secondly, you must create the pages that will comprise the content of the dropdown list and drag them on top of the parent page to bind them together (again from the screenshot, that would be My Registrations, My Applications, Accommodation and Rules). The subordinate pages are marked with an indent, while the parent pages are highlighted in bold. In keeping with a hierarchical logic, dropdown menus are inserted into whatever pages they're arranged underneath (in our example, that's the homepage), so sequencing is key. Think of it as a family tree. 🌳

Getting the exact move right can be challenging, so here's a demonstration of how to group pages:

Fittingly, here's a demonstration of how to ungroup them:

To create a new page, click Create a new page on the top right-hand corner, write a TITLE, position the new page where it belongs, click the gear at the end of the line to edit the page and jump to the next topic for instructions. To delete a page, just tap X and then OK in Are you sure you want to delete this page? (this action is irreversible).

How do I build a page?

Once you create a new page, you'll be automatically redirected to its Details tab. There are three tabs in total: Details, Audience and Contents, each concerning different aspects.

The Details tab

Details are where you define the basic settings of the page, namely:

Path β€” The custom keyword in the URL slug of the new page. If you don't know, the URL slug is the piece of text that appears after the forward slash at the end of the Student Hub's domain address. Altogether, this forms the unique link to the page in question. Here's an example:

Published β€” Choose Yes to publish the page to its intended audience or No to pull it out.
​Public β€” Pick Yes to make the page available to both logged-in and logged-out users, or No to bestow access to only logged-in users.

Image β€” Upload an image to be permanently displayed on the right side of the page, staying fixed as the page scrolls (more on that in a bit). For optimal performance, please ensure the following parameters:

  • That the file is under or around 200 KB;

  • The format is JPEG (because although PNG is also accepted, JPEG is a lossy compressed file format that produces smaller file sizes);

  • That it's a minimum of 800px by 400px;

  • That it's portrait-oriented rather than landscape;

  • That it's merely decorative and conceptual, not informative.

Order β€” Specify in what order this page should be in the list of Portal pages.

The Audience tab

The Audience tab is where you determine the visibility of the page. It explains so itself:

The access scope is basically a combination of one or more rules that profiles must meet to be granted access to a page. Clicking Create access scope launches the segments builder; on this subject, we strongly recommend that you read our article about segments, a very in-depth guide that also addresses Portal pages. Suffice it to say here that an access scope will require at least one of these four rules:

  • "Profile β‡’ is a β‡’ [choose one or more lifecycle states]" (e.g., "Profile β‡’ is a β‡’ Student");

  • "Profile β‡’ is not a β‡’ [choose one or more lifecycle states]" (e.g., "Profile β‡’ is not a β‡’ Prospect");

  • "Profile β‡’ is in β‡’ [choose a programme, a class and a campus]" (e.g., "Profile β‡’ is in β‡’ Full-time MBA Class of 2021 . 22 Barcelona");

  • "Profile β‡’ is not in β‡’ [choose a programme, a class and a campus]" (e.g., "Profile β‡’ is not in β‡’ Full-time MBA Class of 2021 . 22 London").

Once the starter rule is established, you're free to create as many additional rules as you'd like. However, if you don't mind the page being visible to everyone, don't bother with an access scope. πŸ‘

The Contents tab

We now reach the point people picture in their minds when a website builder is brought up: the layout editor. 🎨 Our last step is to finally design the webpage as it's going to be seen by visitors, largely through a combination of widgets, data and other elements.

But let's start from the beginning, as they say. Underlying digital communication is language and a common thread in international schools is having to communicate in at least two. πŸ“’ That's something you can request when implementing FULL FABRIC; then, instead of having one Contents tab per page, you'll have as many as you have languages, represented by flags, allowing you to build multiple versions of the same webpage in different idioms.

Accordingly, Portal visitors can switch between idioms on the bottom left corner of any webpage, like so:

And that's just one of the differences between the back office view and the visitor view, of course:

Portal pages are highly variable owing to the volume of resources at hand, but another thing they typically have in common is a Title, a Subtitle and a Navigation label.

The Title of a page is the most salient clue to quickly deduce its content, and should therefore be short, to the point and in plain language. The Subtitle is a vital supporting piece because it further clues in the reader while saving precious title space; still, it should be but the most concise of descriptions.

The Navigation label is the text that goes in the menu of a page, also displayed at the top; similarly to the title, navigation labels should be short and make it clear to users what's to find by clicking on them. Depending on the hierarchy that was set, menu items can stand independently as horizontal links or be nested in dropdown lists.

Moving on, what's also essential is picking the base layout of your page. There are two choices: a wide one-column layout, or the same column with a supporting container (whose height auto-stretches to fit the content inside):

Once you've decided on a layout, it'll be time to start adding content. The main panel only offers the widget for text Text, but the second one has more options. Let's take a look at all of them:

Text β€” A self-expandable text box to supply relevant instructions or information to readers. πŸ– An abundance of formatting options are at your disposal: six levels of predefined headings styles, plus a quote style and a normal style; bold, italic, underline and strikethrough; bullets and numbering; outdents and indents; links; images; and, lastly, typographic alignment. You can also upload attachments to the text box, and embed YouTube videos by pasting the video's URL into the text box (to obtain it, go on YouTube and choose a video, click SHARE under it and COPY the shareable URL that's given there). Unlike the other elements, you must press Save to save changes.

Events β€” Produces a self-updated list of upcoming events, sourced from the Events module.

Applications / Registrations β€” Lets you pick which application or registration forms should be up for candidacy on the landing page.

My Applics / My Registrations β€” Permits applicants to see their entire history of started and submitted applications or registrations.
​
​Offers β€” Permits applicants to see their entire history of conditional and unconditional offers.

Looking for inspiration?

Click here to download some suggestions on different types of content that you can build in Full Fabric, on Portal Pages. ⭐️

*

You have reached the end of this article. Thanks for reading! πŸ€“ If you have any questions or comments on the topic at hand, or if you enjoy reads like this and have article requests, let us know. Also, please leave a rating below. Your feedback is highly appreciated! πŸ’–


PUBLISHED: May 14, 2020
​LAST UPDATED: February 15, 2024, at 8:42 p.m. London time, by ClΓ‘udia Duarte

Did this answer your question?