Created with The SOHO Webmaker_
+1 778 340 3489

Website Design Framework

There are two main components for the design section:

  • Loading and cropping your header image
  • Selecting your styling options

Header Image

You can either use a photograph of your own for the header image or select from the many free and low cost images on the internet. If you do not already have digital imaging software and would like to enhance an image with effects and text etc. (like the header for this website) then check out Pixlr. See the Tutorials section below for Pixlr tutorials.


You simply upload your image to the system where you can then select the area of the image to crop for your header, and you can easily replace the header image as required.


Styling Options

There are three main styling options:

  • A selection of website layouts (see the video on the Home page for examples)
  • A selection of colors using a color swatch that is automatically generated for your image
  • A selection of font styles and sizes for your main title + your custom colors

* You can replace your website background color with an image (as has been applied to this website). 

* You can turn the borders for your header image off.

If used, the above two options will make your layout appear to be very different to the default layout settings and they effectively extend the number of layout options at your disposal. 


Swatch Color Selection

There is a custom color selection which you can use to add an extra custom color to each of six components of your website.





A color chart (swatch) is automatically generated based on the colors in your header image. You can override any color with your own custom selection. Six color swatches are provided for the following components of your design layout:

  • The main title
  • The sub-title
  • Background
  • Navigation bar
  • Widgets & website footer
  • Text heading titles

Note. Your color selections are also applied to custom elements on plug-in pages such as maps and store etc. to create a consistent color theme throughout your website.



The main set of tutorials for the SOHO Website maker can be found here: SOHO Webmaker Tutorials


The tutorial for color selection and using the design layouts is here: Layout Design & Styling


If you wish to design or enhance your header image or any other images, please refer to our list of internet image resources and the step-by-step tutorial for the Pixlr software here: Pixlr Image Editor + Image Resources  The Pixlr tutorial also shows you how to access and download images from the internet.


Design Layout L4 Demo

The following video demonstrates one of the design layouts (L4). This layout is a very basic design suitable for pre-made header images that already contain text and where the colors of the header are used in conjunction with the header border areas. You can view the completed website featured in the demo here: Wescan Construction





Layout & Color Swatch Demo

The video provides a quick run-through for setting up your basic website by simply uploading an image and following a few simple steps. See the completed example website design for the video here: Website Example