how_to_build_templates_720p.mp4

00:00:00

Hello there! In this video tutorial, you will learn how you can build themes and templates that your customers can use when creating new sites or changing the style of existing ones

00:00:11

Just a quick note before we begin, to fully understand this process and use the themes and templates building features, you need to have at least a basic knowledge of how HTML and CSS work

00:00:24

As you will see, we have made this whole system as simple as possible, but you need to at least know what we are talking about

00:00:31

Okay, this being said, as you should already know, templates are ready -made websites with pages, contents and style that you and your users can choose at a starting point in the process of creating a new

00:00:41

site

00:00:43

In this how -to, you will learn how you can add new templates, giving your customers an even wider and more customized experience, which means that if you target, for example, real estate agencies, you can create

00:00:53

custom real estate themes that only you and your users will be able to use

00:00:58

The first step or better, the pre -step in this process is to get inspiration for a new template

00:01:05

We usually start from existing WordPress themes, but if you have more imagination than as, you can start with what you have in mind, or use other resources such as existing websites or templates from other platforms

00:01:16

Just be mindful of any copyright issues

00:01:20

Anyway, in this tutorial, let's start from this free WordPress theme right here

00:01:24

We want to replicate something similar to this with this very clean, yet elegant style

00:01:28

Let's go to the site maker to start this process by creating a new website, not using the wizard, but building it from scratch

00:01:36

Let's give this site a name and save it, and then let's go to the list of pages

00:01:42

Here, we can start adding the contents of to this website

00:01:46

Remember, everything we will add to this website, including pages, images, e -commerce options, login options, widgets, and everything else will be used as ready -made content that users will find when they will choose this template

00:02:00

in the wizard process

00:02:03

Okay, so let's begin from the homepage

00:02:05

We will be creating a very simple website

00:02:08

The first thing we want to add is a nice header, replicating what we have found in the WordPress theme and we are getting inspiration from

00:02:15

Let's set the header height

00:02:18

As you see, we can set a different one for desktop and for mobile

00:02:21

And then let's set the background type

00:02:23

If we want to use the free media gallery, we need to save the page first

00:02:27

So let's add some more data before saving

00:02:29

The main title, which is an H1, and the sub title, an H2

00:02:35

And then, since we have it in the original template, let's add also a button

00:02:39

Okay, cool

00:02:40

Let's leave the horizontal space

00:02:41

This country will occupy in the header to full width

00:02:44

We could make it less wide, and for example, center it

00:02:47

But let's leave it to full width

00:02:49

And then let's add a nice animation to the text so that it fades in from the top when users visit the page

00:02:55

Very nice

00:02:56

Now we can set this widget and start adding background images

00:02:59

Choosing them from the media library, you have free access to

00:03:03

Let's choose one image in the computer category like this

00:03:07

As soon as we save it, you see in the preview that it is used as background for the header

00:03:12

Let's check in the devices page, preview page, how our site is coming along

00:03:16

Nice

00:03:17

But the button is not aligned as we want

00:03:19

Okay, so let's go back to the site editor

00:03:21

And let's change the alignment of the button

00:03:23

This applies only on desktop, on mobile, all buttons are display block by default

00:03:30

Okay, better, but there's still one thing

00:03:32

We need to make the header a bit taller on desktop to replicate more closely the original template

00:03:38

We are getting our inspiration from

00:03:41

And so let's go back to the site maker and let's change the height of the header for desktop

00:03:45

We will leave the one on mobile as full screen

00:03:49

Let's save all this and let's check again the result

00:03:51

Okay, beautiful

00:03:53

Now just to let you know, we could have built a slider similar to the one you see in the WordPress team

00:03:57

But first of all, we don't really like it

00:04:00

And secondly, we wanted to create something quick

00:04:02

In any case, you will find tutorials that will explain how to create all types of slider in the help section of the platform

00:04:08

Now it's time to start adding more contents below the main header

00:04:12

We will use the columns of text widget

00:04:14

So let's add it to the page and then let's click on this widget to edit its details and contents

00:04:21

The first thing we can do is add a title and subtitle to this section

00:04:25

We can do this by entering the context we want in these two fields here and saving it

00:04:30

Now we can start adding columns with text to this widget

00:04:34

An easy way to show blocks of content with an image or an icon in a grid format

00:04:38

In this form here, we can add a title, a subtitle if we want to and then the actual text to be shown in this column

00:04:45

We can also add that one or more images or like we are doing now choose an icon from the free library of icons you can use

00:04:52

Okay, let's save this and see how it looks

00:04:54

Good, let's say

00:04:56

Now we can go back to the site editor and add a few more columns

00:04:59

We will skip this process since it is exactly the same thing we have done just before

00:05:04

And here they are

00:05:05

Our three columns and text with the icons we have selected

00:05:10

Now we want to add another element to the page of a big nice button as call to action right below these columns of text

00:05:17

So let's click again on add widget and then let's choose the buttons widget

00:05:22

When we open it we have again a list in this case we can create a new button by clicking on the link here

00:05:28

We can specify all the options we need and want the link type, the actual link, the text shown on the button and so on

00:05:35

Okay, let's save this page and here it is

00:05:38

Now to complete the contents of this page and replicate as closely as possible the homepage of the theme where we got our inspiration from we are missing the blog section

00:05:48

At the moment we can create this by using a list widget and then adding each process an item tool of this list

00:05:54

So let's go back to our list of widgets in the homepage and let's click again on the button to add a new widget

00:05:59

This time we will choose the list widget type and as we add it to the page we can now click on it to edit its contents and details

00:06:07

Again let's give this widget an intro text and save it

00:06:11

Now we can start adding items to this list that is the post in our blog

00:06:17

Let's click on the add an item to the list button so we can edit these article details

00:06:22

In this form here we can now enter the title, the subtitle, the abstract which is the text that appears in list like the one we are creating now, the body of the article and if we

00:06:31

want to we can also upload one or more images from our computer

00:06:35

Just like we are doing here specifying also how we want to align these images on desktop, on mobile it is always shown above the main body of the list item

00:06:44

Just note also that if you add one more than one image this system will automatically create a slider

00:06:52

Okay cool we have saved it so let's go check out the website

00:06:56

Here is the post we have just published with the image we uploaded and the abstract we wrote

00:07:00

Now let's quickly finish up this sample website that we will use as the basis for our new template by adding a new page

00:07:08

Let's go back to the list of pages and then let's add a new one for example on about us with a header and a content block

00:07:14

The process for customizing and creating this widget is the same as the one we have seen before so we'll jump straight to the finished page here

00:07:23

You see that in the navigation menu we have a new page and if we click on this link we open it with its red header, its content block and images slider

00:07:32

Very well we have now finished adding contents to the website that we will transform into a template so it's time to customize its style and look

00:07:41

In order to do this we need to click on this style tab in the site maker

00:07:45

As you see there are a few things you can do here starting by changing the overall theme or customizing the fonts and colors of certain elements of the website like headers or paragraphs

00:07:57

While these customizations are useful when you don't know CSS or you just want to add a quick change to a website since we are creating a template and a theme we need to go a bit

00:08:06

deeper that is add some real CSS in this section right here

00:08:11

The way the system works is that you can write all the CSS code you want in this box and it will be applied to this website allowing you to customize the way it looks in a

00:08:19

totally flexible way

00:08:21

But how do you know what CSS you need to add? Good question

00:08:25

To make things as easy as possible we are created a skeleton stylesheet that is a set of empty identifiers that more or less cover all of the elements of the pages you create with the platform

00:08:35

and that you can quickly fill with the CSS rules you want

00:08:39

To import this ready -made empty stylesheet you can click on this button right here and here it is ready to be filled and customized with the CSS rules you want for this website

00:08:49

To start writing rules and styles definitions let's go back to the original theme we are getting our inspiration from and as the first thing let's see what font it is using

00:09:00

We can inspect any element now note this is a very useful and important thing right here the inspect tool you have in Chrome and Firefox and we strongly suggest you use one of these two browsers

00:09:11

and their web developer tools

00:09:13

Anyway we were saying that by inspecting an element that we can get the font that they are using here here it is open -sens we can now go to google fonts search for this font and

00:09:22

use it in our style using the import method and then adding the font family to this rule right here which controls the whole body and everything inside of it

00:09:31

Okay let's save our CSS and as you can see the font has changed from the default one we had before to open -sens which we just included from google fonts

00:09:42

The skeleton CSS is organized in order starting from the more general rules down to the more granular and specific

00:09:49

One of the first things we can control is the main headings and any particular headings in the header for example the h1 that we see here

00:09:57

To change how this looks we can use the header contents and h1 CSS rule

00:10:03

Let's add some styles here and let's save this to see how it looks like

00:10:08

Okay nearly there on mobile let's check the desktop version no cores and background are okay but the width of this element is wrong

00:10:16

So let's go back to our CSS definition and let's fix it

00:10:19

We can add a max width rule for example for 100 pixels and save a gain let's go again to the site then yes much better now

00:10:28

We can now change the h2 subheadings here as you see going back to the custom CSS box we don't have a predefined rule for this element what all we need to do is copy the h1

00:10:39

rule as lightly changing replacing h1 with h2

00:10:44

We can now add the rules we want here to make also this element of the page look as close as possible to the model we chose for example adding a padding and a background color with

00:10:53

some opacity and so on

00:10:55

As usual let's save and check the result

00:10:58

Not bad but probably need to reduce the font size a little bit

00:11:02

Okay so let's go back to the CSS editor and change this to a slightly smaller font for example 15 pixels instead of 20

00:11:10

Let's check this out now

00:11:12

Yes much better now

00:11:15

One important note before we proceed

00:11:17

One of the most powerful aspects of this whole platform is being mobile first and desktop adaptive which means that your website will look great on smartphones and on desktop computers and on larger screens

00:11:28

To give you even more control and use this feature as its best you can and should use media queries

00:11:33

in your CSS

00:11:34

We have already prepared some for you for example here where you can change how the main headings look in desktop and in mobile

00:11:42

Okay having briefly touched the media query

00:11:44

topic we are now done with these two elements and we can tackle buttons and links

00:11:49

We want to use exactly the red color that is being used in the original theme and so again we can use the inspect tools on Chrome and Firefox to get the accidental value for this color

00:12:00

Here it is all we have to do is copy it and paste it here for links and here for buttons remembering on buttons by default have also a border so we need to use the color

00:12:09

also for the border color rule

00:12:12

As you might notice buttons in the original theme also have a shadow or some sort of bottom border or something like that

00:12:19

Let's inspect this button then and here it is let's copy and paste directly this box shadow rule like this

00:12:27

All right let's save now and let's see how the buttons look like

00:12:31

Hmm close button no cigar

00:12:33

We need to play a bit with padding and maybe force also the upper case text variation

00:12:37

Okay so let's go back to the CSS editor and let's add some more lateral padding the text variation again let's save and voila okay now this button looks exactly how we wanted it

00:12:49

Speaking of buttons we can now customize this button right here when we add a single button in a buttons widget the system automatically treats it as display block and so we can customize the way it

00:13:00

looks differently than how we do it for the rest of the buttons

00:13:03

You can see the CSS code right here and for example we can make it bigger centered with the margin auto trick and with a fixed weight

00:13:13

Ah there it is much better now no

00:13:16

Okay moving down in our CSS skeleton and actually up in the website we can now customize the way the top header and nav bar looks

00:13:24

As you see here the model we are using has a white nav bar with more padding than what we currently have and we are about to fix this

00:13:32

The CSS identifier that we can use to control how the nav bar looks up on desktop and mobile is the main nav and as you can see here we have added some CSS to set its

00:13:43

background and padding

00:13:45

The nav bar is the element which is most different between mobile and desktop and so it is one where media queries

00:13:52

are used extensively

00:13:54

Here you see the part for managing the desktop version of the nav bar in particular setting the color weight of the menus for example let's set these values and let's go to the original theme to

00:14:04

see if there's anything special we want mine to carry over

00:14:06

Oh yes it looks like the letter spacing is different and so we just copied our rule over in our CSS here

00:14:15

Let's save this and there you have it the menus on desktop look very similar to the model we are replicating we just need to change the active mental look now and we do that by going

00:14:25

back to the CSS editor and changing the rule for active nav bar links here we want to remove the great background background and add some other style to identify the current menu for example showing it

00:14:38

underlined

00:14:39

Okay again let's save this and reload our desktop website yep now we have our top menus to load exactly as we wanted

00:14:48

We need to move now to the mobile navigation of the site and all we have to do is scroll just a bit further down in the CSS rules box editing the rules for the top bar

00:14:57

and navigation buttons in the mobile

00:15:01

The two main things we can do here are changing the buttons look, in this case we only have the menu button but we can have the shopping cart, login search and other buttons and also changing

00:15:11

the style of the menu that slides down where when we click on the button

00:15:15

So first of all let's pick the buttons

00:15:17

Here we can remove the shadow we have for all buttons, change the color and background, don't forget to change also the border color and voila the button is now with this style we wanted

00:15:28

To change then the style of the drop down and menu items that we can use at this CSS rule here and for example we can set the background to white

00:15:37

Okay awesome I know you're having fun and we could now keep playing with the CSS thing, changing all the other elements in this website but we're going to stop here for two reasons

00:15:47

You now get the concept all you have to do is to edit the contents of this CSS box right here and immediately see how these changes affect your website

00:15:56

This character on CSS should do a pretty good job at giving you a hint of all the possible changes you can make and above all you have the magic inspect tool, just inspect an element you

00:16:06

want to change, copy its rule in the CSS and customize it as you want

00:16:12

It's that simple

00:16:17

Okay dokey now that we are done changing the style of our website we can quickly see how to transform this website into a theme and a template that you and your customers can use when creating

00:16:27

a new site or changing the style of an existing one

00:16:30

But before proceeding just a second of theory to quickly understand what we're talking about

00:16:36

First of all a website is composed of contents, pages, text, images, videos, headlines and so forth and style

00:16:46

We are only talking here about the style so changes that affect how a website looks but not its contents

00:16:53

To get this concept even better you can try changing the theme of a website in the style tab and you will notice that while colors, fonts, buttons change the actual contents state always the same

00:17:06

A theme is the CSS that defines how a website looks like

00:17:11

In the past 15 minutes we have been editing the CSS of a website essentially creating a new theme

00:17:17

When you select a theme in the style section of the site maker you are basically applying to that website a predefined set of CSS rules

00:17:26

Finally a template is a combination of contents and style, a ready made website, full -fledged website that you and your customers can use to start with something prebuilt and a theme that is a predefined CSS

00:17:47

Okay so now that you get this concept we will do the following

00:17:50

Get the CSS we have been writing and transforming it into a theme so it can be reused in the style section of the site maker

00:17:58

Apply that theme to the website we have been building and three transform that website which is remember the combination of contents and style into a template so you and your customers can use it when creating

00:18:11

a new site

00:18:13

Okay ready let's go

00:18:15

The first thing we need to do is go back to the website homepage and click on themes

00:18:21

Here we click on create a new theme and we copy and paste in this box right here the CSS we have created for the website we have been working on like this

00:18:32

We then give this new theme a name we select the demo website for this theme and upload a screenshot usually this is a screenshot of the form preview and save it

00:18:45

So from now on this new theme will be available in the theme section of the style tab in the site maker

00:18:52

Now it's time to create a template which is remember basically a reusable website to which a theme has been applied

00:18:59

So let's go back to the dashboard click on templates and then on create a new template

00:19:05

The first thing we need to do here is select from this drop down the website we want to transform into a template

00:19:10

It's as simple as that once you have chosen the website that we want to transform into a template we can give it a name choose some tags and add it to one or more categories and

00:19:20

finally upload the image or screenshot we want to show in the list of templates in the website builder wizard and that is all if we or our customers start creating a new website and choose to

00:19:32

use the wizard we will see the new template we have just created in the list here and we will be able to use it as a ready -made site just like all the other sites and

00:19:42

remember only you and your customers will ever see this new template

00:19:47

Woo that was long but I hope that everything was clear and that you now have a better idea or how to use the site maker and how to build new and beautiful themes and templates with

00:19:57

it

00:19:58

Thank you for watching and bye bye