Let’s take a closer look at the top-right toolbar, and the actions it can perform.
The plus (+) button (1) is used to add blocks of content. It can also be used to add new sections, flex sections, and templates.
The Toggle Side Panel button (2) can be clicked to show or hide the side panel. The side panel is used to format content that has been added to a page.
The Undo and Redo buttons (3) can be used to undo or redo an action.
Clicking the ellipses (…) (4) opens a sub-menu of additional options:
These options include device preview buttons (1), a zoom slider (2), a light/dark interface theme selection (3), and a Preferences menu found under the gear icon (4).
The Preferences menu contains a number of helpful options:
Using the Code Editor menu (1), you can select whether you want to use the basic or advanced code editor when using developer tools. The basic code editor simply lists the code as plain text. The advanced code editor uses color coding to distinguish between different coding tags in the editor.
The Paste menu (2) lets you choose whether you want to paste text or HTML code in the page builder.
The Show Section Label menu (3) lets you toggle the display of the “section”, “slides”, and “flex section” labels in the top-right corner of sections in the main area:
The following options are available under this dropdown menu:
- Flex sections: labels are only shown for flex sections
- Active section: a label is only shown for the section currently being edited
- All sections: labels are shown for all sections
- No: all labels are hidden
The Workspace Style menu (4) lets you choose between a Default or Light style behind the main area. Selecting Default, then choosing a color from the color swatches (5), will change the color of the workspace to match. Selecting Light will automatically change the workspace to a light white color.
When you are done making changes, click OK (6).
Related Tutorial Video