How to launch the CSS Hero editor

After product activation, you will notice a new “Edit with CSS Hero” link on your top  WordPress administration bar, appearing both in the frontend and in the /wp-admin/ backend.

Clicking this link will launch the CSS Hero editor on that page.

ALTERNATIVELY: Should you have hidden the wp admin bar from your frontend, [it’s a user preference], remember that:

  • You can launch CSS Hero from the /wp-admin/ as well,
    • …and then navigate – inside the editor – just switch the “click mode” to the navigation (mouse icon)
    • You can launch CSS Hero from the page editing screen – and you will directly edit THAT page
  • You can manually launch CSS Hero on any site page just adding ?csshero_action=edit_page to the browser URL.
    EG: you are visiting a page with an URL like  – you can start editing that page opening the URL:

FOR FORMER USERS: In  the past CSS Hero had a bolder, bigger launch trigger, the “blue bolt” button. We’ve removed that in v3 – chooosing a more lightweight, elegant, standards-compliant way to launch the editor.