Once you have installed the Style & Animate plugin, go to any front page of your site. To edit the styles for a page element, do the following:

1. Click the ‘+Style/Animate’ button in the top admin bar  (or the smaller button without the text, if you are using a narrower display).

2. You will now be in ‘pick’ mode, and the button text changes to ‘Stop picking’. As you move the cursor, you will see a border drawn around page elements (the page will scroll automatically if you move the cursor to the bottom or the top of the screen). To create or edit styles, click anywhere inside the border – you will then see a pop-up menu:

   

3. Chose ‘Add / Edit Styles’. This will open the Styles Editor panel:
   

   The styles on the page element are now editable and a marker will appear in the top-left corner of the element:

   You can click the marker at any time to end the editing session or start it again.

4. Open a style in the Styles Editor panel by clicking its title.

5. Change the values for that style.

6. If you open the page in a second browser, one which you are not logged in to, you will be able to see the live changes to the site, while still being able to edit styles in the other browser. You can also switch into Development mode so changes don’t go live straight away.

7. If you want to make an animation or transition instead, choose that option from the pop-up menu in (2) above. See the rest of the manual for complete instructions.