Editing a Page Using the Code Editor

 

When your page needs some fine-tuning, or if you just prefer to deal with the HTML of the page, you can use the Code Editor feature of the WebAlliance platform. The creation of the page will still go through the same steps found in the WebAlliance Admin manual under the PageBuilder section. This article will deal only with editing the page using the Code Editor.

Enter Edit mode and select "Code Editor"

In the Content Builder, select the page that you would like to edit.  Once you are on the page that you are editing, in the upper right corner select the "Edit this Page" option. This will display a header across the top of the page. Select "Code Editor" to get started editing the page using Code Editor.

Overview of Code Editor

There are a large number of tools available in the Code Editor. These are broken into four panes to see all available tools at once. If you are not using one of the panes they can each be individually collapsed to make more room for the panes you are using.

In the upper-right, there is an option to use Light Mode or Dark Mode for the editor. This will not impact the page itself and is only used for the editor.

The panes are broken up as followed:

  1. This pane displays the current HTML of the page you are editing. Editing the HTML here will directly affect the page that is being edited. There is also a "Shortcut Keys" button here to see a list of helpful shortcuts that can be used to speed up making changes.

  2. This pane is used to add in CSS, Custom CSS, or Javascript.

    The CSS tab is used to add CSS specifically to the current page.
    The CustomCSS tab is to modify how CSS is handled across the site similar to what can be done in
    Design Manager.
    The JS tab is to add javascript to the current page.

  3. The File Manager Pane is where you can add or remove files that you want to include on the page. This pane functions similarly to File Manager and any files or images added here will also appear in File Manager. Images or files can be dragged directly onto the HTML pane (Pane 1) and the appropriate code to include the image or file that will be added to the page.

  4. This pane is a preview of the page that you are editing. It can be helpful to pop this pane out by clicking the "Open in new window" button so you can easily see all the changes you are making while you make them. There is also a refresh button to refresh the page if needed to view changes. By default, the page will automatically update when you make a change. By toggling Auto Update off the page will not update until you save the changes and view the page unpublished or publish the changes and view the live page. 

Edit the Code Directly

From here, you can dig into the page's code directly. Any changes saved here will reflect on the page itself. The top menu offers options to edit the page's meta information, save, close, and go back to the Content Builder. Remember, any changes made in either editor will be shown on the page.


We're happy to help, so if you have any questions, please contact Aldrich Web Solutions.