- Manual -
The Pet content uses “Animations” that contain “Frames” which can contain elements that can be added or edited in order to create animations.
Every Animation can have one or more Frames.
Every Frame can have elements that can be positioned, scaled or have custom color & transparency.
Elements can be represented by images, texts, characters or font icons. Font Awesome is used to provide a vast library of icons.
To edit an element you must first select it. After that you will see controls near it.
The Pet can have any number of animations. The animations you provide can be set to be displayed when pet goes in various modes - talks, walks, is dragged or is stationed.
To add a pet icon on the preset box, you need to add an image path in the input field that appears when you Hover the mouse over the image icon near the photo area.
You can add a shape using the shapes present in the Font Awesome icons gallery OR create elements using images, texts or html code.
To add an image you need to add an image path in the input area then click the ADD button.
The images you add are good to be in png or gif format so you can have a transparent background. JPG images don’t have transparency.
Transparent png image used for Doge:
Sometimes you will probably need to update the images or the content of an element but you already create the animations with it. To replace the instance of that element in all the places is used… you can use the “Replace Selected Element” option.
The pet has the option to show simple messages.
Any message you add in the Messages Area will be displayed by the pet when the probability is met. The messages will be shown in order and looped.
The users can also see those messages by navigating them using the Mini Menu that appears at when you hover the mouse on the Pet.
The messages that are present in the “Special” animations are handled differently. Those will appear only when the Special animation starts.
The Pet can have “Special Animations” that can be played at special times. This feature lets the Pet act as a Guide for your website. See the “Boy - Guide” preset to see how it works.
A “Special Animation” features:
STEP 1: Make an Animation to be “Special”
To create a Guide Animation you need to create a new animation and set it to be “Special” from the Animation Type Selector. This will make the Pet know that this animation has special features.
STEP 2: Add a target element.
To set what element needs to be targeted by the Special animation, you need to provide the #ID of that element or a text that is contained in that element in the field “Target Page Element”
When the Pet reaches near the page element, it can be set to display a message or an animation.
Use the “Advanced Options” area to set the behaviour of the Pet depending on how you need to behave. There you will find description for every option.
To import the presets that come with the plugin, you must use the Wordpress Importer from admin area and point to the file “website_pet_builder.presets.xml” you will find in the pack you receive with the plugin.
You can import the default presets if you delete or you want to get the default look for the pets.
You can see the generated code used for the pet in this area.