Transcript
Hey, everybody.
Just gonna wait a couple more minutes to see who shows up, comes on in.
There was quite a few sign ups, but as those things go, not everybody shows up.
So let's just give it a few more minutes.
If you have any questions in the meantime, we can definitely start chatting.
But, I'm gonna kick it off in a couple minutes.
I have a question while we're waiting.
Sure.
So the new page builder looks awesome, but you can only use it on landing pages, and I have 0 landing pages and a lot of regular pages.
So when can I use it on non landing pages?
That is an amazing question that we are all chomping at the bit to answer as well.
Our dev team has it as a priority, but we're just not quite there yet.
We're hoping within the next month or so, and I feel your pain.
And that's kind of gonna be the discussion today too.
I wanna find out from everybody where they're at.
Are they using the new page builder?
Are they not?
Are they using it for landing pages?
Are they hacking it to use it for their main site pages, which isn't really the best way to do it.
But, yeah, we'll we'll get into that, Calvin, and I appreciate your patience.
But we wanted just as you guys do.
That's for sure.
Alright.
I think we're good to go.
We're just gonna get started here.
Anybody that comes in are welcome to to jump in late.
It's not a problem, but I'm gonna just go ahead and get started.
I wanna welcome you all.
My name is Silas.
I work for customer success at Simplero.
And today, we're gonna just be going over website pages and landing pages.
And as Ellie had spoken about, there's 2 ways to attack these now because we have the new builder 2.0 available for landing pages only and then basically funnels as well because they're kind of a a required thing within the funnel is is the landing page.
So 2 point o works for those two things.
It's not live yet for main site, and we'll talk about what those two things mean as well.
Just to get into it, that that's probably a good place to start.
I'm not sure what everyone's, base level of knowledge is around web design or websites and how things are laid out.
But just to start off in the beginning, a landing page is used as more of it can be used in a sales environment or if you have some sort of information that you wanna provide to your users that isn't a part of your main marketing website.
Your main website is what hosts things like your about page, right, and your contact us page.
Your sales page could be on there, but that might better be suited for a landing page to your services.
That's how we scaffold you out with Simplero to begin with.
So if you're new to Simplero and you started an account, maybe you're on trial, maybe you're not, but you'll notice that this is what we give you to to get started.
And if we take a look at these pages, we provide a little bit of content just so you can kind of see what we have going on here.
So, also, today, this is gonna to to respect all of everyone's time, this we're gonna probably drink from a fire hose a little bit because there's so much we could get into if we wanted to, but I only have about an hour with you guys, and I wanna make sure there's room for a q and a.
So my goal today is to build a little bit with the old builder, your main website pages for anybody who has questions about that, and then also build out a landing page with the new builder.
And we can talk about how to connect all of those things too.
Does that sound good to everybody?
If you have any feedback too, you're welcome to to jump in anytime.
Like, main q and a, we'll try and keep for the end, but you can stop me anywhere as well if you have any questions.
So that's where we're gonna head.
First things first, let's talk about themes.
This will kind of affect how your websites are going to look at least on the main website end.
So when you go into accounts, you're going to be able to affect your theme from there, and that's gonna create the themes for your entire website.
You can override these things, but themes is kind of where you wanna make sure you start so you can build out what your typography and your buttons and stuff are gonna look like.
So for now, we're gonna do our website theme.
This is the the main theme used on your websites.
Like, you see, you kind of have a separate theme for your membership site, and then this is something else.
By the way, I'm just in one of our, like, child accounts, test accounts, so it's it should look relatively close to what you guys have.
But if I go inside here, I can customize this theme, and this is how my website's gonna look.
So inside here, I have a few tabs.
I can go to colors, and I can set the colors for the theme.
Alternate background, that'll make sense when we look at pages themselves, you Calvin choose alternate, for example.
Accent color, this is what's used for text.
Primary buttons aligns Sami background.
Secondary, secondary buttons, social icons, home page, and then border colors.
And then inside here, you can create all of your text colors, and we're just gonna leave them as defaulted.
But if you've never been in here, this is where you kinda create the look and feel of your pages.
And then buttons, of course, are going to be here.
And then button text and then navigation stuff, this is what your top nav is gonna look like.
You can change the background color there, text, text and transparent, and then footer as well.
And that's and you can see this is, representative of what this will look like.
Like, this is my footer.
Here's the background color.
Here's my text color.
If I were to affect these changes, it would change the theme there.
So that's the theme.
Typography, this is where you would change the the text, what you want it to look like.
Your headings can have something.
Your body text can have something different.
And then use header or font body font for buttons.
You can use the default for your headings for the buttons.
And then you can affect your navigation from here.
So you could have it be at the top or on the left.
If were to move that a little bit, it's gonna show you what that looks like.
I'm not gonna save changes.
I'm not a fan of the way this looks.
This is our membership site.
Kinda looks like this, or you can also change that too.
But this is where you would change the navigation.
And then your appearance, you can change the sizes for this, and you can make it stick as well.
So sticking would mean if you're scrolling, it's going to just scroll with you as you can see.
Your logo is where you're gonna put your logo image.
And right now, it just says Liz Alvarez, but it would go in that spot there.
And if you have a transparent header, you can add a logo image there.
Your favicon or favicon is this little guy up in the corner.
I wanna make sure that everyone can see this right.
I wanna make sure I'm on the right window.
But yes.
So this is where the fab icon goes.
It's the smaller Simplero.
And then some header options there so you can show site title even when logo is uploaded.
That'll also put the site title around the logo search option and login menu.
And then call to action stuff, top right corner of your website is prime real estate for permanent call to action.
You can add this if you want.
You don't have to add that.
And that that can have a destination on it to maybe your contact page or about page.
And then you can also hide it right here for known contacts.
If someone's on your contact list, Simplero will see that, and it'll hide that for them.
That's the navigation, announcement banner.
This is something that's gonna live on here temporarily.
Like, let's just see what this looks like.
Boom.
And you can't really see it.
We can change the background color and the text color.
The defaulted ones aren't great.
Firewall 2.
Let's see.
Go this way.
Yeah.
I can see that a little bit better.
It's more of a white color.
But that's where you can affect that.
And then, again, come here and take a look.
There'll be many more things to do.
I'm not gonna keep going through all this, but this will affect your theme for your website.
So that's where you find all of that.
And just a quick reminder, guys.
If you have any trouble or need help setting up your domains, we can totally do it for you.
Reach out to us via a support ticket.
We can add custom domains.
We can point things to your main websites, point things to your landing pages, whatever you need to do.
We have guides on how you can do it yourself, and we'll also do it for you if you need help.
So don't forget about that.
So back to the pages.
So I'm gonna navigate here.
This is my main website.
Again, this is what we default you to have.
You can add your own of whatever you think you would like to have.
You can delete these.
You can hide them from the navigation.
There's all types of stuff that you can do.
I am going to add a page.
Let's see.
Somebody come in.
Hey there.
We're just gonna keep running.
Thanks for coming.
We're gonna just keep going with this.
This is gonna be recorded for everybody too so you can see it later.
But I'm gonna add a a page, and we're gonna try and just go through a quick mock up of a home page.
Instead of using what's defaulted here and playing with it, thought it might be more helpful to just make a mock up and see if we can kind of create something.
I found this cool little gym page, the Blueprint LA.
It's got some flashy stuff going on.
This is their home page, and we're gonna see if we can just sorta build it with the old builder and see what we come up with.
So I'm gonna add a page here.
I'm gonna just call it a page.
We'll call it home too.
I'll hit add there.
Just so you know, here's your options.
You can anchor to a spot on a site.
That's kind of handy to do.
You can create a drop down menu, webhooks, favorites, catalogs, categories, products, blogs, external links.
This would be good for linking out to a landing page, terms and conditions, and your support link.
So here's home 2.
This is just blank.
There's nothing on here.
So right off the bat, our options are to add sections and create settings.
So let's just talk about the settings real quick.
Right now, it's in draft.
I can publish it when I'm ready, or I can schedule it and have it become live at a scheduled time.
So that's kind of handy.
May not be something that you'll use all the time, but for now, we'll just leave it in draft.
Our layout, we can do things like hide the header, make the header transparent, hide the footer, or hide the sidebar.
This is gonna be the label in navigation.
Again, this is called home too.
This isn't actually your home page, but you get the drift You can label it whatever you want.
You can also hide it from the main navigation.
And then the URL, you Calvin change the slug, so you can change what you want it to say.
And then here's your search engines and social options.
You can hide it completely from Google if you wanted to.
You can add your title.
This is good for SEO.
This is really important.
And then social sharing images, you can choose your media, and then you can also customize the themes from here.
So let's go back to the sections, and I'm just gonna add a section real quick.
So let's see.
We wanna copy the blueprint LA.
This is gonna be kinda tough.
There's a video.
But if we wanted to start with this, I would do something probably like a text section.
And text is super handy because you can do all types of stuff with it.
You can choose background images.
You can add text to it.
You can play with everything basically on here.
So we're gonna choose media, and I'm gonna go just so everybody knows, you have full access to Unsplash through our stock stuff, and we're gonna do gin.
Let's see if we can find a good hero.
That's good enough.
And I'm gonna have to choose style custom.
Let's see.
How do I get that to it?
There we go.
So it's loaded in here, and what we're gonna do to create space so we can see this better is literally just go inside of this text box.
And what does the blueprint cell LA say?
They say get real, sustainable results, and I'm just gonna cut.
And I'm going to create the format, and we'll do large header.
Get real sustainable results, and this was centered.
Let me go ahead and center that.
And, again, it's pulling the font from my, theme.
Right?
I'm not gonna play with that now, but I can make it bigger if I wanted to.
Boom.
That's massive.
Go too big.
Let's go 48.
And then if I go down here, let's see what else they see on there.
They have a button here.
Tries for 3 days for free.
So if I go back here, I can add a link.
Try us for free.
Oops.
That's the URL.
Oops.
This doesn't matter.
This is just gonna be the URL, but we'll leave it blank for now.
Title shown on hover, leave that.
And we're gonna display that as a button.
Cool.
So we can decide to whatever this call to action is, open in a new window or just go directly to there, but we're gonna display it as a button.
Boom.
And we are going to center that as well.
So view what we're going for here.
Right?
If you needed a little bit more spacing, you can add some space there.
But there's our hero.
As we come down I'm gonna try and do this pretty quickly.
It won't be here.
Oh, wow.
So here's another section.
This is kind of a cool little border.
I'm going to just save these changes just to make sure we don't lose anything.
When I go back, I'm gonna add a section.
Let's add another text section.
Very versatile.
I could have done hero with this too, just so you know, and you can play with the hero too.
But, again, I also encourage you guys to kind of test things out.
Don't be afraid to mess around in here.
So we're gonna go background image.
I think I might have uploaded this already.
Yes.
Right here.
And the banners.
And, again, I have to change this to custom.
Otherwise, it'll just default it.
It doesn't like that.
Let's see.
Let's try I'm gonna have another section.
I think this before.
So let me go see if it likes it better because it's, Actually, let me go 0 image.
And inside this image, I'm gonna choose media.
Boom.
There we go.
Like that one.
Much better.
So I'm gonna go ahead and delete these other guys.
Which section?
Let's get it here.
Getting closer.
Getting closer.
What else do they have here?
Here's just the text section.
So let's do this quickly.
And let me go ahead and add another text.
We can write directly on the page.
Oops.
Let's see here.
Again, they had it centered, and this might get boring.
Let's see what else we can add.
Let's just skip to here.
We're gonna try and build this section real quick.
This is what would probably best described as a feature section in Simplero.
So let's go back here, and we're gonna add feature section.
Boom.
We got 3 features there.
Let's add it.
Just so you notice, guys, too, when I go and try and add a section, I can click on it, a contact one, for instance.
It doesn't actually add it till I add it.
So that's kind of a handy little trick.
Like, you can visualize what you wanna do before actually adding it to your site.
If you do nothing, it won't add it.
Right?
You have to actually click add.
So I can see what I wanna see before I actually make any decisions.
So if I get into the feature section, here we go with the features.
A really cool thing about this is you can give it a number of columns.
If you need 5, let's say it starts to get a little busy.
Let's go back to 3, and you can choose the width of the columns.
You can play with the pixels and keep it lower because it gives it enough space.
You can round the images, which we're not gonna do.
You can mess with the border radius right now.
Again, the appearance, you can make it custom or use the alternate style.
We're gonna see what we can do, though, just to make it, the way we want it to look, see if we can copy this.
So I'm gonna go to background.
I know that background is white.
Let's see if we can mess with the background.
Oops.
I don't want an image.
There we go.
Default makes it just white, and I want it to be alternate.
I want it to be white.
It went from the theme.
And then now that we're in there, let's go to each of the features.
So this is a feature with image.
I'm gonna choose the media, and let's just go here.
Upload.
Browse.
Took some of these before already.
Let's go with this guy.
Boom.
It's pretty cool.
And then, again, how close are we?
So what we got here?
We have image box with the title, text, and a button.
So here's our title.
Here's our text, and we'll just do this here.
Enter link.
Say a button button.
Oops.
I forgot to display that as a button.
So I'll go here.
Display as a button.
Boom.
Now, again, if I wanted to make my theme look like theirs, we could mess with our theme, and our buttons would take that theme.
There's not as many options for this currently with our main builder.
We have much more customization, ability.
This is the new page builder, which I'll show you later on in this workshop.
But as you can see, this is where we're at.
So we're getting closer to what this page looks like.
I can delete all this right here because they don't have that on theirs, and we're starting to look pretty close to what they have.
I'm not gonna fill these out if you guys get what I'm going for there.
Keep trying to save changes.
Make sure you keep saving stuff just so you don't lose anything.
But let's see what they have here.
Now this looks like a text and media section.
So I'm gonna add a section here.
We do text and media.
Cool.
Pretty close.
And we will go to that status.
Stagger boxes if you want and go stacked.
We'll leave it the way it is.
You want it to look exactly while theirs is.
Their media is on the left.
And let's see.
Can add a link to that photo if we wanted to.
Go to default because it's white again.
And here, we can do a background image for this entire section, which we're not gonna do.
Background video if we wanted to.
And then as we get down here, we can choose what we want to go inside this stuff.
So here's my text.
I'll just copy it real quick.
So this was a on a chatter.
This is a link.
We can make that a button.
Cool.
Here's the media.
Let's see.
Let's take another one of these photos.
Looking looking sharp.
Liking that.
And then let's just do this last one real quick, and then we'll move on because you guys probably understand pretty well.
And then I'll open the main website up for for questions.
And that's anything to do with it, how it's linked, all the types of stuff that you would want to, you know, to ask about main website.
We can go through that.
Let's just do this real quick.
We'll add one more section.
Let's see.
And just a background image.
Do I have a big one?
It's actually no.
We don't even do that.
We're not doing that.
Sorry.
We are going to let's see.
This one's actually better as a feature.
So it had a different another feature list or features.
And what we would do with these is we would just delete the images from each feature.
We wanted it to look like theirs.
So then go back up to your main settings for this one.
We're gonna do style.
Default again.
Make it white.
And a little bit of text.
You can see that this is a a little bit custom.
We're not gonna be able to get you that whole quote thing there, but you could definitely this is also a slider.
So we do have something like that.
And can we just look at that?
That's the only else.
So that's a slider.
Let's see if you can play with those.
K.
So here those are.
Yep.
And you could add them in.
And, again, play with all the backgrounds based on the theme as well.
And that's basically what they did there, and you can remove the images for each of those as well if you'd like.
What else is on here that would be cool?
It's just kind of another hero that you could make with the text image centered.
Just another text section with some text, and then they have their social media stuff.
So this is just an example of a home page.
It gives enough information about the company.
There's some about, what they do, some calls to action that also link out to other things.
Like, this is gonna be Sami more about page stuff.
Yeah.
Do you guys have any questions about main site stuff?
Let me see.
Hold on.
I got some questions in the chat.
Custom background image on the text block.
If you can elaborate, that would be awesome.
I can definitely try and answer that for you.
You can create a a custom background image on the text block for sure.
We go to a text block here.
Yeah.
That's how we would do that.
I know I can edit images in Simplero, but can I remember how to get to that if I'm building a page?
So let's see.
What's the best way to edit images?
I think the best way you can't do it at the page level from here.
Your images kind of need to be, optimized first, but we could see there are some options, I think.
There aren't any options.
It's a good question.
I need to remember how to do that as well.
What I do, just so you know, is I always just edit things the way I want them in Canva, which is a free software.
But I know it's just another piece to learn, but Canva will allow you to make sure everything is exactly the way you want it or you bring it in, and you can even affect its sizes.
Because oftentimes, photos and images that you take or wanna use are optimized for any website that you're building.
Canva will allow you to build it to that size.
Just make sure I'm not missing anything.
Go back.
I'm having trouble finding it too.
Yeah.
I don't use the old builder as much anymore because I'm just waiting for the new one.
I'm trying to remember where I saw that as well.
Let's see here.
Admin.
Yeah.
No.
That's not it, man.
Cool.
I'll get the I'll get you an answer for that for sure.
Let me just write that down.
Just making sure we have an answer for editing.
Cool.
Any other questions about the the main website builder, especially with, like, how things link, how things are connected, you know, stuff like that.
We can just there's other things too that maybe are interesting.
Like, you can see the stats.
Don't forget that you have that ability.
Here's the actual link.
So you can see.
You can copy it.
Send it around.
Testimonials section.
How would you go about having it looking in the original website?
Do you mean in this website?
This.
Yes.
This is not a simpler built website.
I'm gonna say that first.
Like I had shown, there isn't a great way to to make it look exactly like that, but there is a better way inside of, the the the new page builder.
Those quotes themselves are their own little iconography that this business, the blue the Blueprint LA, had to import in.
Like, it is itself an image, and they did some crazy CSS to allow that text to lap over those quotes.
And if you have a web developer, there are ways to do that stuff for sure.
For our builders, they're they're, you know, they're like Elementor.
The new one, we plan on being like a Divvy or Elementor if you're if you're used to WordPress.
So you you will be able to mess with some padding and margin, and you could create something like that.
But it is a little bit advanced too, so you're gonna definitely have to learn and play.
But for this exercise, our, our testimonials section it's kinda limited.
It it'll get the job done, but there's not very much you can do with it to make it exactly the same way.
Like, here here are your options as far as what to add in there, and then you can connect it to a product and URL, of course.
And then the image would probably be some some sort of photo that's a, you know, a a portrait of the customer.
You could use whatever you want there too, but that's that's what you're what you're kind of limited to with our testimonial section.
Again, you can also do some CSS.
If you go into the custom CSS and you know what you're grabbing and what you're looking at, you can affect these sections as well.
Sorry, Emma.
That's not a great answer.
Cool.
So I don't see too many questions about the old builder.
That's good and bad.
Like, the good thing is we're gonna be moving to 2 point o.
So anything that you guys who are used to building your own sites felt limited to, that will hopefully change a bunch with the new builder.
But, yeah, this is this is how we currently deliver our main website pages, and we're always trying to improve and change and do our best.
So this would be a great time too to remind everyone to use the the the, feature request function at Simplero, and I can link it as well.
But feature requests are how we improve our product, and it's not just something that goes into a black box in order to be seen again.
The community votes on things, and we implement them for sure.
So if you have a problem, somebody else probably does too.
Always be adding to that feature request page, and we will build it for you and make it a part of some flare up.
So we're gonna move on, and we're gonna do a landing page.
So let's talk about them quickly, just what they are, go over that again.
Landing pages are super useful tool for sales, for funnels, for providing quick information that doesn't live inside of your main website, right, your about contact home page.
They're extremely useful.
If you're not using them, I guarantee your business has a purpose for them, and you could use them.
So we'll talk about how they look, and we'll we'll build 1 from scratch.
And I'm gonna use another just, you know, something that they have.
We can even rebuild the one we just did just in a different sense, but here's another page we can try and kind of recreate.
This is really ugly.
I don't like that.
I don't know why they did that, but oh, well.
We'll figure it out.
But here's let's just we'll dive right in unless you guys have questions immediately about landing pages themselves and their and their functionality.
But this is where I find them.
Go to marketing, landing pages, and forms, and then this is where it's gonna list the ones that I have.
As you can see, the type is 2 point o if it's a new, and then full classic is the older builder's landing pages.
And then, of course, embedded means an embedded form or an embedded kind of, mostly used for forms.
They can be pop offs or just forms that are embedded onto your website.
So I'm gonna create a new landing page, and I have these options.
This is all, but we can go, you know, look at what we're trying to do here.
I'm gonna start from scratch just for fun, but you guys should know that you have the ability to use our templates, which we're also making tons and tons more of with this new push.
But we have a few templates available now that are available for 2 point o or the classic builder.
And just by selecting them, they're gonna bring them into your editor, and you can play with them as much as you want.
But yeah.
So we have some templates here.
These are the sales ones.
Here's our opt in stuff, which is kind of formed for me.
And then thank you pages, of course, are super useful.
But, yeah, as you can see, you got 2.0 and classic.
So we're gonna start here.
I'm just gonna go and build 1 from scratch.
And I did, 2 weeks ago, a workshop on just 2 point o when it's live on our workshops page, so you guys can definitely watch that.
There may there may be more information I get into just because of time today.
But, yeah, definitely watch that, and we'll try and build some stuff today too before we run out of time.
And I'll make sure I get all your questions answered.
But first things first, this is the editor for 2 point o.
And if you've never seen it before, it might be a little intimidating, maybe not.
Maybe you're you're used to this style of builder.
I was, pleasantly relieved when I saw it for the first time.
I'm like, oh, this kinda looks like Elementor.
I know that I can add things with the plus signs, and and here's just my canvas.
So if we take a look at it, what we can see first is we have a style guide, and we have options for a pop up.
If you go to the 3 dots, you can view it in a new tab, copy the link, see version history, super helpful, and then settings.
So I'm gonna give it a name.
Let's do that first.
Let's call it silos workshop tests.
Cool.
And then before we start building, let's look at the settings real quick so you can see what you have available to you.
So inside the settings on this landing page, you can have a name and a title.
And then this is the header or the the header in your browser, the title that it's called in the browser.
And so this is kind of, like, more of internally, and then this is what's officially written on Google and search engines.
Can have labels if I want and then nestled languages.
The URL, this is also super important.
It's gonna give you a defaulted one based on how your account is built and set up, or you can give it a custom domain.
Meaning, if you have a URL that you have connected to Simplero, you can point it directly to this landing page, or you can host it under a site.
So if I add silasjohnson.com as my Simplero domain that I have linked, I can do silasjohnson.com/silas workshop test.
Right?
It would go here, and then this is where you would add the end to that.
Search engines and and social, anytime this is shared on a search, search engine or social page, it's gonna show this title and description.
And then, you know, Facebook or an Instagram will show an image with it.
So this is where you would put the image for that.
And then it's gonna show you a little preview of what it looks like.
Calvin also hide it from search engines.
What to do when it expires?
If you wanna add an expiration, really good for sales stuff.
If you have a a landing page based on a special or an offer that you're doing and you and it does expire, super useful to add an expiration.
You can manually delete it yourself too, but this will kind of take the take the thinking out of it, and it'll allow you to just delete that thing.
You'll take it off right away.
And then what do you do when that happens?
If someone clicks on that link after it's expired, you can show not found like a 404.
You can redirect it to your main site or send them somewhere else.
If you got a new funnel going or a new landing page with a new offer, you Calvin point them there.
So advanced custom tracking code stuff, that's, for your Google Analytics and Facebook pixel stuff.
And then triggers.
This is cool.
Really big.
We Calvin create a whole another workshop just on triggers.
But for instance, if you have a call to action in here, you can trigger it from these settings.
You can also show what it does later.
But, yeah, you can trigger it to do things, like send emails and add tags and give access and all of the cool things that triggers do and make sure you know what triggers you if you have a Simplero account.
Because it's like pouring gasoline on your business.
It's really important stuff.
And not in a good way.
Yeah?
Like, putting gasoline into your business is a better metaphor.
Cool.
So those are the settings.
If anyone has any questions about that, feel free to open the mic or go ahead and write in the chat.
But I'm gonna jump back into the the builder so we can look at that.
So here's the builder.
Here is the style guide, and this is separate from your theme.
Right?
This is a style guide for your landing pages, and it's defaulted to this style guide here.
Just this is what everybody gets when they start.
Not a huge fan of these colors, but that's okay.
But here, you can affect what everything looks like.
You have buttons.
You have fonts.
You have borders, shadows.
I don't really wanna edit these today.
I can click into one and show you what kind of options you have.
But But if we wanted to edit the buttons, we can do all kinds of cool stuff, like change the padding, border, corners.
Do you want them fully rounded?
What do you want your background colors to look like?
Font family and then the weight, and it's just gonna change all this stuff.
You could see here, this is what your button currently looks like with your particular border options and then button shadowing, all that jazz.
So those are the 3 types, button 1, 2, and 3.
And then other things that you can mess with here is the colors.
Go to edit those.
It's gonna give you the palette.
And there are are really cool websites.
I don't know if you guys have heard of something called Coolors.
You can just go ahead and click in.
Let me see if I said that correctly.
Hot tip.
Let's see here.
That's fine.
Start the generator.
This is was a free tool.
Let's go.
Hit the space bar.
Boom.
Oh, tutorial.
Sorry, guys.
That is fine.
Cool.
Every time I hit the space bar, it's gonna give me a color palette, and I can easily just copy those colors and bring them back into our landing page editor if I wanted to do that.
Because every everything that you have here, you can edit.
Like, paragraph, headlines, subheadlines, pre headlines, you would go to here, to the custom color, and drop in that x code that they used.
We give you, like, a bunch of different ways.
This is just yep.
Just copy it.
Send it back over here.
We're not gonna do that today, but just so you know, that's available to you.
If you don't if you don't have the the your your color scheme picked out, you can have cool tools pick them for you.
You can also decide that you wanna keep 1 and change the others or get rid of 1.
It'll do all that stuff, but you can lock it and lock that.
And now it's suggestion that needs to.
Anyway, Kirby.
Cool.
So this is the style guide.
Won't spend too much time on that, but we're just gonna leave it as is.
But if you want a style guide for a particular set of landing pages, you can create one just for those landing pages.
You can create a style guide for all of your landing pages.
It's up to you how you wanna do that.
So here's some more, options here just for the style.
Alright.
Let's get started.
So we're gonna add a section.
So the hierarchy for most web design is section.
Right?
We'll call this full width, then you have column.
How many columns would you like?
1, 2, or 3?
We're gonna build a hero, so we're gonna call it 1.
And then inside of there, you add rows.
Right?
You can add another row with a set of columns.
Right?
And then inside of there are the elements.
Right?
So I'm just I'm gonna mess around.
I'm gonna delete this real quick.
But I just want you to understand, I can add another element on top of that.
And if you've never seen anything like this before, your brain is probably exploding right now because this is how things are built with builders at least.
HTML, CSS, JavaScript, the real nitty gritty, this is all done with code.
But with page builders these days, this is kind of the standard about how this all works.
So we have this is all just inside of a section.
Right?
And inside of the section, I have 2 rows.
This row has 1 Calvin, and this row has 2 columns.
K?
And then inside of this column, there are 3 elements.
So I'm gonna go ahead and just delete that.
Yes.
I wanna do that.
Yes.
I wanna do that.
Cool.
Alright.
So starting at the top.
So here's our section, and inside of this section I'm gonna I'm gonna start from scratch, actually.
Boom.
So we're gonna go full width because we want it to go all the way to the outside.
We're gonna do that one column, and here's my options.
At the section level so I'm clicked on the section so I can see my options at the section level.
I can choose the color scheme.
I can go custom, and then here's my background, headlines, all the stuff.
I can change right at this level, so it'll go with the theme or not.
That background could be an image or a video.
So let's see here.
If we do this, we'll use that hero from before.
Boom.
Looking familiar.
Right?
So there's not a lot of space around it because there's no content inside of there.
So let me go back up here.
Let's just go to skin.
So what do we got here?
We have a title and a button.
So if I go back to the landing page, I'm gonna add a new element.
We'll call it a headline, and we'll say, let me know disable results.
And we're gonna need to change that color because you can't see.
Right?
So if you go straight into the editor here and change that color there so I cannot see it that well.
That's okay.
Get my drift.
There are ways we can change this.
And inside of here, there's a button there.
So you can literally just add the element below it that is a button.
And, of course, each of these sections has its own settings.
So I Sami inside of this headline element, and I can change all the kind of stuff that I want in here.
It's gonna grab my theme, but I can go in and change the font family immediately.
I can change it to the best in a way.
I can make it really big.
I can change the spacing, line height, all that stuff.
From right inside here, I can change the margin and the padding around that element itself.
And that's gonna be the spacing inside the box, the spacing outside the box.
Right?
Mess with the border.
There's no visible borders, you don't gotta worry about that.
Corners.
I can add a background image to just this element if I wanted to and just see what that looks like.
It's gonna look horrible, but it's just quite a bit boom.
Alright?
I can do that if I want to, and I can change how it fits.
It's super ugly.
You're never gonna be letting me know.
So cool.
So here we go.
Like, we have there's a little bit of space here that we can get rid of if we want this to look better.
We want pixel perfect.
And even in here, I have some options.
Let's see.
It's a title.
So if I were to want some more padding around there.
We can go separate edges to your bottom.
Add some more padding.
Cool beans.
This is still super ugly because we were going fast.
But, hopefully, you're starting to understand how this builder works.
So let's go back to our main page we're trying to copy here.
We're gonna throw this section in.
I'm gonna call it a section, full width, and one Calvin.
And in this section, we go to image.
Let's see.
Boom.
There's that.
So we don't need an element in there.
You can completely just ignore it.
I don't think let's see.
Let's see.
Yeah.
Yeah.
It's just something.
We'll get into better that shouldn't keep that in sections so I have some more space.
Sorry, guys.
I don't wanna waste your time.
I Sami I'm building this on the fly.
Like, I I was confident in my ability, so we're just playing with it.
And that's what I encourage you to do as well.
Like, this section.
It's just here.
Let's publish this.
And if we go to beyond a new tab boom.
So just because there's no element in there doesn't mean you have to add 1.
Visually, it's gonna look like that.
Right?
So I'm gonna keep moving because that's how what I want it to look like.
Don't be confused by that.
And then let's see.
Let's do this again.
This is just gonna be another single section.
Add a new element.
This is just gonna be all the paragraph.
Copy this.
If we wanna get technical, we can actually do it like this.
This is a sub headline, and I want these to switch order.
So I'm gonna drag it here.
Boom.
My subheadline is what do they say?
Here's the blueprint.
And then here's some text.
Oops.
Cool.
We we can center this text if we want.
Here's some options you have here just so we can look at them again.
Bold, italic, underline, strikethrough, and then a bunch of other stuff too, indentation wise.
Boom.
So there's that section.
Let's do something fun.
This one will be fun.
This guy right here.
We're gonna do this section.
Add this section.
Calvin forward.
It looks like all their stuff is forward.
If you want margin on your pages so it doesn't do this.
Right?
If there's if you want space on all sizes, we're not just talking about desktop.
It'll copy and emo mobile.
It'll also give an margin, but then you wouldn't choose full width.
But I can see that this has 3 columns.
And inside of those columns are elements.
Just give an idea real quick.
So we got photo, title, text, button, and it'll be that.
You do image.
Side by line.
There we go.
Button.
Cool.
Now I have all these out here, but watch how easy this is.
If I go to the column level and I duplicate this, boom, I can do that, and I can delete that one.
I can delete this one.
And now I have my 3 already scaffolded out for me.
I just have to do just input all of the the fonts and the photos and that is so let's do a little bit of it here quickly because that, again, guys should be understanding at a higher level how these things work together now.
Let's go.
Let's do this guy.
I have.
1, another serial on that size.
Fancy cardio.
Cool.
So that's that section.
And what's cool is it just keep looking.
Like, I have it.
I can just refresh this, kinda look at what I'm doing here.
This is this is live.
Right?
Like, this is what it looks like live.
I'm gonna go over real quick how you can edit things just for tablets or mobile.
So if you look at the top here, you have some icons that show what size.
This is all about size of the viewport that people are gonna be seeing your website from.
So this would be what your website would look like from a tablet, and you can change the width.
And then here's a phone, and you can change the width there.
And if you had some sort of, it should immediately try and fit itself correctly as best as possible unless it did some custom playing with the margin and the padding.
But at this level, this will save your work at the level that you edited that.
So I can do things in here to the phone settings that won't copy back to the desktop settings.
I can edit things in here that will not affect editing of the main desktop part.
So, like, if I pick this section and I wanted to add some more Alright.
Publish that.
The other ones don't have that.
But if I go back, still the same on our regular section for our desktop.
It only affected changes at the phone level, and I can make it a super small phone if I want to.
And you can see what it looks like there.
Right?
Super handy.
If you know you know, there are certain widths that are very common, like iPhones and Androids, Samsung phones.
Oh, Suzanne.
Great question.
Other people have had that same question just today on this workshop, and I hope that we have it ready within the next month, maybe 2.
It's on the developer's hot list.
Everyone's asking for builder 2.0 for all the pages, and all of us staff as well are extremely excited for builder 2.0 for main website.
And it will be a game changer for sure once it's live.
But, currently, it's not ready yet.
There are ways where we can make things look really good, not exactly what you want with our main builder.
It will be deprecated soon enough, and we will never have to worry about it again.
But currently, 2.0 is not available for the main pages.
Thanks for the kind words.
We love you guys too more than you know.
We really appreciate all the kind words too.
We share them every day with each other, and you guys brighten our day.
So thanks for thanks for saying that.
Let's get back to this.
If there's any other options that I can kinda show you guys, like, I want let's do this.
Let's do this button.
Where is it gonna go?
This is gonna go to, let's say, an opt in.
And if I wanted to say which opt in, I would give it a list.
So this is this child account is built by Liz, and I only have 2 lists on there.
You may have 20 different lists.
You may have one list.
That's just for your newsletter.
But this button right here, it's gonna get an action that you're telling it to do.
So in here, we're gonna build we're gonna point it to Liz Alvarez's newsletter.
So now now when anyone clicks on submit, it's going to send it to Liz's newsletter.
What you don't have here, though, in this section is obviously an input that shows a name and an email, so it's not gonna go anywhere.
So why don't we build a section like that?
We'll build a really ugly one, but we will build something that let's call it 2 columns, That that grabs an email.
It's a call to Calvin, like sign up for my thing, and that's what we're gonna do here.
We're gonna say let's do this.
Sign up for, I think, and we will add input.
And inside this input, we're going to select the field When Calvin contact name.
Boom.
It'll add another element.
Call it another input.
I will say select field, contact email.
And then third thing we're gonna do is add that button, and that button is going to connect it to Liz's newsletter.
And on the side, we'll just add an image with a cool photo.
Got some weird stuff here.
Let's see.
Who's that?
That's probably just sound splash image.
So boom.
That's how we're gonna do an opt in.
And then another thing that we can make a button do is we can make it open a pop up.
And let's I'm gonna just publish this.
Again, guys, don't forget.
Keep saving stuff.
Right?
Don't forget to save stuff.
You wanna make sure that it's always getting saved.
And don't worry about publishing a landing page because more than likely, no one has it.
It's not connected to your main website.
It's only available when you give it to somebody.
Right?
If it's not connected to anything and it's not in any navigations, you can make, like I showed in the beginning, your main website pages have in their nav bar a link to a landing page.
But don't be afraid of publishing things.
Save them.
It is live, but no one has it unless you give it to them.
Let's go see here.
So this is gonna open a pop up.
If we go back, we can edit that pop up.
So here you go.
This is a pop up that's going to pop up, obviously.
This is not a part of this section here.
This is living by itself, and it is its own section.
So we're gonna create a full width pop up.
We're gonna just give it let's get it 2 columns, Calvin, and we can do the exact same thing.
We will go new element, Calvin a headline, Sign up form, I think.
Let's add a input.
Let's look at these real quick.
Sorry.
I I kinda skim past this.
You can mess with the margin.
You can mess with the label style.
You can have the label above the field, in line, or floating.
I could show you what those look like.
Play with the margin, separate edges.
If you wanted, you can, you know, lock one thing and give a adding your margin on the other sides.
You can even give the input itself a background image.
So for here, we're gonna select a field Calvin contact name, and I have it as floating.
You see what it looks like with the name above the field like that.
And then we'll add another element.
Alright.
Oops.
Email.
Let's leave that floating.
Let's see.
Let's do something else.
In my that's super ugly, but people like it.
And then let's add something else.
That button.
So now inside of our pop up is the opt in, and we affected this pop up by another button on our page.
Right?
So those are our options for the pop up.
Right?
We go to advanced.
Those are just the shadow options.
Section itself.
Oops.
Here's our pop up again.
And then if you select the if you go to the pop up level and mess with its formatting options, what you have here is how you position it on a page.
You can kinda play with it, so it's over here, over there, down at the bottom.
It's where in the viewfinder would you like to be.
That's something you can mess with.
You can add additional triggers, like on exit intent, it pops up.
So if someone goes to navigate away from your page and close that tab, the pop up's gonna come up.
You can have it done on page load.
Right?
As soon as the page loads, boom.
And there are other options sometimes where it can wait, maybe 10 to 15 seconds, 20 seconds.
We don't have that yet.
It'll probably be in our, you know, full build.
We'll have the option to time it based on page load, but that's those are the other options that come with your pop up.
So if I publish this so, hopefully, everybody understands that.
Everybody needs a pop up.
It's another type of call to Calvin, at least on exit intent.
If they saw your landing page and didn't like your offer, this is your last opportunity to tell them something or grab their email.
Right?
And that was this button right here, I believe.
Open pop up.
So if we look at this thing, that's on page load.
Right?
Had it set to page load.
That's on the button click.
Right?
Let's see if I go to leave.
Yeah.
I didn't oh, I think I just selected exit intent.
But yeah.
So that's how the pop up works.
What else can we talk about today?
I'm not really gonna get into funnels, but that's a whole another piece.
We can look at it quickly just so you guys, if you're already if your if your brains are buzzing and you can see the advantage of doing all this stuff, We can talk about it quickly, but if I create a new funnel just go to science test.
Inside the funnel, I can add all kinds of steps, and they start with pages.
Right?
A page is a landing page.
It's gonna now go into your landing page, and boom.
This looks familiar.
Same thing.
Now we have blank landing page.
And if we wanna go edit it, it opens up the editor.
And now this landing page, which is square 1, is connected to my funnel.
Right?
I'm gonna open the floor, I think, for q and a.
I think I covered everything.
And if I didn't, if there's an aspect to a web page that I didn't hit, let me know.
I just basically copied stuff from some other company just to show that, you know, we can steal their designs.
I'm not a great designer.
You know?
What's that quote?
Good artists copy, great artists steal.
Right?
You should always be looking for, inspiration from competitors, from people outside of your niche.
Like, there are people that do things right.
You know?
And if you know that someone is converting, it's for a reason.
It's their imagery.
It's their copy.
It's all the things.
And make sure that if you're not great at it, if you're not a marketing whiz, that you at least take ideas from other people because there is no problem with that at all as long as you're not just directly stealing content.
Does anybody have any questions?
Go ahead.
You can chat.
You can open up your mic.
I would love to help answer anything.
Even just feedback.
Like, hey.
This is really cool.
Hey.
This this is super clunky.
We we love it all.
We wanna hear it all.
We wanna know it all.
Any designers out there that are used to WordPress, what do you think?
It's you know, we're still kind of in beta, but any feedback is really appreciated.
Cool, guys.
Well, thanks for coming.
I really appreciate your time.
Always check us out in the support tickets.
Live q and a's twice a week.
Make sure you take advantage.
A lot of times, especially the early morning ones, there'll be 1 or 2 people in there, and you'll basically get 1 on 1 support on your projects with our team.
So we'd love to have you.
We love the experience.
We'd love to hear more about what you're working with.
And if I don't have any more questions, thanks, Kienna.
Sorry if I just murdered that name.
You're good.
It's Guenna.
Guenna.
K.
I hear you too.
Cool.
Hey, guys.
Cool.
Awesome.
Do you have any questions?
What do you think?
Have you used builders before?
Give me something.
What do you got?
No.
We are just learning.
We just finished the Pampa program, and we are, drinking from a fire hose right now.
And Yeah.
Yep.
Yep.
Curve is huge.
So we Please.
Have many questions.
Awesome.
And, yeah, share your overwhelm with our team.
That's what we're here for.
So if there's anything you got yep.
Don't be afraid.
Thank you.
We have so appreciated the support and every question we've had.
Sorry.
My dog is barking at the door.
So, yeah, thank you.
You guys' customer support has been fantastic.
Awesome.
I appreciate that.
I'll let everybody know.
We're we're a tight team.
We're not this massive organization.
There's, you know, there's 10 of us, and we chat.
So thank you for that.
I appreciate you.
Well, thank you for all that you guys are doing, and your, product is phenomenal.
So well done.
Thank you.
Have a great evening Have a great day.
Afternoon.
Yeah.
Thank you.
Bye.
Alright.
I'm gonna stop sharing here and sign off.
Thanks, everybody.
Have a wonderful day.
Simplero Training Workshops
Learn Simplero's Page Builder 2.0 and Legacy Builder, including the different section types, styling options, how to set up your theme.
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___
Hi, when I go to Themes under Marketing in my settings I am only given one choice. There is a note that says you are in the process of rolling out a new page builder and style guide. When will that be available?
Hey Susan! The new page builder and style guide are available now - here are our guides on where/how to find them:
- https://help.simplero.com/c...
- https://help.simplero.com/c...
Very helpful!
Thank you! This was so helpful :)