Page Builder overview

Transcript

Today I’m going to be walking through how Adobe Commerce helps merchants to create richer shopping experiences using Page Builder. So Page Builder makes it easy to create content-rich pages with custom layouts that enhance your visual storytelling, drive customer engagement and loyalty. So you can see here a demo page that I just created using Page Builder. This took probably 30 seconds. It may not be the most engaging page in the world, but it allowed me, a non-technical user without developer experience, to create a page that is engaging with fresh, rich content. And I leveraged a drag and drop design to create this. So I was able to save time and resources and to create a page that my shoppers, you all watching, will eventually love. So let me show you first how to enable this functionality. Now I am in the admin panel, so I’m a merchant here, and I’m going to go to stores, configuration, then under configuration, I’m going to go to content management and make sure that I have Page Builder enabled here. So how do I use Page Builder? So what I’m going to do here, and I’m a non-technical user in this demonstration, I’m going to go to content pages, and I can edit any of the pages on my site here, but I’m going to choose my demo page. And I can use the same interface for product pages, for category pages, but we’re just going to use my demo page for today. And I’m going to select here under content, edit with Page Builder. So what this is going to do is pop me into the Page Builder interface. So I’m going to give you a quick tour of the elements along this left-hand panel, and then show you a little bit about the viewport. So first, you can see the basic layout options here. This is a drag and drop interface for, I’m inserting something like a row, a column, or a tabbed block here. When I look at elements, I can see I can add text, I can add a heading, buttons, a divider, and HTML code. This is all provided out of the box without having to install any extensions. Under media, I can see I can insert images, a video, just like this, a banner, a slider, just like this, even a Google map. And under content, I have a little bit more composability here. I have blocks that allow components to be reused. So if I’m going to put it on multiple pages, I don’t have to do the same thing twice. I can just insert my block again. Dynamic blocks that allow for personalized shopping experiences. So dependent on the person accessing this page, we can create dynamic experiences to reflect content that is meaningful to them. Products to insert products into my page. If I’m a merchandiser, this is incredibly useful to do without bringing in a developer or having to install an extension. When I look at the top here, I can see this viewport. So if I want to optimize for mobile, I can see what this looks like on a mobile interface. I can also see what this looks like on a desktop interface. So just as a quick tour here, when I go to these elements, every element has four options. The drag around the page, the edit, this element here, this is a video in this case, I can change which video is here. I can also adjust the padding, a lot of the CSS stuff that I would have to do by bringing in a front end developer. And I can also choose whether to view or hide or duplicate this element. So just very quickly now, I’m going to show what it looks like to insert a product element here. So when I drag and drop the products here, I can edit this product. I can choose whether to go for a grid or a carousel. And I want to show some accessories on this demo page. I hit save and voila, I can see my products in a carousel right here on the page. I’m going to show you first, here’s what the page looks like now on my storefront. When I save from this experience, I’m going to go flip back, refresh, and that carousel is now on my storefront. So that’s how page builder allows you to create content rich pages with custom layouts and engage your customers with visual storytelling and drive engagement and loyalty. To learn more about page builder, we have very robust resources here in the commerce user guide. So go check it out and use this functionality to engage your shoppers with great experiences.