The Graphic Editor

The Graphic Editor enables you to make changes to the item you are currently editing to dramatically change the look and feel of the page. There are a number of editing options and these will depend on the type of graphic you are editing. All changes are in real-time and shown in the editor as you make them, so you can preview your changes at all times.

If you are editing a button graphic within a button bar, and you want to edit the button bar, hover your mouse around the button bar's border to be able to select to edit the button bar. There are four tabs in the Graphics Editor that section the editing options.

Options in the Graphic Tab:

Text

In the edit box you can enter the text wording that you want to appear on your graphic. There can be more than one text field for graphics with multiple entries, such as two line headings.

Size

This changes the size of the graphic as a percentage. Any setting here will override the Max Width and Max Height setting detailed in the Effects Tab.

Link

This allows you to set the graphic to be linked to another webpage or object so that this page or object will appear when the graphic is clicked. The drop down menu allows you to set the link to be a page or object in your File Manager, or an external web address or e-mail address. If you set either of the latter options detailed above, then you will need to enter the web/e-mail address in the box below the drop down menu.

Change Graphic Style

This allows you to change the template of the current graphic to another. You will be taken to the Selection Box where you can choose from our vast library of professional desgins or you can select your own file.

Options in the Color Tab:

Main Color, Border Color, Text Color and Background

The options displayed will depend upon the graphic you are editing. This may just be a single color or all of the above. All of these colors can be edited by selecting your color from a color picker or by their RGB or hexadecimal number or by their name. More details about the color picker can be found here

Options in the Font Tab:

Main Text Font

Allows you to set the font from the vast library available. Simply click on the actual font to display the variety of choices which are categorized for ease of selection. As with the text field, there can be multiple options for different graphics.

Main Text Size

Allows you to set the size of the font in a point size as you do when using a word processor. As with the text field, there can be multiple options for different graphics.

Options in the Effects Tab:

Optimization

This allows you to set the image for either quality or size. The better the quality, the bigger the file will be and the longer it will take to load on your page. Keep the experience of your visitors in mind when deciding on quality.

Max Width and Height

This allows you to set the maximum width and height of the graphic, if you have an exact requirement for one or the other. Some of the templates have been previously set to have a maximum width to ensure that all buttons are the same width. Bear in mind that the setting of a size percentage in the Graphic Tab will override the max width and height settings.

Padding

This option determines the space around the selected object in pixels. This will assist with the spacing between objects. If you include a border around the graphic or image then the spacing will be outside of the border. However, if you have a border around a text object then the spacing will be between the text and the border.

Apply Shadow

This activates the Shadow Type and Shadow Size options that will allow you to add a shadow to the graphic.

Shadow Type

Activated when Apply Shadow is on. This allows you to set the type of shadow for a wall or floor effect.

Shadow Size

Activated when Apply Shadow is on. This allows you to set the depth of the shadow from a scale of 1 to 9 in the drop down menu list.

Rotate

You can rotate your graphic by 90, 180 or 270 degrees using one of the four options. The first option will reset the graphic to its normal orientation.

You can select save at any time so we have included that option in each tab, for speed simply select save when you have finished all of your edits.

Clicking on the Cancel button will cancel any changes you've made in the editor, and the graphic will revert to the original. If you need to add more buttons to your button bar, you will be taken to the Graphics Editor when you attempt to edit the button. To make copies of the button with the correct spacing, simply hover over the button and click on the Insert icon - choose the "Copy of this graphic" option and then click on the Above or Below button to add the button to your menu.