Working With Modules
From Flux Developer Portal
The page editor allows the Community Admin to add new page content, edit or remove existing page content, and rearrange content through a drag-and-drop interface on all Page Building Tool (PBT) pages. To access the page editor, log in to a flux Community as the Community Admin, navigate to a PBT page, and select the "Edit Mode" button.
Contents |
Adding Modules to a Page
To add a Module to a page, perform the following steps:
- First, log in as the Community Admin.
- Navigate to the page you want to edit.
- Click the "Edit Mode" button located at the top left of the page underneath your navigation menu.
- On the left, you will see the list of Widgets available for that page, and on the right you will see the preview screen.
- Select the type of Module you want to add by clicking its name from the list on the left. A preview of that Module will appear on the right, so you can see what the Module will look like on the page with the default settings. Note that you will need to have content in your Community to populate the Module in order to get a real idea what it will look like.
- If you like the way the Module looks, click the "Add Module" button on the lower right side of the preview screen. By default, the Widget will appear at the top of the right column. You can move it to another place on the page by following the instructions under "Rearranging Modules on a Page."
Customizing Modules to Add to a Page
To customize a Module for adding to hosted page, complete the steps for adding a Module above, but before clicking "Add", perform the following:
- Click the "Customize this module" link. The editable Module parameters will appear on the left where the list of Modules was previously. For more information about specific Module parameters, please see the "Module Parameters" section below.
- Change any parameters you wish and click the "Update Preview" button to view the changes. Continue this step until you are happy with the appearance of the Module.
- Click the "Add Module" button on the lower right side of the preview screen. By default, the Module will appear at the top of the right column. You can move it to another place on the page by following the instructions under "Rearranging Modules on a Page."
Note that you can also customize some features of a module when it is already on the page. See the "Customizing Existing Modules on a Page" section below.
Customizing Existing Modules on Hosted Pages
To customize an existing Module on a hosted page, perform the following steps:
- First, log in as the Community Admin.
- Navigate to the page you want to edit.
- Click the "Edit Mode" button located at the top left of the page underneath your navigation menu.
- Locate the Module that you want to modify on the page.
- Click the "Edit" link in the upper right corner of the Module.
- The editable "Basic Settings" Module parameters will appear in the Module. For more information about specific Module parameters, please see the "Module Parameters" section below.
- Change any parameters you wish and click the "Save" button to save and view the changes.
- If you want to customize additional parameters than are available in the Basic Settings section, click the "Edit FML" link at top right of the module when in Edit mode. This will open the FML code for manual editing. Please note you will need some knowledge of FML to customize the module this way. Please see the FML section for more information about FML.
Rearranging Modules on a Hosted Page
Once you have all the Modules you want on the page, you may want to rearrange the order or change which column specific Modules appear in.
- Once in edit mode, scroll down the page below the "Add Modules" interface and find the Module you'd like to move.
- Mouse over the "Drag" section in the module header, and click; then drag-and-drop to move the module to a different location on the page.
Please note: updates happen in real-time, so once a module is moved it will automatically appear in the new position on the live page.
Modules can only be dragged and dropped according to the layout type of the page.
Parameters for Modules on Hosted Pages
Coming Soon
Creating Custom Modules
The FML code for all flux Modules can be modified by the Community Admin, so even if you start with one of the default Modules as a foundation, you can still customize it and make it your own. However, you may find that you want to create your own Module from scratch instead of using the baseline Modules provided. There are two types of custom Modules in flux: Custom HTML Module and Custom Markup (FML) Module.
Custom HTML Module
To add a custom HTML Module to a hosted page:
- First, log in as the Community Admin.
- Navigate to the page you want to edit.
- Click the "Edit Mode" button located at the top left of the page underneath your navigation menu.
- Click the "Custom HTML Module" from the list on the left.
- Click the "Customize this module" link. The editable HTML entry box will appear on the left where the list of Modules was previously.
- Choose the title for your Module, and add your HTML code. Click the "Update Preview" button to view the changes. Continue this step until you are happy with the appearance of the Module.
- Click the "Add Module" button on the lower right side of the preview screen. By default, the Widget will appear at the top of the right column. You can move it to another place on the page by following the instructions under "Rearranging Modules on a Page."
Note that you can also customize the code when the Module is already on the page by following the "Customizing Existing Modules on a Page" instructions above.
Custom FML Module
To add a custom FML Module to a hosted page:
- First, log in as the Community Admin.
- Navigate to the page you want to edit.
- Click the "Edit Mode" button located at the top left of the page underneath your navigation menu.
- Click the "Custom Markup Module" from the list on the left.
- Click the "Customize this module" link.
- In order to work with Custom FML Modules, your community must be in Preview mode. If your community is not already in Preview mode, you will see text prompting you to turn on Preview mode. Do so by clicking the "Preview Mode" button on the left.
- You will have to select the module and "Customize" again once the community is in Preview mode. Then the editable FML entry box will appear on the left where the list of Modules was previously.
- Choose the title for your Module, and add your FML code. Click the "Update Preview" button to view the changes. Continue this step until you are happy with the appearance of the Module.
- Click the "Add Module" button on the lower right side of the preview screen. By default, the Module will appear at the top of the right column. You can move it to another place on the page by following the instructions under "Rearranging Module on a Page."
Note that you can also customize the code when the Module is already on the page by following the "Customizing Existing Modules on a Page" instructions above.
