Installation and Updates

After your purchase, you’ll receive a download link and license key, and access to your account.

To install Mobius, upload the ZIP file into Plugins > Add New > Upload Plugin, or manually extract the plugin folder into /wp-content/plugins/.

License activation

To activate the plugin, browse to Mobius in your Dashboard, fill in the “License key” box, then hit the “Activate” button.

Your account

After your purchase, you get access to the your account, where you can view your license details and purchase history, and where you can generate and download invoices for every purchase you made.

You can also download the latest plugin version.

The account page also shows an overview of all live and local/development/staging sites that are using your license key(s), and you can block sites from using a key.

Plugin updates

As long as your license is active, Mobius will automatically notify you when new updates are available.

When your license expires, Mobius will continue to work, but you will no longer receive plugin updates or support.

Quick Start

Once you’ve activated Mobius, visit any page of your website (ideally, a page with some content that you can style). You should see a button with a Mobius icon in the lower right corner of the window.

This button, which is only visible to logged-in administrators, toggles the appearance of Mobius Panels. Mobius Panels contain Global CSS and HTML editors that you use to inject code into your site. The Global CSS Editor should open by default.

Add your CSS

Write some CSS in the Global CSS panel, like: p{background:seagreen;}. You should see your styles apply immediately.

Editor Features

Mobius’s CSS and HTML editors bring a number of professional code-editing features to your WordPress environment.

Code Formatting (aka Beautifying)

Keeping your code clean and consistently spaced is crucial to readability (and it just feels nice). Click the icon at any time to tidy up your editor.

Text Sizing

Mobius panels are designed to be frequently repositioned and resized, depending on the context of your current task, and the text inside those panels should follow suit. Use the 'Aa' button to resize text, just like you would in an e-reader.

You’ll find that it’s useful to be able to:

• decrease the editor font size if you’ve got a panel tucked into a corner of your viewport.
• increase the editor font size if you’re showing code on a Zoom call or screencast or just like to go big.