Skip to main content
Skip table of contents

Pages

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

2024-04-01_14-30-48.png

The Pages section of the Site Admin.

Creating new pages

  1. Select the Create New Page button to start creating a new page.

  2. 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.

2024-03-28_21-51-46.png

Creating a new Page within the Pages section of the Site Admin

  1. 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

  1. Select Module Type

    • Select the + icon in the left-side navigation to add a module.

  2. Choose Module

    • From the prompt, select the module type you want on the page (e.g., Hero, Side-By-Side).

Editing modules

2024-04-16_13-11-42.png

Adding modules to a new page.

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

  • Name: You can change the module's name (not visible on the front end).

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

  • Name: You can change the module's name (not visible on the front end).

Hero (Banner)

2024-03-28_22-00-07.png

Setting up a Banner Module.

  • 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

2024-03-28_22-14-12.png

Setting up a Schedule module.

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

2024-03-28_22-09-47.png

Setting up a Side-By-Side Module.

  • 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

    1. 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.

2024-04-01_13-39-54.png

Saving the changes made to the page.

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.

Learn more about adding and customizing Rotator modules.

Learn more about adding and customizing Directory modules.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.