Free webs
Website design software

How to create a custom website design ?

2 minutes 6085 views

Create banner for websiteStarter Special, create your free design and your pro website without using Web Agency. SiteW is the ideal website creation tool to create your website from your own designs, as easily as with the image software that you use and without any knowledge in website programming.

Here are examples of sites which were created by following the principles of the guide.


custom design

1. Create a website with the free trial

Creating a website with a custom design starts by the choice of a name and an Internet address for the website. To create this custom design website, we will use a common design without any background, which you will not be able to choose from the subscription step. You can thus use the default design. Then, choose create a website with the Premium or Pro free trial. This will later allow you to choose the  Unicolor Design available only for the Pro websites and Premium websites.

2. Choose the Unicolor design

The unicolor design is a design which does not contain any graphic element and which allows you to choose a background from the 250 proposed. The chosen color will also be inserted in the text styles. 

To change the design, in the website creation tool, click on the Design tab on the left, then on Change template.

change website template

3. Inserting the design in the website

You now have a blank website in which you will be able to add all the graphic elements.  You can start by creating a background for your website. Beware, the resolution of your images must not exceed 1000 pixels x 1000 pixels. If you wish to use transparency, save your design into PNG format, or else in the JPG format. Use the Image block to insert your graphics.

Instead of using an automatic menu, you can create an image button for each page of your website, on which you will insert a link (see FAQ). Place the buttons that you designed on the background page. They will be accessed from all the pages of your website. 

4. Adapt the styles to the design

The text design is defined by the color that you chose for the Unicolor design. You can adapt the font, the color, etc... for each text block by using the Text block.

If you are versed in the CSS language (style sheet), you can adapt the text design for the entire website. To modify the style sheet of your website, visit the background page and click in the properties on Modify the styles. You can then enter the CSS rules to adapt the text colors to your design. 

Here are examples of the CSS rules adapted to modify the design of your website. The colors are encoded into the hexadecimal format. You can find hexadecimal color selectors as well as guides and tutorials on the CSS Language on Internet.

/*Change color and width of contact block texts*/

div.UI_Contact { color:orange; font-weight:900; }

/*Change the size of menu block texts*/
.UI_Menu a { font-size:15px; }

/*Change the default font*/
.body, .uit_cttxt_n, .uit_cttxt_m, .uit_cttxt_t, .uit_ttltxt_m, .uit_cttxt_s, .uit_ttltxt_s { font-family:arial, sans serif; }

/*Change link color*/
.body a { color:#254a90; }

/*Change link color when hovered*/
.body a:hover { color:#009bd4; }


Last update: December 17, 2020

What’s new?
The latest updates and new functionalities on our tool, after an advanced decoding with our developers.