Creating a Page Template for the Agility CMS Create React App


Page Templates allow you to define the areas (Content Zones) editors can add Modules and exactly where they render in your HTML.

In this exercise, we'll be creating a two-column Page Template.  This can be really useful in a website with responsive design so that when the site is loaded on a mobile device, a single column is shown, but on a larger desktop device, the full 2-column experience is available.

We'll be covering:

Let's get started!

Create the Page Template in Agility CMS

  1. In the Agility Content Manager, navigate to the Page Templates section of Settings and click the "New" button.

  2. Name the new template "Two Column Template", and set the Digital Channel Type to "Website".
  3. Click on the plus sign in Module Zones, to create a new Module Zone.

  4. Name the content zone “Main Content Zone” with a reference name of “MainContentZone”

  5. Repeat step 3-4 to create "Right Content Zone", with the appropriate reference name.

  6. Click on OK and then Save & Close to complete the creation of the Page Template.

Setup the Page Template in React

  1. In the Agility CMS Create React App, create a file called TwoColumnTemplate.js and enter the following code. Notice how we seta CSS class name based on the Page Template name, and we use the Reference Names of the module zones that we defined above.

  2. Now you can edit the agility.config.js file and add an import to TwoColumnTemplate.js, as well as a pageTemplateComponent listing for TwoColumnTemplate. It should look something like this.

  3. If you are using a framework such as Bootstrap or SemanticUI, you can add in classes to control the column sizing and visibility on different screen sizes.  You can also code this yourself if you'd like in your website CSS using @media queries.

  4. The magic leap here is that the Agility React site has logic built into the ContentZone component render the modules that are on that particular page. Cool, right?

Using the Page Template on a Page

Now it's time to use our page and see the fruits of our labours!

  1. Back in the Agility CMS, navigate to the Pages section and click the (+) action to add a new page.   Choose your Two Column Template in the first field, and then set your Menu Text property.  The Page Title and Page Name fields will be auto-populated based on what you enter there to save you time.

  2. When the new Page is loaded, click the (+) action on the right area of each Module Zone and choose the Rich Text Module.  Do that for each Content Zone on the page.

  3. Now for the fun part!  In your terminal window, run the react site in your browser locally using the following command:

    npm start
  4. In your browser, you can navigate to the page name you created above.  If all goes well, you should see your content rendered properly in each zone.  Nice work!


0 out of 0 found this helpful



Please sign in to leave a comment.