Deep dive into our process: 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.

The challenge

The Magento core page builder offered limited mobile configuration with one single field within the page builder blocks, and this was the minimum height setting. So beyond this, no other elements could be customised for different screen resolutions. This was a challenge for cross-device flexibility.

Although there are 3rd party page builder solutions available, many of 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.

What we did

We extended some of the existing core page builder blocks and fields to allow them to have mobile-specific values set, offering greater flexibility for responsive design across multiple screen sizes.

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. This approach streamlined the customisation process and ensured that designs remained fully responsive across all devices.

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 on Magento 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 Adobe Commerce or Magento Support questions.

Book a free discovery call with Josh Grant, Director of Director of Digital Services at Absolute Design.