New Features in Breakdance 2.4

Breakdance 2.4 Beta 1 is now available, and it’s a significant update packed with a number of highly requested features, powerful new elements, and great workflow enhancements. This release brings some serious firepower to your site-building toolkit. You can download the beta in the customer portal. Read on to dive into everything that’s new!

Preview Without Leaving the Builder

Preview Mode in Breakdance 2.4 lets you see exactly how your site will look without leaving the builder. With a single click, the entire Breakdance UI disappears, giving you a full-page, distraction-free preview of your design. When you’re done previewing, simply click “Close Preview” to return to editing.

Use ACF Flexible Content Within Breakdance

Breakdance 2.4 brings full support for ACF Flexible Content fields, making it easier than ever to build dynamic, client-editable pages while keeping full design control. With this integration, you can visually design Global Blocks in Breakdance and map them to specific row layouts in an ACF Flexible Content field-allowing content updates to be handled entirely from WordPress without touching the design.

Setting this up works as follows: first, create a Flexible Content field in ACF with different row layouts, like a hero section, feature cards, or call to action. Then, design matching Global Blocks in Breakdance and use the Flexible Content element to link each ACF layout to its corresponding Global Block. In each Global Block, link the design elements to the associated ACF fields using Breakdance’s normal dynamic data functionality.

The Flexible Content element works like any other loop in Breakdance, so you can display layouts as a list, grid, or slider. You can even structure it so that each Global Block represents a page section. This makes it easy to create complex client-editable layouts, while maintaining a pixel-perfect design. Content updates happen entirely in ACF while Breakdance handles the display.

New Element – Hover Swapper

The new Hover Swapper element in Breakdance 2.4 adds a new way to create interactive and engaging designs. It allows you to swap one element for another when a user hovers over it, making it perfect for things like revealing alternate images, displaying additional information, or adding a fun visual effect to your site.

By default, Hover Swapper is used to swap between two images, but you can place anything inside it, including containers. You can customize the transition effect and control the speed of the animation for a smooth, polished look. Whether you want to create hover-based call-to-actions, reveal additional details on hover, or add subtle micro-interactions, Hover Swapper makes it easy to enhance your designs with movement and interactivity. Make the entire Hover Swapper a link by placing it inside a Wrapper Link element.

Add Icons To Menu Links

In Breakdance 2.0, we introduced the Menu Custom Area element, allowing you to place anything at the top level of a menu. With 2.4, we’ve enhanced the Menu Custom Area element further – it can now be a fully functional menu link, with full support for dropdowns. This means:

• You can add icons, images, or custom elements inside links at the top level of your menu.
• You can use the standard controls for creating a dropdown, just like the Menu Dropdown element.
• You can use a Global Block as the content of the dropdown, just like Menu Custom Dropdown element.

To help you keep everything looking consistent, icons and text inside a menu link can automatically inherit the default link styles set on the menu.

Run Form Actions Conditionally

Breakdance 2.4 adds conditional form actions functionality to our Form Builder. You can now control whether specific actions run based on form field values. For example, you could create a contact form that sends you an email, and also has an optional newsletter signup checkbox – if the user checks the box, they’ll be subscribed to your list, if not, they can still submit the form and send you an email – they just won’t be subscribed to your list.

WooCommerce Product Lists – Show 2nd Image On Hover

A Show Second Image on Hover toggle has been added to the Shop Page and Products List elements. Enable this option to show the next image in the product gallery when hovering over a product. This is perfect for showcasing additional product imagery directly from the shop page, and improves the shopping experience by giving customers more visual information at a glance.

Image Element – Double Click To Open The Media Library

New in Breakdance 2.4, simply double-click any Image element in the builder to instantly open the WordPress media library. The currently selected image will now be automatically highlighted in the media library when you open it. This makes it much easier to swap or update images, especially when working with large libraries.

New Element – Overlapped Images

The new Overlapped Images element in Breakdance 2.4 makes it easy to create visually striking layouts by layering images on top of each other. You can freely arrange images inside the Overlapped Images element, adjusting their position, size, and layering to achieve the perfect composition. Whether you’re creating artistic collages or showcasing product photography, Overlapped Images gives you full creative control. The element also supports responsive settings, ensuring your composition looks great on all devices.

Changelog

General

• New – ACF Flexible Content is now usable in Breakdance.
• Enhancement – Page rendering is now cached during a single request.
• Fix – The “Edit in Breakdance” button on pages in the toolbar is now on one line.
• Fix – Saving a Global Block with the same name no longer triggers a warning.

Builder

• New – You can now preview your designs with Preview Mode.
• Enhancement – Quick Navigator allows you to toggle the active state of Breakdance templates.
• Enhancement – You can now rename a Global Block from the Quick Navigator.
• Enhancement – You can now double-click an image in Breakdance to open the Media Library.
• Tweak – When creating a new post through the Quick Navigator it will appear at the top of the navigation list.
• Tweak – The Quick Navigator scrolls to the top when new results are loaded.
• Tweak – Added autofocus to the create post input for the Quick Navigator.
• Tweak – Pressing enter now submits the post creation form from the Quick Navigator.
• Tweak – The currently selected image will show in the Media Library when editing it in Breakdance.
• Tweak – Improved the Link Input control to remove overlap.
• Fix – Typing “custom” as a unit measurement now properly removes the text and allows you to input a unit.
• Fix – Undefined or incorrect conditions in the Query Builder for Loop elements no longer break the loop.
• Fix – Dynamic Data no longer sends excessive requests when typing in the Advanced controls for a Dynamic Data Point.
• Fix – The PHP Data Point now allows code to be written inside of it directly instead of requiring the use of a function.

Elements

• New – Hover Swapper element.
• New – Overlapped Images element.
• Enhancement – Menu Custom Area element now includes a Link control.
• Enhancement – The Menu Custom Area element includes the option to inherit link styles for both text and icons.
• Enhancement – The Menu Custom Area element now supports the option to enable a Dropdown. You can use either Menu Dropdowns or a Global Block.
• Enhancement – The Table of Contents element now includes support for Headings Offset.
• Tweak – The Lazy Load setting is enabled by default for all applicable elements.
• Tweak – Text elements now support the figcaption tag.
• Fix – Gallery elements now support inserting an image by URL.
• Fix – A custom button with a background gradient and an outline will no longer trigger an error.
• Fix – the Justified layout for Gallery Elements now supports responsive controls.

Forms

• New – Form Builder Conditions are now able to be run conditionally.

WooCommerce

• Enhancement – It is now possible to show the second image of a Product on hover for the Products List element.

Element Studio

• Tweak – Figcaption tag is an available tag for elements.