Fast, easy and powerful website building solution

- Make your own websites with W3page for FREE

- Add your content fast and easy, grow a community

- Have complete control over your website's style

 
 

Quick tutorials

Follow the links below to get familiar with different sections of W3page website editor:

Ad unit

Tutorial: Design editor

We are aware of the fact that you want to make your website as personal as possible, that is why we offer you the ability to completely adjust the look and feel of your template to best suit your desires and needs. In W3page Design Editor you are able to modify several parameters of your website's design.

First off, we would like to explain several terms which are crucial for understanding the design principles of your website. When you first created your website, you have chosen a template that you liked the most. This template already came in 4 different color schemes called styles. Each style consists of several different parameters: theme colors, background settings and header height. Those parameters are completely adjustable to your needs.

When you first come to the Design editor you need to select a style that you wish to modify from a combo box located in the top left corner. Your selection will represent the currently active style. Right next to it there are additional options which let you delete the active style, create a new one and assign styles to pages. The latter option will open a dialog where you can select a unique style for each of your pages and make a visual distinction between them. On the far right there is also an option to change the template of your website, which will also reset all of your custom settings.

The rest of the Design Editor is dedicated to Style Settings, where you can change the parameters of the active style. As you are making changes you will notice that the preview on the right hand side will be updated instantly and your changes will be saved (but not yet published) right away.

The first paramemeter you can change is the height of the header. By simply dragging the slider to the right, you will notice the header in the preview getting bigger. This is particulary useful when you wish to insert more content in the header of the page. Alternatively, you can slide the slider to the left and make the header smaller.

Next, you can adjust the Theme colors of the active style. There are three foreground and three background colors that compose every style. By clicking on a color box, a color picker will appear and you will be able to change the selected color. This can also be done by entering the hexadecimal color code directly into the appropriate color box.

The third parameter of the style settings is the background image. We have prepared many predefined backgrounds from which you can choose from. They are sorted in different categories which can be easily accessed by a tab interface. To preview a certain background, just hover your mouse over the thumbnail and the preview area will be instantly updated. If you like the change, click on the thumbnail and your new background setting will be saved. There is also an option to upload your own background image in the "Advanced" tab.

Other options of the Style Settings include the ability to reset the active style to its default settings and the option to write your own CSS code. This is an advanced option and only users familiar with the CSS syntax should use it. Your custom CSS code will be applied to all styles and it will be appended to the bottom of the CSS document.

 

NOTE: If you are using a smaller screen, click on the "Fullscreen" link at the top right of the editor to go to the full screen editing mode.