System.io est un outil commercial en ligne tout-en-un
In this video i’m going to show you how the system.io page builder works let’s get started so if you’ve used page builders before like divi or elementor you’re going to find some similarities over here so over here i’m going to go to funnels and then
We’re going to create a new one or we can even go to an existing one but let me just start everything from scratch so i’m going to come over here to create so now i can just give this a name so i’m just going to call this
Tutorial and i’m going to build an audience it doesn’t really matter which one we choose here and then i’m going to click on create right so now we need to choose a template and we have quite a few to choose from as you can see over here so what i’m going to
Do is i’m going to choose one that has a lot of elements in it so i can show you how to go in and customize it so i’m going to go with this one right here and hit select so now you can see the little triangle over here is gone
So to customize this all to see how the builder works we need to go into the editor first so i’m going to click here on edit and now we have all our elements so how this works is you need to first take a look at uh what happens when you hover so we
Have our sections we have rows and then we have specific items okay similar to what you get with divi or elementor or any of these other page builders so if you want to make changes to something you have to go in and click into it so
Let’s say for example i need to make changes to this headline i’ll click into it like that and then i can just start typing so let’s say i just add the mac headline and you can see now i can just go in and type delete or do any of that now while
I’m in this mode i can also go in and change the colors but notice that when i change the color like that it nothing happens that is because i need to select everything so i’m going to select all the text like that and now i can change the color just like that
Okay so that is how you customize text next let’s say you want to make the whole text underlined you highlight it first and then you underline it or you can make it italic or you can make it bold so you need to make sure you highlight
The text first before you do anything so that’s the text but we also have further customizations here so over here on the font size notice what happens when i drag the slider it makes my text smaller and i can also adjust my line height so like that so these are
Further customizations that i can do over here on the left now just below this i also have my fonts so if i click on this drop down i can choose google fonts and then select my font you know i like using pop in so i’m going to
Select that and i can also change this to say bold like that so that is how we customize text in system.imo page builder okay now uh let’s work on something else now before you get started when you work on the page builder what i highly recommend you
Do is to go into the page settings because it just saves you a lot of time to change quite a lot of things throughout this whole design so let me show you what you need to do so let’s say we’ve opened up our new template here
The first thing you want to do is to come over here to settings choose your default font so this is where you’d come in and set your font so i’ve set it to poppins and it’s regular color of links so you can come over here and set your link colors
So let’s say we’re going to go with that and you can also customize your text color so this is global to this page itself which is brilliant so now we have our heading typography again we can set this to pop-ins and type here we’re going to set it to let’s go to
Semi-bold 600 and then we continue on now if there’s anything you need to add here you can just add your background colors and so on and this is where you would change your title so this is where your page title goes and if you need to add any tracking code
This is where you would add it so that is the settings of this page all right so once you’re done hit save now let’s take a look and see how our sections work so you can just hover over here and you get this area for your section now if you
Just click on that now we are in the section and to know you have to take a look here on the top so this is where you can play around with your margins so you can set your margins here for the top you can also set a background color but of course
It’s up to you what color you want to use so let’s just add a slight gray now you can also come over here and and type in a specific hexadecimal value so let’s say it’s f4 f4 f4 that’s a very light gray that’s your background color
You can also add a background image if you wanted to and you also have things like uh padding uh padding top bottom left and so on you can also customize that and you also have a shadow now if you want this uh heading to show only on mobile you can
Just disable it there and you can see now it’s gone and if you enable it now it’s showing on both devices okay over here on the bottom if you click on that it shows you what it’s going to look like in a mobile device so this is fantastic because your designs need to
Look great uh in different types of screens so by having a look at that this gives you an idea of how things are going to look which is fantastic all right so if you want to switch back you just click on that so now while we’re still here on the
Page builder let’s take a look at how we can go in and customize uh other areas so we’ve done this section now let’s take a look at our rows so again once it’s highlighted you just want to click on it and again we get all our options here for the rows
So if you wanted to add a bit of padding here on the left and the right this is how you would customize it okay and again like before we can also add our background color to this row we can also add our padding our border and so on okay
Now let’s look at our individual items now i know we’ve done the text here let’s take a look at our button here so if i click on this gear icon it again takes me into the button now the button here has a few more options so it can
Either open in a url but if you click on this drop down you can turn this button into a downloadable item so if you can attach uh something to this button when you when someone clicks on it it downloads a file so you can set it to that you can
Also set it to go to the next step you can also set it to show as a pop-up so it has so many options which is fantastic okay so that’s our button we can also go over here and change the button text we can also change the font by coming over here
So let’s go with google fonts and i’m going to search for my font here so i can show you how easy it is to add it there we go so i’ve just added my font i’m going to make it um medium there we go so that is how we customize
This and now as i mentioned you can also change the background color okay so that’s the individual item so let’s say you want to add new things here how do we do that so let’s first of all show you how to delete something so i’ve just
Clicked on that so i’m just going to go in and delete it okay so that’s how you delete an item and now we have space over here now we also have a handle here which you can use to adjust the width so you can see here i’ve just uh adjusted that
Now let’s say i want to add a video i’ll just drag my module here and add it and there we go we have our video and if you want to add your own url you click over here and you can add your direct url from there so i’m going to go to vimeo
Because i have some videos here in vimeo copy my link and then back over here on the editor i’m just going to paste it so there is my video now for this video we also have further customizations we can add a border we can add our border
Radius and so on and we can also add our margins top bottom left and right and these two things that we can do here we can auto play as soon as someone lands on the page the video can start playing or you can also play around with this controls so i’m
Going to leave the controls on or you can take them off so you can see here my controls are off and now i’m just going to leave them on okay excellent so that’s how it works so let’s say you want to work on your own sections or you want to add your own
Content well that is easy all you have to do is to find a spot so these are all your elements and these are your blocks so you can either choose to add elements or you can add blocks so if i click here on opt-in forms you can see
Here we have a block which is already created for us which we can just go in and drop so i’m gonna click here on the section and you can see there it has been added all the way to the bottom here but maybe that’s not how i would want it so
I’m going to delete that and i want to put it in a specific place so let’s say i just want it after here i can now drag and drop it okay now we have our opt-in all ready to go all i have to do now is to go in and
Set my parameters and so far we have these different blocks so we can ha so we have so we have this style here we also have that now if i go on back we also have features so if i want to add specific features to
My design as i’m working on it i can just drag and drop my items here so let’s say i want to add these features here i’m going to drag drop it here on the top and there we have our features ready to go and notice that my font here has changed which
Makes the designing of my page very very easy so like i said we also have different types here if you choose any one of these you can go in and add your own background images okay now let’s go back so we have price plans as well so if you
Wanted to add a price plan this time to differentiate the two let’s add a bit of gray to this one here so i’m going to go to my section and then go to background color okay so okay let’s go with this okay so let me just quickly add my color
Like that so if you want to go back now we can just go to our blocks and uh we said price plans didn’t we so now i can choose my price plan and drop it right here there we go so now i have my price plan and my font here has taken shape
So this is how we can add ready-made blocks that we can add to our design here which is fantastic it just makes it easier for us to design but if you want to add single components as you’re designing your site or your page or your
Site this is where you can just drag and drop your headline for example and there’s your headline call to action we can add bulleted points like that and also let’s say you want uh to Section out your page in a specific way you can drag and drop your columns like that and now i can go in and say okay you know what i want this bulleted list over here and you can see i’m now starting to design this really quick so you have
Your forms here you have your check checkbox we also have our survey and we also have other elements that we can add to this page so as you can see it is very very easy to use the page builder that comes with system dot io see you in the next video