Add Blocks & Pages

As you work on your site, you’ll want to add new pages. There are two ways to do this: through your external organization site, or through your internal Rock site. Both methods end in the same result (new pages with blocks and content), you just take different paths to get there. Each approach has its pros and cons. Creating pages from your external site allows you to view the pages as you’re creating them. Creating pages from your internal site allows you to create and configure pages faster as well as to easily see how the new pages fit into the overall site structure.

The Admin Toolbar is the gateway to a majority of Rock's content management features. This bar is displayed at the bottom of each page that the logged in person has rights to manage. It's always available at the bottom of the page, but it's hidden until you hover over it with your mouse.

You can find the following buttons/links on the toolbar:

  • ti ti-border-all - Block Configuration
  • ti ti-settings - Page Properties
  • ti ti-sitemap - Child Pages
  • ti ti-columns - Page Zones
  • ti ti-lock - Page Security
  • ti ti-link - Short Links
  • ti ti-info-circle - Rock Information

Let’s start by looking at how to add a page from your external site.

Adding a Page (External Site)

To add a page from your external organization site, follow these steps:

  1. Navigate to the parent page that you want the new page to be under.
  2. Click the ti ti-sitemap (Child Page) button from the Admin Toolbar.
  3. From the Child Page dialog, click the ti ti-circle-plus button to add a new page to the list.
  4. The Add screen will allow you to provide a name for your page and choose a layout. To configure the page fully you'll need to click on it from the child page list and then click its ti ti-settings (Page Properties) button on its Admin Toolbar.

Child Pages Dialog

Add Page Dialog

Adding a Block to a Page (External Site)

A small part of your content management duties will be to add and configure blocks on a page. To add a block to an existing page, follow these simple steps.

  1. Navigate to the page you’d like to add the block to.
  2. Select the ti ti-columns (Page Zone Editor) button in the page’s Admin Toolbar.
  3. This will highlight all of the zones on the page for you.
  4. Select the fly-out toolbar for the zone you wish to add the block to and click its ti ti-border-all (Zone Blocks) button. This will bring up the zone's block list.
  5. From here you have a decision to make. Do you want the block to live on just this page, on every page that uses this layout, or across your entire site? Decide by picking the appropriate tab at the top of the dialog: Page, Layout or Site. Keep in mind, choosing any option other than Page carries some risk. The Layout and Site options are best used for blocks you're certain belong on multiple pages, such as headers and footers.
  6. Next, click the ti ti-circle-plus (Add Block) button to add the block to the layout. Like adding a page you'll just provide a name for your block and the type of block you wish to add. You'll add more configuration later.
  7. Next, determine in what order you want your block to appear within the zone. You can move it up or down by dragging and dropping the order on the list.
  8. Now that you've added your block to the list, click the Done link and reload your page. Your new block will now be on the page.
  9. In most cases, you'll now need to configure your block. To do so click the ti ti-border-all (Block Configuration) button in the Admin Toolbar. This will highlight each block on the page.
  10. To edit the settings, click the ti ti-settings (Block Properties) button from the block's fly-out menu. This will bring up the block properties dialog with all of the settings for the selected block.

Zone Block List Dialog

Add Block

Now that your page is created and your block structure is set up, it’s time to configure your page properties and add content. To learn how to do this, see the Managing Content and Pages section below.

Adding a Page (Internal Site)

Adding a page from your internal site allows you to both create a page and configure its properties in the same place.

Begin by going to Admin Tools > CMS Configuration > Pages. You’ll see a tree navigation of the pages of your site, as well as a ti ti-plus icon. Click the ti ti-plus icon and select either "Add Top-Level" or "Add Child To Selected". Rock will then display the Add Page screen.

The Add Page screen has three tabs: Basic Settings, Display Settings, and Advanced Settings. This is where you set up the new page’s properties.

  1. Parent Page - You can easily change the parent page for your selected page. This will alter where that page is displayed in the navigation.
  2. Internal Name - This is the name of the page that is used in the admin menus and page pickers. Often, in these situations, you want the page to have a more descriptive name than you might want to be displayed in a menu on the site. For instance, you might want the homepage of a site to have the internal name of "Youth Sports Homepage" but when you're on the site the title should be simply "Home" on the menu.
  3. Page Title - This is the name that will be used for the page title element on the page. It will also be used in the navigation menus and breadcrumbs.
  4. Browser Title - For Search Engine Optimization it's often important to have a different name in the browser's title. This setting allows you to edit this.
  5. Site - Each page belongs to a site. You can change the site for a page with this setting. Keep in mind that the page gets its theme from the site, so changing this setting could change how the page is displayed.
  6. Layout - This selects the layout that the page should use. Further discussion of layouts can be found in the chapter Looking Deeper at Layouts.
  7. Show Icon - An icon can be used in the page title and breadcrumbs if it is enabled with this setting.
  8. Icon CSS Class - This setting allows you to enter the CSS class for the font icon you wish to use. While Font Awesome is installed, there's no reason you can't add your own alternate font icon collection and enter your custom class here. When using Font Awesome, you should use the syntax fa fa-[icon name].
  9. Description - The description gives a short summary of the page and its intent. You can use this as "internal documentation" or, using Lava, you can use it in your menus and page listings.

  1. Page Display Settings - These settings control the view state of various components of the page (title, breadcrumbs, description, etc.) How these actually render on the page is somewhat dependent on the theme you are using.
  2. Menu Display When - How and when a page is displayed in a menu has several different options.
    1. When Allowed: With this default option a page will only be displayed in the menu when the person has view permissions to the page.
    2. Always: You may want some pages that require a login to be displayed in the menu even when the person isn't logged in. When the person clicks the link, they will be asked to log in before proceeding to the page. This is helpful for things like group toolboxes where you want the person to see the option and then log in before they can view the contents.
    3. Never: Some support pages aren't meant to ever be navigated to directly. Setting them to
  3. Breadcrumb Settings - These settings determine whether a page should be displayed in the breadcrumbs and, if so, whether an icon should be included. Some designers set the name to not display but will show an icon for homepages.

  1. Force SSL - This ensures that the page will always load using SSL. This is important for pages like giving or online registration where credit card information will be used on the page. This does require that your webserver is configured to support SSL.
  2. Enable ViewState - ViewState is a .Net technology that allows a page to remember its state across postbacks. If this doesn’t make complete sense to you, you probably shouldn't uncheck the box. In most cases bad things will happen if you do.
  3. Cache Settings - Here you'll select the Cacheability Type (see the ti ti-info-circle icon in Rock for descriptions of each option) as well as the Max Age and Max Shared Age for how long the page should be cached.
  4. Body CSS Class - You can enter a specific CSS class for a specific page in this field. For example, if you want to change the look and feel of a particular registration landing page, you can create a unique CSS class for that page and designate the class here.
  5. Page Routes - You can enter page routes for the page here. Several routes can be configured by delimiting them with commas. For more information see the Routes chapter below.
  6. Page Intent - Classify the purpose of this page. For more see the Interaction Intents documentation.
  7. Countries Restricted from Accessing - Block users attempting to access your site from the selected countries. For more info see IP Address Geocoding.
  8. Rate Limiting Enable - If you check this box, the two fields below (Max Requests Per Period, Rate Limit Period) can be used to control how many times a specific IP address is allowed to access the page within the specified period of time. This helps prevent malicious attackers from overloading the system with excessive requests, potentially causing Rock to become inaccessible.
  9. Header Content - As a web designer we know you'll have custom scripts, meta tags, styling and more that you'll want to add to the page's header. Whatever text you add to this setting will be placed into the page's header.

Click Save when you’re done. Now it’s time to add content to your page. To learn how to do this, see the Managing Content and Pages chapter below.

Tip

Saving Your New Page Configurations
While the Save button appears on each of the Add Page tabs, you only have to click it once to save the configuration settings for all three tabs.  

Editing a Page (Internal Site)

You can also edit a page’s block configuration and properties from the internal site. From the Pages screen (Admin Tools > CMS Configuration > Pages), click the page you want to edit from the tree navigation.

From here, you can edit an existing block by clicking the ti ti-pencil-square button. You can also add a new block by selecting the zone where you want the block to go from the dropdown menu on the right, then clicking ti ti-circle-plus Add Block to Zone to display the Add Block window.

Note here the option to add this block to the Page, Layout or Site. Just like adding a block to your external site, you need to decide if you want this block to only appear on the current page, on any page using this layout or across your entire internal site. The Layout and Site options are best used when adding a block you know for sure belongs on every page, such as a header or footer. Otherwise, it's best to use the Page option.

To edit an existing block’s properties, click the ti ti-settings button. Rock will display the Block Properties screen. The options displayed will depend on the kind of block you're editing.