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!



Keyboard Shortcuts Galore

Almost everything in the Visual Builder can now be triggered using Keyboard Shortcuts. What would normally take 2, 3, 4 or even 5 mouse clicks to accomplish can be performed in just a few keystrokes. You can cut, copy, paste, add new content, adjust columns, change padding and more without ever opening a settings panel. Once you have mastered these shortcuts, you are going to be building pages with new found speed and efficiency.

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

Stability Improvements & Bug Fixes

Since the launch of Divi 3.0, our team has been working around the clock to patch bugs and implement compatibility fixes on a daily basis as problems have been reported to us in the support forums. We are dedicated to making sure everyone is having a great experience with the new visual builder.

Post Release Recap

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 🙂

Divi 3.0-3.15 Updates

  • Added new keyboard shortcuts to the Divi Builder.
  • Fixed some logic errors in the saving of global modules.
  • Fixed an error that occurred sometimes on fresh installs related to A/B testing functions.
  • Modals in the Visual Builder are now prevented from surpassing the top of the browser viewport.
  • Fixed some typos in the Visual Builder.
  • If a settings modal’s size or position exceeds the bounds of the browser viewport, the modal will be forced back into view automatically.
  • Responsive styles set in the Theme Customizer will now render correctly in the Visual Builder when toggling responsive previews.
  • The scrollbar in the Theme Customizer will be be easy to click with your mouse.
  • “Make Section Fullwidth” will now work as expected for Specialty Sections in the Visual Builder.
  • Improved the UX of range sliders in the Divi Builder to adapt when manual values input are greater than the default range.
  • Fixed a bug that caused range input values to inherit the incorrect value when toggling responsive editing mode in the Visual Builder.
  • Empty Specialty Sections will now render correctly in the Backend Builder after being added in the Visual Builder.
  • Native WordPress shortcodes will now render correctly within post content inside of Blog Modules.
  • Fixed visual anomaly in the Slider module when multiple true parallax slides were rendered in the Visual Builder.
  • Slider images will now appear correctly vertically centered when first loaded in the Visual Builder.
  • Video URLs will now be stripped from the post excerpt in Blog modules when the video post format is being used.
  • Fixed browser compatibility issues with Edge and IE 11 that affected the Inline Editor color picker.
  • Fixed an error that occurred when using the Visual Editor mode in TinyMCE that caused new module items, such as Slides and Accordion toggles to fail to save.
  • Made it easier to access settings buttons for Code modules that have a height of 0px.
  • Fixed column padding inconsistencies when rendered in the Visual Builder.
  • Fixed a bug that caused the visual padding marker to overlay Specialty Section buttons in the visual builder.
  • Right Click will now work correctly when right clicking on rows inside of Specialty Sections in the Visual Builder.
  • Fixed a bug that caused some row contents to be hidden inside of Specialty Sections when using the responsive preview modes in the Visual Builder.
  • Fixed a bug that caused sub module item modals (such as individual slide items) to close when the cursor left the confines of the modal.
  • Fixed PHP warning that appeared when WordPress debug was enabled when launching the builder in some situations.
  • Fixed a bug with Lock and Disable keyboard shortcuts that allowed the hotkeys to be mistakenly triggered while typing if the cursor exited the parent module and hovered over a different module while simultaneously pressing the D or L keys.
  • Fixed an issue that caused Theme Customizer button background colors to override background colors set in button module settings.
  • Fixed a JS error that occurred when first clicking into a color picker input field in the Visual Builder that had previously not be used.
  • Adjusted the switch tab keyboard shortcut so that it no longer conflicts with standard tabbing functionality in the browser.
  • Fixed a JS error that occurred when pressing the Esc key while currently focused on a module settings input field in the Visual Builder.
  • Made it easier to edit Code modules in the Visual Builder when they have a visible height of 0px.
  • Fixed a bug that caused auto-saves to be re-applied when editing a post, reverting recent changes while editing a post using the default editor. Line breaks were also stripped in the process.
  • A “#” character will now be added automatically to hex values added in the Visual Builder color picker if the user forgets to add them when typing custom color codes.
  • Backslashes will no longer be stripped from text content when saving in the Visual Builder.
  • Fixed a fatal error the occurred when using the Post Navigation modules with an empty taxonomy filter.
  • Added a new exit modal that warns you when you are leaving the Visual Builder without saving. This modal includes options to conveniently “Save & Exit” or “Discard & Exit.”
  • Header options, such as Hide Navigation Before Scroll and fixed header heights will now render correctly in the Visual Builder.
  • Stripped shortcodes from the output of Divi modules that render complete post content, such as the Blog Module when set to “Show Content.” Unfortunately WordPress does not fully support nested shortcodes.
  • When both the Backend Builder and Visual Builder are open in separate tabs for the same page, changes made and saved in the Visual Builder will be synced to the Backend Builder and updated automatically as part of the WordPress heartbeat.
  • Fixed a bug that caused changes to not be saved in the Visual Builder when the Visual Builder was launched from an unsaved “Preview” page.
  • Improved compatibility with various third party plugins by filtering nested the_content() calls.
  • Improved compatibility with various third party plugins that use wp_head actions inside of admin-ajax calls.
  • Fixed an error that sometimes occurred when moving lonely rows to a new section very very quickly.
  • All WooCommerce buttons will now be correctly styled via the Button settings in the Theme Customizer.
  • Adjusting mobile row heights in the Theme Customizer will no longer affect left/right padding values.
  • Fixed a bug that caused slider background size options on the second slide in the slider to be overwritten by the first slide’s settings in certain situations.
  • Improved the undo/redo mechanism to more accurately record changes made using range sliders in the Visual Builder.
  • Enforced strict row width units in the custom row width option to avoid confusion when editing.
  • Added TinyMCE options for table editing in the Visual Builder module settings modal.
  • Fixed a bug that caused right click to launch the settings modal if a tooltip was open at the same time in the Visual Builder.
  • Fixed JS error that occurred when clicking the Insert Link icon in the Inline Editor.
  • Removed visible height created by empty editable text areas in the Visual Builder that caused slight differences in vertical spacing when compared to the front-end.
  • Fixed an issue when enqueuing Google fronts that included multiple words. All Google fonts will now be loaded correctly when applied using the Visual Builder.
  • Added missing sidebar to the Add Media modal when accessed via the Visual Builder.
  • Fixed a bug that caused button background color customizations to not appear in the Visual Builder when applied for the first time in certain situations.
  • RTL styles will no longer be applied to the Visual Builder when translations have been disabled in the Theme Options.
  • The Visual Builder will now remember your customized UI preferences, such as modal size and position, after a page has been saved.
  • Fixed a bug that caused the Fullscreen Menu to re-opened when clicking the back button in Firefox to a page where the menu had been left open.
  • Removed the slide in animation from Toggle modules in Safari due to a unfixable visual glitch that occurs upon jQuery slide.
  • Fixed a bug that caused the page not to save in the Visual Builder when a section on the page was disabled on all three breakpoints.
  • The button module will no longer throw a JS error when its background color is adjusted.
  • Added a theme option to disable the Google Maps API. Disabling the API call may improve compatibility with third party plugins that duplicate the same API call.
  • Stripped “www.” from the Contact Form from address to avoid certain spam filters.
  • Floating dot navigation will now update automatically when adding new sections in the Visual Builder.
  • Clearing colors in the Visual Builder module settings will now more effectively return the element to its default color.
  • Improved the appearance of the Visual Builder tooltip preloader.
  • The responsive preview modes in the Visual Builder will now more accurately display text alignment settings.
  • Blog pagination will now display correctly in the visual builder when using the WP-Pagenavi plugin.
  • Improved the appearance of the review tab on WooCommerce product pages.
  • Improved usability of “modal snap” left/right in the Visual Builder while Boxed Layout mode is enabled.
  • Fixed a bug that caused inconsistencies when dragging and dropping rows in the Visual Builder within certain layouts containing particular section types.
  • Improved the appearance of module move animations.
  • Active link color adjustments will now render correctly when applied to the Fullwidth Menu module.
  • Fixed the issue that caused the Visual Builder to not load on static homepages in certain hosting environments.
  • The Visual Builder will now load a bit faster.
  • Added informational tooltips to all in-line editor icons in the Visual Builder.
  • Fixed JavaScript error that occurred when clicking the floating side navigation while inside the Visual Builder.
  • Fixed a bug that caused unused fonts to be enqueued on the front-end after using the In-line Editor.
  • Adjusted button module CSS priority to ensure button appearance is the same in the Visual Builder and the front-end.
  • You can now type custom hex color values into the Visual Builder color picker.
  • Fixed a bug that caused the blog module to render incorrectly when adjust post count during Ajax load in the Visual Builder.
  • Added units and values to draggable padding indicators in the Visual Builder.
  • Holding [shift] while dragging section/row padding will now limit padding to 10px increments to make it easier to adjust to commonly-used values.
  • Holding [shift]+[alt] while dragging section/row padding will now drag the padding of the opposite side at the same rate, making it easy to achieve spacing conformity.
  • Holding [alt] while dragging section/row padding will limit the padding value to less than or equal to the opposing padding value.
  • Fixed padding and margin inconsistencies in the Visual Builder when compared to the front-end.
  • Fixed bug that caused Portfolio pagination to display when turned off with the WP-PageNavi plugin enabled.
  • Fixed bug that caused the Max Width setting in Image Modules to not save correctly.
  • Modules will now be colored correctly in Visual Builder in all instances when used as a Split Testing subject or goal.
  • Prevented Visual Builder tooltips from overlaying the WordPress admin bar.
  • Text within Fullwidth Header modules will now be vertically centered correctly in IE.
  • 4-Column rows will now break down correctly when toggling the responsive preview modes in the Visual Builder.
  • Fixed a JavaScript error that occurred when Split Tests were ended but failed to save correctly.
  • Fixed an issue with certain special characters being saved incorrectly in the Visual Builder.
  • Columns with equalized column heights will now appear correctly in the Visual Builder while responsive previews are active.
  • Unpublished posts will no longer appear in post feeds while editing inside the Visual Builder.
  • The blog module will no longer fail to load when switching quickly between different layout modes during Ajax load.
  • Improved compatibility with some caching and CSS minification plugins.
  • Improved compatibility with the Jetpack plugin.
  • Fixed a bug that caused inner rows within Specialty Sections to use the incorrect column class when added via the Visual Builder.
  • “Remove Space Below Image” option for Image Modules will now work correctly inside the Visual Builder.
  • Added additional TinyMCE buttons to the text editor in the Visual Builder module settings modal.
  • Made it easier to drag Fullwidth Section padding in the Visual Builder.
  • Improved CSS selectors used for Tab Module design settings.
  • Improved error message handling for Divi Library imports.
  • Special characters within the Load From Library tooltip will now be correctly decoded.
  • Removed row button group text overlap when using the Inline Editor.
  • Fixed JavaScript error that occurred during responsive preview in the Visual Builder.
  • You can now type color codes into the in-line editor’s color input field.
  • Removed unwanted padding below columns that resulted in a different amount padding in the Visual Builder when compared to the front end.
  • Adjusted tooltip tabs to work better in longer words in alternate languages.
  • CTA buttons will now remain hidden in the Visual Builder when no URL is entered.
  • Fixed issues with the email optin module not working in Firefox.
  • Improved compatibility with third party modules.
  • Custom text color will now correctly override the module’s base color.
  • Fixed issues with the Visual Builder in IE due to unsupported ES2016 syntax.
  • Fixes issues with adding modules into specialty sections.
  • Fixed issue with animated images not appearing outside the Visual Builder.
  • Fixed issue with the Fullwidth Code Module that caused the Visual Builder to fail to save.
  • Fixed an issue with the Portfolio Module that caused the Visual Builder to fail to save for some users.
  • Private pages saved via the Visual Builder will now be saved correctly as private.
  • Fixed various rendering issues with the Audio module when viewed inside the Visual Builder.
  • Disabled modules will now show their current visibility-state while using the responsive preview toggles.
  • Fixed typo in the Row width unit switcher in the Visual Builder.
  • Fixed issue with (+) overlap when footer menu and footer widgets are not present.
  • Fixed issues with Post Navigation module rendering inside the Visual Builder.
  • Right click menu now works correctly for specialty sections.
  • In-line Editor will no longer leave the screen view-port when activated at the top or to the sides of the browser.
  • Improved error handling for library items loading.
  • Added footer credits editor to Theme Customizer.
  • Fixed various third party module conflicts in the Visual Builder.
  • Fixed issue with content width misalignment in the Visual Builder while boxed layout was enabled.
  • Fixed occurrences where the in-line editor did not save properly
  • The save button will now appear automatically when attempting to leave the Visual Builder without saving.
  • Fixed issues with IE11 and the Slider Module when viewed inside the Visual Builder.
  • Fixed problem with the rendering of the divider module height setting in the Visual Builder.

Download Divi 3.0 Today

Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3.0 today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!


Please enter your comment!
Please enter your name here