The Design Area
 
The Design Area is where a "preview" of your config is shown. You can manipulate, move and resize meters and Background Objects as you see fit to create your own configs or modify existing ones. It is the same size as your virtual desktop area (the rectangle that encloses the display area of every monitor connected to your computer).

When you launch the Config Editor, the Design Area is initially empty until you start adding meters and Background Objects.

You can add meters to the Design Area by either right-clicking in the Design Area and selecting a meter from the popup menu, or by using the Tools and Settings panel to the right of the Design Area (more on adding meters later).

Meters can be manipulated in the Design Area by using the mouse to left-click and drag them around or resize them using the small squares on the sides and corners of the meters. By holding Shift and resizing meters, you can keep meters in proportion.

You can also use the arrow keys to manipulate meters. The Left, Right, Up and Down arrow keys move meters in the respective directions. Holding Shift and pressing the arrow keys resizes the meters instead of moving them. The Control key modifier makes all resizing operations ignore the Grid Size, allowing you to fine-tune a meter's position.

Furthermore, multiple meters can be selected and moved by either holding down the Control key and left-clicking on the meters you want to select, or by left-clicking and dragging out a selection rectangle that selects all meters in the region when the left mouse button is let go.

Underneath the Design Area area are a number of options to assist you in creating your config file.
 
Option Description
Grid Size (X x Y) When Snap To Grid is enabled, this determines the increments (in pixels) by which meters move and resize while dragging them with your mouse or moving them with the arrow keys.
Snap To Grid When enabled, meters and Background Objects are "snapped" to sizes indicated by the grid size. When disabled, meters and Background Objects can be freely moved and resized.
Zoom (%) Zooms the Design Area in or out.
Use Bitmap Background When checked, you can inserts an image as the background for the Design Area (useful for blending a config with a desktop wallpaper for example).
Take Screenshot Takes a screenshot of your current desktop and sets it as the background of the Design Area. Only available when Use Bitmap Background is enabled.
Desktop Overlay Draws hatched areas on the Design Area, each representing the area covered by monitor connected to your system.
Highlight Meters Draws thin blue lines around the borders of meters and Background Objects to make them easier to see when they are not selected.
Show Config Outline When enabled, a green outline is drawn around your config. If your config is large, this line will change color to red and a warning will be displayed in the status bar.
Design BG Color: Changes the background color of the Design Area.

Tip: You can use the keyboard shortcut Ctrl+S to quickly save your work.