Edwiser RemUI Page Builder Installation and Setup

To use the Edwiser Page Builder make sure the following plugins are installed:

  • Edwiser Page Builder  (local_edwiserpagebuilder.zip)
  • Edwiser Advanced Block  (block_edwiseradvancedblock.zip)
  • Page Builder filter (filter_edwiserpbf.zip)

Please note that you will find all the above-mentioned plugins in the main Edwiser RemUI file downloaded from the Edwiser My-Account page.

To install follow the steps below:

  • Log in to your Moodle site as an admin and go to Administration → Site administration→ Plugins→ Install plugins.
  • Upload the ZIP file. You could be prompted to add extra details (in the ‘Show more‘ section), set it under block category.

Enable Page Builder filter 

Navigate to Site Admin > Plugins >  Filters > Manage Filters. Search for Edwiser Page Builder Filter. Check the ‘Active’ column and the ‘Edwiser Page Builder’ should be turned ‘on’ to activate the Edwiser Page Builder plugin.

With the Edwiser RemUI-specific Moodle custom blocks, you can add up to 10 Moodle custom blocks. You can even add text, images, or any other available block on your Course archive page or any other page as per your requirement.

To add RemUI custom block please follow these steps:

  1. Click “Customize this page” button,
  2. Click on “Add a Block” button,
  3. Click on the block you wish to add
  4. By default the block is added to the right side bar simply drag and drop the block on the main page.
  5. To edit the block click on live”Open with live customizer”

Live Customizer for Page Builder:

1) Structure:

2) The header section: 

i) The left section of the header has two buttons. These buttons toggle the left column and the right column on the live customizer page.

ii) The Middle section of the header menu has options to change the view or display size. You can select the display size according to your need.

ii) The right section of the header menu has four buttons.

  • Undo the last action 
  • Redo the last action
  • Save changes
  • Close the live customizer

3) The Left Column:

i) The Left Column includes the following two sections:

  • Block Style: Here you can add CSS styling for the selected block
  • Block Script: Here you can add javascript for the selected block

4) The Right Column :

This section includes the following three sections:

i) Content: Here you will find two sections based on the component selected. The common section for all components is the general section where you can add ID and CSS for the same and the other section varies for each component.

ii) Style: Here you can adjust the following styles:

  • Display
  • Typography
  • Size
  • Margin
  • Padding
  • Border
  • Border radius
  • Background Image

iii) Advanced:

The section is reserved for future updates.

5) Canvas Section: 

The centre section is the canvas. Here you can check the live customization and design of your block.

6) Functional Blocks: 

To add functional blocks add an HTML block > Click on the + on the canvas page > scroll down to functional blocks.

Was this page helpful?
Yes No