Hey, what's going on Mathew Tamin here with another Joomla tutorial. I want to go over SP page builder version five. I did a video not too long ago that went over an overview to give you an idea of what it's like and how to use it. In this video, I want to cover what this does so you understand if you can grasp what this does, you can be able to build just about anything with it. So you wanna go over to JoomShaper.com and you can purchase the pro version now they have a free version and they hav
e a pro version. I always recommend the pro version because it gives you all the bells and the whistles that you need, but you can still build a solid site with the free version, but you're limited. So now let's head over to the actual demo. So when you come on here, and again, this is going to be a detailed explanation. So you understand where things are, how to use it, how to customize your website, how to move things around and all that good stuff. So when you come on here, you're gonna notic
e this is the interface, right? This is the front end. When I started creating websites with Joomla, they didn't have front end editing back then. You know, it was just everything was in the back end. Now this has a back end component as well, but I'm not going to cover the back end component, just the front end component because that's where people spend most of their time to build. So when you look on here, you notice that you have the different devices. When you are building a website, you wa
nt to make sure that it's responsive. What that means is if someone is looking at your website from a landscape that the site shows right. If they're looking at it from a tablet, that everything adjust according to their screen. We're living in a mobile age right now. So if your website is not responsive, you're losing a lot of traffic. And the average person spend about 10 seconds or so on your site. If the site doesn't load or it's too slow, it doesn't show right, they're going to leave and ma
y never come back. So being responsive is very vital. And search engines like Google, they will penalize you if your site is not responsive. I've seen website even in today's world that is not responsive. It looks horrible when you look at it from different devices. So this is where all those things are done. So as you're building your website, from time to time, you want to check to see how it looks. You may need to make some adjustments based on the device. So if you design something, you noti
ce that if it looks one way and the tablet or the laptop or the desktop view, and then you go to, let's say a tablet or a phone view, and you notice that it's not looking how you want it to look, you may need to make some adjustments with that. And we're going to cover, excuse me, we're going to cover what those adjustments look like. So with the adjustments based on the device, you can see. So you want to scroll down every time that you're designing, okay? I noticed that a lot of beginners, the
y don't do this. They just design and then they just launch it. If you want to do this on a professional level, you still have to double check even though the device, I mean, the software does that for you. For example, you look at this right here. On the mobile view, this is not looking correctly. So you would have to do some type of adjustment with this, right? So you probably have to get this centered or you may have to change this somewhere somehow. But if you look at this same section here,
if you look at it from a desktop view, it looks good. So that's letting you know that you have to continue to check your work regardless of what device you're using it on because if you don't do that, clients are using your website or you're designing for a client and then they go and they see that, oh my goodness, this entire section looks messed up and they've paid you any amount of money, they are not going to be happy about that. So make sure that you're always checking back landscape view.
Once you design for a period of time, you check back. So this is key. This is very, very vital, okay? Don't miss this part of it. Check your work as you design. So now that we have the responsiveness part out of the way, now let's take a look at this other buttons, right? So you have to undo and redo. There are times when you're designing and if you make a mistake, right? You delete something. Let's say for this one, I'm gonna go over what this options here are. So let's say I delete this by ac
cident. Oops, I didn't mean to. Now, instead of you freaking out, oh my goodness, what's gonna happen? I've lost all that work. You haven't lost it now. If you click save and then you X out of it, then you've lost that work. But if something like that happened where you didn't mean to make that change, you click this undo and right there is going to put back what you deleted by accident. That happens all the time. So you better get used to it. Get used to the undo and the redo. Now, once you're
designing your site, you can preview to see what it looks like. This right now, as you move your mouse over different sections here, only you have the ability to see these, right? Only you can see these highlights, the blue highlights to let you know where you can edit. The general public, they don't see this when they're looking at the site. So the way for you to preview what the public is going to see is you click on preview. Once you click on preview, now you can look at the front end as if y
ou were a visitor to the site. Now, to help people that make sure that you do the preview as well. So while you're designing it, just do a preview. Scroll through the site. When you design a section, you scroll through your design and once you're done, you do a final scroll through to make sure that everything looks good, okay? So now, let's take a look more at some other stuff. So you have to save. I tell people to get in the habit of saving more often because there are times this doesn't have
an auto save function with it. There are times when you're designing and I've had this happen to me, not too often. I had to learn from that. You're designing your whole page, you're designing, you're designing and then you forget to click the save button. All of a sudden, your computer, your laptop, whatever you're using to edit just shuts down and you probably spend whatever time you lose all that work. You can't get it back because this doesn't have the ability to do auto save, which is a fea
ture that they should consider adding auto save that after you design for maybe a few minutes or whatever they give the parameters for that. After that, then you can be able to click on save and it's going to save your work or it can auto save your work. So next thing, you have these three dots here. So when you click on there, you can click to close. When you click to close, it's gonna close, it's gonna ask you, do you want to make any, you wanna save the changes? So I'm gonna click leave page
and then it's gonna bring me back to the front end, okay? So before, if you click close and you don't save your work, that's what's going to happen. You are going to lose all of that work. And if you've put in time in there, you don't want that. So let's go back to the edit. Now the edit shows up on every page. So once you install page builder on your Joomla website, that edit and you log in is going to show up only after you log in. So the general public is not going to see that, just you. So l
et's click on this three icons here again. So you have export. Now the export feature is great because when you click export, you can export content and import it somewhere else. So if you have to transfer your content from one site to another site, you click on the export and it's going to give, you can export everything on here and then you transfer it over to another site. You can do the same thing too with import. So if you want to, you've designed a site, let's say for, you're doing on a st
age server, right? So you're doing it somewhere else and you wanna let the client see what you're doing or you wanna preview somewhere else on a different server. You can click export, it's gonna export the JSON files. You can export those and then you can go wherever you want to, you click import and it's going to allow you to import. So when I click import, it's gonna ask me where I want to import, you know, get the files from. So this is important. So this helps you out a lot because there ar
e times when I'm designing stuff for someone, right? Or even for myself and I wanna export it to a completely different server than what I have. You know, I take that export and import it to another Joomla site. Now that site has to be Joomla, it can be any other site. So that saves you so much more time and you have a lot of stuff flexibility there. Now the clear content. So if you're designing something or you wanna start from scratch again, when you click on clear, it is going to clear everyt
hing on the page. So if you don't wanna click on clear or if you wanna clear everything, do not click on clear. So let's see what happens. I click on clear. It's gonna ask me, are you sure you want to clear the content of this page? So I'm gonna click on okay. When I do that, it clears everything off. So now I can start from scratch, right? And I can click layout bundles, which we're gonna cover in a minute. We're gonna click add new row or we're gonna click import layout. Now, if you're startin
g from scratch, if you're trying to build a website from scratch, this is where you start. You can use the layout bundles, you can use add new row. Now the layout bundles, it helps you because you can be able to choose pre-designed layouts already. So if I were to click on home and I can click live demo to see what this looked like. So let me click on the live demo. It's gonna show me where they've already designed it. So before I import it, I can take a look at this specific page and see if thi
s is how I wanted to, if this is what I'm going for. So let's go back here on the back end. So you can preview any one of these, right? So I click on portfolio and I wanted to do a live demo for the portfolio page, right? So it's showing me what it looks like and I can go through, if I like how it looks, I can import it. And I would tell people to do this. If you're getting started and you're not sure what type of designs to go for, always check out the layouts because the layouts, they're gonna
give you a lot of different options for you to use. So you go back here. So you can go through any one of these. If you see something like you double click on it. So let's take a look at this home for this one. I'm gonna click on this home, right? And I'm going to click on a live demo. I'm going through all of these. They're very well done. Once you understand how to use page builder, you can design any one of these. You can work on them. You can tweak them. However you want it to be. So I say
the portfolio one, let me X that off. So I'm gonna come now and I'm gonna go back to the layouts. So if you're starting from scratch, another option that you have is you can add a new row. If you want to just build from scratch, right? You want to do everything custom. Like you want to say things how you want you to click add new row. It's gonna ask you, you have several options here where it says import layout blocks, saved items from here. It's just a click away. Now I didn't cover saved items
. Okay, we're gonna take a look at saved items later on. But what this is saying is when you're starting from scratch, you're not using a predefined or pre-made template. You can choose the layout that you're going for. I always go this route. If I want to build something custom and just let my creativity just flow. I just want to do something. I always go this route. By going this route, I can choose how I want it to be. And it gives me the layout that I'm looking for. So when I put my mouse he
re, I can also create custom columns. The goal of it is this, you have 12 spans. So any number that you add on here has to total to the number 12. So you say six plus six is equal 12. Four plus four plus four equals 12. And then three, three equals 12. So the goal of it is, it gives you a variety of different layout options. Maybe you want one section to be larger and the other section smaller. Like you look at this four, eight. The four is the left side is smaller. And then the eight is the lar
gest section. Now, once you click on any one of this, you can always drag them and adjust that accordingly. Let me show you. So if I wanted to go, well, before I do that, let me just put in here. You see three, nine. Well, I can decide I want it to do nine plus three. It's going to do the opposite, the reverse of this. And I click generate. It's going to generate the nine plus three for me. Let me do that like this. So now you have the nine plus three. So even when you have the nine plus three l
ike this, what they've done is you can still adjust that. And it's shown, as I scroll over, it's showing the percentage and how things are shifting. So I can go from a nine three, I can go to a 10 to a two, right? So now this is the smallest, it's a two that you can go to. And I can come on adjusted, I can do this. So if I want the content to be more on the left, or however you want it to be, I can drag, slide over like this, a beautiful slider. Okay, I can do that. And then, so I'm going to com
e back here, I'm going to clear this again. So let's go back to where we were before. So you click the add new row. You can choose any one of these options here, four, four. Now it gives you one, two, three. And in these, you can add anything that you want. We're going to take a look at add-ons in a minute, which you can add any item that you want in one of these right here. Whether you can add a video, you can add a text, you can add columns, you can add nested columns, you can do all those thi
ngs. Now, when you look over here, you activate another nav menu. So when you click on here, it takes you back to the beginning. Now this helps, for example, if you're ready to have a page, right? And you want to add something else. You can add another option. You can update what you currently have. If I wanted to update to, let's say a six, three. Now I've changed it to that. Let's come back. And I'm like, you know what? There's this layout, I don't want it. I want it to be this. So as I'm clic
king on there, even though I'm clicking on it like this, I can still drag this like that. And it's still going to expand. So I can come and I can adjust it even after I set the parameters that I'm looking for. So you can go, so this is really great because with columns, it gives you so much flexibility in terms of what you're able to do, how you're able to move things and all that. So let's click on here now. Okay, so I'm going to just reset this design here. Let me reset it again. So I'm going
to reset it. So we'll get back to the original. So now we're back to the original. Okay, this is what it looks like. And I want to show you in real life example how that works. So you see right now, I can drag this over like that. If I wanted to content more on this side, I can do this. You see as I'm dragging, it's moving. I can scroll through any section here and I can do the same thing. So this one right now is three, three, but I can go like this. I can make a section bigger. I can make a se
ction smaller. And when I put my mouse over here, this allows me to drag and move a console. I can click on there and I can drag it anywhere on the page. So that's what that does. You put your mouse over, you can drag it with this here anywhere on the page, activate that move, but I'm not going to move anything right now. I just wanted to show you guys. So you go back up. Every section has this section thing right here. So you can either change the layout. So right now this top section is five,
seven. So if I were to come in and click six, six like that, now it's changed that to that. If I were to come in and say I didn't like that, I want to do three, three, three. You notice that it's changing on that. So I'm going to go back to reset it. So the next option is this is the role navigation. With the role navigation, every part of your website has a role navigation. And what that means is this, you have the admin label. I can call this section the hero. Now this is only visible to the a
dmins. This is not visible to the general public. So whatever name that you give here, no one else can see that. I use this as a naming convention because as you get to design more complex sites, this is just something that you can be able to use and you can have that way. And as she used and you have that, well, you can always move things around. And from the name, you have the fill columns here. You can fill a particular column. So if you wanted to change the background of an entire column, yo
u can change that background by fill right here. So it's going to fill the entire background. And then you have here. So every time, every section here has a row and all the rows have the same layout. So the first section is the basic. The second has to deal with the background. This section has to do with the spacing. This has to do with the alignment, the flow. So as you scroll through here, it's showing you all the different things that you can style on just this section alone. This doesn't a
pply to the entire page. That's one of the good things about it is it does not apply whatever change that you make on here. It doesn't apply to the entire website. So if I change the background here, if I change the color, it's not going to affect anywhere else on this site except just for this. So the background color right now, you see it's a gradient. So if I were to come in and I click that, now the background color is just white. So if I click the background color again and I want it to be
something else, just like that, I can change the background color, right? And then I can put that. Now this is one color. If I wanted to have the background color a gradient, I can do a gradient. Just by switching over to a gradient, I can put whatever colors are for the first color. Let me just go with something like this. And then for the second color, I can go with something different that's like this. If I wanted to be, you know, be creative with it. So this is the beautiful thing. So for th
ose of you that are creative, you can utilize something like this and create amazing backgrounds, right? Let it be your own. You know, there's really no limits with it. It's how you want it to be. It's how you want it to look. Now, if you want to include a video, you have several options here. You can do an OGV. You can choose the file. You can let it loop. You can choose to upload like an MP4. Or you can click here to activate a YouTube or a Vimeo. So you can, if you have a video on YouTube or
Vimeo's, you can utilize any one of these. You put the link here. It's going to automatically just pull up that video and you're going to be able to watch whatever it is. So that's how the background works. Okay, you go back to color, you go back to gradient, based on what you've chosen, it's going to work that way. And now you scroll down to the spacing. The spacing allows you to space the top. So there's 90, zero, 25, and zero. There's the top, there's the top, there's the bottom. I mean, the
top, there's the left, there's the right, the bottom, and there's the left. Okay, so whatever changes that you make here is going to adjust it. So right now it's set 90. Let me X this off so you can see. You see it's set 90, let me X that off. I click this X. So you see this 90 right here? I can click, it's unlocked and I can click to lock it. So what does the lock and the unlock means? So let's go back here. So when I click on, and by the way, I can drag this anywhere to on this page. I can dra
g that anywhere. So what does the lock and the unlock means? Let's go back down here. So when it's unlocked, it allows me to independently change each section here. So for the padding or the margin, I can change them independently. Let me show you what that looks like. So right now this is 90. I can put this one at a 30. All right, I can put this one at 125. It's gonna do whatever adjustments that's there. I'm just putting different numbers so you can see. Now, when you see something like this t
hat's locked, whatever number I put here, this is the number that's going to be the same across the board. So if I put in 10, because it's locked, it's gonna be 10 in the top, right, bottom and left. I delete that again. If I put 50, it's going to be the same thing all around. So if you have it locked, the reason why you choose to have it locked or unlocked, if you're trying to make all your margins or all your spacing to be the same, you have it locked. So whatever number you put is going to un
iversally adjust that. And then of course you have your alignment. And with the alignment, let me just go back here and just delete this. So with your alignment, it works the same way, right? You can put the right, as I click, watch this right here, right? It's aligning it based on my selection. So if there's a specific part of the page that you want to move a content to the bottom, to the top or to the right, you can do that. And you have another option to make the row fluid. So when you make a
fluid, it stretches it out all the way to the end. That's what fluidity means. There's no stoppage. It expands it all the way out. Now this works for certain images, but it doesn't always work for everything. So you have to know when to use this when you're designing. So if you click that there, then it gives you a little bit more parameters. You have the gaps. You can use the gaps. You can set the width for each gap. So as I move that there, you notice that it's changing, right? So I'm gonna d
isable that and then disable that. And so now you see it's changing like that because I already set the gaps to that. So what I have to do is I just come back and I can put it back to zero. So now we put it to zero again. You notice that all those different things show up. So go to the fluidity, right? It does all that stuff. So you can close that. You can change the container width. And then if you wanted to go back to the original, you just click to reset it again. I'm just doing all this to s
how you guys the flexibility that you have in terms of customization with it. So let's go back here and I'm just gonna drag this over and scroll down. And then with the heading, when you click on the heading, you can choose the heading height and the heading weight. So each item has a certain amount of weight that comes with it, right? You put that, it's gonna be thicker, it's gonna be heavier, the minimum weight. All this stuff is gonna show you what that weight looks like. And then of course y
ou have the border and then you have the top shape. Let me refresh, reset this. Now with the top shape, this allows you to build something unique. I like the top shape and the bottom shape. So let me move this over again. So if I'm gonna do the top shape, let me scroll down. Okay, so this is the shapes. So if I see I put that cloud, when you choose the top shape, it enables that cloud. Now it gives me flexibility, I could change the color of that cloud. I could have it to be any color that I wan
t it to be, right? And then I'm gonna go right here, I can move the color, I can change the opacity, you know, unless I want it to be like that, I can put it to blue, put the clouds to blue, and then change it, I can make it all the way to zero or I can, you know, intensify it to 100. That's pretty much up to you. So that's the clouds section. So I can click the dropdown and it gives you a variety of different types of shapes that you can use. Now I love shapes because they allow you to build am
azing things. You can let your creativity, you know, just run wild with something like this. So it has a top shape and it has a bottom shape. So we've done the top shape, let me X this out, I'm gonna scroll down. So you see we'll have this wavy opacity at the top shape. Let's say I wanted to do something different with the bottom shape. So I'm going to enable the bottom shape. Now we have the clouds at the bottom. So I'm gonna click the dropdown again, I can do this for the bottom, I can scroll
down, I can do Rocky Mountain. So now I've designed it just like that. I have a bottom shape and I'm gonna choose a different color, right? I can choose this and I'm gonna intensify the path. I mean, just lighten it up and pass it right there. So now we have the bottom top shape and the bottom shape. And we can see that it gives us a far X this off right now. You notice that it's given us a different look, right? It's given it a completely different look, which is okay. Again, it's about your cr
eativity. So let's scroll down. And if I wanted to, if I didn't like it, I can just simply disable it and just like that is gone. And then of course I can do the overflow, the hidden, the initial. And then you have the miscellaneous with the radius to make things a little bit thicker when you're designing and then you have the box. So those are the core things you have to worry. I don't wanna get too deep into this section. And then I deal with the class. If you do some CSS, you can give it even
more custom look where you add CSS class that applies to just a specific section. Now, when you go over here to the title, this is where the title comes in and the subtitles. So you can add different things here. But when you add a title, I can drag this over and then I'm gonna put the color. Let's say I can make that color. So now there's the title you can see right there. I could also, so as I'm adding, you see the title keeps going right there. So I can make that age four, I can make that ag
e one and the bigger it gets, I can choose the title font weight. So if I want it to be, let's say 500, right? It's gonna be stronger. 500 is a strong font. What if I can do like a 900? I don't know what number this lets you go past, but I know 900 is very thick and very strong. So that shows right there. So I'm gonna keep it back to the normal and then I'm gonna go to the margin. I can change the top margin, the bottom margin. I can, so this allows me just to manipulate the title. I can put it
in the left, I can put it in the center. I can have it wherever I want it to go. So I'm clicking on there, it's going in different sections and different directions here. So that allows you to do that. So now let's go over to the responsive. Now there are times when you're designing and you want to hide a specific item on a specific device. So maybe you don't want certain things to show on a laptop or a tablet for whatever reason. You can decide what shows and what doesn't show. So I'm going to
hide this on the laptop. When I do that, that entire section is no longer viewable on the laptop, but if I were to go on the mobile view, I am going to see that. Okay, so let me show you. So now I've hidden this whole section on the laptop. It's not visible, but if I were to switch on to the mobile view, you're going to notice that it's right there again, right? So if I were to disable that on the mobile view, now it's not long, it's no longer showing the mobile view. So I can do that and I'm go
ing to enable it. This is good sometimes when you want to show certain content for whatever reason to show on certain parts of the website and you want to hide it on another part of the website. That's great as well. And then you have the animation. The animation just allows for different movement, like the flip, the rotate. So when someone comes on the page, right? This is what they're going to, it's going to show. And then you have the duration, how many milliseconds, you know, that takes. You
can adjust as you can play with these for the delay, however you want it to be. That's something you can mess with. So now let's go back. So that covers, so what I just showed you, regardless of what section of the page that you're on, when you click on this right here, you have this, and you can also click on the save. When you click on save section, now when you save section, you do this when you design and use the same type of items often. So if there's something that I want to use on multip
le pages, instead of me having to always redesign in the same thing over and over and over again, I can just come in and just save a section that I can reuse on something else, okay? So I'm going to call this here section five for whatever reason. So I'm going to click on save, and you're going to see where that comes up later. So now I have just saved a section. So when I'm designing, instead of me having to rebuild this entire section, I can just pull it up when I need it later on. At a differ
ent section, at a different design, I could always just do that. So now once I've done that save, then I can be able to click on duplicate. I can always duplicate a section, okay? I can duplicate a section right here, and I can also click to copy a section, and I can click to disable it. When I click disable, you notice that whole section is disabled, and I can also click, if I don't want that, I can click to delete it. When I click to delete it, it's gone. I can click to undo, and voila, it's r
ight back there again. So regardless of where you are on here, if you understand how these work, it's the same throughout the entire website. So once you get this down pack, you understand how to utilize these. Whenever you're designing or customizing, it makes things a lot easier. Now when you put your mouse on each section, you notice you have three dots, right? You can customize each section, each dot right here. So you click on this, you can duplicate. If I click duplicate, it's going to dup
licate this entire section, and I can click to hide. I can choose to show one section for the mobile phone, and other section to show for the laptop. Or I can just choose to delete all together. So I'm just gonna click here just to, let's see here, just to delete it, because we have that already. And you scroll through here, and you notice that it's the exact same thing throughout the page, and with all of these right here. All these are the same thing. All these are the same right here. You cli
ck here, and you can add forms as well. So now let's go over to this little bar you see right here, the add-ons. When you have the add-ons, you click on, you can move this by the way, you can click on here, and you can reposition this anywhere that you want it to be. You can put it on this side. Now the best way to do this, right, wherever you want is you click on add-ons, and you see there's three icons here. You can choose, if you click this one, it's gonna stick it to the left side. So everyt
hing is on that left side. You can scroll down, and it's sticky on that side. If you want it to the right side, you click on to the right side. It's gonna show on the right side, so you can be able to use it. So some people prefer it on the left side. Other people prefer it on the right side. Other people wanna just keep it flexible, so if you wanna do that, you click on here, it's going to go back to the left, and you have that flexibility all over again. And you can also search. So if you're t
rying to design something, once you become familiar with all the content items, you can be able to choose to search which ones that you're looking for. So if I wanted to do, let's say, a box, I'll just type in box. It's going to give me all the add-ons that I can use that has the box. If I put a module, it's gonna show me anything that has the word module. But again, over time, as you become familiar with this, you're able to use, I used this because it makes things so much easier. As you become
familiar with them, then you know exactly what you need. Instead of having to scroll through all there, you can just search for it. And when you search for it, it's gonna show you exactly how that works. So with these here, if you click on these, nothing is going to happen. Nothing happens. When you click on here, nothing happens to it. The point of a drag and drop is you have to click on it, press hold down and then drag it over to somewhere on the site. So you press this and then you drag it
over somewhere. It's gonna pop up somewhere there. And that's the point of the drag and drop. So the add-ons, these are all the different types of things you can add on to your page. So you can add Google Maps. You can add an empty space. You can add a modal pop up. You can add raw HTML. You can add alerts. Anything that you see on here, you can add it on your website. And now that's where the benefit comes in because that gives you so much flexibility. You can add just about anything on your we
bsite wherever you wanna add it on. And by being able to do so, you give your website the look, the design, the fill. You can change the colors. You can change everything on here wherever you want it to be. And this has a slider. You can put a carousel. You can put a testimonial. So once you're familiar with these, then you can begin to add them however you want to. I'm gonna cover these individual a little bit later on. So once you've done that now, if you click this X, it's gonna go. If you wa
nt it to come back, you click it again and it comes back again. And one cool thing too is when you put your mouse over any section where there's this hair, you put your mouse over here, it's gonna show you what the pixels are. So if you want it to extend it, you can just drag it up or drag it down like that. You wanna create more space up and down. So instead of you having to go in to click right here and then to go to the options and you see right now, it's 187 here, it's 187. So instead of you
having to come in here and readjust this to let's say 87, right? It changes to that. So with the 87, you can change that and then you can X that off, you scroll through. And then now from the add-ons, we're gonna cover add-ons and how you can be able to use the add-ons to add to any pace. If I drag that over like that, that's going to add a new row. So any one of these items here, as I mentioned before, you can drag it anywhere on your website. Once you hold it, you notice the highlighter is go
nna ask you where you wanna put it and I can put it right there and I could always customize whatever I need from it. So next, let's move over to the layers. The layer shows you all the different sections of your site. This makes it easier for you to jump to a specific section easier. So if you click on the dots, right? Let me come back to the top like this. So with the layer section, if there is a section that you want to duplicate, let me close this here. If there's a section, which is this, i
f I click this eye and I disable it, now that's hidden. So let's say I like how this section looks, but I don't wanna redesign it from scratch. Instead of redesigning it from scratch, I just wanna replicate the same thing. Maybe I wanna change a couple of tags. I wanna change some wording. So what I can do is I click on this icon here. I can click save. When I click on save, it's gonna ask me where do I wanna save it? So I can choose to save this section and use that repurpose it later on again,
or I can just choose to not be able to use that. So let me come back here. So if I wanted to duplicate it, I can click to duplicate. When I click duplicate, it's gonna duplicate it again. So now I have it twice, right? But I don't need it twice. I'm gonna click this here and I'm just gonna delete that because I don't need it twice. So now it's just once. So if I wanted to, whatever I need to do, I click on this dropdown, I can copy, I can edit sections, I can delete, I can even rename, and I ca
n check the settings, which is the settings we went over that before. So I can check the settings for each one and I can disable each one and I can even move it up or down. So if I wanted to move this top section to the bottom, I can just come here and I put my mouse there and I can just drag it. And now it's no longer at the very top, it's at the bottom. So you can move sections with just drag and drop anywhere. And as you move your mouse over, if you wanna get to a section faster instead of sc
rolling all the way down, I click on this section, it's gonna take me to the content for that. And if I wanted to see what items are there, I click this drop, it lets me list a column and that column I have a divider. So I can click on that divider and I can choose to edit. So if I wanna go back to the top, I click on and click to the top and then I click this dropdown and I can choose and see what all is part of it. So the layer section, it shows you in a snapshot, all the different items that
are on your page. Now this is helpful because as you design it, then you wanna be able to check something somewhere to see what's going on and see what's happening. All of this always happened, like you can just go through and see that. Now this makes sense because when you start to design your site, this a long page, it's not that long, but I've designed pages that are probably three or four times longer than this. This section helps you to locate things a lot faster. So instead of you having t
o scroll all the way up to find where things are, well, if you think you know the section where things are located, you click on there and it's gonna take you right there and you can edit whatever you need to edit. So that's how the sections part works. Next, let's go over to the layouts. When you click on the layouts, the layouts gives you a ton of different templates that you can use as a starting point for your design. So let's say I want to build a corporate website, but I'm not sure what ty
pe of design I wanna go with. I'm not sure the look, the layout. I can scroll through here and see out of these which one do I want to use. I'm gonna go to business, for example. It's gonna show the business. So I like, let me say I wanna go with this conference. I click on this, right? And I can do one of two things. I can click to import or I can choose to view the demo. So let's click on the live demo. I wanna see how this look in real life. So this, I like this, how this looks. And I want it
to go back and I want to implement that. So I can just click on import. When I click on import, it's going to erase whatever content that I had previously on that page. Now it replaces it with the layout that I chose. And I can just come and just tweak. I can just edit. I can click anywhere to edit the content, just like that, right? I can choose to edit the content. Let's scroll down. Let's say I wanted to try a different design. I didn't like how that one looks. I can scroll through here. I'm
doing marketing. This is marketing design. I just wanna come with something like this. I can click on the landing page. I wanna go with this design. And I'll just click on import. And just like that, it's going to import that design. And I can be able to change each thing individually. It gives you a lot of flexibility to do that. So that is how the layouts work, right? So let's go back to the layouts. When you get to the layout section, you can search for something too, you know, e-commerce. S
o whatever you wanna search for, if there's something that has that name, then it's gonna show. So I'll type in corporate. It shows me all the corporate templates. If there's something I wanted to type, I'll type in conference. It shows me all the conference layouts. Now, if you look at the very top, you have the blocks. Blocks are beautiful because they allow you to build sites at record speed, right? You build sites super fast. So if there is a certain section that you want to build, instead o
f you having to build it from scratch, you can use what's called blocks. So you go to animated text. And if I like how this looks, instead of having to build it from scratch, right? Build the columns and then build the rows, any type of nested columns or rows, I can do that. But if I wanna save time and I like how a design look, if it's close to what I'm looking for, then I just have to click, I click insert. It's going to insert what I just chose. So now, instead of having to build this custom
layout from scratch and to add it on, I can just click a layout to insert it, right? So let's go back to layouts again and go over to blocks. And then let's come now with the pricing. So I wanna create a pricing, but I don't wanna build it from scratch. Well, I like how this pricing looks. I'm gonna click on insert, right? And then it should be somewhere at the bottom here. So there you go, this the pricing. Instead of creating that from scratch, I just come in and I can just change the content
of this pricing here without having to build it from scratch. And as I covered before, I can do the style, I can do advanced and I can do the interactions. We've covered that before. So let's go back to layouts again and you can choose any type of blocks that you want. There's blend mode, you can choose a blend mode, you can choose call to action, all this already, professional design, and you can just plug them anywhere that you want on your website. You have the highlighter heading, you have t
he MS carry sale, you have the pricing. So you scroll through and see the ones that you want. Now let's go over to the saved items. Remember we created earlier on, we created section called section five. So when you're going to be repeatedly using the same section over and over again, it's always better for you to just save that because you can repurpose that section. So for example, if I click insert, instead of me having to redesign it, this is the section that we use from the previous layout.
So I just use that again, I can use different sections and corporate different sections into any design anywhere. That's the beautiful thing. So if I wanted, let's say this section, I like how this look, I can click here, I can click on save, right? And I'll just call this twist, or whatever you want to call my click on save. So now let's say I want to go to a different design and I wanted to use, I'm going to click this agency right here, I'm going to choose this homepage. Let's say I'm in a d
ifferent design and I like how this look, but I want to add my own touch to it. So now I'm going to come here, I'll just go over to layouts and I'm going to go over to saved items and I'm going to go over to twist and just click on insert. So when I click insert, it's going to insert that design this here at the bottom. This is where we're saved. And if I wanted to move it, I can be able to move this up. So if I want to move that, I just go to layers and this is the last section at the bottom. A
nd I want to bring it all the way to the top. And just like that, it went from the bottom to the top instead of using sections. Now this really great because other page builders, you have to go on the page and scroll down and scroll up, but this helps you with the sections move items easily up and down. So that's how the sections part works. And you can also search for saved items as well. So you should build your code, your own portfolio. You can just, you know, search for any section that you'
re looking for. So let me click X this out. So next, let's go over to media. Media has to deal with you uploading anything. Now I don't recommend you upload large files. I recommend a CDN, a content delivery network where it stores somewhere else, whether you use Amazon or use any other source because the weight that is going to have on your website is going to make your website extremely, extremely slow and your visitors are going to get frustrated. So you go over now to images, you can upload
different files. You go to video, you can upload different video files. You go to audios, you go to attachments, you go to folders. You can be able to create as many folders as you need to for whatever you need. Now, when you create folders, it helps you to organize. If I were to create a folder called 2023 or 2024, 25 or 26, I click okay. Now it's disabled because it's a demo. It won't let you create folders, but you can be able to create any folders that you want and just add items to it. So I
'm going to click right there and it shows all the content that's in that folder. Scroll through here and that's what's in there. So I can do images, I can do videos. Again, I don't recommend video unless it's extremely short and it's the size of it. It's not too large, maybe on like a 15 second clip. That's like maybe 15 or 25 megabytes because you don't want that too much, but I wouldn't recommend that on there. So you have the audio, you can click here, you can rename and you can also delete.
So as you go through each item here, you can click and there's three dots. You can rename something for a naming convention or you could also click and you can click to delete something. You have attachments, you can install and add like a PDF or a word or anything else that you want for people to be able to download on the site. And now let's go over to the options. With the options, this is where the SEO part comes in. This is the title, right? This is only for this page. This doesn't apply t
o the entire website. So you put in that and you can choose a category. If you've created categories before, you can add the categories. You can choose the status, publish, unpublish or trash. And then you can choose the language for those that have multi-lingual packs installed. You can choose the language for this particular page, not for the entire website. There's another setting where you can choose the language for the entire website. You can do that. And the beautiful thing about Joomla i
s that once we scroll down, I can be able to choose the access level. So if I didn't want for everyone to get access to this page, let's say that I have a membership website and I want to offer this page exclusively just to my registered members or my premium members, I can choose register. Now on the back end, there's ways that you can be able to do some more, but just to keep things simple. When you choose register, the general public will not be able to access this page. They would have to be
registered on the site before they can access the page. Okay, so they can't just come in and just access the page and no, it won't work that way. So you scroll down and you can do special or super user. That is the super admin or the special, or you can live it in public or guest. So live back to public. And then you click on save. Now let's go over to the SEO. This is where you put your meta description, your keywords, and then you can choose for the robots. Now there is a global section on th
e back end of Jooma. This says robots use global. There is a back end where you can choose your global settings. If you are having a site where you want Google or the search engines to index it, in other words, where people can be able to search for keywords and find it, you would just keep this to global. Your global settings gives you the same options that you see here. So for example, if your global settings on the admin part of your Joomla website is no index, no follow, when you choose glob
al on the front end, this is going to automatically just inherit the no index, no follow. What that means is your site won't be indexed and your site is not going to be followed by the robots. The same thing here, whatever you choose for your global on the back end, that stays. So if you keep this right now at the default for global, so whatever the global is set on the Joomla admin panel, that is what is going to show up. So I typically set my global on the admin panel. So when I'm designing st
uff, I'm not worried about no index follow or no follow. Now, if you have a section where it's premium content and you don't want search engines to get access to that, you just click no index, no follow right here, no index, no follow, or you can choose whatever directions that you want to give to the robots. And then open graph, you see right here you can choose for article, the title you can use for TV shows. It gives you several options for a book. It gives you options for a profile. You can
choose to open graph, which is like SEO and you can choose the image. You can also upload, put the description, and then you can be able to save from there. And then you scroll down and you check your work. Again, the goal of this was to give you a detailed overview of SB page builder five, because once you understand the core of this, when I go over any one of these, and I'm saying let's change the rows, let's change the height, let's change the opacity, now that you have a solid understanding
of how this works, we can be able to move forward with this other structures here. You know, you can use any one of these add-ons now. And when I explain to you what that needs to be done is gonna make a lot more sense instead of you not knowing what I'm talking about, right? So now all of these, once you understand the concept of it, you can be able to design or edit just about anything with it.
Comments