4.01

CMS Pages & Blocks

Describe the usage of CMS pages, blocks, widgets, and Page Builder for building content without code, including Magento directive syntax.

Why This Matters: CMS pages, blocks, widgets, and Page Builder enable admin users to create rich content without code. Knowing when and how to use each is key for development and the exam.

CMS Content Overview

mindmap root((Magento CMS)) CMS Pages Static content URL key & layout Widgets & blocks CMS Blocks Reusable HTML Placed in pages/layouts Widgets Dynamic content Configurable CMS insertable Page Builder Drag & drop Content types Scheduling Admin Features Variables {{...}} Directive syntax Links & media

CMS Pages and Blocks

CMS pages are standalone, typically static content pages (e.g., About Us) created in Admin. CMS blocks are reusable HTML snippets that can be placed on multiple pages and positions.

  • Pages: Content, URL key, layout updates, design, store view assignment, SEO metadata
  • Blocks: Named content (Identifier) that can be referenced in layouts, pages, and widgets
  • Widgets: More powerful than blocks; dynamic, configurable content that can target specific containers/handles
  • Page Builder: Visual authoring with content types (rows, columns, text, images, sliders, banners, etc.)

Creating CMS Pages

Admin: Content → Pages → Add New Page

  • Page Information: Title, URL Key, Store View, Status
  • Content: Use Page Builder or WYSIWYG editor
  • Search Engine Optimization: Meta Title/Keywords/Description
  • Design: Theme, Layout (1-column, 2-columns, Empty), Layout Update XML

Creating CMS Blocks

Admin: Content → Blocks → Add New Block

  • Identifier: Unique code to reference the block
  • Store View: Scope of availability
  • Content: HTML, variables, widgets, Page Builder

Widgets

Admin: Content → Widgets → Add Widget

  • Type: The widget class (e.g., Catalog New Products, Static Block)
  • Design Package/Theme
  • Layout Updates: Choose pages/containers (e.g., after="-", container="content")
  • Widget Options: Configuration per widget type (e.g., product types, categories)

Page Builder vs Native CMS

  • Page Builder: Drag-and-drop content creation, scheduling, responsive controls, content types
  • Native CMS: WYSIWYG + directives; very portable and simple
  • Recommendation: Use Page Builder for rich layouts, native CMS for simple/static content or portability

Magento-Specific CMS Directives

Magento provides directive syntax inside CMS content using {{ ... }}. Common directives:

1) Variables

{{config path="web/unsecure/base_url"}}
{{store url=""}}
{{store url="customer/account/login"}}

2) Links

{{store url="contact"}}
{{store direct_url="privacy-policy-cookie-restriction-mode"}}

3) Media URLs

<img src="{{media url="wysiwyg/banners/summer.jpg"}}" alt="Summer" />

4) Including a Static Block

{{block class="Magento\Cms\Block\Block" block_id="footer_links"}}

5) Rendering a Backend (Template) Block

{{block class="Vendor\\Module\\Block\\Example" template="Vendor_Module::example.phtml"}}

6) Widgets

{{widget type="Magento\\Catalog\\Block\\Product\\Widget\\NewWidget" display_type="new_products" products_count="5" template="product/widget/new/content/new_grid.phtml"}}

Placement Options

  • Layout XML: Place blocks via cms_index_index.xml or other layout handles
  • CMS Page Content: Insert blocks/widgets directly via editor
  • Theme Templates: Render blocks via $block->getLayout()->createBlock() when necessary

Security & Best Practices

  • Sanitize content: Avoid raw JS; use widgets/blocks
  • Scope awareness: Use Store View assignment for localized content
  • Portability: Prefer widgets/blocks and config-driven content for multi-env deployments

Further Reading

Exam Tips

  • Pages vs Blocks vs Widgets: Pages are standalone; blocks are reusable content; widgets are configurable/dynamic
  • Directives: {{config}}, {{store}}, {{media}}, {{block}}, {{widget}}
  • Page Builder: Use for rich layouts; supports scheduling and content types
  • Placement: Via layout updates, CMS content, or widgets
  • Identifiers: Block identifiers are used to reference blocks in widgets/layouts
Back to Overview