{"id":331,"date":"2019-03-04T06:57:45","date_gmt":"2019-03-04T06:57:45","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/03\/04\/create-new-pages-blocks-widgets-using-magento-2-cms\/"},"modified":"2025-07-17T16:38:47","modified_gmt":"2025-07-17T11:08:47","slug":"create-new-pages-blocks-widgets-using-magento-2-cms","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/create-new-pages-blocks-widgets-using-magento-2-cms\/","title":{"rendered":"How to Create New Pages, Blocks, and Widgets Using Magento 2 CMS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Magento released the latest version, Magento 2.3.0 and there are changes in the basic Magento 2 admin panel menus and fields.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, here I\u2019m with a detailed post on how to&nbsp;<em><strong>create new pages, blocks, and widgets using Magento 2 CMS<\/strong><\/em>. The methods here are in reference to the latest&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/magento-2-3-release\/\">Magento 2.3<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Magento 2 CMS pages are used to display parts of your catalog or other details useful to the customers. Magento 2 blocks allow admin to add and control the chunks of HTML code that can be displayed throughout the store. You can&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/get-all-cms-pages-in-system-configuration-in-magento-2\/\">get all CMS Pages In System Configuration<\/a>&nbsp;in Magento 2 for an reason, when the admin needs to choose and exclude CMS page from a list of all CMS pages in system configuration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Widgets in Magento 2 CMS are reusable components that can be added to any CMS blocks. They offer a lot of features and extend the core functionalities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Create New Pages, Blocks, and Widgets Using Magento 2 CMS:<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Create a New Page Using Magento 2 CMS:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the below steps:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Add a new page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Enter the content<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Search Engine Optimization<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Pages in Websites<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Design<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Custom Design Update<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Save<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Add a new page<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login to&nbsp;<strong>Admin Panel<\/strong><\/li>\n\n\n\n<li>Navigate to&nbsp;<strong>Content &gt; Elements &gt; Pages<\/strong>.<\/li>\n\n\n\n<li>Click the \u201c<strong>Add New Page<\/strong>\u201d button.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/1_Add-New-Page-button.png\" alt=\"1_Add New Page button\" class=\"wp-image-4309\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable<\/strong>&nbsp;the page<\/li>\n\n\n\n<li>Enter the&nbsp;<strong>page title<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/2_Enable-Page-Title.png\" alt=\"2_Enable &amp; Page Title\" class=\"wp-image-4310\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Enter the Content<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand the&nbsp;<strong>Content<\/strong>&nbsp;to fill the page content.<\/li>\n\n\n\n<li>Enter the main heading of the page in the \u201c<strong>Content Heading<\/strong>\u201c<\/li>\n\n\n\n<li>Click on the \u201c<strong>Show\/Hide Editor<\/strong>\u201d to add or edit the text of the page.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/3_Content.png\" alt=\"3_Content\" class=\"wp-image-4311\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Search Engine Optimization<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand the&nbsp;<strong>Search Engine Optimization<\/strong>&nbsp;to fill the data important for SEO.<\/li>\n\n\n\n<li>Enter the&nbsp;<strong>URL Key<\/strong>&nbsp;of the page.<\/li>\n\n\n\n<li>Enter the<strong>&nbsp;Meta Title<\/strong>.<\/li>\n\n\n\n<li>Enter the&nbsp;<strong>Meta Keywords<\/strong><\/li>\n\n\n\n<li>Enter the&nbsp;<strong>Meta Description<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/4_SEO.png\" alt=\"4_SEO\" class=\"wp-image-4312\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">4. Pages in Website<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand the&nbsp;<strong>Pages in Websites<\/strong>&nbsp;to select the store view.<\/li>\n\n\n\n<li>In the \u201c<strong>Store View<\/strong>\u201c, select the store view for which the page is displayed.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/5_Store-View.png\" alt=\"5_Store View\" class=\"wp-image-4313\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">5. Design<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand the&nbsp;<strong>Design<\/strong><\/li>\n\n\n\n<li>Select the&nbsp;<strong>Page Layout<\/strong><\/li>\n\n\n\n<li>Enter the<strong>&nbsp;Layout Update XML<\/strong>&nbsp;if required.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">6. Custom Design Update<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand the&nbsp;<strong>Custom Design Update<\/strong>&nbsp;to customize the page design.<\/li>\n\n\n\n<li>Select the&nbsp;<strong>time period<\/strong>&nbsp;for the design. For example, offers, holidays, etc.<\/li>\n\n\n\n<li>Select<strong>&nbsp;new theme<\/strong>&nbsp;from the dropdown<\/li>\n\n\n\n<li>Select a&nbsp;<strong>new layout<\/strong>&nbsp;from the dropdown.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/7_Custom-Design-Update.png\" alt=\"7_Custom Design Update\" class=\"wp-image-4315\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">7. Save<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save the configuration with the \u201c<strong>Save<\/strong>\u201d button.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Create a New Block Using Magento 2 CMS:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Navigate&nbsp;<strong>Content &gt; Elements &gt; Blocks<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Click the \u201c<strong>Add New Block<\/strong>\u201d button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/1_add-new-block-button.png\" alt=\"1_add new block button\" class=\"wp-image-4317\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. <strong>Enable<\/strong>&nbsp;Block status.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Enter the \u201c<strong>Block Title<\/strong>\u201d which can be descriptive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Enter the \u201c<strong>Identifier<\/strong>\u201d which has to be unique and in lowercase. Do not use space, instead use the underscore. The identifier is the internal reference used by the system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Select the&nbsp;<strong>Store View<\/strong>&nbsp;to enable the block for.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Enter the&nbsp;<strong>content<\/strong>&nbsp;for the block. You can place links, images, videos, tables, etc. in the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8. Save the block configuration with the \u201c<strong>Save<\/strong>\u201d button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/2_New-Block-Details.png\" alt=\"2_New Block Details\" class=\"wp-image-4318\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Create a New Widget Using Magento 2 CMS:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Navigate to&nbsp;<strong>Content &gt; Elements &gt; Widgets<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Click the \u201c<strong>Add New Widget<\/strong>\u201d button<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/1_Add-widget-button-1024x284.png\" alt=\"1_Add widget button\" class=\"wp-image-4319\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Select the \u201c<strong>Widget Type<\/strong>\u201d that you want to create and the \u201c<strong>Design Theme<\/strong>\u201d that is to be used in the widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/2_widget-type-and-theme.png\" alt=\"2_widget type and theme\" class=\"wp-image-4320\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4. Click on \u201c<strong>Continue<\/strong>\u201c<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Add the descriptive \u201c<strong>Widget Title<\/strong>\u201c<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Select the store views in \u201c<strong>Assign to Store Views<\/strong>\u201d where the created widget will be available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Enter the<strong>&nbsp;sort order<\/strong>. Enter 0 for the top position.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/3_Widget-Settings.png\" alt=\"3_Widget Settings\" class=\"wp-image-4321\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">8. Click on the \u201c<strong>Add Layout Update<\/strong>\u201d button under Layout Updates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">9. Select the type of category or product page where the widget will appear, from the \u201c<strong>Display On<\/strong>\u201d dropdown.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10. In&nbsp;<strong>Page<\/strong>,&nbsp;<strong>Container<\/strong>&nbsp;and&nbsp;<strong>Template<\/strong>&nbsp;lists set the block or section for the widget to appear.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/4_Layout-Updates.png\" alt=\"4_Layout Updates\" class=\"wp-image-4323\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">11. Click \u201c<strong>Save and Continue Edit<\/strong>\u201d to save these configurations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">12. Under \u201c<strong>Widget Options<\/strong>\u201d select the block where you want to locate it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">13. <strong>Save<\/strong>&nbsp;the configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/03\/5_Widget-Options.png\" alt=\"5_Widget Options\" class=\"wp-image-4322\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Clear cache after you create new pages, blocks, and widgets using Magento 2 CMS. You can also add seasonal design effect by <a href=\"https:\/\/meetanshi.com\/blog\/add-snowfall-effects-to-magento-2\/\">adding snowfall effect<\/a> to make your website  more engaging.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hopefully, the above guide is helpful to you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also refer to the video tutorial to Create New Pages Using Magento 2 CMS from our&nbsp;<a href=\"https:\/\/www.youtube.com\/playlist?list=PLBTOxSAJzwEjM5MilmEqj98Ib80tKBu7r\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 video tutorial<\/a>&nbsp;series:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create New Pages Using Magento 2 CMS\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/cXXXt1Fxag8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento released the latest version, Magento 2.3.0 and there are changes in the basic Magento 2 admin panel menus and fields. So, here I\u2019m with&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-331","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=331"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/331\/revisions"}],"predecessor-version":[{"id":15498,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/331\/revisions\/15498"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}