1. Intro

Welcome to the Manual for the Tagit Plugin. In this manual you will learn how to use the IDE (Editor) and how to create, open or save a new Project. You will learn how to use the Tools to get the perfect Tooltip on your Image.

2. Gettings Started

To start we need the Plugin. You can buy it over the Envato Market place. There are two versions, one for Wordpress and the second for standalone projects (This will comming soon).

Standalone (Comming Soon ...)

3. Installation

After we have downloaded the Plugin, it's time to install it on the Server. The instructions for the Installation depends what version you have Downloaded, the Wordpress or the Standalone version.

3.1 Wordpress Installation

The best and only way how to install a Plugin is described here, at the Wordpress Manual Page.

3.2 Standalone Installation

Comming Soon ...

4. How to Use it

Go to your Admin Panel (http://www.yourdomain.com/wp-admin) and log in. On the Menu sidebar click on Tagit Editor to start our Plugin. When you open the Plugin you will see the IDE, how to use it you will see in the Next steps.

4.1 The IDE

When you open the Plugin you see the IDE. In the next steps i will explain the IDE and how to use it. Lets take a look at the IDE.

Tagit Editor IDE

We wanted to build a minimalistic but powerfull Editor that will anybody understant. To make it easy to use we divided the Editor into eight Areas :

1. The Menu Bar

New: Opens a popup to select a Image and create a new Project.

Save: Saves your current Project.

Open project: Browse and open a Project.

Recent Project: List of recently create Projects

2. The Tool Bar

New: Opens a popup to select a Image and create a new Project.

Open: Browse and open a Project.

Save: Saves your current Project.

Selector: Tool to select the tooltips on the image.

Pin Creator: Tool to add a Pin on the Image.

3. The Image Container

The Image Container is the place where your Image is loaded and where you see all of your Pins/Toolips.

4. The Zoomer

The Zoomer is a Tool to Zoom In or Out the Image. To use it just slide left to Zoom Out, or slide right to Zoom In.

5. Tooltip Content Editor

With the Tooltip Content Editor, you set the Title and the Content of the Tooltip. You can use HTML tags to define your Title or Content.

6. Tooltip Pin Editor

With the Tooltip Pin Editor you can Style the Pin under the Tooltip. You can change the Icon, Icon Color, Pin Background and even the color of the Border.

7. Tooltip Style Editor

With the Tooltip Style Editor you can give the Tooltip a unique style. You can change the Background, Font Color, height, with and even the position where to show the Tooltip.

8. Layer Box

The layer box is a list of Layers (Pins) that you have on your Image. You can add Specific names to the Layers or easy remove a Layer from the Image.

4.2 Create and Save

To create a Tagit Image, follow these steps.

  1. Click in the Toolbar on New
  2. From the Popup Window select the Image you want to use
  3. From the Toolbar select the Tool Pin Creator
  4. Click on the Image in Image Containter, where you want to place your Pin/Tooltip
  5. In the Tooltip Content Editor define your content of the Tooltip
  6. (optional) If you want to style the Pin, use the Tooltip Pin Editor
  7. (optional) If you want to style the Tooltip, use the Tooltip Style Editor
  8. (optional) To give a layer a name or to remove it, use the Layer box
  9. When you are finish click in the Toolbar on Save
  10. In the popup Window give a name for your Project

4.3 Open

To open a Project follow these steps:

  1. From the Toolbar or Menu Bar select Open
  2. Pick from the popup Window the Project you want to load

4.4 Use it in Posts / Pages

How to insert our created image into a Post or Page

  1. Open your Post/Page
  2. In the Editor select your Image from the Dropdown

5. Thank You

Thank you for purchasing my Plugin. If you have any questions that are beyond the scope of this Manual, please feel free to contact me via the Contact page.