In the previous step I discussed the subject of activating the website and its basic graphic design, on which we can then operate. otoKreator is a very interesting tool in this respect. One feature distinguishes it from many other website creators. It allows to easily and strongly interfere with the appearance of the website. In practice it does not matter which basic design we start with, as we can change it at will.

In this step I will present the basics of working with a graphic template of a designed website so that you can see how easy it is and how many possibilities it gives to someone who has never built a website before. Apart from choosing the base design, which I've already mentioned, we can modify the layout (template's layout), colours, fonts and various embellishments.

Let's start with colours

You can instantly change the colour scheme of the entire page by selecting one of several dozen predefined palettes. This option will probably be appreciated by all those who do not deal with graphics too much and the selection of colours so that the whole composes well may cause them problems. In such a situation we can browse through various palettes, until we find a set of colours that we like the most. Do not be afraid if, for example, we do not like a particular colour in a given palette, because we can freely adjust our choice by changing any colour of the palette to the one we wish.

step3-02

As a result, with a simple click we can design the colour scheme of the page that will be the best from our point of view. otoKreator gives us a lot of possibilities because regardless of the selected or created palette we can modify the colour scheme for selected parts of our project, e.g. we can define the colour scheme for the page background (solid colour, gradient or an image), side columns, header, footer and finally the main part. In our example I decided that I would like the colour under the main content to be just light grey and clicked it.

step3-03

OK, let's assume that the colour scheme is roughly OK (we can modify it at any stage of work on the site, so don't worry). Now we're going to change the default proposed image in the header of our page. To do this, just click on it and below will appear the options related to the header image. This is how all the objects on our page behave, but I will write more about that in the next steps.

step3-04

To access the library of available images for the header simply click in the options window on list of images and we will see quite a large archive of photos that we can use. Of course, there is also an option that allows us to upload our own graphics, so we have a full spectrum of possibilities related to the adjustment of the appearance. All available images are of high quality and will certainly look great on the website. Just click on the chosen one and you will see the effect immediately.

step3-05

Laying out a page design from building blocks

We have the colour scheme, we have the revised header image. Time to adjust the rest. Our default template has some elements that we may not need, e.g. in my case I don't need the search box, because I want to build a simple information page for a renovation company. So I click on the object that I want to get rid of from the template, which immediately brings up the configuration options and a button allowing to remove the object. I don't need the search box so I remove it. Simple right 🙂 .

step3-06

I do the same with the other elements that I don't need to be happy. Notice in the image above that the first icon in the options bar for a given object is the handle. It allows you to grab an object with the mouse cursor and drag it to another place in your project. To put it simply, if we want the page menu to be above the header banner instead of under it, we grab the menu object and move it like a block over the header image. By clicking and dragging the objects we can make the template look the way we want it to. It is great that we do not have rigid skins, where we have to agree on one or another layout of particular elements. In otoKreator we move them as we wish.

Project layout

Apart from playing with the "blocks" or, if you prefer, puzzles, we can also define other general parameters of our layout, e.g. we can decide if we want our project to have one or two columns or no columns at all. We can decide on the width of the columns including the whole page, the width of the header, footer etc...

step3-07

In our example, I decided to have one column on the left and left out the right, thus leaving myself more space for the content and its organisation. Finally, I changed the gradient for the background to a bit stronger and reversed it. I also removed rounded corners of the footer, header and side column.

As a result of this game, which lasted literally 5 minutes, I have clicked a skin that suits me at this stage. I am aware that at any time, even after I have uploaded content to the site, I can change its appearance just as quickly as I have done it now. That is a huge advantage.

step3-09

Now all that remains is to enter the content and adjust the structure of the sections (add new ones, delete or edit the default ones).