The Pages feature in the Site Admin offers a powerful tool for real-time layout editing with an intuitive interface. This guide will walk you through creating pages, adding modules, and customizing them on your website.
Create new pages | Adding modules | Editing modules | Saving your changes | Additional tips | Other modules
Creating new pages
Select the Create New Page button to start creating a new page.
Enter Page Details
In the Create a New Page window, enter a Name for your page. (this name is seen on the front end)
Optionally, edit the auto-generated slug for the page.
Select Create to proceed or Cancel to discard.
Customize the Page
Once created, select the newly created page from the Grid to customize it.
The left-side navigation allows you to add and customize modules.
The right side displays a preview of the page.
Adding modules
Select Module Type
Select the + icon in the left-side navigation to add a module.
Choose Module
From the prompt, select the module type you want on the page (e.g., Hero, Side-By-Side).
Editing modules
Blurb
Module options
Name: You can change the module's name (not visible on the front end).
Large Editor: Access a spacious editing area using the Large Editor button.
Blurb Editor: The Blurb editor provides a platform for adding, editing, and formatting text, emojis, and links using the TinyMCE editor.
Simultaneously, edit on the left and preview on the right.
Full Width Option: At the bottom of the module, you can select a box to utilize the entire width of the page. This formatting option ensures that the blurb content fits across the whole page width where the module is placed.
Global Feed
When a global feed module is added to a page, it serves as a centralized hub for sharing updates, announcements, and information relevant to the community.
Module options
Title: You can title the module (visible on the front end).
Global Discussions (Global Forum)
When the module for Duscissions is added to a page, it serves several functions to facilitate communication and collaboration among users.
Module options
Title: You can title the module (visible on the front end).
Hero (Banner)
Pre-populated Text
When editing a Banner module, it comes pre-populated with dummy text.
Banner Size
Choose the size of your banner by selecting one of the radio button options:
Small
Medium
Large
Adding an Image
Upload images for your module by using drag-and-drop or the file selector.
Supported file types include png, jpg, jpeg, gif, webp, bmp, svg.
You can edit the image multiple times by using the pencil icon or delete it and start over using the trash can icon.
Text Options
Customize the alignment of the title, subtitle, and button using the radio buttons:
Left
Center
Right
Button Design and Destination
If you're adding a button to the banner, follow these steps:
Label the button in the Text field.
Choose a color for the button from the available dropdown options.
Specify the destination for the button:
For an Internal item (default), search for the name of a course, page, group, or session already created in the Search field.
For an External item, select External using the radio button and enter a valid URL in the URL field.
Schedule
Module Options
Name: You can change the module's name (not visible on the front end).
Filter Options: Use the checkboxes to customize your session display preferences:
Hide Past Sessions: Hides any session with an end date earlier than the current time.
Hide Upcoming Sessions: Hides any session starting later than today.
Hide In-Person Sessions: Hides all in-person sessions.
Filter By Display Label: This allows you to label sessions and filter for specific labels.
Side-By-Side
Pre-populated Text
Similar to the Banner module, Side-By-Side modules come with dummy text.
Adding an Image
Upload images for your module by using drag-and-drop or the file selector.
Supported file types include png, jpg, jpeg, gif, webp, bmp, svg.
You can edit the image multiple times by using the pencil icon or delete it and start over using the trash can icon.
Image Alignment
Choose which side you want your image on using the radio button options for Left or Right
Button Design and Destination
If you're adding a button to the banner, follow these steps:
Label the button appropriately.
Choose a color for the button from the available options.
Specify the destination for the button:
For an Internal item (default), search for the name of a course, page, group, or session already created in the Search field.
For an External item, select External using the radio button and enter a valid URL in the URL field.
Saving your changes
Remember to save your page updates when you are done editing any module to avoid losing progress by selecting the Save Page button.
Additional tips
Experiment with different module types and configurations to achieve the layout you want.
Seek assistance from your JUNO team representative if you encounter any difficulties.
Other modules
Learn more about adding and customizing Grid modules.