User Guide Action Toolbar

Overview

the action toolbar displayed from within the edit current elements tab

Use these tools to:

Select entire elements
Copy, cut, duplicate, or delete elements
Remove styles from elements
Move elements up or down the page
Insert paragraph before or after element
Delete an element from the page
Remove empty elements on the page
Refresh customizations options

Related Tools:

Interface

The Action Toolbar offers the following options:

1. Select: Select the entirety of the active tool's target element. This is often better than highlighting content in the editor with your mouse which may not actually select <div> elements or other wrapping parents.
2. Copy: Copy the entirety of the active tool's target element to the clipboard. NOTE: There is no paste button in the action toolbar. Once copied, users must either right-click or use Ctrl-V/Cmd-V to paste the content.
3. Cut: Cut the entirety of the active tool's target element to the clipboard. NOTE: There is no paste button in the action toolbar. Once copied, users must either right-click or use Ctrl-V/Cmd-V to paste the content.
4. Duplicate: Insert a duplicate of the active tool's target element directly beneath it.
5. Clear styles: Remove DesignPLUS style classes as well as any in-line style attributes from the active tool's target element. NOTE: Clear styles does not remove any styles the target element inherits from themes or other tools. To remove these styles, set Theme or other associated tool as the active tool and then click on the Clear Styles button.
6. Move Up: Move the active tool's target element before its previous element. This button does nothing if the target element is the first element on the page.
7. Move Down: Move the active tool's target element after the next element. This button does nothing if the target element is the last element on the page.
8. Insert paragraph before: Insert an empty paragraph element before the active tool's target element.
9. Insert paragraph after: Insert an empty paragraph element after the active tool's target element.
10. Delete: Delete the entirety of the active tool's target element. This is often better than highlighting content in the editor with your mouse which may not actually delete <div> elements or other wrapping parents.
11. Remove empty elements: Removes all empty items (paragraphs, lists, links, etc.) from the editor at once.
12. Refresh customizations: Reaches out to the customizations course and pulls in any new customizations options (themes, styles, content blocks, templates, etc.). This won't usually be necessary, but is helpful if something is unexpectedly missing.

Action Toolbar with Advanced Tools Enabled

If you have your Advanced tools enabled, you will see some additional options. These icons are shortcuts which will open the advanced tools with the active tool targeted, for easy editing.

Be sure to select the element you want to work with as your active tool in the Edit tab before using these shortcuts!

1. Load in Style Editor: This shortcut will take you to the Style Editor tool, in the Advanced tab of the sidebar, and whichever element was the active tool in the Edit tab will be automatically targeted for editing.
2. Load in Attributes: This shortcut will take you to the Attributes tool, in the Advanced tab of the sidebar, and whichever element was the active tool in the Edit tab will be automatically targeted for editing.
3. Load in Advanced Editor: This shortcut will take you to the Advanced Editor tool, in the Advanced tab of the sidebar, and whichever element was the active tool in the Edit tab will be automatically targeted for editing.
4. Load in Arrange Content: This shortcut will take you to the Arrange Content tool, and whichever element was the active tool in the Edit tab will be automatically targeted, so you may arrange the items inside it.

View an example of this process for the Style Editor shortcut.

Instructions

Perform an action with the Action Toolbar

To perform any action with the action toolbar:

Place your cursor inside the element in the editor that you would like to perform the action on. (Example: to add a paragraph above an accordion, place your cursor anywhere inside the accordion.)
Ensure the Edit Current Elements tab is open.
Select the Active Tool. (Example: Accordion)
Choose any action from the Action Toolbar. (See the Interface section of this page for information on each available action.)

Resources

Legacy Comparison

The legacy DesignPLUS sidebar had an undo and redo button and in some tools, such as Accordions, there were buttons to insert the paragraph after the element. The new DesignPLUS sidebar's Action Toolbar offers many new options for users to work with any selected element These new actions include:

Select
Copy, cut, duplicate, delete
Move up or down
Clear styles
Insert paragraph before or after

undo and redo buttons in legacy design plus

insert paragraph after button legacy design plus

Overview

Overview

Use these tools to:

Related Tools:

Interface

Interface

Action Toolbar with Advanced Tools Enabled

Example Animated GIF

Instructions

Instructions

Perform an action with the Action Toolbar

Resources

Resources

Legacy Comparison