Introduction
These training activities are meant to be completed after you have attended Builder Training with a CST representative or finished the Builder Video Training Series.
These activities will give you the necessary experience to help you confidently begin making changes to your Aluminate Community Builder site. While the ACB platform is created with default modules and pages ready to go, it is beneficial to know how to make changes, create new pages, and add blocks so you can customise the platform as the needs of your online community change.
These activities have been broken down into several parts, to help you master one area of the ACB platform at a time. Take your time completing each section before moving on, as you will need what you’ve built to continue on to the next activity.
The images and clips contained in this training are best viewed at an increased zoom so you can see details more clearly. We recommend 125-150% zoom on a typical 20-28” inch monitor.
Click or tap on any of the images in the guide to open them full size.
Important
All activities should be completed on your test site, not your live site!
Estimated time to complete: 26 minutes
To get started on our welcome page, we will create a page containing some images and text.
In this activity you will learn about:
Estimated time to complete: 10 minutes
Step 1 Important Terms
Edit mode
In order to make changes to your site, you will need to be in Edit Mode. There are two ways to enter Edit Mode:
- Click the blue Edit Mode button at the top of the site
- Press ALT + Shift + E keys together (if you forget, hovering over the Edit mode button will bring up the tooltip with the shortcut)
You can exit Edit mode using the same methods.
Modules and Pages
Pages are grouped by Module type.
At the top of the site are two rows:
Row 1 shows Modules. Some examples of Modules include: Dashboard, People, Make a Connection, Events, Opportunities, and Groups. The Modules you see depend on the configuration of your site.
Row 2 shows the Pages within each Module. Pages will vary depending on the Module you select from Row 1. In the example above, the two Pages within the Dashboard Module are Updates and Help. Again, the pages you see on your site will depend on your site’s configuration.
In this section you will learn about:
Instruction
Creating your first page
English Name: This is how the page will appear in the tabs at the top of the page. Enter Welcome Page as the English Name.
URL Slug: Not related to snails, the URL Slug is the bit of text that the site uses to define your page. It appears at the end of the page URL, as shown in the example image below.
No spaces or special characters are allowed (you can use hyphens instead of spaces).
This option allows you to create and play around with new pages, without having them show up to users on your live site. It can also be used to hide pages that you only want to show when accessed by different means, such as clicking on a user in a user directory.
The rest of the options should not be changed and can be ignored for now.
Congratulations, you have successfully created your first page!
Before moving on to the next section, make sure you have done the following:
Estimated time to complete: 25 minutes
Step 2 Important Terms
Blocks
Every Page is made up of Blocks.
Blocks can give a page structure, display or collect information, or allow a user to interact in various ways with the page.
Blocks come in different types (Display, Structure, Form, etc) and have different customisation panels, but every block will have a name on the top left (1) and a toolbar on the top right (2).
In this section you will learn about:
Instruction
Before we add images or text, we want to make sure our page looks good and stays organised. To do this we will start by adding a Structure block to our page.
Structure blocks are containers you can place other blocks inside.
- 1. In Edit mode, click the Add block button
and scroll down until you see the red blocks. These are Structure blocks.
Your page will now have a blank Container block in it.
- 1. Click the Add block button
that is inside of the existing Container block.
We can edit text found throughout the platform by switching to Edit Text mode. There are two ways to do this:
Once you have turned on Edit Text, a grey dashed outline will show on any text you can edit.
You can see below that any of the names of Modules and Pages can be edited, but not the text generated by our HTML block.
Cutting and pasting blocks
A convenient way to move blocks is to cut and paste them.
- 1. Click the Cut icon (
) on your HTML block. - 2. Paste icons (
) will appear wherever the block can be pasted. Paste the HTML block into your Padded Container.
Once you confirm where you would like your block pasted to, it will be moved. You can move blocks between pages in this manner.
Deleting a block
You can delete any block while in Edit mode by clicking the red bin icon 
within the 
menu.
Click the Delete this block from everywhere when the confirmation box appears. Don’t worry, it’s only deleting the block from this page. You can always add it again from the Block Library.
Put an existing block inside a new Structure block
Alternatively, you can create a Structure block that automatically places an existing block inside of it. We can use this to give our HTML block a nice white background by placing it inside of a Card block.
You may want to give each block you make a unique style to help it stand out. This can include solid colours, gradients, or images.
To get started, select the Edit block icon (
) on your Card block and then select the Design icon.
Within the Design menu are three tabs: Colour, Gradient, and Image.
Colour
The Colour tab allows you to select a single colour as the background for your block.
Gradient
The Gradient tab allows you to set a mix of two colours.
Images
The Images tab allows you to set a background image instead of a colour or gradient.
Your image will now appear as the background for the block. As you can see, it isn’t showing the full image as we haven’t set a size for our card block. We will do that next!
Below the Colour, Gradient, and Image selection areas there are additional design options. These are Basics, Border, and Drop Shadow.
Basics
Within the basics section, there are four settings:
To help give you a better idea of how margin and padding affect you block, take a look at the below diagram:
Border
You can give any block a border. The fields in this section only accept pixel measurements. Entering 10 into the border width box will make the border 10 pixels thick.
The radius of a border relates to the roundness of the corners. This is determined by a value from 0 – 100 for each corner. You can see in the screenshots below how the border radius impacts the shape of the corners.
Drop shadow
You have a few settings for adjusting the drop shadow on the block.
You can see how the settings shown affect the block below.
Before moving on to the next section, make sure you have done the following:
Estimated time to complete: 25 minutes
Step 3 important information
Why use HTML?
HTML allows for a huge amount of customisation that simply isn’t possible using basic text. Once you understand how to implement HTML into your page, the possibilities become endless.
You don’t need to know HTML to use HTML.
The idea of using HTML might seem quite intimidating, but there are lots of resources to make it very easy, such as site like Online HTML Editor.
This code can be copied and pasted into HTML blocks on the Aluminate Community Builder (ACB) platform.
If you would like to find out how to do something specific using HTML, we recommend visiting W3 Schools. This site contains various guides and examples for adding HTML functions to your page.
Storing images
The Community Builder platform does not currently include photo storage outside of background images within block styling. In order to display images within HTML, they must be linked to the platform using HTML.
For the purpose of this tutorial, all image links will be provided. But it is recommended you obtain a secure storage area for images, such as google drive.
In this section you will learn about:
Instruction
Let’s begin by adding an image to accompany the text on our Welcome Page.
The image will now appear.
The image extends beyond our card block, but we will adjust that later!
Now that we have an image, our text is looking a little plain. We can spice it up by changing our plain text to HTML formatted text
Your new text will appear.
We have an image and we have some text, but both are extending below our card block. Let’s add some structure to our layout using the Column block.
What is a Column Block?
The Column block is a container that displays blocks placed within it side by side in columns. We are going to use it to place our text and image side by side.
Adding a Column Block
We want our Column block to be at the top of the page, so we’re going to insert it inside of our existing Padded Container.
- 1. Click the Add block button above your Card block and select Column from the block select menu.
Configuring Columns
The column block menu allows you to divide your columns however you like. You can select the number of columns using the top Number of Columns field
These columns share space within the block. You can assign how much horizontal space each column takes up using the fields found in the grey box underneath the Number of Columns field. The total space all columns takes up must equal 12.
Your Columns block should now have two Add block () symbols. Each of these represents a column that can contain blocks.
Adding existing blocks to the Columns block
Now we’re ready to move our blocks into the Columns block. If you move a block that contains other blocks, like our Card block, the blocks inside will move too.
- 1. Click the Cut icon on the Card block.
- 2. Use the Paste icon to paste the Card (parent) block into the left column. Notice how the HTML blocks (children) move too.
Now your card block contains just your HTML text and your HTML image sits beside it. Notice how the image resizes automatically to fit in the new area.
If the text in your HTML block is overrunning the Card block (like our example above), experiment with the Card block’s height to find a good fit!
Our Welcome Page is set up, but nobody except for admins can see it right now.
By default, all new Pages and Blocks are set to be visible to no one. This is to prevent users from seeing pages and blocks that are still under construction.
Setting Visibility using the Eye Icon
You can quickly toggle the visibility of a block by clicking the Eye icon in the block’s toolbar. When the Eye is crossed out 
, nobody besides admins can see the block. When the Eye is not crossed out 
, everyone can see the block.
Note about Visibility with Parent and Child Blocks:
A Parent Block is any block that has other blocks inside of it.
A Child Block is any block that is inside of another block.
If a Parent Block is not visible, any Child Blocks inside of it will also not be visible regardless of their settings.
Example
When Child Blocks have their visibility set to no-one, changing the setting of the Parent Block to be visible to everyone will not change the settings of the Child Blocks. Each Child Block needs to be set visible to everyone independently.
Example
Setting Page Visibility
Now that our blocks are all visible, we need to make the page visible. The process for pages is nearly identical to what we did for blocks.
- 1. Click the Edit icon (
) next to your page’s name.
We now have a welcome page for the site that everyone can view. We will continue to customise and improve this later.
Before moving on to the next activity, make sure you have done the following:
Estimated time to complete: 18 minutes
It’s time to add some user interaction. We will create a profile that users can fill out, and is searchable on the platform.
In this activity you will learn about:
Step 1 Important Terms
User Overview Block
Can display the name, profile picture, and social media links of a user. This block can be used as the profile picture for user profiles as well as the result image for user searches.
You can exit Edit mode using the same methods.
Basic Form Block
This block is a form users can fill out. The information the user enters can be used in other areas of the platform such as in directory filters or displayed on their profile.
Instruction
Refresher: Setting up the structure of our page
Using what you learned in Activity 1, we will create a new page called Profile and add Blocks to it.
If you have trouble finding a certain block, use the search bar at the top of the Add block page.
Your page should now look something like this:
Forms can be customised so that users can provide information in a variety of formats. This information can then be tracked and used across the site.
- 1. In Edit mode click the Edit block icon (
) on the Basic Form block you just added to the page.
This will open the Edit block menu.
For now, we will focus on the Manage Fields area. We will come back to the Block Settings later.
This will open a list of fields that already exist within the platform, called the Fields Library. You can search for fields using the search bar.
Clicking on a field will add it to your form.
You aren’t restricted to using only fields that are premade on the platform. You can create any number of custom fields to gather information from your users. Once you have created a custom field, it will be available to select in the Fields Library.
Important
Make sure to check the Fields Library before creating a custom field so you don’t create a field that already exists!
We are going to create a custom field for users to fill out their favourite food.
You will be shown a variety of form types. Each type of field and how they work is covered in this document.
You will be shown several fields to fill out: Label, Placeholder, and Profile Data Key.
The Label field is what your custom field will be called when displayed in the Fields Library. Give it a name that will accurately describe the information you wish to capture with this field.
The Placeholder field is text which will be shown to the user when they have not yet filled in the field.
Lastly is the Profile Data Key. This is the data key where the system stores the information provided by the user.
Important
Profile Data Keys must be unique; no two fields can have the same key!
You can see our form has populated the First name and Last name fields, as they were already stored in the system during registration. The Email and Favourite Foods fields we added aren’t showing because they don’t yet have data in them.
We will go over how to change this and other settings within the Basic Form block next.
We have several options for settings within a form that can change how the information is displayed and whether a field is required.
Within the Block Settings section, there are several setting toggles.
Toggle permanent edit mode will change how the block looks to our user.
With this setting off, our form looks like this:
With Toggle permanent edit mode on, it looks like this:
This setting is useful for situations where you want a user to be able to quickly fill in information without having to first click the edit button, like within a pop-up.
Require confirmation on save will bring up a window asking the user to confirm they want to save after clicking the Save all button.
Enable Autosave will save any changes the user makes as they make them, without them having to click the Save all button. You can see the name on the User Overview block updates instantly when changing the First name field in the form when autosave is on.
This is because the User Overview block displays data based on the core_firstName and core_lastName fields, which we have in our form.
Hide the save all button will do what it says! Only use this if you have the autosave turned on, otherwise users won’t be able to save their information.
Hide the privacy controls will hide the privacy icon next to each field on the form. This icon allows a user to choose whether the information contained is visible to everyone on the platform or only to themselves and admins.
We will leave all these toggles off for our form right now and instead focus on changing the settings for individual fields within our form.
We will now look at the settings available for individual fields within our Basic Form block.
The Edit Field menu will come up. It looks very similar to the menu we saw when creating our Favourite Foods field, with the exception of the blue banner at the top.
Since Email is a core field, you can’t make changes to its Profile Data Key or validation rules.
Note: You can only change the label and placeholder text for Core Fields.
This information is in the blue banner if you forget!
Within this area, we have multiple settings.
The last setting is Display even when the value is empty. This will show the field label on the form even when the user isn’t editing the form.
We can now see that Favourite Food is displayed on the form, even though we haven’t filled it out yet.
If we Edit the form, there is now a prompt telling us the Favourite Food field is required. We are prevented from saving the form if nothing is entered in this field.
Profile Hero blocks are large banner images that can also display other blocks within them. For now we will simply add one as a banner image to make our profile look nice!
To add a Profile Hero block to your profile, first go into Edit mode. Then do the following:
Your profile should look something like this:
Adding a Profile Picture uses the same steps as adding a Profile Hero image.
The Profile Picture will come in handy during our next activity, Creating a Search Directory.
We are going to add one more field to our basic form, which we will use in our next activity.
Icons and custom form layouts are possible using HTML, but this is outside of the scope of this current training.
If you would like to explore using icons or layouts for your forms, reach out to one of our CST reps on your Monday.com support board.
Before moving on to the next activity, make sure you have done the following:
Estimated time to complete: 20 minutes
Now that we have profiles, we need to provide users with a way to search for them. To do this we will create a directory search page. The finished result will look something like this:
In this activity you will learn about:
Instruction
The customisation menu for the User Search Container will appear after you add it to your page. We will go through each of the sections so you know what they do and how to use them.
Search settings
Boost data
This section is used to boost certain results to the top of the search. You can do this based on Profile Data Keys.
For example, if you wanted to prioritise users who have filled in their employment history, you could add in core_employments.
To add fields here, press the blue + icon. A new row will appear where you can search for and add a Key.
The Amount option allows you to prioritise the keys. The higher the number, the more it’s prioritised in the search results.
Filter settings
Filters allow users to display search results on the page based upon certain criteria. For example, you could filter search results to only show users who are a member of a certain group or those in a specific location. In order to do this, filters need to be added to the search container.
We’ll create a filter now that uses the LikesDogs key we made in the Creating a Profile Page training.
- 1. Click the blue
icon in the Add a New Filter section of the User Search Container Edit Block menu.
Within this area are many settings. We will go over what they are and how to use them throughout this and future training activities.
Filter Title: The name of the filter. This will be displayed to users.
Schema Key: The Profile Data Key that the filter is based on.
We will come back to the filter settings later and go over more of them.
For now, we will scroll down to the section which asks “Which profile page should this link to?”
You will be returned to your blank User Directory page. Nothing has visibly changed with the addition of our filter to the User Search Container, but that’s okay! We will need to add some additional blocks to the page to display our results, as well as to make our page look nice.
Your page should look like this:
We are going to add three new blocks to our Search Container:
All three of these blocks are within the Search category of the Block Library, meaning they will only work correctly if they are within a Search Container block. Blocks in the Block Library are grouped by category but also colour-coded to easily distinguish types.
Search blocks can be added inside of cards and columns, so long as their parent block is a Search Container block
Your page should look like the image below. You can see that our Likes Dogs filter is already showing in the Filters block. This is because the Filters block displays any filters you’ve set in the User Search Container.
Now we need to set up our Results Grid block to display our results properly.
To do this we need to choose the type of block the Results Grid displays. We just want it to show an image of the user to represent their profile. As every user profile has a User Overview block, we can find and display those.
We now have a basic User Directory! You can search using the search bar or by selecting the Likes Dogs filter.
Let’s add some additional filters and make our page look even better!
Users will typically want more than one filter to choose from when looking at a search directory, so let’s add a couple more filters that might help our users find the person they want.
I’m going to add a filter that will show what country a user is from, so users can see profiles for people in their same country.
Next we are going to add the year of graduation, so users can find people they may have had courses with.
We can now see our additional filters on the left, under the Likes Dogs filter.
Don’t worry if you can’t see your filters, as your site may not have enough users yet to populate this information! If you want to see the filters in action, you can go to your own profile (the one built into the platform, not the one we created in the last activity!) and fill out the fields matching the filters we just added.
You can access your personal profile by clicking on your profile picture in the upper right corner of the page and then click My Profile. From there you will be able to fill in your education and contact information, which is where the core_homeCountry and core_educations.yearEnded pull their data from!
Lastly, we’re going to add some visual touches to our directory to give it some polish and provide more navigation options!
This block allows users to reset all the filters without having to click into each one. It is especially useful when you have a directory with lots of filters!
This block allows users to page through search results if there are more than what shows on the first page. If this isn’t added, users will only be able to see the first 12 results.
Your site may not have enough users for pages to show up right now, but this knowledge will come in handy when you want to create a search directory on your platform in the future!
Lastly, let’s make our directory stand out a bit from the background of the page.
Our Search Directory looks much better now!
The design options within the system are practically endless, so if you want to test out other ways of structuring the page or other kinds of blocks, go for it!
By adding a few more Card blocks, a Search Results Map block, and reducing the Results Size to 6 on the User Search Container, my Search Directory now looks like this:
Congrats, you now have a User Directory!
Before moving on to the next activity, have you done the following?
Sometimes you will want blocks or pages to have specific visibilities beyond just being visible to everyone or no-one. In the following few activities, we will discuss and show additional visibility options and their impact on user experience.
In this activity you will learn about:
Estimated time to complete: 18 minutes
Sometimes it is useful to be able to show different information or blocks to users based on their account type or group membership. To do this, we can set visibility permissions based on user lists.
To familiarise ourselves with this function, we will return to the Welcome Page we made during Activity 1 and add a survey form for users to fill out. We can use this to collect information from our users about how they heard about the platform and how they want to engage with other users.
Since different types of users may answer these questions differently, we will create separate forms for each account type and set their visibility permissions accordingly.
Step 1 Important Terms
View As
You can View As button at the top of the page to quickly see how the page will look to certain users, including whether or not a page or block is hidden to them.
In this section you will learn about:
Instruction
Now that we have our form created, we need to adjust the visibility settings so that only Students can see it.
What we’ve just done is created a visibility permission for this block that will make it visible to no-one, unless they are part of the Student (ACCOUNT TYPE) user list.
As an admin user, you can see all blocks on a page, regardless of that block’s visibility settings. (With the exception of Advanced Visibility, which will be discussed in Architect Training!)
To test whether our blocks have the correct visibility settings, we can view any page as a member of a specified user list.
You will now see the page as if you were part of the specified user list. Our Student Survey isn’t visible, as expected!
You will now see the page as a Student, with the Student Survey visible.
Important
If you receive a 404 Page Not Found error when using View As, make sure the specified user list has access to both the Module and your Welcome Page!
You can check this through the following steps:
Understanding visibility permissions is important, as you can use this to adjust how different types of users interact with the platform. Now that you understand basic visibility settings with user lists, we will move on to additional settings, like profile page visibilities and device visibility.
Before moving on to the next activity, make sure you have done the following:
Estimated time to complete: 15 minutes
The Profile page visibility check boxes allow you to set if a block will appear when viewed on a user’s profile:
Using the Profile page from Activity 2 and the Search Directory from Activity 3, we will learn more about how to use this setting and what it looks like in action.
In this section you will learn about:
Instruction
You may not have noticed, but every block we’ve added during these training activities has had the Profile page visibility checkboxes.
By default, both boxes will be checked. This means that any block you add to a profile page will be visible to both the owner of the page and anyone who views that profile page.
Sometimes you will want to collect information from users as the admin of a platform that you don’t want other users to see. Creating a block that is only visible to the owner of a profile page is a great way to accomplish this.
We now have a section on the profile page which is only visible to the owner of the page. However, it does seem to blend visually a little too much into the section above, so let’s separate it from the other form.
Putting a form straight onto the page without any background doesn’t look very nice, so let’s also put it in a card block
Now that our form is inside a card block, we need to adjust the card block’s visibility settings. If we don’t, our form will be invisible to the user!
If we don’t uncheck the Others box, users who go to view this profile (who aren’t the owner of the profile) will see an empty card block. We don’t want that!
We now have a form for users to fill out that will only be visible to themselves and admins!
We have a block that suits this purpose precisely already in our block library. While the block itself is coded to not show to the owner of the profile already, it is a good example of when you might want to use this functionality.
Apply to Me Block
The Apply to Me block can be placed on a profile so users viewing that profile are given the opportunity to connect with them through a Connection Programme they are both part of.
Important
This block won’t function unless you have access to two test profiles and a connection programme!
It is also not visible if you are viewing your own profile.
If you don’t have two profiles and a connection programme to use, you don’t need to complete the following steps (1-8). Simply read through to see how it works.
In this case, my profile is a Mentee in the eMentoring Connection Programme and the profile I am going to view is a Mentor in that same programme.
There are few other situations where you might want to use a Viewer-Only block, but if you come across a situation where you think it might be useful, feel free to try building it out for yourself!
Before moving on to the next section, have you done the following?
Estimated time to complete: 20 minutes
The Device visibility tick boxes adjust whether or not the block is visible when viewing the page on either a desktop or mobile device.
Many users will be accessing the platform via a mobile device, so we want to provide a good user experience for them! Sometimes this means creating a completely separate view for them that is suitable for small screens.
In this section you will learn about:
Instruction
We are going to return to our Search Directory that we created in Activity 3 and add a mobile version of the directory that will be suitable for small screens.
Now users who are accessing this page from a computer will be shown the blocks within the Desktop Container and users accessing the page from a mobile device will be shown blocks within the Mobile Container!
Creating the Search Directory for a mobile device will be very similar to the steps we took in Activity 3 to create the original directory.
Search Results Map
To begin, we will be adding a Search Results Map to our page. You may or may not have added one of these blocks at the end of Activity 3, depending on how you chose to design your directory.
Looking at our page, the Map takes up quite a bit of space. To fix this, we will limit its height in the Design Tab.
A Note about Columns and Mobile-Friendly Pages
If you’re looking at your Desktop Search Directory you will see that the next block down the page, the Search Bar, is housed within a Columns block. When creating a Mobile-friendly page, we don’t use columns since a mobile screen isn’t wide enough to display information fully in that format!
Since we are creating the Mobile version of the Search Directory within the existing User Search Container, our filters are already there for us! This means that should the filters need to be changed in the future, our Mobile and Desktop versions will be automatically updated at the same time.
Now we’ve got all the blocks we need! Next, we will configure the Results Grid in a Mobile-friendly way.
Now we’ve got a Mobile-friendly Search Directory!
Be sure to set all the blocks you’ve added as visible to everyone.
Now that we’ve got our new Mobile Search Directory, how do we make sure it looks good on a mobile device?
There are a couple of options:
If you’ve got a mobile phone handy, you can simply log into the platform through your mobile browser to see how it looks!
But if you don’t have a mobile device handy or you don’t want to go through the faff of logging in on another device when you’re already here on your computer, you can easily do it within your web browser!
Almost identical to Chrome:
Also very similar to the previous two browsers.
As I don’t have an Apple computer, one of our developers kindly provided screenshots of how to use the mobile emulator on Safari. The screenshots aren’t of the same site as the rest of the training, but the process will still be the same!
Now we have a fully functioning mobile-friendly search directory!
Other pages can be made more mobile-friendly as well, like our Profile and Welcome pages. You can have a go at making your own mobile versions for these pages if you want more practice!