With Designer, you visually manipulate the HTML content, set CSS properties, without writing any code. And, as you build your website and lay out your content, the Designer creates clean, semantic cod

Anatomy of the Designer

The Designer is further classified into 5 major panels which gives you complete control over your elements

  1. Style Manager

  2. Element Properties

  3. Layers

  4. Blocks or Components

Style Manager

This gives you access to all CSS properties available for the selected element. You can simply enter these values in their appropriate fields and see the style applied to your elements on the canvas instantly.

Changing Background Color Using Style Manager

The Style Manager is further divided into

  • General

  • Layout

  • Typography

  • Decorations

  • Extra


Where you can find Float, Display and Position and Related Properties.


Where you can find are layout related CSS Properties like width, height, padding, margin


Where you can find font related properties like font-family, size, color, line-height and text-shadow.


Where you can find Border properties, Background Color, Background Images, Box shadow.


Where you can find transition and transform property which allows you to rotate, scale, move, skew, etc., elements.

Element Properties

Element properties has two different settings

1) Lets you access various Bootstrap framework related settings available for the select element like Button classes, table classes, typography classes, etc…

2) Add href links and assign ID to selected element.

Using Element Properties

Almost all the settings will add a specific class to the element (e.g. <button class="btn btn-primary">Learn</button>). You can see the list of possible settings for any element. You can refer Bootstrap docs for specific parameters.


This shows the hierarchy of every element on the page you are currently on. Here, it allows you to manage and rearrange your elements extremely faster, focusing always on the architecture of your structure.

Using Layers