If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Magento 2.x. How to add CMS block and Widget to the page

We are glad to present you a tutorial on how to add CMS block and Widget to the page in Magento 2.x.

The Content Management System (CMS) of your Magento 2 Store is used for creating new pages, blocks and widgets.

You can combine those 3 elements to create custom static pages that display parts of your catalog or other information, useful for customers.

In order to add CMS block and Widget to the page, perform the following steps:

  1. Login to your Magento Admin Panel. Firstly, we will learn how to add CMS blocks.

  2. Navigate to Content -> Blocks section.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page1

  3. Click Add block button on the right.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page2

  4. Enter the name, identifier to the block, choose needed Store view and put something to the content field. After that, save the block.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page3

  5. Now, lets create a widget. Navigate to Content -> Widgets

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page4

  6. Click on the Add widget button.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page5

  7. Now you will need to select the type of widget and theme for it. Click on the Continue button to proceed to the storefront settings.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page6

  8. After that, you can set a Title and Store View for the widget.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page7

  9. You can also select a layout for the widget as shown on the storefront. After that, click on a Save button.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page8

  10. Navigate to Content -> Pages section. There you can open any of the already existing pages or create a new one. We will create a new page.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page9

  11. Click on the Add New Page button.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page10

  12. Now you can name the page and set a custom URL for it. You can also choose on which store it can be viewed and set its status to enabled or disabled (hidden).

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page11

  13. In the content tab you can add the heading for the page and the content plus any widget you wish to show up on this page.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page12

  14. We will add a widget with the Static block type.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page13

  15. There we can see the block that we created previously.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page14

  16. Click Insert widget and do not forget to save the page and clear cache if needed.

    Magento2x.How_to_add_new_CMS_block_and_widget_to_the_page15

Congratulations! Now you know how to add CMS block and Widget to the page in your Magento 2x Store.

Feel free to check the detailed video tutorial below:

Magento 2.x. How to add CMS block and Widget to the page