Sélectionner une page

Divi Power Users Rejoice! Introducing New Keyboard Shortcuts For The Visual Builder (And Many More Improvements Too)

Divi Power Users Rejoice! Introducing New Keyboard Shortcuts For The Visual Builder (And Many More Improvements Too)


Last month we released Div 3.0 and introduced the all new Visual Builder. This new interface completely revolutionized the Divi Builder by bringing it to the front-end and allowing users to make real-time changes to their website using a set of visual controls. The reception has been amazing and we couldn’t be more excited about the future of Divi.

In the weeks following the launch of Divi 3.0 we remained dedicated to making sure the new Visual Builder was working great for everyone. We have been fixing bugs, improving compatibility with third party plugins and addressing usability concerns around the clock. One month and 140 improvements later, things are looking better than ever and we will be continuing to improve stability over the next few weeks before starting to work on our developer/performance release in Divi 3.1. We wont be adding any new features in Divi 3.1, but we will making everything about Divi just a bit better, faster and easier to use. The Visual Builder will be coming to the Divi Builder plugin soon too! Don’t worry, we haven’t forgotten about that.

In and amongst the hours spent getting the Visual Builder in tip-top shape, we found a little time to work on something new too. It’s safe to say that we have been using the new builder a lot lately, and every day we think about ways to make it even better. We wanted to capitalize on the builder’s incredible speed and give Divi professionals some new tools that would help take their web design game to the next level. So we decided to create a new suite of power-user features in the form of Keyboard Shortcuts.

Keyboard shortcuts, when used in the new Visual Builder, are incredibly gratifying and awesomely fast. For the large majority of our customers who build websites professionally, “time is money,” and these new tools are going to save you a ton of it!

test

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

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!

copy-styles

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.

copy-drag

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.

undo

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!

gutter

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.

columns

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.

padding-drag

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.

padding

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.

add-content

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.

disable

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.

save

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.

exit

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.

settings

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.

modal

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.

zoom

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.

tab

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!

double-click

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

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

Divi 3.0 was Elegant Themes’ biggest product launch of all time, and following the release we focused 100% of our support and development resources to making sure that the Visual Builder was working great for everyone. As our community put the new builder to the test with different combinations of plugins, child themes, server configurations, browsers and browser extensions, we have been able to identify problems and update Divi with a ton of compatibility and stability improvements. Even though we beta tested Divi 3.0 for weeks with close to 1,000 dedicated customers, we weren’t able to catch everything. Rest assured, we are completely dedicated to helping everyone and we are really happy with the speed at which we have been able to address the issues that have been discovered up so far.

You may have noticed quite a few updates for Divi and Extra popping up in your WordPress Dashboard recently. While we typically roll out minor releases on a weekly or monthly basis, we decided to break with convention in this case and commit to working around the clock to provide daily updates with the latest Visual Builder improvements. Over the past month we have updated Divi and Extra 15 times with a combined 140 improvements. New issues will inevitably surface, but things are looking very stable today and you can expect the release frequency to normalize now that things have settled down a bit.

If you need help with anything, don’t forget to open up a support ticket so that we can get working for you 🙂



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.