How To Guides How To Videos Feature Requests Calendar Training Workshops

Transcript

0:00

In this video, we are going to cover how to use the 2.0 page builder. So after you've set up your style guide, you're gonna have a option to automatically add a section right here. You'll see the outline of your 2 point o page right here, as well as the option to have a pop up. So if we go here, we can click here and add a section. So we have various different options that you can select.

0:26

So you can start with a blank section, so you can have a full width, a large, a medium, or small. Now this is going to end up adding some extra padding and margin on the side, or you can go based off of a pre created template. So we do have some pre created templates right here. A lot of these are taking from what you would usually use in the classic editor. So we have our hero, different couple different ones that you can go in and add, and then you can customize the different elements of it, which we'll cover in another, video.

0:60

You can use the pop up template, about, features. We even have a testimonials one, which is pretty cool. And then we have FAQs, opt ins, and sales. We also have blocks. So you can have your own saved blocks.

1:19

These are gonna be your own type of templates, that you can go in and save and then precreate later, and you can have global blocks. Now the difference between the 2 is this is going to end up being more of a template, where the global blocks are something that if you change on 1, global block or global global section, then it's going to end up, applying for every single instance that it's at. So if you wanna have something that is the same all across the board, you can use this global block. This would be in terms of if you have a footer or something like that that you want on every single page, and you want it to look very similar. Whereas SafeBlox, you would be able to add them in, and then customize it further.

2:04

Now when we go in so we're gonna go into the blank, and we'll select the full width. When you add the section, then it's going to end up adding a row. Within each row, you then have columns. So each column, or each row, you can have 1 up to 6 columns. So once you've decided how many columns you have, then you can select the elements.

2:27

Now the elements will cover in a different section. So when we go in, you can see that outline of the body, the section, the row, and then your different columns. You can go in and you can actually move these around. So you can move it, move your column if we had multiple different ones. If you had multiple sections, you can move those, and you can move the entire section itself if you have them.

2:52

So it's just using these 3 dots. You can also if you hover over, you can see which devices you want it to be on. You can do all. You can do, don't have it shown at all. We obviously want to see that.

3:06

Or you can also have it on just a specific device. So maybe you like it on the, tablet or phone view, but you don't like it on the desktop. So you can remove that and customize it there. You can do the same thing with your rows and your columns, and you can do it as well on the elements. Now if we go into the section, you're gonna be able to utilize the style guide.

3:31

So within that style guide, you can select one of the already set formats, and then you can customize further on the margin, the padding, the border, the various corners, the width, as well as the background. Now with a section, you can have an image, for example. Go in, and we're gonna use a nice pretty floral one. So you can have that floral background instead. So we can do inherit, and we are going to fill that in.

4:06

You can fill it, scale it down, contain it, cover it, or you can do original. So you can customize what you want that background to look like as you are filling it in. You can also select a maximum width and a maximum height. Now this is gonna be pertinent in terms of if you want more of your image to show or less. You can customize these by pixels, percentages, em, rem, and percentage of, the screen width.

4:41

Now the percentage is gonna be more so of the image itself, or you can do the screen width, and then you can customize these accordingly. You can also change the padding and the margins, and then, you can do this for each thing. So you can do it for your section, then you can go to your row and do the settings there. And if you want, you can have it either inherit that, or you can even go in and have it as a its own different style guide. Or even if we wanted to, we could go down and have a different video or an image and do the same things we've done for this section.

5:21

You can also add additional margins, paddings, borders, corners. You can change the width as well. Maybe you want more of a medium width for your row instead. You can also do that within your columns. So maybe we go into this column and we want to change that specifically.

5:41

We can go in here and we can change these. These can all be different types of settings that are not completely reliant on what is decided above it. You can also go in and change the alignment and edit that. You can do margins, patterns, boardings, the same things that we've done for everything else. We also have the pop up feature, so you're going to end up creating your pop up here.

6:12

You can use either a templated section, like I showed earlier, you can add a section here, and you can either do one of these that are already precreated for you from us, or you can even use your own saved blocks or global blocks as well. Again, this is one of those really awesome features that if you are creating your pop up in the page itself and you want all of your pop ups on all of your 2 point o pages to be the same, you could use a global block. As you are making all of your changes on your page, you are gonna wanna make sure that you are taking note of the publish option. It's going to be very important that to publish your changes so that it will be reflective when you preview it. So we'll publish that.

6:59

We have the option to preview the page. So if we preview it, we'll be able to see an example of what it's gonna look like on the screen. You can also go in here and look at the, different versions. And if you go here, maybe we've made a change. We can go down here, and we can preview what that section or that what that change was.

7:26

And if you click these 3 dots, you can restore, and you can caption those as well. Also, we can preview what it looks like on different devices. This is essentially a general overview of how you can use the 2.0 page builder.