(00:02)
“Hey there! Are you trying to figure out how to move widgets around in BigCommerce Page Builder but can’t seem to get it right? Are you wondering if you need to delete and recreate them? Don’t worry, in this video, I’ll show you how to do it.
Before we get started, my name is Kal. I’m a developer, a store owner, and I run a free private community called Ecommerce Growth for store owners like you and me. I post ecommerce videos on YouTube every week, so if you find this helpful, be sure to subscribe and hit the bell for more.
(00:26)
Alright, let me share my screen and show you how to do this.
Navigating to the Page Builder:
I’m already in BigCommerce Page Builder, but I’ll show you how to get there. In the backend of your BigCommerce store, go to Storefront > My Themes > Customize, and that will take you to the Page Builder.
(00:56)
When you hover over fields, you’ll see them highlight if they’re Page Builder widgets. You’ve probably already added content and are now trying to figure out how to move it. Here’s the trick: there are three important tabs in Page Builder:
Widgets Tab – exposes all Page Builder widgets.
Layers Tab – where you manage the structure.
Theme Styles Tab – where you set theme presets, like header color and other options.
Most people overlook this little button. If you click it, it shows the structure of the Page Builder system, which is made of three layers:
Regions
Layouts
Widgets
(02:00)
Let’s break it down:
Regions are defined in your theme (where widgets can be placed).
Layouts are automatically created when you place widgets.
Widgets are the actual content elements you drag in (e.g., text, images).
Let me demonstrate: In the Header Bottom Global Region, I drag in a text widget, and you can see it creates a layout, a column, and places the widget inside the column. You may not realize all of this is happening automatically, but now you know!
(03:15)
You can manage these layers by clicking on them in the Layers Tab. You can also adjust settings for each layout and column. For example, if I drag in a two-column layout, I can place text in one column and an image in the other. You can even adjust the column widths and padding.
By default, padding is added, which I often reduce to zero in my designs. However, you cannot just drag a widget into any column—this is why you’re here. Let me show you how to move widgets.
Moving Widgets Between Columns:
(04:28)
From the Layers Tab, hover over elements to see them highlighted. To move a widget, grab the six-dot handle and drag the widget to a new position. You can even move it above or below other widgets within the column.
(05:38)
It’s a little cumbersome, but it’s not as bad as you may have thought. Once you get the hang of it, moving widgets around becomes easier. You can move entire layouts, not just individual widgets, between columns and regions.
Naming Layouts for Easier Management:
(07:20)
Now, let’s talk about naming conventions. Each region in the theme has a unique name, but these names might not always make sense. For example, if a region is named “snickerdoodle1,” it’s hard to understand what it represents.
You can rename the layouts in the Layers Tab to make navigation easier. Instead of having them all named “Layout,” you can name them based on their purpose, like “Hero Banner” or “Main Content.”
(09:41)
Renaming layouts will help you keep track of which is which, especially when moving them around. I recommend naming each layout something clear and descriptive to avoid confusion when you’re working on more complex pages.
Practical Example: Moving a Hero Banner
(11:15)
Let me show you a practical example. I’ve built a page where I want all the widgets in a specific region. I’ll drag entire layouts from one region to another, ensuring everything is in the correct spot.
(12:30)
Notice how I can drag the entire layout, including all its columns, and move it to a different region. This is particularly helpful when restructuring your page.
(13:50)
Now, after moving everything into place, I can preview the page, and it’s all in the right spot. Hallelujah! You can move widgets, layouts, and entire layers between Page Builder fields!
(14:24)
To make things easier, always label your layouts. Without labels, it’s easy to lose track of which layout contains which content. Take a minute to name your layouts, and the process will go much more smoothly.
Wrapping Up:
(15:29)
That’s it! You can now move widgets, layouts, and layers around the Page Builder. If you found this helpful, be sure to check out our Epic Page Builder Widgets—they add tons of useful widgets to your BigCommerce store.
Feel free to join our free community of store owners at [JoinEcommerceGrowth.com](join ecommercegrowth.com). And if you need a dev team, reach out to us at Epic Design Labs. Let me know what you’re struggling with, and maybe that will be my next video!
Thank you so much, and see you next time!”
