The Preferences Panel can be accessed very easily.
- Make sure Visual Developer is active ( it’s toggled )
- Click Preferences on the top-left corner in the Visual Developer Panel
Spectral Mode By Default
This is an option which can be enabled in order to toggle Spectral Mode for an element by default, this is an useful feature if you want to avoid constantly clicking the “Spectral Mode” button while you’re customizing an element.
ColorPicker enabled where it is supported
This is an option which enables the color-picker usage, we recommend keeping this active at all times, but if you’re working on an very advanced design which works with rgb and rgba and relies heavily on colors from photoshop or external source, i.e you already know the colors and don’t need to experiment, then we recommend disabling this.
Enable Element Panel Filter Box
This is one of those options which is there in case anyone needs it, if you don’t need the search bar on the left, for example you’ve limited the Element Panel Display Options and there’s no point in a search bar, then you can disable that search bar. This is an useful feature in case you’ve left just a few customization available for your clients in case they need them, just to make sure they can’t destroy their design.
Enable Advanced Features, such as “Page Specific” and “Page Versions”.
As it says, if you want to limit Visual Developer heavily, then you should uncheck this, this is an option which is not available in the Lite version. With this option you can create Landing Pages, customize pages that need to be different from the others, for example the checkout page, product page, specific author bio.
Work in EM by default instead of pixel
This is an option available for people who work with em, this was a feature request, to allow certain people to work faster and easier with Visual Developer. It’s very simple, every value you will change is defaulted to EM instead of PX
Allow arrow usage to increment and decrement numeric values
This is an useful feature in case you’re looking for the perfect text size, or the perfect line-height for example. You can increment & decrement a field value just using your arrow keys, specifically the “Up” and “Down” keys
Display default values in the Element Panel ( partial support )
In case you’re working on just a few changes, and don’t plan to dramatically change the look, you can use this feature to display the existing CSS rules in the Visual Developer Panel, this is an extremely useful feature if you’re just starting with CSS or if you simple need to do very minimal work
Enable the option to set an CSS rule to important
Enforce a CSS rule on an element, this is an useful feature when you’re working with Responsive themes or with themes that have a lot of CSS hacks inside them.
The important rule is “a hack”, not this instance, but in general when it comes to CSS. The important rule has been implemented barely in version 2.1 because I wanted to avoid implementing it. But there’s certain themes that use the important rule that’s why I had to implement this option, to allow customization of elements that already had an important rule.