Within the IPS Community Suite, you are provided with the ability to add items to your pages by way of a 'Block Manager'. This drag/drop facility allows you to quickly add items to create a sidebar, or add items to the top and bottom of your page. This facility is also used within our pages application to facilitate the easy creation of new pages.
Adding blocks to your pages is a simple process. When logged in as a member of staff with the moderator permission "Can use sidebar", you will see a tab sticking out from the left of the site. Clicking on this will open the block manager, and reveal available areas of the site where you can place your blocks. This is shown in the gif image below
Block Manager Usage
Some blocks that you add to the page will have their own configuration to them. Where this is the case, you will see an edit button where you can add further configuration.
Clicking edit reveals setup options
In this example, we are using the topic feed. As you can see from the image below, you can configure many of these blocks to very specific needs. For example, you may want a block named "News" which is fed from your news forum. This would easily done with the topic feed block.
Topic Feed Config
Selecting the visibility tab, you can also then choose to show on all devices, or limit to desktop, tablet, or mobile view.
Block Visibility
If you have purchased the pages application, there are a few additions to the block manager that are worth noting. Each of these are described below. If you haven't yet purchased the pages application, and you are interested in adding this to your community, please see the following guide. If you are one of our community in the cloud customers, don't worry, you already have this.
By adding one of these blocks from the block manager in teh pages section, you can add a WYSIWYG Editor to any blog placement area. Meaning you can add anything you like to the page that you could add in the editor.
Here a WYSIWYG block has been added to an articles section of the site.
WYSIWYG Editor
Adding this to the top of the page, I have been able to add a simple text description to the top of my page. While this is a simple example, you can of course add anything you like into the editor area.
WYSIWYG Result
If you have a database set up within your pages application, and also have a field added to that database as filterable, you can add a "Database Filters" block to your page.
Database Filters
This will allow you to filter the database (in this case, articles) using the selections, as shown.
You can read more about setting up fields from our pages guide on building a recipe section at the link below
The page builder widget block types were introduced in version 4.5, and allow for the easy adding of content to any page on your site, with a lot of customizations, and without the need to code any CSS of HTML. You can add background colors and images, adjust padding and borders and even add color overlays right from the widget menu. There are 3 of these widgets, of which serve slightly different purposes
- Page Builder: Text - Used for adding simple text to the page
- Page Builder: Media Embed - Embedding of external content, such as YouTube, Vimeo, GIPHY and more
- Page Builder: Upload Images - Add a single image, or an image carousel to the page
Each accepts slightly different input when adding them to the page. So for the Page Builder it's just text that is accepted, the Media Embed it's a single media URL, and the upload images it is one or more images.
All three of these blocks contain an 'advanced' tab, which allows you to very quickly change the look of the block to suit
Advanced Page Builder Settings
One item in the advanced settings which is worth extra note is the "Set custom background" setting. Here you can move from the default inherit option, to add background images or colors. So you can very quickly create striking sections on your page within a few clicks. These also contain a transparency option, so you can 'fade' an image into the background of text for example.
Background Image Settings
This example is simply a stock image for a background image with some transparency selected, a change of font size and padding. All done with a few clicks from the advanced tab
Background Image Example
For a further look at this feature, please take a look at our video showing these features in action
Report Guide