MobiFirst WL Template Creation Training_720p.mp4

00:00:07

Okay, cool

00:00:09

So, yeah, the templates and themes management

00:00:15

First of all, so this is the usual white label interface that we have

00:00:21

Okay, there's this is usual white label interface

00:00:27

So we are talking about themes and templates in mobile and desktop sites, okay? So we click here and as you see, we have three, this obviously gives access to the main websites and all that

00:00:43

So to mentor websites management and creation

00:00:45

Well, this is what we'll be talking about today

00:00:48

Now, actually, these are a little bit backward in a sense that we start from themes and actually we start from the difference on our platform between themes and templates, okay? So a theme is basically a

00:01:05

CSS

00:01:08

A theme is basically a CSS that allows us to customize how a website looks

00:01:16

So let's quickly do something very, very easily here

00:01:23

So, D, okay, now this is a pretty custom one

00:01:29

So let's do this one, for example

00:01:30

Okay, so as you know, in the style section for each website, we can add and enter some custom CSS, right? So here, we can add all the CSS we want, even importing the base template, right?

00:01:49

So if we click here, we import the base template

00:01:54

So which is basically an empty CSS sheet

00:01:59

Now we can then feel with definition

00:02:01

So for example, here the H1 is basically the title

00:02:05

So for example, let's do this, let's do a color red, right? This is some, this is CSS

00:02:12

So we say that the H1 needs to have a color red

00:02:16

So when we save the CSS, now this is forced

00:02:22

So let's do it, let's do something like this

00:02:26

Okay, so we have this, but I think we made me only set this to white

00:02:33

So let's do, for example, on H2

00:02:38

Okay, anyway, here or we can change the, we can change the color, we can change the font size, for example, and all that, right? So we can do, we can do any CSS customization here

00:02:58

Now a theme, so the way we set, okay, you see here that the rules we applied, we defined, we're actually applied here

00:03:08

So you see that like the H1 became red and all that

00:03:11

Now this CSS, as we can see here, defines how a website basically looks like, right? Because with CSS, we can define a lot more stuff

00:03:22

We can define buttons, font size, font colors, icons, sizes, colors, layouts, and all that

00:03:31

Now a theme, so it's basically a CSS that we save, okay? So for example, now if we go here, and for example, we click on the new, on the chart, so one of the newest themes

00:03:47

that we have created, you see that this is basically a set of CSS rules, right? So for example, here we say that the H1 leads to the bold, the H1 in the header leads to people,

00:04:02

then all that kind of stuff, right? So a theme is a set of CSS rules that define how a website looks like, okay? And as you know, we can apply any theme which we choose here,

00:04:16

anything to any website, and the contents of the website will not change, but the layout will

00:04:24

So for example, now we have here this one, let's choose this one, for example, and one, as soon as we choose it, we see a preview now, this is not much different from the other one,

00:04:39

and this is then for here

00:04:41

For example, we could use this one, so we can apply, and then we save it, and you see that now the contents are always the same, you see that the contents are the same, while the

00:04:56

layout and the CSS or the look changed, so you see that titles are now red, with this font, with the shadow and all that, so we can apply all these things

00:05:09

In this section right here, so we manage themes, we can create new themes, now I don't know how, again, how useful in this moment that this might be, but if in the future you will become

00:05:23

a CSS ninja, or you will hire somebody who can build CSS themes for you, you use this section right here to create a new theme, so you give it a name, you optionally choose a demo

00:05:37

site if you want to, then here you enter the actual CSS, and then here you upload a preview image

00:05:44

Usually, this image right here is the preview of a phone, of what you see in the phone preview, because it will be shown here in this list, so you see that it looks good if it's

00:05:57

shown this way, okay, so everything I hope is clear with themes, what is a template? A template is a theme plus contents, okay, so it's a ready -made website that has a theme applied to it

00:06:19

and some ready -made contents, okay, so basically if we click on one of these templates, for example, this one Superburger, you see here that we have a site, a complete site, which we can use as

00:06:35

a template, right, which people can then import and use as the starting point for their website, so it's content with a header, a list of products, in this case, some content, and a ready -made theme

00:06:53

are ready selected, so the way you create a new template is by selecting, now this is an important one, and we will see about important templates later on, but to create a new template, you click

00:07:07

on create a new template, and then all you have to do, basically, you need to create a site person, and then you say, and then you say, okay, choose, select one of these sites and transform

00:07:25

it into a template, right, so let's do an example, now let's say that this one, okay, Shannon Scaldi -Demo, we want to transform this website into a template, okay, so what we do is here, we

00:07:44

select this one, okay, then if you want to, you can edit it, we give it a name, and here we should always upload two files, two images, one is the same one that we use for

00:08:00

the theme, so the phone preview, basically, and for example, we can choose this one, themes, and we can just, let's pick one, and then obviously, we will remove the literally template, and the preview one is

00:08:18

usually the one with the phone and desktop computer at the same time, so for example, this one, okay, you see, then we can add tags, you see burger, complete, elegant, anything, like I don't know, restaurant,

00:08:39

any tag that will help people find this template in the list, and then we choose the category, we want to put this template in, and for example, complete, and then here we put, we saw, we

00:08:52

saw, we did that, so we can use theme, then let's forget about this one, and then we save, and that is all we have to do

00:09:01

Now, first of all, this website will not be visible anymore, in the, you see, you don't see it anymore, because now it has become a template, right, and when we create a new website, okay, so

00:09:19

you see that we have the demo template here, that we have just created, all we have to do is click on it, here we see the preview of the site, now this is a single page

00:09:31

template, so if you notice, this is exact, now it's very ugly, so we will remove it immediately, but this is what we actually set up as a template, and the whole we have to do is

00:09:43

click on choose this template and create site, as we do, that we need to give it a name, demo site from template, right, okay, and so now we are editing this site that we created from

00:09:57

this template, okay, that is really all the risk, you know, about creating a template, now obviously, as you know, we as the platform owners, we periodically release other templates, new templates, now first of all, let's

00:10:18

go remove this template from the list, now, okay, let's leave it here, so I will show you what is going on, now I will log in as a reseller, okay, Scotty, do you have any reseller

00:10:34

accounts here that I can use that I can log in as? Yes, Scotty plans to EO, anything that says Scotty

00:10:43

Okay, this one, okay, well, let's do it here, okay, anyway, so in your white label platform, so this is when you log in as a white label platform, do you see that there are sometimes some

00:10:56

alerts here? One of the alerts is that there are 16 new templates to import, because that means that we created some new templates, and you can import them into your list, right, so all you have

00:11:11

to do is click here, and then here you see all the templates that you can import, okay, and then all of them are selected, but you can deselect some, maybe you don't want to import this

00:11:24

one into your platform, and then all you have to do is click on import these templates, and they will be immediately added to your list of templates, the only difference is that the only difference between

00:11:41

a template you create and one you're imported is that if, for example, this one you see, is an imported template, you cannot edit the corresponding side, so you cannot obviously edit it, it is imported as

00:11:54

it is, and you cannot change it, okay, but in any time you can create any new template by again, setting up a theme or creating a website, basically all you have to do is create a

00:12:09

website, and then here in templates you just say, okay, I want to create a new template, okay, and then you just select the site which you want to transform into a template, add a name, the

00:12:24

images, the cards, the categories, this is all up to you obviously, and that is all

00:12:33

And Colin, since you, I guess Scotty is in the team, we are updating all the images for the template, correct, yeah, but in any case, if you want to, you can in any time update the

00:12:52

image of a template, so if it's not right, if it doesn't fit, like your site or all that, you can change that, you cannot change the site itself, but you can change the images that will

00:13:07

be shown to your users, and also the images that will be shown, like in the list of templates when you use that, at the widget in the site, in your site

00:13:20

I guess that is pretty much all I had to say about templates, unless there is anything else, Colin, maybe if you have any additional questions

00:13:34

or Scotty, if you noticed, I skipped some parts

00:13:39

No, this is, you test out a little CSS, which is nice, and this is basically what I do all day long, so we have quite a few that are going to be coming into the images

00:13:53

on it to put them in, but there's a lot coming

00:13:58

But yeah, that's it

00:14:00

By the way, Colin and any more training on this one, I know this one extremely well too, so I can help with all this too, so that's about it

00:14:11

So there's nothing there

00:14:13

Cool