How to customize a design

What really makes Sitemagic CMS shine is the Designer - a very flexible tool that allows us to create truly stunning designs. All the designs that ship with Sitemagic CMS are created using the Designer, so that should give you an idea about how powerful this tool is.
To get started, first make sure you are logged in, and then go to Content > Design. The Designer should now open up on the right side of the website.
The Designer is a tool that floats on top of the website. You can move it anywhere within the website, just like any other window.
 
/Designer.jpeg
 
The Designer lets us change several areas of the website.

  • Header

  • Menu

  • Content area

  • Footer

  • Headings (headlines)

  • Backgrounds

  • Cards

  • Controls

  • Snippets

  • Backend

  • Action buttons

  •  ... and more
Each area can be styled in a variaty of ways.

  • Font styling (font, size, color, decoration, style)

  • Indentation (margin, padding)

  • Dimensions (width, height)

  • Element positioning

  • Borders, colors, backgrounds, and shadows

Some areas expose special features. For instance the Background area lets us generate a random background image with color variation and gradients, which looks really neat.

The content area lets us add header images that stretch across the entire screen.

Most styling applies to the entire website (all pages), but background colors and header images can be applied to individual pages.
The website produced using the Designer scales beautifully across devices (phones, tablets, and desktops) thanks to a wide selection of resolution breakpoints.


How the Designer works

Let's have a quick look at the different elements in the Designer.
 
/guide/DesignerLightTheme.png
The Designer consists of a window that floats on top of the website.

At the top of the Designer we have the Area Selector which determines what area of the website is being styled. In this case we are styling the Background area of our design. We can change this to any area we like to manipulate, e.g. PageHeaderMenuFooter, etc. You will notice that the area selected in the menu will flash with a red outline in the design.
You can also simply click on an area in the website, and the Designer will automatically switch to the associated Area in the menu.

Underneath the Area Selector we have four buttons:

Reset removes all changes made to the design. It will restore the design back to its original state. However, to actually save the original design back to Sitemagic CMS, make sure you click the Save button.

Undo
 will bring the design back to what it looked like the last time it was saved. Therefore, it's good practice to save the changes regularly to make sure any mistakes can be easily reverted without losing too much work.

Save
 obviously saves the changes made to the design. It's now safe to close the Designer using the close button in the upper right corner of the Designer window.

The fourth button without a text label is the Download button. It can be used to download the design if you want to share it with someone else. The package downloaded contains all the files necessary to install the design template on another website running Sitemagic CMS.

Below the buttons we have all the options used to manipulate the design. What options are available depends on what area is selected - each area can have different options.

Tip: You can press F2 to change the color theme of the Designer from Light to Dark or back again.
In this example, we are working with the Seasons design template - you may want to check out How to change design before proceeding.
The short video below (1 minute, 15 seconds) demonstrates the essence in how the Designer works.


By default changes are applied to all pages unless clearly stated otherwise. The following options apply only to the page visible while the Designer is open:
Background > Background > Image (current page):
The image selected only applies to the page currently visible to the Designer.
Page > Header image:
A header image is only applied to the page currently visible to the Designer.
Page > Borders and Colors > Color (current page):
The color selected only applies to the page currently visible to the Designer.
Get Sitemagic CMS