Skip to main content

Create a new modular page

Creating a modular page is almost the same as creating a default page, but creating the content differs quite a lot. Most of the time, the more complex pages are modular pages. Refer to the documentation of your specific website, to check which page should be made as a modular page, and which pages can be created as a default page.

The modular page is, as the title suggest, built from modules. As shown in figure 1. You will need to create the base page, which will appear in the menu, and inside the base page, create modules, which will be displayed in order created unless you change this, which is recommended.


image.pngFigure 1

Start by creating the base page by navigating to the 'Pages' item in the menu sidebar, and you will reach the overview page. Create a default page following this chapter (create a new basic page) and make sure to set the 'page template' to modular.

After you created your new modular page, navigate to the 'Pages' item in the menu sidebar again. Here, instead of clicking the '+ Add' button, click the small arrow pointing down next to it, and the following menu will open (figure 2). Click on the 'Add Module' button which will bring you the following form (figure 3). Continue reading below.

image.pngFigure 2

You will now be prompted with a dialog asking you for the description and configuration of your new page (figure 3). On some pages, the page title is used as a header on said module. Pick a good title for your new module, but don't worry, this value can be changed later. The folder name will be automatically filled. The title can contain capital letters and special icons while the folder string stays properly formatted. An important thing fill in correctly here, is the 'Page' field. The 'Page' field refers to the parent page, where the module will be placed under. Be sure to select the correct parent page. The latest field you'll have to fill in, is the 'Module Template' field. This field will determine what kind of module you will select to be displayed on your page. Refer to the module list that has been created for your website to select the module you need to select.

image.pngFigure 3

After clicking 'continue' on the popup modal in figure 3, you'll land on the new and to be edited module displayed in figure 4. As displayed in the above, This module will not exist until it is saved. This is important, because most of the editors, as well as the media, are only available after the module has been saved. It is recommended to save the module now, before continuing. You can save the module, by pressing the 'Save' button, in the upper right position on the screen.

image.pngfigure 4

After saving the module, you will see the correct editor and the media part. You can now add content to the module and check how the module looks like by either visiting the url (if the parent page is visible), or by pressing the 'eye' icon next to the 'delete' button (figure 5). This will preview the parent page including all other modules. Modules might have different interfaces as you see in figure 5. This might be dependent on what type of module you have selected. A documentation about filling in a customized module, will be described in the list of modules you have received together with this documentation.

image.pngFigure 5

After saving the module, you will be able to see this page as an increment of the parent page in the 'Pages' tab, in the side menu. You will see a '(1)' or more, depending on how many modules your parent page already contains (figure 6). Click on a modular parent page to display the underlying modules. These will be displayed in the second column, indicated by a lego brick like icon. To edit a module, click on it and follow the guide to edit a module.

image.pngFigure 6