Adding Simple Display Page Templates

Display page templates display a specific piece of content. Use them to show a specific article in its own context.

Next, you’ll create a display page template specific to each of your web content types (Event and FAQs), and then use them to add new pages to your site.

Olivia, the content manager, doesn’t have permission to create new page templates. Log in as your site administrator, Preston Palmer, before you begin.

Add the Event Display Page Template

  1. Navigate to the Site Menu (Site Menu) → DesignPage Templates.

  2. Click the Display Page Templates tab.

  3. Click Add (Add icon).

  4. Choose the master page template you created previously, Clarity MP.

    Choose Clarity MP as the master page template to base your new template on.

  5. In the Name field, enter Single-Event Display.

  6. From the Content Type drop-down menu, select Web Content Article.

    The Subtype drop-down menu appears once you make the selection.

  7. Select Event from the Subtype drop-down menu.

    Create a Single-Event Display template for the Event web content article type.

  8. Click Save.

    You automatically begin editing a display page based on the Clarity MP master page.

  9. In the Fragments menu on the left, scroll down to the Content Display fragment group, and drag a Content Display fragment onto the drop zone.

    Drag the Content Display fragment onto the page to display the page's web content.

    By default, this fragment automatically displays the content type selected for the page.

  10. Click the Content Display fragment you added.

    The menu on the left side of the screen changes to the Browser tab to reflect your selection. The menu on the right shows this fragment’s configuration.

    The menus on both sides of the page change to reflect your fragment selection.

  11. Click the Styles tab from the menu on the right side of the screen.

  12. Under Spacing, click the top and bottom margins (in the outer rectangle) and set them to use the Spacer 3 margin (1 rem).

    This creates a buffer of space, above and below where your template is displayed.

  13. Click the left margin and set it to use the Spacer 5 margin (3 rem) so the article content is moved further to the right on the page.

    Increase the margins using the Spacing menu.

  14. Click Publish at the top of the page.

  15. Back on the Display Page Templates page, click the Actions menu (Actions icon) for your new Single-Event Display template and select Mark as Default.

    Now Event articles automatically use this template by default on their display pages.

You have a basic page to display a single Event. Later, you’ll create a better page that can display more events dynamically.

Next, create a template to display a list of FAQs.

Add the FAQs Display Page Template

  1. While on the Display Page Templates page, click Add (Add icon).

  2. Select the Clarity MP master page template again.

  3. In the Name field, enter FAQs Page.

  4. From the Content Type drop-down menu, select Web Content Article.

    The Subtype drop-down menu appears once you make the selection.

  5. Select FAQs from the Subtype drop-down menu.

    Create a FAQs Page template for the FAQs web content article type.

  6. Click Save.

  7. In the Fragments menu on the left, scroll down to the Content Display fragment group, and drag a Content Display fragment onto the drop zone.

  8. Click the Content Display fragment you added.

    The menus on both sides of the screen change to reflect your selection.

  9. Click the Styles tab in the menu on the right.

  10. Set the left and right margins to Spacer 5 (3 rem).

  11. Under the Text section, change the font size to Font Size Large.

  12. Scroll up to Basic Components in the Fragments menu, and drag a Paragraph fragment under the Content Display fragment.

  13. Click the Paragraph fragment you added.

  14. Click the Styles tab in the menu on the right.

  15. Set the left and right margins to Spacer 5 (3 rem).

  16. In the Browser menu on the left, click the element-text component inside the Paragraph fragment.

    The menu on the right changes again to the text configuration. Now you can map the paragraph’s text to data related to the page’s content.

  17. From the Field drop-down menu on the right side of the screen, select Publish Date.

    Map the text in the Paragraph fragment to the Publish Date property of the displayed content.

    Now the article’s last publish date appears in a new fragment beneath the body of the FAQs article.

  18. Click Publish at the top of the screen.

  19. Back on the Display Page Templates page, click the Actions menu (Actions icon) for your new Single-Event Display template and click Mark as Default.

    This makes the new FAQs Page template the default for FAQs articles. Notice that the Single-Event Display template is still the default for Event articles.

Now you have a template to display any Event or FAQs articles you want on your site, on their own pages. Next, you’ll add some to the site.

Add Display Pages to the Site’s Navigation

  1. Navigate to the Site Menu (Site Menu) → Site BuilderNavigation Menus.

  2. Click the Clarity Header Menu.

  3. Click Add and select the Event article you created previously, Clarity Site Going Live Soon.

  4. Click Add and select the FAQs article you created previously, Clarity Site FAQs.

  5. Drag both of the new articles so they are both under the More submenu, before the About Us page.

    Place your two new display pages within the existing More submenu.

    Now the navigation menu on your site has these two display pages under the More submenu.

  6. Go back to the Clarity site’s home page.

  7. On the navigation menu, click each of the display pages to see how they look.

    Each of these pages shows the content for their respective articles. The article’s contents automatically appear using the web content templates you created, and they are positioned on the page using the display page templates.

    The FAQs page displays a list of FAQs as you configured it in the web content template.

Congratulations! You’ve completed this module on adding and displaying new types of web content.

Next, get started with Workflow and Publishing Tools.

Relevant Concepts

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy