Welcome to our new Web Builder tool! This upgraded module features a simple drag & drop tool that allows you to easily redesign and maintain your website. No need to edit HTML source code anymore.
I - How to access the new Web Builder
- If you already have a website on the old version of the web builder and would like to use the new web builder, please check out this tutorial to migrate your website.
- If you are starting a new website, please follow the steps below:
- Log in to CampusGroups.
- Manage your group.
- Click on “Website” on the left-side menu.
4. Click the “Migrate to the New Website Builder” button.
5. On this new page, you will have the ability to pick a template to apply to your website. This will automatically define the look and feel of your website and is the first step to complete to be able to work on the redesign.
6. Once you have chosen a theme, if this theme is configured with template pages, you will have the option to pick one to be applied to your home page, and automatically generate secondary placeholder web pages. Once you have made your selection, you can click the "Next" button at the bottom to apply it.
If there is no template page configured, you will be able to automatically replicate the navigation of your current website by clicking the "Import Navigation" button that will appear below.
7. The top of the page allows you to keep the current standard website active while you work on your new pages. Once you are done with the setup of the new website, simply click the “Activate” radio button under the “New Website Builder” right section. The existing URL of the website will automatically redirect to the new website.
The top of the page will update to match the following image, indicating the new web builder has been successfully activated.
Please note: You can go back and forth anytime between the standard and new website module.
II - Create your navigation
During the previous step of the tutorial you might have been required to import the navigation.
If you already had a navigation on the previous web builder, it would have been imported, and if you only started building the website with the new builder, a default navigation should have been imported.
- To upload the website logo, click on "Website Settings".
2. To start creating your own navigation, click the “Create Menu” and “Create Page” buttons located at the top right corner of the page.
3. To create a Menu, you will only need to type its name and click on "OK".
4. To create a page, type its name and choose a template for your page. Then, click on "Create".
There are many different templates. Feel free to explore them to find the one that suits your needs.
5. The "Home" radio button on a page allows you to define which page will be the Home page.
6. You can then assign pages to a menu by using the “Select a Menu” dropdown.
7. It is also possible to reorder menus and pages by dragging and dropping them in the list. Simply click and hold to drag the move icon located on the right of the screen.
8. "Delete", "Rename" and "Duplicate" actions are also accessible under the far-right menu.
The "Access" button allows you to restrict the privacy of a page to specific users (e.g. restrict a page to members of the group only). The "Settings" button gives you access to advanced options such as redirecting a page to an external URL.
9. The "Publish" checkbox allows you to publish or unpublish a page, and checking the "Hide in Menu" box will remove your page's link from the menu to which it has been assigned.
III - Edit your pages
To edit a page, you can either click on the "Edit" button of the page you want to edit from the pages list.
Access your page in preview mode by either clicking on the link at the top of the page or clicking on the "Preview" button.
Click the top left red icon to navigate back to the manage page or the blue Edit icon to access edit mode.
The screen should then be divided vertically in two sections:
- The list of content stripes on the left
Like building blocks, these stripes are the content elements that allow you to build a page. Simply drag and drop any of them from the left to the right section of the screen to add content to your website.
2. The content of your page on the right
In this section, you can easily edit content by clicking on a text element (title, paragraph…) and updating it with your own text.
Hovering on a stripe should reveal "Move", "Delete" and "Duplicate" buttons in the right corner. In the same way that you are able to reorder menus and pages, you can horizontally drag and drop the stripes anywhere on the page to build the perfect web page.
Please note: Default stripes are added to each new page, usually a header including the dynamic menu, basic title and paragraph stripes, and a footer.
Once the edits are complete, the green save button on the top left of the screen allows you to apply the changes to the page. You can also click the Cancel red button to cancel any modifications.
More information on the advanced features of the toolbox:
More information on the different types of stripes: