Basic Website Page Builder Sections

Okay. So in this video, I'm gonna go ahead and show you some of the basic website builder sections. There are a lot of sections that you can add so many different types of sections. But there are some. There are a couple that are used for the most part a lot more than the rest to them.

And I'm gonna show you those so that you have a good idea on how to get started. So when you're editing a page, so let's say we're editing the home page, Some of the most basic website builder sections are the following. So if you click add section here, the this 1 here, text is a huge 1. So we'll start with text. Okay?

So text, a text section here, allows you to add a snippet of text in this type of format to the page. Now once you've got the text on the page, if you click on it directly, this allows you to edit it. Right? So you can align it a different way. You can make it a large header, a regular header, a small header, a paragraph, which is what it is now.

You can insert a link you can do the media library, add a picture. Text sections are great if you wanna add a picture because when you click on media library and you choose a picture, so I'm just gonna pick a random 1. You can actually click on the image and then select drag and drop, you know, hold press and hold on the corner. And you'll be able to actually change the size of the image quite easily. So that's another thing you can do in text sections.

You can change the color of the text. Highlight the text, click on text color, choose a different color. You can change the background of that text. I'm just gonna pick a random. Obviously, this is not a great color scheme.

But, yeah, you can do that as well. I'll change the background of the text itself. You can see you can make a bold highlight. So, yeah, there's a lot of options here. You can change the size here of the text as well.

When you're inserting a link for example, if you wanted to hyperlink some text, highlight the text, and then choose insert link right here, and then you can select the link you want to you want to link to either through the drop down menu here or pasting in the link directly manually right here. So I'm just gonna select a random, like the home page. You can display it as a button or you can have it just be hyperlinked text. And then you can open it in a new window as well if you prefer. And that will hyperlink it as well.

So lots of different options here. Now if you on the left side of the page, if you add a text section, then on the left side, you can actually change more things about the style of the section itself. So this is more changing the text. Here, you can change the style. So if you choose default, it's gonna be white because that's the color your default color in your theme.

So I'm not gonna go over the theme right now, but these 3 options here under style are pulling from your theme. So you get to choose what color the default is. You get to choose what color the alternate is. Right now it's gray, but you can change that. And then you can also choose customs.

If you wanna give it a background color, you could give the text section of background image here. We have an automatic a Met placeholder image right here that you can change. So if you click on custom background image, you can actually change the background image of the section. If you wanna give it a different background image. It'll take a minute to load, I guess.

But there we go. And, you know, changing the color of the text to white because that's bothering me. You know, if you wanna do something like this, and then down here, if you were to add a background image, you could change the overlay color to be whatever you want. So if you want the overlay color to be brighter, you can do that, you can make it less transparent, more transparent. If you actually want to And and yeah, you would play around with that.

Right? So if I were to do a lighter background, then obviously, this text color, you would highlight it. Click on the arrow next to text color, and then choose a darker color for the text. Right? So there's lots of options here in terms of the background color and the style.

Now if you want to give it a background color that's not your default or your alternate colors, you wanna have a different color. Within the section itself, you can actually just, you know, You don't you can you can do all you need to do is select custom here first. And then we'll have a placeholder image, so you don't even have to touch the image if you want to. And then just click on custom background overlay color and choose the color that you want the background color to be. So let's say I want it to be this button color.

We'll automatically give it 0 transparency, which moves this little bar all the way to the right, and you'll see that makes the color of the section be fully this color. If you move this back, it's gonna make it more and more transparent over the image. Right? But if you move it all the way to the right, it will be 0 percent transparent and just a solid block of color. Okay.

So just remember if you have a different color you want this section to be that's different from default or alternate, you have to choose cuss them first under appearance. And then the last thing on that is you can choose the width of the section, it could be full, medium, or narrow, and then you could give it some padding, which would add some white space above or below and below. Sorry. Above and below the section itself. Okay?

And then down here if you wanna add a button to the section, You can totally do that too. Just click a button, and then you can add the the CTA, the width, you can choose how much you want it to be, the sizing, minimum width, etcetera. You can change small medium large, the border radius. Okay? If you want a round button, you could change that.

You change the color, text color, give the button a link, and you could make it an outline button if you want, or it could be a solid button. Okay. Now, the features that I just went over for this section are a lot of these features you'll see in almost every section, so it's good for me to explain them at least once. So you know how that works. Right?

Alright. So that's a text section here. Now, the the other ones I wanted to go over is a text and media section. We'll do that 1 next. This 1 is very similar.

Same thing over here you can add a title for searching, right, wherever you want it to be. You can select that title, you can make it middle, you can format it, make it large, highlight it, center you know, I mean, there's so many things. Same thing here. You can edit the text directly on the page. And so the text is on the left and the media is on the right.

But on the left side of the page, you'll see, okay, to add an image here, you would click choose media under media. And that will add the image. And then you actually get some customization options. Right? So items vertical alignment right now, it's center, but if I were to do top, that would put the text up here.

If I were to the bottom, the text would go there. Right? Media placement on desktop. So on the desktop browser, how would that look? You could put the image on the left and the text on the right, etcetera, vice versa.

In mobile, obviously, this is all gonna be squished in. Right? So a desktop is wider, but mobile is much smaller. So the media, the image has to either be above or below the text, and I'll show you what that looks like. Now you can choose for it to be top or it to be bottom.

Right? You can choose where the media will show. The way you can test that out is you'll see up here we've got desktop tablet and mobile. So right now, if you click on desktop, you'll see how it looks. Tablet, this is how it would look.

And then in mobile, you'll see that The title is here, but then the image on the text go here. And you can choose, okay, I want the image to be on the bottom of the text or the top. Right? And then I'm just gonna put it back in full screen. Split ratio, same very straightforward.

You know, if you want it to be half and half, this is what it looks like. If the text is 1 third, then it's a little bigger. If the text is 2 thirds and the oh, sorry. If the image is 1 third, if the text is now 1 third sorry, 2 thirds, and then image is 1 third. Got my fractions.

Let me start over. If the text is 1 third, I think it was correct on that. And the media is 2 thirds, this is what it shows. And you can make the text be bigger and the media smaller, etcetera. Right?

And you can actually choose the maximum media width down here the text font size, you get to choose, you know, how big you want that to be, but you can also change it right directly in between, you know, in the editor itself by clicking on size. And then same thing padding. If you wanna link the media somewhere, you can do that by clicking on the media link here in this pasting a link in here or choosing 1 from the drop down. And then the appearance section here is the same thing as what I shared on the text and same with content with the button. So that's a text and media section.

I wanna show you the features section. It's another great 1. You'll see that a feature section gives you the opportunity to have columns with a certain amount of, like, an image, a feature title, and a description for each 1 of and they can each go in their own column, and I'll show you how that looks. So actually, right now, I will save these changes and go ahead and show you from the front end. So you can see here, there's no images yet, but this is actually what a feature section is.

That's kind of how it can look and you can choose I want 3 columns, 5 columns, 4 columns, 2 columns, know, it's totally up to you. Actually, this is a great example of how this features section looks from the front end. So it's actually better because there are images and you can see exactly what you can do with this. So in a future section, you can choose the number of columns here, the maximum width of each column. You can round the images automatically and then save in with the appearance, you can give it a different background color background image padding.

And then down here is where you'll edit each feature. Right? So you'll see from the front end, each of these is considered a feature. Okay. So you come in here, click feature, and that's the first 1.

So these are all in the order that they show up on the front end. Okay? So this 1 is would be this 1. I'm actually gonna show you from the actual 1 here. This is the 1.

That's already created, but you'll see this 1 corresponds to this 1. And then if you click on the second feature in this in this column. It corresponds to this 1, etcetera. Right? So you'll select a feature and then you'll choose the image it can link the image if you want to, and then you can open it in a in a new tab if you do link the image.

And that's the things you can do to edit the features themselves. Now to edit the title and the subtitle, you can click on it directly and just edit it there. Same thing with each title and subtitle for each feature. Just click on the text directly and you get to edit that. I see a typo.

You get to edit that directly over here. Okay. So that is the feature section. And then the last thing I wanted to show you is a list section. So if we scroll down to I'm adding a section.

So again, when you add a section, click on add section on the left. Right? And that will give you the option to add another section. You can also search for sections up here, which is great, so you don't have to dig each time when you're looking for something. But they are in alphabetical order and they have different categories.

So under lists of that category, you've got 3 options here that you can choose from to add a list directly to the page. A list sign up. Sorry. Directly to the page. So a couple options.

I'm gonna go through each 1. This list sign up form looks like this. Okay? If I click add, you'll see I get to change the title, And then this is what the form can look like. Now, you can choose to have the text on the left side of the form, on the right of the form, or above it, etcetera.

You can add an image if you want to, and that would show up here, but you get to choose if you want to, I believe you get to choose. A big detail. Well, either way, the image would go there. I think if it's if the text is beneath yeah. The image will stay underneath.

So Alrighty. So that's another option. There, you can choose to change the position. Oh, there we go. That's what it is.

Sorry. It looks different from the back end here, but you can put the image on the left or the right of the form and you get to choose. Right now, it's just underneath because it's a little more swished from the back end. And then you can choose the alignment. I believe this is the alignment of the media, but I'll have to show you from the front end to see it exactly.

And then same thing. You can give it a background color, etcetera, all of that stuff that I shared previously. And then this is really important. So this is where you choose the list that they will be subscribed to when they fill out this form. So you select that here.

Okay? Then you can choose which fields you want to add to the form. So you can make it required by selecting that box. They need to add their name, first name, or if it's a 1, that's 1 field for the full name, or 2, which is 2 fields, 1 for the first, another field for the second. Right?

You get to decide how you want that to look. Or if you just want their first name, then you just should that. So you have to ask for their name and their email that's or at least their email, you have to ask for that. So we have that information to create a contact record when they subscribe. However, you can also add mobile phone or once you've added custom fields to your field in your settings, which I'm not gonna go over now, but that's in your overall account settings.

All of those custom fields will show up here, and you can add them specifically to the form depending on which ones you prefer. The I agree to accept to receive marketing box is an automatic box that will show up on the form if you have your your account settings set to require GDPR consent. Right? So this is corresponding to your account settings. As well.

Now the button, you can choose the text. Do you want the button to say right here? If you want it to be full or if you want it to be smaller, like, the actual sign up size. All of this stuff is pretty straightforward. Just changing the design of the button itself You can also change this little message at the bottom.

Like, we hate spam. You know, you can say whatever you want there. And then Let's see here. So I'm just trying to find a relevant stuff. So field labels above the field or you can have them directly in the field.

You see that. So if it's above, the field labels go up up top. And then this is in desktop layout form horizontally on desktop. If they're less than 2 input fields. So this would make it horizontal if there are less than 2 of these fields, only works if Text position is set to above form at the top.

So the text has to be up here. Okay. So that is the first list sign up form. We're almost done here. I promise.

I'm just gonna take a list. The other 2 are pretty straightforward. Actually, 2 2 step list sign up. I'll explain that last the horizontal list sign up is really straightforward. It's almost the exact same thing.

You get to choose an image if you want to. You don't have to change the title right here. You'll just see that it's a completely horizontal section like this. And the same thing, you choose the list, you choose the fields, and you just customize the button. Okay?

So it's just another type of form that you could choose if you prefer. And then lastly, this last one's very important because it it is something that allows people ask for. But a lot of times people will want to use a 2 step list sign up form where you can actually have them, you know, press a button and a form pops up. Right? So that's called the 2 step list sign up form instead of seeing it directly on the page.

If you click add, and you add this form, you'll see that we have an automatic button. You don't have to use this button. Right now, if you if they click this button, this form will pop up. But you can connect it to any button on the page, and we'll show you how to do that. But first, it will show from the back end what the form will look like once popped up.

Now customers can't see this from the on end. Right? So only you get to see this so that you can actually, you know, customize the form. So you'll see here this will open in a model model. We're showing it in line here so you can see what it looks like, so you can change the title and you can see what the design looks like.

And then on the left side of the page, same thing, choose all of these appearance you can give it a background color. You can choose this is actually the pop up button label. So that's this button that we added for you. You don't have to use it. So if you don't wanna use it, just make this blank and we'll remove it.

And then you can connect this form to a different button that you're already using somewhere on the page. Right? Same thing here. Customize the button design, choose the list, add the fields, etcetera. Submit button, all of this stuff you can edit.

It's really all the same as the others. So but this 1, you'll be able to edit to pop it up when they click on a a button. And the way that works is let's say I am going to add a section and it I just wanna add a button. Section right here. I'm just gonna add that and I want that button to be right here.

This is completely random. I have no idea where yeah. Like, right here. Or I wanna connect it to this 1. Right?

I could do both. So in this button section that I created, I would scroll down to the actual button here. And when I'm choosing a link, I'm gonna click on this little link bar and choose 2 step list sign up. Okay? Now when I say changes, What happens is from the front end, you'll see that when I click this button, the form pops up.

Right? And then they can sign in. Another thing too is it works for buttons that are actually part of another section. They don't have their own section, so this button has its own section. This 1 is part of another section.

If I click on it, I scroll down on the left, click on the button, choose the link, select 2 step list sign up. I'm selecting the 2 step list sign up section, save changes, I'm gonna view the page on-site by clicking this button. Scroll down to that button. I click, boom. There we go.

Okay. So I know this was a lot. Feel free to pause and come back, you know, throughout the throughout the video. And if you made it this far, I'm super proud of you. Go ahead and have that at it and try out these different sections.

Intro to Simplero

Course Content

Introduction

How to create an Opt In

Email Marketing in Simplero

How to Build your Marketing Website

Building A Course in Simplero

Configuring and Selling Products in Simplero

Final

Basic Website Page Builder Sections

Transcript

0 comments

Leave a comment