The SXA renderings and rendering variants
In Sitecore Experience Accelerator (SXA), you can construct your pages by dragging and dropping standard components directly where you need them. These components are called renderings and they are listed in the Toolbox in the Experience Editor. There are renderings available for simple text, images, videos, social media plugins, and so on.
There is a set of out-of-the-box variants that come with renderings that support them. When you place a rendering supporting rendering variants on a page, you can select one of its variants from a dropdown below the Experience Buttons Toolbar. Variants may make a rendering appear differently or may make them show different content. For example, the list rendering can have different variants for: detailed lists, thumbnails list, and a carousel.
You can configure the default renderings and create rendering variants in the Content Editor.
Composites
Rendering |
Variant |
Description |
---|---|---|
Embedded renderings can support variants |
Displays collapsible panels. | |
Embedded renderings can support variants |
Displays set of slides that can contain images, videos, links, and text. | |
Embedded renderings can support variants |
Displays two sides that both have a title and a content rendering. | |
Embedded renderings can support variants |
Adds tabs to the page. | |
Embedded renderings can support variants |
Provides placeholders to create a reusable group of renderings. |
Context
Rendering |
Description |
---|---|
Language Selector |
Provides a link to switch between different language versions. |
Site Selector |
Provides a link to switch between different tenant sites. |
Engagement
Rendering |
Description |
---|---|
Facebook Comments |
Displays Facebook comments. |
Disqus |
Displays latest comments. |
Events
Rendering |
Description |
---|---|
Displays events from event lists or a Google calendar. | |
Displays lists of events with name, description, place, start/end time, and link. |
Forms
Rendering |
Description |
---|---|
Embeds a form created using the Sitecore Forms module. | |
MVC Form |
After you embedded a Form module, you can add the MVC form to your page. |
Maps
Rendering |
Description |
---|---|
Embeds maps from Google or Bing with locations, routes, and areas that you can mark. The component can also display POI results when associated with a search results source. Points on a map can be formatted with rendering variants. |
Media
Rendering |
Variant |
Description |
---|---|---|
File List |
yes |
Displays list of files available for download. |
Flash |
no |
Embeds a SWF object on the page. |
no |
Displays a gallery of images and/or videos. | |
yes |
Adds an image that you select from the Media library to a page. | |
yes |
Stores image from the Media library to enable reusability. | |
Media Link |
yes |
Provides a rich link to an asset in the Media library. Includes description and preview. Supports rendering variants. |
Playlist |
yes |
Enables you to create a playlist for the Video component. Supports rendering variants. |
no |
Displays an HTML 5 player (with Flash fallback for legacy browsers) to play videos. |
Page Content
Rendering |
Variants |
Description |
---|---|---|
yes |
Displays the specific fields on a page from the data source item that you select. | |
yes |
Displays lists of pages by predefined or composed queries. | |
no |
Adds pagination for the Page list rendering. | |
no |
Embeds HTML code. | |
no |
Stores HTML code to enable reusability. | |
yes |
Renders a field from another page and works as a placeholder for other renderings. It consists of an icon or a title and links. | |
yes |
Adds formatted text on a page. You can write text using HTML tags. | |
yes |
Stores rich text to enable reusability. | |
Title |
yes |
Displays the title or subtitle of the current page. |
Page Structure
Rendering |
Description |
---|---|
Adds additional CSS styling using a wrapper for other renderings. | |
Divider |
Divides a placeholder horizontally. |
Edit Mode Panel |
Creates a placeholder to embed other renderings that are visible to authors in Edit mode only. |
IFrame |
Embeds external pages. |
Splits a placeholder horizontally. | |
Splits a placeholder vertically. | |
Toggle |
Displays buttons or links that show additional content when toggled. |
Search
Rendering |
Variants |
Description |
---|---|---|
yes |
Combines filters within one component. | |
no |
Displays active filters on the page and allows visitor to remove them one by one or in bulk. | |
no |
Filters search results based on selected values. | |
no |
Filters the search results on selected date/time. | |
no |
Filters search results based on items that are tagged with a selected facet. | |
no |
Specifies the result with a minimum and maximum. | |
no |
Filters the search results based on distance from current user location or location provided in the Location Filter rendering. | |
no |
Filters the search results based on a facet to be less, more, or equal to the value selected by a visitor. | |
no |
Filters search results based on a specific facet within the selected range. | |
no |
Loads search results progressively. | |
no |
Specifies user location. | |
no |
Provides paging functionality for search results. This rendering is mutually exclusive with the Load More rendering. | |
no |
Enables visitors to switch the number of results displayed once. | |
no |
Enables you to indicate the number of results available to the visitor. | |
no |
Enables visitors to change the rendering variant that is used dynamically by the Search Results rendering | |
yes |
Filters the search results based on text provided by a visitor. Note You cannot render or edit placeholders within the Search Box component because its content is generated by the SXA search service. | |
yes |
Displays the results of a search query. Note You cannot render or edit placeholders within the Search Results component because its content is generated by the SXA search service. | |
no |
Enables users to switch the sorting criteria for search results. |
Security
Rendering |
Description |
---|---|
Login |
Displays a login form. |
Logout |
Displays a logout button. |
Social
Rendering |
Description |
---|---|
AddThis |
Integrates AddThis personalized widgets. |
Feed |
Displays RSS and ATOM feeds. |
Social Media share |
Displays social network links (Facebook, Twitter, Google+) |
|
Displays latest tweets posted on Twitter. |