Transcript
Hey, everybody.
How's everybody today?
I'm gonna wait a few minutes and see who else jumps on in.
We'll give them, like, 2 to 3 minutes.
We had 25 sign ups, but people get busy.
Just wanna make sure that that we wait just a little bit so everybody has a chance to get on.
Hope everybody's having a good day.
Hey, David.
We're just waiting a few minutes to make sure everybody has a chance to get in.
Got it.
Alright, everybody.
I think we're gonna just get started.
Thanks for joining me today.
This is gonna be awesome.
So today, I'm gonna go through our new page builder 2.0.
And just so we're all clear before I even get started, it's currently available for landing pages, funnels, and order forms, which are technically landing pages with an order form element.
So it's still not fully re released yet for main website pages.
And, so, like, your home page or your about page, things like that, it's not it's not able to you're still gonna have to use the old builder for that.
But there are ways you can kinda hack and and move around and use your landing pages for other things, and we can go over those if you guys would like.
But this, for the most part, is is landing pages.
So getting people to buy sales pages, things that are outside your site that are just pushing your programs, pushing your content, pushing your webinars, you know, pop ups that will lead to a landing page.
They're very useful to have for your web presence.
Right?
Like, they're they're an integral part of your web presence.
So we're gonna go over that today with builder 2.0.
And what we're gonna do, I'm gonna share my screen right now.
We are going to take this page right here.
Wanna make sure you guys can see that.
Can you see this landing page for health coach Kate?
Can you guys just give me Yeah.
We can see it.
Awesome.
Cool.
So health coach Kate, just health coach that I know, This is her home page, but this is, to me, a definition of a landing page as well.
Like, if she has Calvin to action, you know, this will be really easy for us to build and also looks kinda pretty.
So I'm gonna literally try and just get as pixel perfect as I can currently with our time and my skill level and just recreate this landing page with Sami Claro.
So I already did it here.
It's pretty close.
It's pretty close.
Just to let you guys know that that it's possible, but we're gonna just rebuild it from scratch completely.
So this is the landing page real quick.
Just there's a hero.
We got a section here.
We got another section here with a couple columns.
And that's basically how all web pages are are broken down, and I'm gonna go through section Calvin, element or section, column, row element with you guys too so we can just start at the high level and break it all the way down.
So and then real quick, guys, we're gonna do q and a at the end.
You're welcome to ask me questions as I go along, but we'll do, like, a full q and a at the end as well.
So alright.
I'm gonna get going.
So where we're gonna start first is at the list level.
So I'm gonna build a brand new list.
Right now, I'm in our our demo site.
This is just our Simplero support demo site.
I'm gonna build a brand new list for today, and then I'm gonna build landing pages and order forms that connect to a product and a list that I'm building today.
So first things first, what I'm gonna do is I'm gonna go to lists from my contacts tab.
I'm gonna create a new list.
We'll just call it silas builder 2.0.
Oops.
Alright.
So here's my list.
In the configure, I'm not gonna do too much.
Double opt in, we're gonna have just because a lot of people like it, require it, GDPR stuff.
Double opt in is helpful, and it works.
So we're just gonna stay there with that.
And, from our list builder is where we can move forward and literally connect our sign up form from there.
So at this tab, list is here.
I have nobody in it yet.
I'm gonna go to the sign up forms tab, and I'm gonna click on sign up form.
This is where I'm gonna just go grab it straight up, and here we go.
So we can choose Page Builder classic to build this landing page slash sign up form, whatever you wanna call it.
We can choose templates.
Right?
And you can see that there's classic templates.
And then there's also a lot of these classic templates we've rebuilt with the builder.
So it says 2.0 beta.
But for this exercise, I'm going to literally just build from scratch.
So I'm gonna go ahead and click on that and I Sami going to give it a name.
Let's call it page builder to move up for Silas.
Cool.
So I gave it a name.
So let's just start at the top.
This would be a good time as well for me to to talk about the style guide quickly because we had some questions in the Facebook group about the style guide.
So before I even do anything, I'm gonna just take a look at a style guide.
And what the style guide is, it's basically the the theme settings for your pages.
Now we have a ton that we can play with.
This is the default one.
And while I'm in it, I can edit all of these options here.
And it's gonna make changes to our theme for this landing page based on what is set in the style guide.
Like, for instance, all of our colors, you have your primary colors, your styles, all that stuff right here.
You can easily just edit these by changing your color palette, adding custom colors, changing how you want your style to represent.
Like like, if I just I just changed this just now, what that did is it changed the background, the headlines, paragraph, subheadlines, links.
And what that's gonna do is every time you add an element, it's gonna take these defaulted colors.
You're still able to change them.
So don't stress about that if you don't like something or or you built a style guide and it doesn't work in a very particular piece of your landing page.
But that's how the style guides work, and we can build a brand new one if we wanted to just by going to change.
Give it a second to load.
Waiting, waiting.
Cool.
And I'm just gonna go create a new style guide.
I can switch it here at this point, which we have a a Calvin because we're in this in Simplero support demo, or I can just make a brand new style guide.
For today's exercise, though, I'm not gonna rely on the style guide because we're gonna try and copy health coach Kate.
So I'm gonna show you even how to go outside your style guide and just create a custom thing.
But here's my builder 2.0.
I can select it.
And then now that I have it, it's gonna default me to what to what we have in here.
It's based on the theme, but I can edit all of these things if I wanted to.
Again, I'm not gonna do that right now.
That's kinda outside of the realm of what I wanted to show you today, but you can definitely play around this and set it up to match your brand.
And then every time you build a landing page, you don't have to think again about how you want your typography to look, your colors, your buttons, borders, shadows, etcetera.
So I'm gonna close this.
Just touched on that real quick.
Now here we are.
This is the builder.
So first things first, I get this plus sign right here.
The highest level is a section.
Right?
So inside of a section, we're just gonna have to add a section just because you gotta you got no other option there.
So inside your section, it's gonna ask you how wide you would you like it to be?
Would you like it to be full width on the page?
This includes mobile as well.
It's It's not gonna add any margin outside of the section.
It's gonna go all the way to the outside of your view area.
Right?
So we have full width, large, medium, and small.
This section, I'm gonna use for my hero.
So I'm gonna go full width with this first section.
So I'm gonna click on it right now.
Now inside of this section hold on.
Here we go.
Oh, I'm sorry.
Now it's gonna ask me it's gonna continue straight down the path and ask me how many rows do I want in this column or in, yeah, in this in this in the layout.
So because it's a hero, I'm just gonna do one column inside of here.
Now that I'm in here so I have a section, I have a row, and I have 1 column.
So inside of here, I could add another row if I wanted to.
This will make sense later as I build out more.
But for now, I'm just gonna do the hero.
So section, green is the row and insert yeah.
The the darker green is the Calvin.
The lighter green is the is the row.
So I'm gonna add a new element.
And what I'm gonna add is our image because I have it saved already.
And I'm gonna go to our library.
So here's our sidebar.
Let me touch on this real quick.
Every element, you're gonna have a sidebar with settings on it.
Right?
So we have some advanced settings here, which is gonna be the shadow for the element.
But from for now, we're gonna focus just on the main format.
So because it's an image element, this is where I'm gonna select the image.
I'm gonna go ahead and add it.
Let's upload it.
Let me go to my library.
This is the one right here.
And the image is there.
Boom.
So you're gonna offer alt text, which will be important for Google.
You should you should definitely Google that because I'm not gonna go over it now, but you definitely wanna name all of your images.
So I would describe what this is for accessibility for people with screen readers so they know what they're looking at.
I can do fit, and I can change this.
I can go cover.
I can do contain, and I can change the position.
Bill, which is at where it's at right now.
I can go original.
That's just gonna mess with how it's how it's represented inside of this.
So I can change with the width and the height, and then I can start playing with margin padding and alignment.
So I'm not gonna mess with that too much.
Like how this looks right now.
Right now, this is the default styling for this element itself.
Right?
The margin is at 0.
Padding is at small.
Could actually do this if we wanted to give it a little more space.
Border, nothing.
And then if I wanted to go into these styling, defaults and do a custom, I can do that.
And now I can play with the margin and make it all the way up on all sides.
It's still gonna stick to what I selected, though, for the section.
So let's just go back to here.
There we go.
That's that first section that we have.
So I can see them here.
This is kind of our navigator.
Right?
So now that I'm here, I can add hold on one second.
May have done this hero incorrectly.
I apologize.
Let me look at this real quick.
So what I meant to do with this hero, I'm just gonna confuse everybody.
This image, I'm gonna just go ahead and we are going to delete this right here now that I've talked about it.
So what we're gonna do for this section is we are going to make a background image.
That's what I meant to do.
So here's our banner.
Now it's a background image.
That makes more sense.
And now inside of here, I can add my elements.
So this will stretch the more content I add into it.
Right?
This isn't the limit of the actual hero itself.
But what I'm gonna do is I'm gonna add an element.
And right here, I'm gonna give it a headline.
So if I go to health coach Kate, what it says is small changes, big results.
So I'm just gonna copy it.
Come in here.
Boom.
There we go.
Let's give it some space already.
Now I'm gonna add another element below it, and that's gonna be our h two as our or our sub headline.
So, like, she has here, reverse insulin resistance with health coach Kate.
Boom.
I don't really like how that looks.
It's kinda hard to see just because we don't have the the shadowing on this on this photo.
I could edit it later, but I'm not gonna do that.
So I'm gonna go here.
I'm gonna take this text right here.
I'm gonna change the color, and I can do that straight from here.
It's a little bit easier to see.
Now I want this here to be a little bit bigger, so I'm gonna give it some space.
And then I'm gonna go Sami space here, See how close we can get it to be.
I'm just hitting enter just to give it more space around the items.
Not bad.
Not bad.
So, again, this took the font that's inside of my theme.
Right?
These are the fonts that I have in my theme for my h one and my h two.
It defaulted to them.
So if I wanted to change these, right, I can go ahead and change them.
I can go to typography.
And now that I hit style, it's gonna give me a drop down, and I can totally override what my theme is doing.
So we could call it new.
We can make the font way bigger.
Right?
I can even do some letter spacing just to give it some space.
Right?
And then you can mess with the line head if you want.
I wouldn't worry about that too much.
But now I can kind of just override those themes completely just so you guys can see how to do that.
I'm gonna take away some of the space here and how we're doing.
It's better.
Just for the sake of this demo, though, I'm not gonna get too crazy.
I'm just gonna try and show you guys that Calvin enough time, you can make anything that you would want to create.
And I'm just I'm copying Kate's.
So next thing we're gonna do, I can see that she has just another section here, and it's probably a text box, Maybe 2.
This is probably a h two, and then this is text.
So I'm gonna go ahead and add that right now.
I'm gonna add another section.
We're gonna go medium because I can see that she does have quite a bit of space on either side.
Not sure exactly how she decided how much space to add, but just making it medium starts me off with a little bit of space.
So inside this section, I'm gonna make it just 1 column, we're gonna add an element.
We will call it h one, and I'm gonna add another element.
We'll go h 2.
Oops.
I think I would rather do for this one.
We'll add another element, and we'll do paragraph.
Paragraph.
Cool.
Alright.
So if I go back to health coach Kate, what did she say?
Ready to conquer insulin resistance?
And reclaim your health?
There it is.
I'm not gonna mess with the text, but you get the idea.
I Calvin totally change the text Calvin.
And now I have the paragraph that I can do.
Gonna hold and just copy this.
Boom.
So I can highlight this text and as well make this centered like hers is.
Right?
So we're getting closer.
Again, good enough for what we would like to do here.
Right?
So this is another section.
Got our nice margin on each side.
Now that this section is done, I'm gonna go ahead and add another one.
If we look at health coach Kate, I would call this one section because it's kind of the same style.
We have 2, 2 columns and 2 rows, row, row, Calvin, column, column, column.
So I'm gonna build that inside of a single section.
So here we go.
We're gonna add a section, and we will go go medium with this one too.
Now inside of there, we wanna do 2 columns.
And I'm gonna just start by adding a new element.
Call it a image.
And let's go ahead and add her photo.
Boom.
There's that.
And if you look at this, this looks like an h two, we'll call it, and then some text and a button.
So we'll go ahead and do that.
I'm gonna add a new element called h 2, and then I'll add another element or paragraph, and then I'll add another element, and we will do button.
Let's go back here real quick.
Meet Kate.
Some text.
And then this button doesn't look anything like her button.
So this is coming from our theme again.
So let's play with this real quick.
So inside this button, we can decide its action, its label.
What does she say on hers?
She says about Kate.
So let's go about Kate.
And the action will be opt in for now.
I'm actually gonna make this do open pop up because we're gonna show you guys how to build a pop up in a second.
Yeah.
We'll do pop up for this.
Cool.
So this is the button that comes from the theme, but, again, I'm gonna show you guys how to override that.
So inside this button, here's our styling.
Right?
We can see how it's aligned, its margin, its style.
I'm gonna open this up real quick.
Here's my corners.
I can make it more rounded like hers is.
Kinda go there.
I will go background color.
I'm gonna choose a custom color.
Hers is more like this.
Probably like that.
Something like that.
So, again, there's a color code here just so you know.
I'm gonna copy that here in a second for you guys so you can just see how that works.
But we're getting closer.
Oh, it's a little bit little bit lighter than that.
So back to the button.
Let's see here.
What else do we wanna do?
Let's go a little bit later real quick.
Good enough.
Alright.
So if we look at her text, it's a little bit bigger and centered.
Just for the sake of this, we'll do that.
And what else can we do For that text casing, let's see if we go large.
That looks a little bit better.
I like large.
And I might add a little bit of space at the top with literally just to enter.
I'm not gonna play with the padding.
Let's see.
Let's see what this does.
I do want a little bit of a top margin.
So if I go to top Calvin, see if we can just add a little bit to the top.
Boom.
Like that.
41 pixels.
I'm gonna try and remember that for when I build the next section.
But that looks pretty good.
Right?
Good enough for now.
Let's see.
That's a little bit too much space for that button.
I'm gonna bring it up.
Let's do one space.
Cool.
Alright.
So there's me, Kate.
How are we doing?
Design check.
Pretty close.
If anyone is, like, totally blown away right now, let me know.
We can definitely just we can stop here and ask some questions if you like.
Again, we'll do a big QA at the end.
But if there's anything that you're completely not understanding so far, feel free.
So we're inside of this section.
I'm gonna add another row.
I wanna stay in the same section because this is the same type of content that I'm doing.
Right?
I'm not doing any new content doing this 2 column picture and, text.
So let's add another row, 2 columns.
This time, we are going to put the photo on this side.
I think that's how she has it.
Yeah.
We should get the photo over here.
Add a new element.
Image.
Again, just to reiterate, alt text is important.
You can choose all of your fill with height.
I'm gonna just I know so here's the thing.
Kate made hers.
Right?
She made these in Canva or some other photo editor to be the same size, which is smart.
When she brought them in here, she didn't have to do editing to them inside of her web editor, which is a good tip.
Like, anything you can do outside of the editor is gonna make it easier for you inside.
You don't wanna have to play with cropping and sizing and margin and padding.
Like, if you can make the images the same size, you're ahead of the game.
So we're gonna upload upload that image.
It is that one right there.
And we will go ahead and add a new element.
So, again, this is a h two and a paragraph and a button.
So another thing I could have done, let me just see what this looks like.
I'm gonna go duplicate.
Boom.
Now I could have just done that.
I could have duplicated it.
Now I had all the stuff waiting there for me.
Like, I could have duplicated this one.
Just so you guys know, you can do this.
Right?
I can duplicate that row, and then I could drag these things over and put them on the other side.
Right?
But I'm not gonna mess with that right now.
I'm going to just delete this and just show you how to build this stuff.
So let's go ahead.
Do it like that.
Get back to where we were.
So what does she say here?
Online coaching, some text and a button.
Same smell.
So I'm gonna go into this button.
Let's do this, actually.
This will be easier.
So I'm gonna delete this button.
Oops.
Didn't mean to duplicate that.
Oh, maybe I can't do that that way.
Let's see.
Can I drag this over here?
Boom.
Alright.
Love it.
So I'm gonna delete this.
Now I have the same button.
Now I will need to obviously edit what it does because I've literally just duplicated it, and I can make it do something else.
So we can do opt in here.
I'm gonna change these later.
I'm gonna show you how to connect this landing page to an order form.
Even though it might not make sense contextually, it'll still show you the flow.
Maybe we'll make it say something like buy my product or something.
So let's yeah.
I'll do that right now.
Cool.
So, again, we will give it some Calvin, separate edges to the top.
Just give it a little bit.
Boom.
But I have this for this.
So I'm just copying, guys.
Typography, I have set to large.
Let me go back in here.
I'm gonna set this one to large, and then I had a space up to underneath.
Right.
Close enough.
Right?
I go ahead and delete this.
It's just an extra one I had.
Now what else do we got on her page?
So so far first of all, a reminder, guys.
You should publish stuff often.
Right?
Make sure that things are saved, and it's it's probably smart to to just make sure that you that you push it.
You may not have it connected to anything yet, which is fine.
But just make sure you're saving.
We there's you know, it's autosaved as well, but let's make sure that that you're always doing that.
So underneath here, it looks like I have another I'm gonna call this a section.
Actually, I'm gonna make this a section just for ease and then make this a 3 column.
Yeah.
Let's try that.
Add a section.
And this is also gonna be medium.
We're gonna do one column from this.
We're just gonna do our h two.
Oops.
Scroll down there again.
And she says past clients have to say.
And then under that, you can add a row, and I can go 3 columns.
And here's where I'm just gonna add 3 paragraphs.
That's it.
Boom.
Boom.
Now let me just copy this in real quick.
Not gonna worry about our custom icons or anything.
Make it really easy.
And then we'll go ahead and let's center these as well.
And what else can we do?
We will make them large.
That looks nice.
Alright.
So those are her 3 client feedbacks.
Right?
Some social proof, which is also important.
And there we have that.
So we're almost there, guys.
We're getting close.
So all that's left really is a footer, which we're not gonna add.
And then just for fun, there's this bar with this add to become a health coach.
I saved that too.
So might as well just do it.
I'm gonna add 1 more section.
Go forward because, again, you can see it goes all the way out to the sides.
And then we're gonna do one column.
People waiting.
Let's see.
Cool.
So we're gonna go 1 column.
And for this background, let's see here, actually.
How did I do that last time?
Add a photo first.
And why that?
Load.
Here's this bar.
There's it.
That's it right there.
Now for the section.
Do I'm blanking.
I know I changed the color yesterday, but I forgot how I did that.
Color.
Here we go.
So in advanced so let's go back.
Go to the section.
Answer the section.
3 buttons.
3 the 3 dots.
I can go to the color and I can change the background of this section.
That's the shadow.
I'm sorry.
Never mind.
Sorry, guys.
I'm having trouble.
I forgot how I did that, but I did do it yesterday.
I can bring up the other one if we want, but that's really not important.
There's a way to change the background color for this section without having it be an image.
But this is this is the crux of our landing page.
That's it.
Right?
So now if I wanna preview it go ahead and preview it.
That's what it looks like.
It's not exact.
I could play with it some more.
But for the sake of this workshop, because we, you know, we do gotta manage our time as well, I was able to recreate a landing page that I just found online with our builder.
Now before I move on completely, I'm gonna go over our responsive modes.
Right?
So if someone's looking at it on a phone, you wanna make sure it still looks good.
So what I did is I went to the top, and I clicked on responsive mode.
And this is where let me see.
Let me close this real quick.
This is where I can decide the the size.
Right?
I'm gonna bring it in a little bit so we can make sure that we hit all phone types.
Now this doesn't look great, but it's not horrible.
Right?
So I just wanna have a look first to make sure that everything looks the way I want it to and fits correctly.
So it's not horrible.
Let me see if there's anything I can do here.
Let's see if I can make so let's see if we can make the margin on this section.
Wider.
Yeah.
It's gonna hold that margin that was selected, so it's only doing top and bottom.
We're gonna leave that.
But this doesn't look too bad.
Like, let's see.
It's set a 100 already.
It's not padding.
Brings it out a little bit.
I can even round the corners.
I don't wanna do that.
But that's something here, an option to do.
But what this is gonna do is it's gonna change how these things look on mobile.
Right?
And that's gonna be helpful for you.
Oops.
This one to be centered.
Let's drag this over a little bit.
And then, yeah, you can just see what sizes look like as it gets smaller and smaller and smaller.
And you can Google typical pixel width for, like, an iPhone or Samsung, and you can set that pixel width here so you can see exactly what it will look like on a specific phone.
Right?
But out of the box, this is pretty responsive ready.
It's not perfect.
But what it's gonna do, it's gonna it's gonna save this for that that pixel width.
Right?
So you can make a setting change to the responsive mode for a phone, and it's not gonna mess with your desktop mode.
And then here's like an iPad.
So not really a fan of that.
Let's see if we can do a little bit of something here.
Move that down, add some padding.
Right?
Let's do the same thing with this guy.
Again, guys, a reminder, margin is outside of the element, and padding is inside of the element.
Right?
Outside of the box.
So if you want they both work to create space, but try and just think about it like that.
So separate edges.
Boom.
It's a little bit better.
And I wanna move that up a little bit.
Let's see here.
Can we affect this padding?
Right.
So, again, we got time to think about, but any of these options, you can make changes based on the screen size that you're looking at, and it's gonna stay with that screen size.
So that's responsive.
Now what you guys have all been waiting for.
If there's any questions about this again, stop me because I'm gonna move on now to how to connect this to other things.
Actually, before I do that, I'm gonna make an order form.
Right?
So part of this page builder is the fact that you can do an order form.
So we made a landing page here.
Now I'm gonna make an order form landing page.
It's a technicality, but this order form is technically also a landing page.
So let's go ahead and just duplicate this and I'm going to go back to where we're at.
And let's start here.
And we're gonna do another builder.
So starting at the top again, I'm gonna add a new section.
We'll call it full width, and we're gonna go 2 columns because it's an order form.
Now in this element, we're going to literally click on order form.
Boom.
So now it's not gonna show me an order form until I link it to a product.
And we're not gonna talk about products today, but it you already probably have a product.
If you're selling anything or if you built out your your stuff, you got a product.
So we got a 1,000,000 products to choose from.
I'm just gonna choose 1 from our list of many things, and here is our order form.
And all of these options, prices, and all that stuff is done at the product level.
So it's bringing in your pricing from when you created the product.
But now I still have the ability to make this pretty.
Right?
I can add a h one.
I can add a h 2.
I can add a photo, and I can add paragraph.
Right?
And we can just, again, steal from health coach Kate.
Like, it doesn't really matter.
Just gonna throw some text in there.
Oops.
And we'll just add a photo.
And then we could do some text.
Cool.
And, again, all my editing is exactly the same.
I can add margin to this order form.
I can change typography.
I can give background colors to the entire section.
I can do all kinds of stuff.
So see here, I'm going to name this.
Silas Builder 2.0.
No.
Publish that.
Now I'm gonna go back to my landing page I created originally, and I am going to connect these two things.
So let's say you have a special offer, and you have a special landing page for it.
And in that landing page, you have a link for them to purchase.
Right?
How would that work?
So I made a button here, buy my product.
Inside of that action, I'm gonna have it go to something.
Right?
So we can do landing pages.
This could go to an external link.
It really doesn't matter.
But let's see if builder so let's build a 2.0.
So I Calvin this.
Right?
So it's built at 2.0.
Yeah.
So now this is gonna link out to Silas Builder 2.0.
And I wanna preview all of this for you guys so you can see it.
That was that simple.
So we made an order form for the landing page and linked it through a button.
Let's say this one wanted to say, join my list.
Now what this is gonna do, we can have it do 2 things.
We can have it opt in straight to the list that I created for this workshop.
Right?
You have to do that immediately, or we can have it linked to a pop up.
Right?
So if I go to open pop up, we can have it go into our pop up.
So if we want to edit our pop up, we go back to the beginning and boom, here's the pop up for this page.
So, again, same section, row, Calvin, go forward.
We could have it be just one Calvin.
Yeah.
Let's do one column.
And we're gonna just say add new element.
Headlines.
Join the list.
Boom.
We'll add another element below it and it'll be input box and input type.
This is where we're gonna select our field for the input type.
Right?
This is our names, our emails, our phone numbers, and, basically, anything else that you want.
So we're gonna do contact name.
We're gonna add another one.
Contact email.
And then See if we gotta get the GDPR in there.
Yes.
Bear with me, guys.
I'm gonna try and find this.
Where did I find that before?
Let's go here.
So that's an agreement and then that's where they're going to enter in their stuff.
And that's it.
That's our pop up.
We can make this as pretty as we want.
It doesn't have to be crazy.
It's this is this is what's gonna pop up when they click on that button.
So we'll do that.
So there's our pop up and publish those changes.
Go back and look at it.
There it is.
And, again, that's gonna open when we select to join my list.
It's gonna open pop up.
I'm gonna add another call to action real quick here just for fun.
Let's make sure that they see it multiple times.
Call it another button.
See.
Nah.
That's double double work.
I'm gonna get rid of that.
Alright.
So here we are.
We got connection to a product and a connection to the list.
Now because there's that opt in and it's saved.
Let's go.
Let's duplicate this again.
We'll go to our lists.
My list.
And boom.
There's our sign up form that we just created.
Right?
So now it's automatically connected to the list because here I connected it to the opt in.
Right?
Even though it opens a pop up inside of my pop up, the pop up is the opt in.
Just go here.
Oh, I need to add the button.
Opt ins.
There we go.
I'm in and that's ugly.
So I'll just make sure I hit that real quick.
Cool.
So now let's go ahead.
Let's go back here.
Here's the builder.
Let's copy that link.
Let's just see what it looks like outside of Sami player.
There it is.
There's my thing.
So what we're gonna do is we'll click on buy my product, and there's the order form.
So they're gonna enter it.
Boom.
They can purchase it right from your landing page, brings them straight to the order form.
How cool is that?
And if they wanted to join the list, here's the pop up, the name, Salazar Simplero.
Agree.
I'm in, and that's it.
That's how it's connected.
They're all connected through that.
So let me just see if I touched on everything.
Oh, there's version history.
That's what we want to do.
Cool.
Let's go back here.
So here's the version history.
If you need to change something, these are your time stamps for everything that you did.
You can revert back to where you were, and you can see what you modified and bring yourself back to that stage.
Everything that you did past that point will also be changed, but you can go all the way back, wherever you need to do.
If you made a mistake, this is how you edit those mistakes.
You deleted an item on accident.
You deleted a a section on accident.
Your cat jumped on your computer and and started everything over from the beginning.
Whatever the case may be, you can affect the change through the version history.
So there's that awesome feature as well.
But I've covered basically everything that I wanted to cover as far as just how to use the builder to build, what all of the things mean, how to navigate the builder itself.
And I kind of touched a little bit on how to connect it around Sami Simplero.
Like, this is gonna be the list sign up, and I showed how you made a pop up and an opt in.
And then this is gonna be, like, straight to an order form, which we also built with Simplero.
So that's how you're gonna use and utilize these order forms and these landing pages with the new builder.
You can do options for your list.
You can do product purchases.
The choice is up to you.
Now I would love to ask if you guys have any questions and things that I didn't cover.
I'd love to hear anything you guys got.
I'm still new to using this.
Like, it's it's in beta still.
I mean, it's been around for us for a little bit, but I played with it a bit.
You know, I've I've built some stuff, tried to copy things and and make some things for customers and stuff during support tickets.
But, you know, I'm learning stuff too, but I can definitely help answer any questions.
And if I don't have answers, I can get you to the right place, and we can get those those questions answered for you.
So feel free, guys.
Jump on and let me know.
Possible to recreate the home page in the new builder.
Technically, as far as a home page is considered, I went over this in the beginning.
No.
So main website, usually, when you have a fresh account, it's gonna give you home, about all of all of those things.
The the thing about the home page is it's gonna have navigation easily for you.
So if you notice up here, there's no nav bar on a on just our regular landing pages.
Right?
The top navigation isn't a part of this landing page.
Our home pages and our main site pages have that landing page built or have the navigation built in.
So currently, in its form, you couldn't do the home page.
We're working on making your main website pages, buildable with the new builder.
So that's the next step.
But for now, no.
A workaround, which isn't a good one, would be to go into change URL, and you could connect your your page to a custom domain.
Like, you could make your main website go to a URL that you made, and then you could have that act as your as your home page, but I wouldn't recommend that.
So no.
That's a long short answer.
Not yet.
It wouldn't operate the same.
You could literally create it and make it look the same or, you know, better or whatever, that it wouldn't it wouldn't operate inside of some Plurals the same way that an actual home page does.
So the the second the the page you made that had her picture in the order form, that's just like a separate landing page.
It's just functioning as an order form.
Exactly.
Yep.
And that was that was my biggest question when I first started going down this rabbit hole.
It's let's go to the product itself.
So it doesn't even affect the product itself if you go to your your products.
Every product has, its order form level, and this literally bypasses that.
Like, this will still exist somewhere if you're using your main site's catalog to direct customers to your product.
It will still use this order form that is created.
Like, you can add custom copy.
So it's gonna have, like yep.
So this this would live outside of or take place of the original sales page and landing page.
And another thing you could do for your product, like, under the selling, primary sales page can be overridden.
This is what I think makes the most sense.
You don't have the catalog page anymore.
You do a stand alone sales page, build it with the builder, and have that sales page have the order form linked to it.
So you walk them through it that way.
Right?
Build a cool landing page as your sales page and then have the option to purchase as a link in that landing page that brings them to the order form.
Okay.
So that's just such a traditional sales page?
Yep.
Okay.
And that's just a landing page functioning as a sales page?
Exactly.
Got it.
Okay.
Because currently, I mean, the catalog acts as if you did nothing, your your main site is gonna have the catalog page that's gonna host all your products.
And, you know, there's you can affect them a little bit, but you can't do a ton of editing to them.
No.
It's limited.
Yeah.
Yeah.
So that's what people are doing.
They'll they'll make a stand alone sales page that links to their product.
And then also in there, you can check out and bring you to another page.
Like that other like, the one with the woman?
Okay.
Yep.
Yeah.
And that's the thing.
Like, once builder becomes Simplero wide, then they'll these options will probably look different as well.
You know?
You'll be able to do all kinds of cool stuff with your main site pages.
The only other question I had, which is really probably specific to me, maybe not.
I don't know.
But, like, when we, like, run master classes, we like to, like, have a video or some sort of training and then the opportunity for people to interact with each other and leave comments and that sort of thing.
Yeah.
Is there a way to do that on the landing pages now?
I mean I mean, I could bring in some external HTML.
Or You might that might yeah.
That's a great question, and I wish I had a fast answer for that.
I wasn't ready for that question.
It's no big I just wanna want like, let me see.
Probably not because you could have a webinar sit there, but to have that because you you know, you could post the video.
You could upload your webinar.
But to have, yeah, interactive communication, there's no forum element that we that we have available for landing pages yet.
Okay.
Yeah.
There'd be no way to have post webinar communication or anything inside of the landing page itself.
That's great.
That's it currently currently.
Yes.
Currently.
Yep.
Yep.
Alright.
Cool.
Thanks.
Anything's an element like as well, guys, just so you all know, we that feature request page that we share with you guys, like, this is how we build and create our product.
So anything that you have as a new idea or a solution that would work well for your business, just make sure to always put them on there because we take those super seriously.
But I like that.
And then if you were to wanna enter code in, you know Yeah.
How would you do that?
So there's this HTML Oh, okay.
Cool.
Right there.
Yep.
Yep.
And then I can let's see.
Yep.
Yeah.
Yep.
That's how you bring brings if you had, like, a third party app and you could somehow link it in there, that would be how you do that as well.
Yeah.
Okay.
Perfect.
Thanks.
Yeah.
Yeah.
No.
This is a huge upgrade.
I agree.
Even just, like, even just being able to host the order form on your customized landing page, that's gonna be massive because the other one is so ugly.
It's clunky.
Yeah.
Yeah.
It's just it's, like, so long.
Yeah.
Yeah.
This is awesome.
I'm really happy.
I'm stoked for me.
That's great.
It's really cool.
I'm excited to see what everybody starts to build.
You know, if you're familiar with, like, Divi or Elementor, like, that's kinda what we're going for.
We wanna make it easy.
We wanna make it easier than that even.
And I use Elementor, and this feels easier than that.
It's still missing some things you'll notice.
Like, I can't do image shadowing over my background image, like, yet.
But as we just wanted to get this out.
You know?
And as we build it, we'll just keep we'll keep adding for sure.
Yeah, no, it's, a huge upgrade.
Sweet.
Yeah.
Thanks.
That's stoked.
Stoked to hear that.
Cool, guys.
Any other questions where we got I'll make sure I didn't miss anything.
We had some questions from Facebook.
Is it is there an easy way to move from the old to the new page builder?
Not really.
Right.
We can't, there's no way to copy that old page as a template and bring it in, like kind of going to have to rebuild.
So that don't have a great answer for that.
And then mixing elements also is not really a thing because again, the elements are unique to the builder itself.
So that's a no on both of those.
And then here's some questions we get often.
Customize an order form.
Yep.
We did that.
Can you embed an embed an order form?
Yep.
That's basically bringing in an element into an op into a landing page.
Opt in form showed how how we do that.
Just input fields in a button.
Make the opt in fields more narrow.
That would basically be just padding and margins just like just like anything else.
Responsive, we went over that.
Oops.
I got too many tabs now.
Style guide, we did that.
Templates, yes.
So I didn't do that.
I didn't go from a template, but I did show you guys in the beginning.
You can definitely just start with a template.
Let's just do that real quick because we got a little bit of time.
If you guys don't mind, you guys can hop off whenever you want or hang out.
But if I were to just create a brand new landing page, I Calvin start with a template and then edit that.
But I gotta make sure I go to a 2 point o landing page specified.
Which one do I like?
Let's just see.
We ended up with 4, 5 males.
So when this loads up, it's gonna just take all the style and allow you to just mess with it as much as you want if it loads.
Oh.
Oh my goodness, guys.
My family was yelling in the background.
Sorry.
So what I was saying is, we did cover.
We got it all covered, and I just want you to be creative.
I want you to have fun with this.
And if you have any questions, just ping support.
We're here all the time.
And if we don't know something, we have a direct line to the devs too.
So if you have an obscure error or just a question you run into, a a a roadblock, something you can't figure out, just let us know.
Full beans.
Awesome.
I'm excited for you, Lynn.
Thank you.
Thanks for coming, everybody.
This is gonna be recorded, and it's gonna be sent to you as well.
So you'll have a link to this recording.
So anything that I went too fast through today or anything you might have missed, I will definitely be sending it out to you.
So thanks for joining me, and I really appreciate you.
Everyone, have a great weekend.
Simplero Training Workshops
Page Builder 2.0 is Live for your funnels and landing pages! Join us to learn how you can use it to help build beautiful converting content. We go over landing pages, order forms, and how to connect these pages to your audience.
For more resources, check out these articles:
228 Park Ave S
Suite 92530
New York, NY 10003
United States
Suite 92530
New York, NY 10003
United States
Copyright © 2024 Powerful Through Grace, Inc.
___MESSAGE___
___MESSAGE___
Thanks, that was useful, well done. Cleared some of my challenges with 2.0, works on my first 2.0 landingpage at the moment. looks very promising :-)