Walkthrough: Creating a rendering variant for a blog post
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.
The site contains various blog posts with some data.
To add the template to your tenant templates folder:
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>.
Right-click the item and click Insert, New Template. Alternatively, click New Template in the Options section.
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.
On the Builder tab, in the Add a new section field, add the relevant data template fields. For 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.
To create a page content variant to display other fields:
In the Content Editor, navigate to Presentation/Rendering Variants, right-click Page Content, and click Insert, Variant Definition.
Enter Blog Post and click OK.
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:
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:
On the ribbon, on the Experience Accelerator tab, click Partial Design, and then click Insert a new Partial Design.
In the Insert Item dialog box, click Partial Design, enter Blog Post Partial and click OK.
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:
On the ribbon, on the Experience Accelerator tab, click Page Designs, and then click Insert Page Design.
In the Insert Item dialog box, click Page Design, enter Blog Post Design, and click OK.
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:
On the ribbon, on the Experience Accelerator tab, click Site Page Designs.
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.
To apply the changes, click OK and then click Save.