Preferences

In this article, we will go over everything you can adjust in the Preferences panel.

  1. How do preferences work
  2. How to Access Preferences
  3. Advanced Mode
  4. Dynamic Content
  5. Control Navigation
  6. WordPress Toolbar
  7. Help Text
  8. Rich Text Editor Default
  9. Context Menu
  10. UI Theme
  11. Content Layout Element
  12. Custom UI CSS
  13. Summary

How do preferences work

Some things to keep in mind when managing preferences.

  • Preferences only effect your user account. If you want to enforce changes site wide, you will want to use the permissions system. Learn more by reading Configure User Permissions.
  • Some preferences have a different default value depending on if you are using X or Pro.

How to Access Preferences

From the Bar, click the cog icon to open the Settings modal. The first tab is called Preferences.

Open Preferences

Advanced Mode

Toggles Advanced Mode which is used to show more controls when inspecting elements.

Advanced Mode
  • Defaults to Off with X or standalond Cornerstone.
  • Defaults to On with Pro.

Dynamic Content

When enabled, it will show the Dynamic content icon in supported controls like text inputs. Learn more about this by reading Work with Dynamic Content.

Dynamic Content
  • Defaults to Off with X or standalond Cornerstone.
  • Defaults to On with Pro.

Control Navigation

While Inspecting an element, this preference determines where the navigation will appear.

Control Navigation
  • Inline - Show the control navigation inside the Inspector pane. When the Inspector is horizontal, you will often need to scroll to see all the control navigation items.
  • Top Bar - The control navigation will always show as a fixed bar at the top of the screen.
  • Bottom Bar - The control navigation will always show as a fixed bar at the bottom of the screen.

WordPress Toolbar

While using the application, determine if the WordPress toolbar appears across the top of the screen. If you adjust this setting you will need to refresh your browser after saving the preferences. This because the WordPress toolbar is not part of our dynamically rendered application.

WordPress Toolbar

Help Text

This was used more prominently in older versions of X and Pro, but isn't as frequent in more recent versions. When enabled, it allows Help Text to appear in the app. Most use cases of this setting have been removed in favor of more natural UX patterns and or always explaining features.

Help Text

Rich Text Editor Default

When you inspect an element that uses a Rich Text control (Text, Headline, etc.) this will determine which editing mode is shown first. If enabled, it will start in Rich Text mode.

Rich Text Editor Default

Context Menu

Enables the ability to alt-click throughout the application to use a context menu. This does override the browsers ability to display a context menu.

Context Menu

Here's an example of the Context Menu that appears when alt-clicking a Button element

Context Menu Button

You can alt-click in the following contexts:

  • Elements in the live preview
  • Elements in the Layout pane
  • Element names in the Inspector breadcrumbs
  • Breakpoint controls in the Grid and Cell elements.

UI Theme

Currently Light and Dark are the two available UI themes. Use this option to toggle between them.

UI Theme

Content Layout Element

New Sections added to a page will already start with a default child element like a Row or Grid. You can determine which layout element to use by adjusting this preference.

Content Layout Element
  • Row - The default option. A versitle element powered by flexbox.
  • Grid - A more advanced layout element available to Pro users.
  • Classic Row - A previous generation layout element that is built on the original CSS float system. This is supported for backwards compatibility, but we would recommend using the new Row element moving forward.

Custom UI CSS

This setting is for advanced users who want to experiment by injecting CSS changes into the application itself. Use this at your own risk as we can not support any alterations made through this setting.

Custom UI CSS

Summary

In this article we took a look at all the different preferences available and their individual settings.

See something inaccurate? Let us know