Cut, Copy, Paste

You are probably already used to these shortcuts, and now they work in the Divi Builder just as you would expect them to. Hover over a module and press Ctrl + C to copy it or Ctrl + X to cut it (copy and remove it from the page). Once a module, row or section has been copied, simply hover over where you want to paste it and press Ctrl + V.

Copy & Paste Styles Onto Existing Modules

Not only can you copy and paste entire modules, you can also copy styles from one module and paste those styles onto another module! This is a brand new feature that I think you are going to love. Let’s say you have a page with 8 Blurb modules on it and you decide to update their colors and font styles. Simply customize one of the blurbs, then hover over it and press Ctrl + Alt + C to copy its styles. This will copy all of the design customizations you have made to the module. Hover over another blurb module and press Ctrl + Alt + V to paste the styles onto the module. The module will be updated to look just like the module you copied to styles from, but it will retain all of its unique content!

Drag & Copy

You can also copy a module into a new location by holding the Alt key while you move it. This will copy the moved module into the dropped location.

Undo & Redo

The ability to Undo and Redo in the builder is a total life saver, and it’s incredibly easy to do using keyboard shortcuts. If you don’t like a change you have made, simply press Ctrl + Z to revert it. If you change your mind, press Ctrl + Y or Cmd + Shift + Z to redo the change you just undid.

Adjust Gutter & Row Widths

Adjusting row widths and gutter widths is something we see our customers doing all the time, and now with keyboard shortcuts you can make these adjustments instantly without ever opening the row’s settings panel. To make a row fullwidth, simply hover over it and press R + F. To adjust a row’s gutter width, hover over it and press G + 1 / 2 / 3 / 4. For example, you can instantly create a fullwidth grid of borderless images by pressing R + F and G + 1!

Change Column Structures

Now you can change column structures instantly too. Simply hover over a row and press C + 1 / 2 / 3 / 4 etc to toggle through any of the 11 available column structures. You can also open up the Change Column tooltip and press Shift + Tab to tab through each of the column types on the list.

Mirror Padding Values While Dragging

One of the Visual Builder’s coolest features is the ability to drag to increase and decrease Row and Section padding values. We have added a few different hotkeys to make draggable padding even more useful. Holding Shift while you drag will limit the height or width change to increments of 10. So if you want to increase your Section padding to 100px, you can just down the Shift key and drag straight to the correct value in a couple ticks and it will snap to each 10th unit.

We have also added the ability to mirror padding values. If you drag padding on one side while holding Shift + Alt, the padding on the opposite side will be updated to match the current side your are adjusting. You can also hold Alt while dragging and it will limit the height or width of the current padding value to be no greater than the padding on the opposite side. It’s an easy way to quickly increase or decrease padding on any side to match the exact value on the opposite side.

Adjust Row & Section Padding

As an alternative to dragging to increase or decrease padding values, you can now use your keyboard’s arrow keys to make fine-tuned adjustments to row and section padding. Pressing S + Arrow Keys will increase the padding values of the parent section according to the arrow key you press. Pressing R + Arrow Keys will adjust the parent row’s padding. For example, clicking S + Up will increase top padding of the current section. Pressing R + Down will increase the padding bottom of the parent row..

Padding values can be decreased as well by hitting the S/R + Alt + Arrow Keys. For example, pressing R + Alt + Down will decrease the bottom padding value of the parent row.

Add New Content

Keyboard shortcuts also exist for adding new rows and sections. Pressing R + 1/2/3/4 etc. will automatically add a new row below the current row with the chosen column type. For example, pressing R + 4 will add a new 4 quarter column row to the page.

The same goes for sections. Add any of Divi’s section types (Regular, Specialty or Fullwidth) by pressing S + 1 / 2 / 3.

Lock & Disable

Any item on the page can now be disabled or locked by simply hovering over the item and pressing the L or D keys.

Save & Publish

The standard keyboard shortcut for saving, Ctrl + S, will now automatically save the page while in the Divi Buider. You don’t even have to open up the page settings bar. You can also press Ctrl + Alt + S to save the page as a draft without publishing.

Exit Visual Builder & Exit To Backend Builder

Now it’s easy to exit the builder and jump back and forth between the Visual Builder and Backend Builder. To exit the Visual Builder, simply press Ctrl + E. To exit the Visual Builder and go straight to the Backend Builder, press Ctrl + Shift + E.

Toggle Settings With One Keystroke

All of the most used settings panels can now be opened with a single keystroke. To toggle the settings bar, press T. To open your page settings, press O. To open the portability tooltip, press P. To open your revision history, press H.

Toggle Modal Expand & Snap

The Visual Builder’s interface is fully customizable, especially when it comes to its settings popups. Whenever you have a settings modal open, you can press Ctrl + Enter to go fullscreen or to minimize from fullscreen mode. You can also snap the modal to the left/right side of the screen by pressing Ctrl + Left Arrow or Ctrl + Right Arrow to toggle through each mode.

Zoom In & Out To Toggle Responsive Previews

Now you can easily zoom out and zoom in to each responsive preview mode by pressing the Ctrl + - and Ctrl + + buttons. It’s a really great way to quickly view your changes on different devices.

Switch Tabs & Toggle Columns

You can now quickly browse through modal tabs and options. Whenever you have a settings popup open, press Shift + Tab to go to the next tab and press Tab to navigate through the input fields contained in each tab. You can also toggle through each column layout by pressing Shift + Tab while the Change Column Structure tooltip is open.

Double Click TO Open Module Settings

It’s no longer necessary to hover over a module’s button icons to open up its main settings panel. Instead of clicking directly on the gear icon, just Double Click anywhere on the module, row or section to open up the settings!

List All Keyboard Shortcuts

If you ever need help remembering a keyboard shortcut, just press ? to get some help. A help modal will appear with a full list of relevant keyboard shortcuts for Mac and Windows computers. For the most part, the Ctrl key is replaced with Cmd on Mac in the list below.

Page Shortcuts

• Undo: Ctrl + Z
• Redo: Ctrl + Y / Cmd + Shift + Z
• Save Page: Ctrl + S
• Save Page as Draft: Ctrl + Shift + S
• Exit Visual Builder: Ctrl + E
• Exit To Backend Builder: Ctrl + Shift + E
• Zoom-In Screen: Ctrl + +
• Zoom-Out Screen: Ctrl + -
• Toggle Settings Bar: T
• Open Page Settings Modal: O
• Open History Modal: H
• Open Portability Modal: P
• List All Shortcuts: ?

Inline Editor Shortcuts

• Exit Inline Editor: Esc

Module Shortcuts

• Copy Module: Ctrl + C
• Cut Module: Ctrl + X
• Paste Module: Ctrl + V
• Copy Module Design Settings: Alt + Ctrl + C
• Paste Module Design Settings: Alt + Ctrl + V
• Disable Module: D
• Lock Module: L
• Adjust Padding By 10px: Shift + Drag
• Mirror Padding Adjustment: Shift + Alt + Drag
• Adjust Padding To Opposite Side: Alt + Drag
• Copy Module + Drag – Alt + Module Move
• Change Column Structure C + 1 / 2 / 3 / 4
• Make Row Fullwidth: R + F
• Change Gutter Width: G + 1 / 2 / 3 / 4
• Increase Row Padding: R + Left/Right/Up/Down
• Increase Row Padding by 10px: Shift + R + Left/Right/Up/Down
• Decrease Row Padding: Alt + R + Left/Right/Up/Down
• Decrease Row Padding by 10px: Alt + Shift + R + Left/Right/Up/Down
• Add New Row: R + 1 / 2 / 3 / 4
• Increase Section Padding: S + Left/Right/Up/Down
• Increase Section Padding by 10px: Shift + S + Left/Right/Up/Down
• Decrease Section Padding: Alt + S + Left/Right/Up/Down
• Decrease Section Padding by 10px: Alt + Shift + S + Left/Right/Up/Down
• Add New Section: S + 1 / 2 / 3
• Open Module Settings: Double Click on module.

Modal Shortcuts

• Close: Esc
• Undo: Ctrl + Z
• Redo: Ctrl + Y / Cmd + Shift + Z
• Save Changes: Enter
• Switch Tabs – Shift + Tab
• Toggle Modal Expand: Ctrl + Enter
• Toggle Modal Snap Left: Ctrl + Left Arrow
• Toggle Modal Snap Right: Ctrl + Right Arrow

New Backend Builder Shortcuts Too!

We didn’t just add new shortcuts to the Visual Builder, all relevant shortcuts have been added to the Backend Builder too! There are some new ones too, such as pressing Ctrl + P to launch a live preview of whatever element you are editing.

Page Shortcuts

• Save Page: Ctrl + S
• Save Page as Draft: Ctrl + Shift + S
• Undo: Ctrl + Z
• Redo: Ctrl + Shift + Z
• Open History: H
• Open Portability: P
• Open Page Settings: O

Module Shortcuts

• Cut Module: Ctrl + X
• Copy Module: Ctrl + C
• Paste Module: Ctrl + V
• Copy Module + Drag – Alt + Module Move
• Disable Module: D
• Lock Module: L
• Change Column Structure C + 1 / 2 / 3 / 4
• Add New Row: R + 1 / 2 / 3 / 4
• Add New Section: S + 1 / 2 / 3
• Open Module Settings: Double Click on module.

Modal Shortcuts

• Close: Esc
• Save Changes: Enter
• Switch Tabs: Shift + Tab
• Preview Module: Ctrl + P