Walkthrough: Creating a rendering variant for a blog post

Current version: 10.1

Rendering variants let you display the same rendering in different ways. For this walkthrough, you create a rendering variant for the Page Content rendering. The Page Content rendering is a simple rendering that without variants displays a single field (like, for example, the Page Title rendering). If you add a variant, you can dynamically choose which fields  to display the content.

This example uses a site that displays blog posts. You will learn how to create the variant fields and how to make sure all blog posts in your site are styled in the same way.

Add the template

This example uses a simple site with a page template that contains fields for a blog post.  

Page template blog post example.

The site contains various blog posts with some data.

Blog pages example.

To add the template to your tenant templates folder:

  1. In the Content Editor, navigate to your tenant templates folder (sitecore/Templates/Project/). For example, to add a custom template to your new project, go to: /sitecore/templates/Project/<projectname>.

  2. Right-click the item and click Insert, New Template. Alternatively, click New Template in the Options section.

  3. Enter a name for the new template, select a base template, and click Next. Templates for items that represent a page must inherit from the default Page template.

  4. On the Builder tab, in the Add a new section field, add the relevant data template fields. For example:

    Date template fields example.

Create the variant

With the current settings, if you drag the Page Content rendering to the page, by default the rendering uses the first found variant, which in this case is the Content field.

The rendering uses the first found variant

To create a page content variant to display other fields:

  1. In the Content Editor, navigate to Presentation/Rendering Variants, right-click Page Content, and click Insert, Variant Definition.

  2. Enter Blog Post and click OK.

  3. To define the fields that the rendering variant displays, you can add child items to the rendering variant. Right-click the variant, click Insert, and then click the relevant item.

    For this example, lets add the following items:

    Item

    Name

    Tag

    Text

    Field

    Title

    h1

    Field

    Author

    span

    Text

    Author prefix

    span

    Author

    Date

    WebPublication

    span

    HTML tag

    Dividing line

    hr

    Field

    Summary

    h4

    Field

    LeadImage

    div

    Field

    Content

    div

    Note

    For rendering variants that have a complex structure that contains many fields, consider structuring and styling them in a section.  

    When you now select the Blog Post variant in the Experience Editor, the fields that you added to the rendering variant are displayed:

    Note

    You could decide to add styling to the rendering items. If you do this, be aware that the theme you use for your site can overwrite this styling.

Create the partial design

To style all blog posts, you can work with partial and page designs. A partial design is a set of renderings or a rendering using a specific variant that you can reuse.

To create the partial design:

  1. On the ribbon, on the Experience Accelerator tab, click Partial Design, and then click Insert a new Partial Design.

  2. In the Insert Item dialog box, click Partial Design, enter Blog Post Partial and click OK.

  3. Now drag the Page Content rendering to your partial design, and select the predefined style of the Blog Post variant.

Create the page design

A page design in SXA is a selection of partial designs and renderings. A page design can contain partial designs and renderings. To make sure all blog pages in this example use the same styling, you can create a page design.

To create the page design:

  1. On the ribbon, on the Experience Accelerator tab, click Page Designs, and then click Insert Page Design.

  2. In the Insert Item dialog box, click Page Design, enter Blog Post Design, and click OK.

  3. In the Select items dialog box, select the partial design(s) that you want to add. In this example, add the following: Header, Footer, Metadata, and Blog Post Partial that you just created. Click the right arrow to move them to the list of selected items, and then click OK.

Assign the page design

Now you can make sure that all the blog pages use the same styling by assigning the page design. You can use page designs to map content types to your page layouts. By doing this, you keep the layout of your site consistent.

To assign the page design:

  1. On the ribbon, on the Experience Accelerator tab, click Site Page Designs.

  2. In the dialog box that appears, in the left column, select a template and, to associate it to the page design, in the right column, select the page design.

  3. To apply the changes, click OK and then click Save.

Do you have some feedback for us?

If you have suggestions for improving this article,