No products in the cart.

#2 PBM: Page builder Magento 2 – Workspace

When Page Builder is enabled, the Content section and content creation process are modified to take advantage of the advanced Page Builder tools for CMS pages, product and category pages, blocks, and dynamic blocks. This section includes a Content Heading field, a preview of the content, and easy access to the full-screen Page Builder workspace.

Content section with Page Builder preview

Content Heading

Because search engines look for level one (H1) headings, adding a level one heading is an easy way to ensure that the page is indexed correctly.

The Content Heading field that appears at the top of the page is a legacy field that supports content that was created with earlier Commerce releases. It is not, however, part of Page Builder. The Content Heading is formatted as an H1 heading according to the style sheet that is associated with the current theme, and positioned just above the active content area that is defined by the Page Builder stage.

For the best control over the positioning and format of headings of all levels, we recommend that you leave the Content Heading field empty, and use the Page Builder Heading content type.

Content Heading and other headings


When you expand the Content section and there is existing content created with Page Builder, it displays a preview of the content as it would appear in a page. Click Edit with Page Builder or inside the content preview area to open the Page Builder workspace, where you can make any needed updates.

Product description preview

For the product and category forms, this content preview is enabled by default, but can be disabled. If performance suffers due to loading the preview, you can disable the preview in the Content Management configuration settings.


When you open the Page Builder workspace from the preview, the stage is the primary work area where you can create and format content, and even make quick edits to live content. The stage is initially empty, providing the design surface where you can drag rows, columns, and tabs from the left panel.

Starting with the 2.4.1 release, content editing is now full-screen only for all areas controlled by Page Builder. This includes CMS pages, product and category pages, blocks, and dynamic blocks. Full-screen editing puts the focus on your content and provides a view that better matches the user experience on the storefront.

Stage with page content

When you are working in the Page Builder workspace, your content changes are not fully saved until you click the Close Full Screen () icon in the upper-right corner of the workspace, and then click Save in the upper-right corner for the CMS page, product page, category page, block, or dynamic block.

If you are making significant changes to Page Builder content, we recommend that you increase the Admin Session Lifetime to prevent the session from timing out while you work.


viewport is the visible area of a web page that a user sees. In full-screen design mode, the viewport buttons are displayed above the Page Builder stage to show you the content as the site user will see it on the storefront.

Viewport buttons

Viewport buttons

Page Builder also defines breakpoints for viewports. Breakpoints define minimum and maximum widths within which certain styles are applied. The Page Builder viewports provide the following content breakpoints:

  • Desktop breakpointmin-width: 1024px. This breakpoint applies styles defined for viewport widths that measure 1024px and wider.
  • Mobile breakpointsmax-width: 768px, min-width: 640px. These breakpoints apply styles defined for viewport widths between 768px and 640px.

Page Builder viewports provide two features: content previews and breakpoint settings.

Content previews

By default, Page Builder provides two viewport previews:

  • Desktop — Displays the content preview without a predefined width. Desktop-defined styles (using breakpoint minimum width of 1024px) are still applied to the page. But the Desktop viewport width is defined by settings for container content types, like Rows. Selecting the Desktop viewport shows how your content will be styled on the storefront when the browser page width is 1024px and wider.
  • Mobile — Displays the content preview at a predefined width of 768px. Unlike the Desktop viewport, the Mobile viewport does show your page content at a width of 768px, along with the styles defined for the breakpoint widths of 768px (max) and 640px (min).

The following examples show the Page Builder default responsive settings for product carousels displayed for these viewports:

Desktop viewport preview

Desktop viewport preview, minimum width: 1024px

Mobile viewport preview

Mobile viewport preview, width: 768px

Breakpoint settings

The viewport buttons also provide the option to apply different breakpoint styles to content types based on the selected viewport. By default, Page Builder provides breakpoint settings for the Minimum Height fields of Rows, Columns, Tabs, Tab Items, Banners, Sliders, and Slides. When you select the Mobile viewport, then open the editor for one of those content types, you can enter field values specific to the Mobile viewport breakpoints. Content type fields that allow specific breakpoint settings display an icon to the right of the field, similar to the following example for a Row:

Icon indicator for breakpoint setting

Icon indicator for breakpoint setting, width: 768px


The Page Builder panel is located to the left of the stage, and contains content types that can be dragged to the stage. A container that is specific to the content type then appears with a toolbox of options. Content types are organized in the panel as follows:

LayoutIncludes rows, columns, and tabs that can be used as containers for other content types.
ElementsIncludes text, headings, buttons, dividers, and snippets of HTML code that can be dragged to the stage.
MediaIncludes images, video, banners, sliders, and Google Maps that can be dragged to the stage.
Add ContentAdds existing blocks of static or dynamic content, and products from your catalog.


Each content container on the stage has a toolbox of options. The options vary by content type, but typically include Move, Settings, Hide/Show, Duplicate, and Remove.

Show the toolbox

Hover over the container to display the toolbox and choose an option.

Row toolbox options

Toolbox options

MoveMoves the current content container to another position on the stage.
AddAdds children elements such as a button, slide, or tab.
(label) Identifies the container content type.
SettingsOpens the content container properties in edit mode.
HideHides the current content container.
ShowShows the current content container.
DuplicateMakes a copy of the current content container.
RemoveDeletes the current content container from the stage.

Read More
admingenz September 19, 2021 0 Comments

#1 PBM: Page builder Magento 2 – Setup

Starting with the 2.4.3 release, Page Builder provides a unified native CMS tool across Adobe Commerce and Magento Open Source. However, Page Builder in Adobe Commerce adds in the ability to leverage the rest of the Experience Management tools to enable merchants to deliver engaging, personalized experiences and campaigns: Staging and preview, Personalized content, Product Recommendations, with additional capabilities to come.

When enabled in the configuration, Page Builder is the default content creation tool for CMS Pages, Blocks, and Dynamic Blocks. In addition, the Enable Advanced CMS button offers Page Builder as an option for Categories and Products. You can also choose the default page layout that you want to use for products, categories, and CMS pages. Page Builder is not available for newsletter content, which uses the WYSIWYG editor.

Advanced Content Tools

Configure Page Builder

  1. On the Admin sidebar, go to Stores > Settings > Configuration.
  2. In the left panel under General, choose Content Management.
  3. Expand  Advanced Content Tools and verify that Enable Page Builder is set to Yes.
  4. If you are ready to set up Google Maps, do the following:
    • If necessary, follow the Get API Key instructions, and then copy and paste your Google Maps API Key.
    • To change the Google Maps Style, paste the JSON code that is generated by the Google Maps APIs Styling Wizard.See Media – Map for more information about using Google Maps in your Page Builder content.
  5. To configure the number of guidelines in the Page Builder column grid, do the following:
    • For Default Column Grid Size, enter the default number of columns that you want to appear in the grid.
    • For Maximum Column Grid Size, enter the largest number of columns that you want to be available in the grid.Column grid size See Layout – Column for more information about using the column grid when working with your Page Builder content.
  6. When complete, click Save Config.

Configure default layouts

  1. On the Admin sidebar, go to Stores > Settings > Configuration.
  2. In the left panel under General, choose Web.
  3. Expand  Default Layouts and and do the following:Default Layouts
    • Choose the Default Product Layout that you want to use for product pages.
    • Choose the Default Category Layout that you want to use for category pages.
    • Choose the Default Page Layout that you want to use for CMS pages.
  4. When complete, click Save Config.

Disable Page Builder

Disabling Page Builder replaces the Advanced Content Tools with the WYSIWYG editor, and might cause display errors in the storefront. Content that you previously created with Page Builder might not be editable from the Admin.

  1. On the Admin sidebar, go to Stores > Settings > Configuration.
  2. In the left panel under General, choose Content Management.
  3. Expand  Advanced Content Tools and set Enable Page Builder to No.
  4. When prompted to confirm, click Turn Off.Confirmation dialog – turn off Page Builder
  5. When complete, click Save Config.
  6. When prompted, refresh any invalid cache.

Read More
admingenz September 19, 2021 0 Comments

Magento Accelerating Innovation through a Simplified Release Strategy

Keeping your Adobe Commerce platform updated is key to maintaining an ecommerce store that is secure, performant, and reliable. Just as if you were taking care of a physical store, an eCommerce store requires maintenance to make sure you are providing the best experience for your customers. 

The decision to delay upgrades to your digital storefront in the short term can have a lasting impact via the accumulation of technical debt and increased costs to run on outdated software. It is for this reason that we always recommend that your team perform updates in line with the Adobe Commerce release calendar.

In 2022, we will be taking a big step towards simplifying the upgrade process and decreasing the total cost of ownership for Merchants. We are committed to helping customers future-proof their business by reducing the complexity and frequency of upgrades, all the while accelerating their time to innovation. Read on for how we’re following through with that commitment with our new release strategy.

What’s New

We are reducing the frequency of core Commerce application upgrades from four to three releases in 2022. We will be providing three patches with our new release calendar – two full patches and one security patch.

We are reducing complexity of upgrades and accelerating innovation by narrowing the focus of full patch releases to include only security, compliance, performance, and high priority bugs. New innovations and features will continue to be released as independent services, allowing Merchants to adopt features and innovate faster; Live Search, Product Recommendations, and Amazon Sales Channel are all examples of existing independent services that enabled us to reduce complexity in the core Commerce application. Community contributions and lower priority issues will be released through the Quality Patch tool, providing faster time to market and letting merchants choose the updates that are important to them.

graphic showing next steps
graphic table showing version support information

We will be moving our end of support (EOS) dates to align closely with those of PHP, the third-party scripting language that Adobe Commerce is built on. Whenever a PHP version reaches its end of life (EOL), Adobe must update our code to maintain PCI compliance. With PHP being such a critical component, we’ve changed our lifecycle policy to align Adobe Commerce version EOS dates with PHP EOL dates. This change will help reduce the frequency and impact of PHP version changes and make it even simpler for Merchants to follow the most effective path for staying current.

These three improvements are important and worth repeating. We will release patches less often and make upgrades less complex, while innovating faster. We will do this by releasing all new features and capabilities as independently deployable services and leveraging the Quality Patch tool for quality fixes. We will also lessen the impact of PHP changes by having our version EOS dates coincide with PHP EOL dates.

2022 Release Calendar

Below is a first look at our 2022 release calendar. We will have two full patch releases – one in Q1 and one in Q3. To keep things light during the peak sales season, we will have one security patch release in Q4.

New features and product updates will be offered as independent services that can release updates as they are ready, allowing for more frequent improvements to existing features. For instance, since Live Search was made available in June, we have pushed out several feature enhancements that required minimal effort for Merchants to uptake. We will be announcing new feature releases and updates every other month in 2022, making it easier for our community to keep up to date on the latest ways they can drive value and deliver exceptional experiences to their customers.

2022 release schedule chart

For our Q1 2022 full patch release, we will be releasing beta code starting in October 2021, until the 2.4.4 pre-release date to help our partners prepare for upcoming improvements, as well as the transition from PHP 7.4 to PHP 8.1. If you are an Adobe partner and haven’t signed up yet for our beta program, you can do so here.

Recent Improvements 

Enabling our customers to run frictionless upgrades has always been a priority for Adobe Commerce. All these improvements were created with this North Star in mind and could not have been achieved without collaboration with partners and Merchants. 

Along with the upcoming improvements, we have also implemented several other programs and tools that our community can benefit from immediately. The beta program, pre-releases, the Quality Patch tool to self-serve quality patches, and the new community contribution model are available to empower the community and speed up the delivery of important updates for Adobe Commerce and Magento Open Source. 

Merchants and partners can also use a set of resources to help plan, budget, and complete upgrades such as the upgrade plan checklist, the upgrade best practices guide, and the upgrade compatibility tool. The tool has now over 400 downloads, more than 2,000 executions, and +80 active users on the community slack channel (#upgrade-compatibility-tool). Learn more about recent improvements and all resources available to you here.

Read More
admingenz September 19, 2021 0 Comments