Edit

Share via


Content block module

Note

The Retail Interest Group by Dynamics 365 Commerce has moved from Yammer to Viva Engage. If you don't have access to the new Viva Engage community, fill out this form (https://aka.ms/JoinD365commerceVivaEngageCommunity) to be added and stay engaged in the latest discussions.

This article covers content block modules and describes how to add them to site pages in Microsoft Dynamics 365 Commerce.

Use a content block module to market products or promotions through a combination of images and text. For example, a retailer can add a content block module to the home page of an e-commerce site to promote a new product and attract the attention of customers.

A content block module uses data from the content management system (CMS). It's a stand-alone module that doesn't depend on any other modules on the page. A retailer can add a content block module to any site page where they want to market or promote something, such as products, sales, or features.

Examples of content block module in e-commerce

  • Use a content block module on the home page of an e-commerce site to highlight promotions and new products.
  • Use a content block module on a product details page to showcase product information.
  • Add multiple content block modules inside a carousel module to highlight multiple products or promotions.

Content block modules and themes

Content block modules can support various layouts and styles based on a theme. For example, the Fabrikam theme supports three layout variations of a content block module: hero, feature, and tile. The hero layout shows an image on the background with text overlay. The feature layout shows an image and text side by side. The tile layout allows multiple content blocks in a tile format.

In addition, the theme can expose different properties for each layout. A theme developer can build more layouts with more styles by using the content block module.

The following image shows an example of a content block module with a hero layout.

Screenshot of a hero module.

The following image shows an example of a content block module with a feature layout.

Screenshot of feature modules.

Content block module properties

Property name Values Description
Image Image file Use an image to showcase a product or a promotion. Upload an image to the image gallery, or use an existing image.
Heading Heading text and heading tag (H1, H2, H3, H4, H5, or H6) Every hero module can have a heading. By default, the H2 heading tag is used for the heading. However, change the tag to meet accessibility requirements.
Paragraph Paragraph text Hero modules support paragraph text in rich text format. Some basic rich text capabilities are supported, such as bold, underlined, and italic text, and hyperlinks. The page theme that you apply to the module can override some of these capabilities.
Link Link text, link URL, Accessible Rich Internet Applications (ARIA) label, and Open link in new tab Hero modules support one or more "call to action" links. If you add a link, include link text, a URL, and an ARIA label. Make ARIA labels descriptive to meet accessibility requirements. Configure links so that they open in a new tab.

Content block module properties exposed by the Fabrikam theme

Property name Values Description
Text placement Left, Right, Center Define the position of the text on the image. It only applies to the hero layout.
Text theme Light or Dark Define a color scheme for the text, based on the background image. For example, if the image has a dark background, apply a light theme to make the text more visible and to meet color contrast ratios for accessibility purposes. It only applies to the hero layout.
Image placement Left, Right Specify if the image should be to the left or right of the text. It only applies to the feature layout.

Add a content block module to a new page

To add a hero module to a new page and set the required properties, follow these steps:

  1. Go to Templates, and create a page template named Content block template.
  2. In the Main slot of the default page, add a hero module.
  3. Select Save, select Finish editing to check in the template, and then select Publish to publish it.
  4. Use the hero template that you just created to create a page named Content block page.
  5. In the Main slot of the default page, select the ellipsis button (...), and then select Add module.
  6. In the Select modules dialog box, select the hero module, and then select OK.
  7. In the outline tree on the left, select the content block module.
  8. In the properties pane on the right, select Add an image. Then either select an existing image or upload a new image.
  9. Select Heading.
  10. In the Heading dialog box, add the heading text, select the heading level, and then select OK.
  11. Under Rich Text, add text as you require.
  12. Select Add Link.
  13. In the Link dialog box, add link text, a link URL, and an ARIA label for the link, and then select OK.
  14. Select the Hero layout.
  15. Select Save, and then select Preview to preview the page.
  16. Select Finish editing to check in the template, and then select Publish to publish it.

Additional resources

Module library overview

Promo banner module

Carousel module

Text block module

Video player module