Code Editors

In this article, we're going to discuss the code editors available across our builder interface.

As of Pro v4.0.0, X v8.0.0, and Cornerstone v5.0.0, the code editors available across our suite of builders were updated to make them more accessible and significantly easier to work with. The code editors can be found via the CSS and JS buttons in the primary navigation bar of the builders:

Code Editors

If you were to click on the CSS button, you would see the following editor appear as a popup:

Code Editors

The main difference with the new code editors is that no matter what context you are in, you will always be able to see and access the contextual code editor for the current resource you're viewing (e.g. post, page, et cetera) as well as the global code editor. Notice in the screenshot above that Page CSS is right next to a label of Global CSS. Selecting Global CSS will tab over to the sitewide CSS editor, allowing you to make easy adjustments with the click of a mouse:

Code Editors

The code editors have also been updated to be resizable by hovering over any of the edges of the editor, which will reveal a resize handle to alter its size:

Code Editors

Additionally, these new code editors "float" over the builder interface, meaning that they will remain open until closed out using the × button in the upper right corner. Additionally, they can be dragged around to reside anywhere on the screen by clicking in the header and moving it to your desired location. This increased flexibility makes adding custom code to your website much easier than its ever been.

See something inaccurate? Let us know