Adobe Page Builder Improvements on Mobile

Some of our clients use Magento extensively for ‘non-product’ pages, typically when the site is a corporate ‘brochure’ site in addition to an online shop. Traditionally editing pages in Magento has not been easy. Page Builder had only been available as part of the Adobe Commerce suite, but as of release 2.4. 3, Page Builder was made available as a bundled extension in Magento Open Source.

Page Builder is now the default content-editing tool for both Adobe Commerce and Magento Open Source and can replace the WYSIWG editor with any third-party module.

What we did

The core page builder only provided specific mobile configuration for one field in the page builder blocks. Specifically, this was the minimum height field. No other page builder elements could be altered on different resolutions.

There are 3rd party page builder solutions available. However, these mostly suffer from the same issues that the core page builder suffers from and would incur extra technical debt and/or reliance on the support of the 3rd party modules in future Magento versions.

We extended some of the existing core page builder blocks and fields to allow them to have mobile-specific values set.

We also added some more user-friendly options that applied predefined styling to a block that could be overridden by the more specific core page builder fields.

How we did it

First, we extended the configuration of the page builder elements that controlled the spacing of column and row blocks to allow them to have different values set on the mobile viewport.

We then added custom fields in that would allow the client to select predefined styled based on page designs that have been signed off during the design process of the homepage.

Initially, when picking a predefined style based on the design it was not able to be overridden with the core styles on the mobile view. This was due to how the ordering of the inline CSS was outputted above each block when it was rendered.

Moving the ordering of the predefined inline styles we’d added didn’t make a difference to the render order. Something about the core spacing styles seemed to always give them precedence over inline styles loaded via our extension.

We altered the predefined style fields to output as a data attribute that we could then apply styling to via the main CSS file. This would allow any inline styles to then override these styles. Allowing the client to tweak the predefined styles where required on both mobile and desktop viewports.

So there you have it – you no longer need to be constrained by the core Page Builder’s limitations when editing mobile pages - which given most ecomm’s traffic is coming from mobile and not desktop browsers, is a significant development.

Please get in touch if you’d like any assistance modifying your instance of Page Builder on Magento or if you have any Magento or Adobe Commerce Support questions.