How To Guides How To Videos Feature Requests Calendar Training Workshops

Transcript

0:01

In this video, we are gonna cover the different elements within the new page builder, and how you can utilize it to build out your page. So once you've added your row, your section, your column, all of these, your your foundation of your page, what we can do is then go in and add a new element. Underneath of our element options, we have a bullet list, a headline, a paragraph, pre headline, sub headline, audio image, video, button, input, order form, scheduling link, survey, and then we have our advanced ones as the HTML and Iframe. Now to get started, I'm gonna start with a headline. Now based off of our other help guides, this is going to end up taking on your style.

0:46

So you can select, based off of your section. So if we go into our section, we can change the different style that we want to have based off of this section specifically. So once I've created my headline, I can then go in and add, say, a bullet list. And maybe I'm not a big fan of how this looks. I can change that, and we can go like this.

1:13

You can also change the color of, like, the check mark. So say I want my red check mark. Now if you can go into Font Awesome, you can FA icon as well. So we can look in here, and we can find all kinds of different icons that we want to put over here next to our bullet list. Then we can customize it.

1:37

We can decide based off of our style guide whether we want the small, medium, large, or extra large. You can also select your margin, your padding, your border, your corners. And then if you wanted to have a background item for this element specifically, you can also change the image and add a video behind it as well. Now you can keep building out your page how you would like. Let's say, as you're building out your page, you really would love to have a sign up form.

2:13

You have 2 different options in terms of adding a sign up form. You can build it out, which would require you to have a input field, and you're going to select the input field. An important thing to note is when you are selecting the input field, if you want to make sure that the information is on the contact record specifically, I would recommend that you use the contact custom field. We're gonna do the contact name. And as you can see, it's getting added there.

2:45

We're going to add another element and we're gonna do another input field. Then we're going to select email. So now we have our name and we have our email. Now you can customize these again. So you can have the Calvin.

3:04

You can have medium, large. You can have your padding, small, medium, large. It's really up to you what you would like to have in terms of spacing, and you can always add step before as well. You can also add a border, and you can also make these fields required. If you'd like, you can also do separate fields.

3:29

So we could do first and last name, and you can also select whether it's inline, above field, or floating in terms of this. So if we were to delete these, you can see that this label style is in the box itself. These will, then allow you to capture that information. Now, in order to sign up, you're gonna wanna add a button. Underneath here is where you're gonna select the style based off of your style guide.

4:06

And then you can even do the 3 dots to customize it even further. If you don't like one of the style guide options that you've created in terms of adding this button, you can also change the alignment, whether you want it left center, right, or justified. So we're gonna center that. You can also add an icon that's gonna be similar to this icon over here. And again, you'll be able to look on the font awesome in order to find other icons.

4:35

An important thing to note is if you want them to opt in based off of this information, you're gonna wanna make sure you select your list. And if GDPR consent is required in your area, then I would recommend to mark that as required as well. You can also add extra text underneath of here. Again, it's going to take off of your style. So we're just gonna leave that open.

5:03

When you select the 3 dots of the style, you can then come down here and customize the color as well as everything else on there, and that will not affect any other buttons on the page. Now if you would like instead, we can get rid of all of these and just click delete, delete. And instead we are going to do open pop up. So when we click this button, it's going to open up the pop up. Now, when we open up the pop up, you're gonna wanna build this out as well.

5:38

So we're gonna do full width, and I'm gonna say, do 2 columns and you're gonna wanna build out your form again, similar to how you do on your landing page. You're gonna do the same thing on the pop up itself. So you can select your field and select another field. And then we are gonna add our button again. And, again, you're gonna wanna select the list that you want them to get signed into.

6:15

So this way, if somebody were to click your other button up here, then they would open up the pop up. Now a couple other options that we have when building out the form or the page is you can do 1 Calvin. And let's say we wanna do this style guide or this row, and maybe you want to do an order form instead. So you can select your product. Let that load, and it's gonna show up here where people can have an inline order form on your landing page.

6:56

You can also do that on your pop up. So if you want to instead have a row, one column, add an element, You can do the order form on your pop up as well. You can also instead add a scheduling link and we can select the I'll do mine. Scheduling link name. You can hide your owner.

7:28

You can hide your description. And then you can customize this. This is also gonna be taking on the style that you have selected for this row. So if we go back in here, we can go in and select the white. And as you can see, it's going to take on that scheduling link as well.

7:52

Another option that we have is a survey. So you can select your survey and you can change the button label if you'd like, as well as the subtext. You can change the alignment of that. And then again, you can also add an image or a video in terms of the background. Otherwise, it's going to default to the background set in the style guide.

8:20

Another option we have is let's add another section altogether, and we're gonna do full width, and we'll do 4 columns. You can add your media, so you can add, like, an image. If we click add, you can use the stock photos or you can do regular images that you've already updated. I personally love the option for the stock photos. So we're gonna select 1 here, and we're gonna add a headline, and we're gonna add a bullet list.

9:05

And over here we can do a video. So if we were to add a video, you will have to look in your media library specifically. So let's go don't really see we'll do this one. And one last option is audio. So you can have your audio here as well once you've added it.

9:34

And let's do here. Okay. And then once you have these different columns, you can also change what they look like. So you can change the width of these. I know this doesn't look like the best right now, so I'm gonna actually delete this column.

9:55

So we have these 3 columns. So as you can see, if I wanted to, I could make this image a little smaller, and I can make this a little wider. You can just really change how wide you want each column to be, which is really awesome flexibility. You can also go into your image and you can change the height and width. You can also change whether you want it to be scaled down.

10:23

If you want it to be the original size, and we're gonna go bag. If you want to cover, contain, you can really just customize all of that. You can also change the padding and the margin, corners, everything. All of these different items are gonna be customizable for each element, each row, each section, pretty much everything. So offers lots of capabilities.

10:51

You can also add a link to your images. You can really do a lot of different things in here. The last thing I'm going to cover is whether or not you have something you'd like to embed. This could be a YouTube video. It could be, embedded form.

11:11

You'll use HTML section, and you're gonna want to copy and paste that code into this portion right here, which will automatically embed whatever you need on that page. As you are building out your page, an important thing to always remember is to publish your changes as you are going, or when you're ready to make your page live so that everything is showing and is visible. And then if there's anything that you have done that you aren't necessarily happy with, you can always click the undo button. So we can undo our changes as we created them. And then you can also go into the version history.

11:59

We also have the capability to rearrange our different options. So if we wanted to, we Calvin move our scheduling links, for example, and we could put it down here in this column and we'll delete that. And as you can see, it would then show here. So you can rearrange your page, and the elements on your page as you are building it. If there's something that you just, maybe you don't like how it is, maybe we want to do our order form and we want it to be over here.

12:43

You can have that set up as well. So as I shared, there's quite a bit of customizations that you can do on the 2.9 page builder. And as always, if you have any questions, please feel free to submit a support ticket.