Adding pages and blocks

Now that you know what Pages and Blocks are, let's do something simple. Let's add a new page and then add one of Rock's built-in blocks to that new page.

TODO: This should be in the Admin Guide. Create a video demo of this.

Step 1

Open your Rock ChMS website and login as an Administrator.

Step 2

On the home page, choose the "Child Pages" icon (Attachments/Adding-Pages-and-Blocks/child-pages-icon.png) from the toolbar in the bottom right corner. This is how you add a new page to an existing page. In the Child Pages popup select the Add button.

Attachments/Adding-Pages-and-Blocks/s_child-pages.png

Step 2

Type "Hello World Page" for the name of your new page, then press the Add button.

Attachments/Adding-Pages-and-Blocks/s_add-child-page.png

Step 3

You should see your new page in the list of child pages. Press the Done button and then refresh the page in your browser.

Attachments/Adding-Pages-and-Blocks/s_added-child-page.png

Once you've refreshed the page in your browser you should see the new page listed in the menu.

Attachments/Adding-Pages-and-Blocks/s_home-page-with-new-page.png

Notice that you can't click on your new page to view it. This is because the default Rock menu uses a two level page structure to organize pages. The third level is a clickable/viewable page.

Let's move that new page underneath the Intranet -> Office Information menu structure.

Step 4 - Move the Page

Click the "Child Pages" icon in the toolbar again and then click the new Hello World Page. This will navigate to the page. Once on that page select the "Page Properties" icon (Attachments/Adding-Pages-and-Blocks/page-properties-icon.png) in the toolbar and in the window that pops up change the Parent Page to the one called "Office Information"

Attachments/Adding-Pages-and-Blocks/s_change-parent-page.png

Press the Save button when finished and then refresh the page in your browser.

Attachments/Adding-Pages-and-Blocks/s_after-moving-page.png

Step 5 - Add a Block to the Page.

Now let's add an HtmlContent block to the page. Click the Page Zones icon (Attachments/Adding-Pages-and-Blocks/page-zones-icon.png) from the toolbar. This will show you each Zone on the page that can hold Blocks.

Attachments/Adding-Pages-and-Blocks/s_zones-of-new-page.png

Step 6

Find the zone with the name "Content" and hover over the slide-out and click on the Zone Blocks icon.

Attachments/Adding-Pages-and-Blocks/s_zone-blocks.png

You will see a list (which will be empty) of Blocks that are in that zone.

Attachments/Adding-Pages-and-Blocks/s_content-zone-blocks.png

Click the Add button.

Step 7

Name your block "HTML editor" and make sure that the Type is "HTML Content".

Attachments/Adding-Pages-and-Blocks/s_add-page-block.png

Press Save and then press Done.

Done!

Once the page is refreshed, you may not see the new block because there is no content in it. Clicking the "Block Configuration" icon (Attachments/Adding-Pages-and-Blocks/block-configuration-icon.png) from the toolbar will let you select the HTML block's edit feature as shown here.

Attachments/Adding-Pages-and-Blocks/s_edit-html-block-content.png