Setting Yourself Up for Success with Page Builder
October 11, 2019
Earlier this year we introduced Page Builder for Magento Commerce, a new way to build and edit content pages that puts design control in the hands of marketers. With Page Builder, merchants have maximum freedom to create the web experiences they need to delight customers, without being constrained by pre-defined templates and to evolve that experience however they need. Below are key tactics to get your teams started with Page Builder and on their way to utilizing it’s full potential.
Your Storefront Theme is the design language that you use to speak to your customers. Page Builder empowers your non-technical teams to create content with a consistent look and feel that matches your brand design.
Common stakeholders in web storefront design
First, let’s look at who the stakeholders are when creating new storefront designs for your business. On the merchant side, often an eCommerce manager – along with a digital marketer – are in the admin panel on a daily basis and responsible for website updates. On the Agency side there is likely a frontend developer who works directly with the Magento code base, and an eCommerce website designer responsible for visuals and user experience.
Previously, when you wanted to launch new content, your workflow may have looked something like this:
Your ecommerce manager and digital marketer first define the functionality and requirements
Once stakeholders agree on the right path forward, your Designer produces page mockups for all page types and their variations
Next, a frontend developer turns these mockups into Magento templates, HTML templates, and CSS styles
When your marketer wants to run a new campaign, they work with the frontend developer to translate their ideas to HTML and CSS. All of this content then lives as static pages in the Magento Admin
Finally, once the content is created the eCommerce manager reviews and accepts (or requests edits) and the updates are pushed live to customers.
That is until you need to make changes and updates to those mockups, templates, and layouts in order to make new pages or update existing ones.
Page Builder simplifies this workflow and turns it into a streamlined, repeatable process.
Instead of creating page mockups each time content is needed, your eCommerce web designer develops a design system for your site. A design system is a collection of reusable components guided by design standards – think brand guidelines, pattern libraries, and style guides. Creating a design system and establishing branding guidelines ensures that there is a consistent look, feel, and voice for your brand across the entire business.
Working with stakeholders on the team, the web designer will identify the elements that are needed for the system and define what purpose they serve. Some elements may be consistent across every page like a logo, or they may be used in a variety of locations in different ways, like buttons. Your website designer should think about the variations of the element and define how they will work in different places, how they will work together, and what benefit it could provide to a user. Variations of the same elements can be a powerful tool to make content unique, interesting, and engaging.
A well-defined design system for your webstore needs to include base styles such as typography, colors, grid layout variations, sizing of elements, and spacing between them. Seeing your website as a creative combination of reusable elements and their variations sets you up to success with Page Builder.
Elements of a design system that can be used in Page Builder
Once you have a Design System in place, your frontend developer will implement the design system into Page Builder. First, they will add Page Builder base styles to your storefront theme then match elements in the design system to Page Builder content types. They will customize the appearance of content types for each element and the different variations of each element. The developer will also be responsible for extending the functionality of content types or creating new ones as needed.
How to Build and Edit Pages in Page Builder
Doing this work up front will enable your marketers and other business teams to create any number of shopping experiences quickly while making changes on the fly. Page Builder gives marketers control to create unique content layouts based on the requirements of each page and easily make changes as those requirements evolve. They may first build a home page that highlights multiple product categories with supporting text then quickly turn it into a page that highlights a new product launch with large hero images and engaging videos.
Edit Page Builder content without being limited to a pre-defined layout
Having this freedom doesn’t mean sacrificing the ease of managing this content. With a design system clearly defined and reusable content types available in Page Builder’s intuitive drag-and-drop interface, every time the marketing team has a new campaign or seasonal update to launch, they can do it themselves quickly and with confidence knowing that their changes will follow consistent design standards.
Easily manage content with Page Builder’s intuitive drag-and-drop interface
Meanwhile, developers get to spend their time on fun, creative work like building new functionality for your store, instead of changing images and messages for your marketers when they call in the middle of the night.
Launch new promotions, pages, or seasonal updates without page mockups or developer built layouts
Explore Page Builder in Magento Commerce 2
Page Builder is a powerful tool and with a bit of forethought, it can dramatically change the way your marketing and development teams collaborate. Visit DevDocs for more on how to get started and our User Guide to learn how to use Page Builder. Migrating from a version of Magento Commerce that used BlueFoot and need to transition to Page Builder? We can help with that too in our BlueFoot Content Migration guide.
Catch Olena's session on Page Builder and more at MagentoLive Europe 2019! More Information