Editing a Portal
Last updated
Last updated
Copyright © 2023 Scaleflex
Once you’ve clicked on the “edit” button of your portal, you’ll be logged into the editor. On the top, to the left of the page, you’ll see the name of your portal, followed by “/ home”. Click on “home”, and a dropdown menu will open. Here, you will see all the pages of your portal. You will start with the pre-created pages, to which you will eventually add others created by you.
First, we have the home page. This is your portal’s main page, and as we’ll see later, you may choose its style and layout through the templates.
Next is the “forgot password?” page, readily available for you and your users. You may slightly tweak this page by adding text below or changing the theme from dark to light. All of the pages will be automatically displayed in the brand colors you have selected for your portal.
You also already have the “login as guest,” “login using hub/portal account,” and “registration page” available.
Click on the registration field, and you can edit it by adding a new field, removing non-mandatory fields, or modifying the order of the different fields. The last sentence, “already have an account? Log in” acts as a CTA button; you may modify the text and add a link to whatever you wish in this space. At the bottom, you may always choose to include more information.
In the top menu you also have the “search” option, where you can type specific keywords you’re looking for, section titles, etc. to find the content you’re looking for.
Your company logo, or whichever logo you choose for your portal, will always be displayed on the top left corner of every page within the portal. You can modify it, and to do so, simply click on it, and a modal menu will appear. This will allow you to edit the logo’s “container”.
You may change it, by adding a new image, or simply modify it, through the “fit”, “fill”, “crop”, and “face crop” options available in the “image positioning” bar. You may also choose to add an alt text, which will not modify the visual, but is a recommended step for search engine optimization.
Creating a new page also happens from the top dropdown menu. At the very bottom you’ll see the button “add new page”.
Once you’ve clicked on this button, a modal will appear, allowing you to set the basic elements of your new page. Firstly, you must select the page type, be it a web page, an asset gallery, or a form. Be mindful that this is the only parameter that cannot be modified later. The type of page cannot be changed. Then you may choose the name of your page, you may want to think of a naming convention in advance so that you can easily find and browse through the different portal pages. You will also select the slug and the title of the page. Hit “add”, and the new page will be created and added to the top menu.
You may then move on to editing your new page’s content. You will land on a blank page with the button “+add section”
Once you’ve clicked on the “+add section” button, a modal will open. In it, you’ll see listed on the left all the different section categories. Browse through them and discover the designs available for each one as they’re displayed on the right.
Browse freely among these blocks to construct your page. Once you’ve selected a block by clicking on it, a new modal will open, allowing you to select the name and slug for this new section within your page. Again, be mindful to have a naming convention so that you don’t get lost and you can easily find different sections and pages at any time.
Once you have filled in the information, simply click “add” and the section will be automatically created and displayed. From here on, adding new sections to your page is simple.
Simply click on the “+” button located at the bottom and top of the existing section, and the same modal will appear for you to choose your new block.
You can also add new sections from the sidebar. To the left, click on the topmost icon named “sections”. It will unfurl a new sidebar, where you’ll see displayed all the currently existing sections, and you’ll also be able to click on “+add a new section” directly underneath.
Here you can also easily change the order of the sections by dragging their corresponding sidebar blocks. You can also decide to temporarily hide, delete or rename your section by clicking on the three dots within the section block, next to the name.
The last added section always bears the footer. It will be visible by default. However you may choose to hide it wherever you want by clicking on the three buttons on the top left corner of the section.
You can choose at any time to change the colors of your portal or to change the background of your sections to further personalize them. To change the colors of your portal, navigate to the sidebar menu, where you will find the “design” tab located directly under the “sections” one.
Click on the “design” tab and an additional side menu will open. Here, you will be able to switch between the “dark” and “light” modes thanks to a drop down menu.
You may then switch or change your primary and secondary colors by clicking directly on the colored square and eyeballing a color of your liking or by directly inputting the exact HEX color code of your brand. You can also automatically invert your primary and secondary colors by clicking on the sun and moon icons located at the top left corner of your section.
The color you choose as primary is the main page color. The secondary color will be present in the sections, and the accent color serves to highlight CTA’s and other important elements to catch viewers attention. Next to the color, you can choose its opacity or intensity.
To change your section’s background, navigate to the top right corner of the section block, where you will see several icons. Click the one that resembles a square. When hovering over it with your mouse, the words “add background” will appear.
When clicking on it, a modal will open. In it, you will see a square with the words “add background” yet again. Click on it, and you will open the hub and access your gallery. From here, you may choose the visual that best suits your section and establish it as your section’s background. By default, the “color overlay” box will be ticked in your modal, adding a film to your image to create more contrast and highlight the text. You may uncheck this box and remove the color overlay at any time.
Many of the design blocks available for the different sections contain images. When choosing your block, you will see default stock images to illustrate your page’s design. You may then substitute your own. To do so, click on one of the image containers, and a modal will open.
In it, you can click directly on the image, and the gallery view will open, so you may select your visual. An ALT text will be automatically generated for your image, but you may change it. As mentioned, descriptive, accurate ALT text improves the image’s search engine optimization ranking.
Image positioning
You can change the position of your images within the containers. Simply click on the “image positioning” tab, and a dropdown menu will appear. In it, you can choose to fill the container with your image, to fit the image to the container, to crop an automatically detected face, or to do a personalized crop of the image.
Cropping Tool
The cropping tool allows a personalized and precise display of the image within the container. Choose the “crop” option within the “image positioning” dropdown menu. A modal with the container image will appear. With the aid of a grid, you can crop the image to your liking.
You may adjust the padding of your sections to suit your desires. Navigate to the portal section of your choosing. In the top right corner, click on the “section settings” icon. There, you will be able to adjust the top and bottom padding.
Certain sections will have pre-determined paddings, others won’t, depending on their layout and the content they’re meant to display. For the most part, you will always be able to modify the padding in the manner described above.
You may clone any element of your portal, whether the portal itself, a page, or a section.
To clone a section, navigate to its top right corner and click on the three dots named section options.
Once you have clicked, a dropdown menu will open, and you will see the option “clone” appear in second place. By clicking on it, a modal will open, where you can determine the name and slug of the cloned section. Once you have, click on save, and you’re done!
To clone an entire page, navigate to the top menu. Click on it, and the dropdown menu bearing all your portal’s pages will open. Hover over the page you wish to clone; three dots will appear next to it. Click on them, and several options will appear. Select “clone”.
Once you have, again, a modal will appear for you to choose the name and slug of your new page. Hit save, and your copied page will directly appear in the menu alongside the others!
Finally, access the main page with all the portal previews to clone an entire portal. Here, hover over the portal you wish to clone. Notice the three diets on the bottom right corner of the portal preview, and click on them.
Several options will appear. Select “clone”. The exact modal will open for you to choose a name, and a slug for your portal. Hit save, and your portal will be duplicated with all its contents. You may now access and modify this clone directly from the main page.
You can edit your section’s texts directly within the section. Simply click on the desired text, and an inline editor will appear.
You can type out the text of your choice (by default, the text containers will be filled with lorem ipsum). You can also select from a range of title and paragraph styles, from H1 to H5 and P1 to P5. This will also help your page’s architecture be clearer to search engine crawlers.
You can also bold your text, change the style to italic, or strike it through. You may change the text’s color, or add code. You can also add links to external pages or pages within the portal, or even sections within the portal. You may also choose from a selection of fonts or import your own personalized font.
