{"id":259321,"date":"2025-03-15T11:43:56","date_gmt":"2025-03-15T07:43:56","guid":{"rendered":"https:\/\/cs-webdesigns.com\/?p=259321"},"modified":"2025-07-03T20:27:58","modified_gmt":"2025-07-03T16:27:58","slug":"breakdance-2-4","status":"publish","type":"post","link":"https:\/\/cs-webdesigns.com\/en\/webinsights\/news\/breakdance\/breakdance-2-4\/","title":{"rendered":"Breakdance 2.4 - The most important new features"},"content":{"rendered":"<p>Breakdance has recently released information for the next update - version 2.4. Many in the Breakdance community believe that it is the best update since version 2.<\/p>\n<h2>The most important new features of Breakdance 2.4 at a glance:<\/h2>\n<h3>Preview mode in the Builder<\/h3>\n<p>With the new preview mode, you can view your website directly in the builder in full-screen view. This saves you time for buffering and opening the page in a new tab.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-259325\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/03\/Vorschau-Modus-in-Breakdance-2.4.jpg\" alt=\"Preview Mode in Breakdance 2.4\" width=\"445\" height=\"71\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/03\/Vorschau-Modus-in-Breakdance-2.4.jpg 445w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/03\/Vorschau-Modus-in-Breakdance-2.4-18x3.jpg 18w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/p>\n<h3>Integration of ACF Flexible Content<\/h3>\n<p>According to the community, this is the game changer of this update. The integration of ACF Flexible Content allows you to create dynamic pages with a protected design. Content can be updated directly via WordPress without having to adjust the layout or go to the builder. By linking global blocks in Breakdance with specific layouts in ACF, you can implement flexible and client-editable layouts.<\/p>\n<p><strong>As there has been some discussion about this, here is a practical use case as an example:<\/strong> As a web designer, you can use it to create protected templates, e.g. for landing pages, which the customer can then fill with content (images, text, etc.) without destroying the design in any way. This is certainly not for all customers, but for those who want to actively collaborate, it is definitely a great enrichment.<\/p>\n<h3>New element: Hover Swapper<\/h3>\n<p>With the new hover swapper element, content can be replaced dynamically on hover. Ideal for showing alternative images, providing additional information or incorporating visual effects. The transitions can be customized so that they fit perfectly into the design.<\/p>\n<p>Until now, this could only be implemented in a roundabout way with backgrounds and animation effects in the wrapper.<\/p>\n<h3>Icons in Menu<\/h3>\n<p>Icons, images or other elements can now also be integrated into the top menu level. Menu items can also be combined with dropdowns that use either standard menu dropdowns or global blocks. This gives us even more design options for the navigation.<\/p>\n<h3>Conditional form actions for actions<\/h3>\n<p>The Form Builder now has Conditions, which allow you to perform actions based on whether a condition is met.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-259525\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/06\/Breakdance-Form-Builder-Aktionen.jpg\" alt=\"Breakdance Form Builder Actions\" width=\"264\" height=\"376\" srcset=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/06\/Breakdance-Form-Builder-Aktionen.jpg 264w, https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/06\/Breakdance-Form-Builder-Aktionen-8x12.jpg 8w\" sizes=\"(max-width: 264px) 100vw, 264px\" \/>\u00a0 <img decoding=\"async\" class=\"alignnone wp-image-259527\" src=\"https:\/\/cs-webdesigns.com\/wp-content\/uploads\/2025\/06\/Breakdance-Condition-Custom-JavaScript.jpg\" alt=\"Breakdance Condition Custom JavaScript\" width=\"263\" height=\"372\" \/><\/p>\n<p>For example, a custom JavaScript can only be executed if a certain field in the form has been filled in.<\/p>\n<p>Personally, I would like the conditions to be one level deeper. Then one could send different emails depending on the selection (e.g., a \u201eSubject\u201e selection field) to different recipients (e.g., to support@, if \u201cSupport\" is selected).<\/p>\n<p>This can currently only be solved with a trick. Here you can find my tutorial on <a href=\"https:\/\/cs-webdesigns.com\/en\/webinsights\/tutorials\/dynamically-set-email-recipient-in-breakdance\/\"><strong>Dynamic Email Recipients in Breakdance<\/strong><\/a>.<\/p>\n<h3>Second Product Image on hover in WooCommerce<\/h3>\n<p>In the WooCommerce product lists, there is now a function that automatically changes the product image to the second product image when hovering. This is familiar from other WooCommerce themes. A nice and useful effect to make the design more intuitive.<\/p>\n<h3>Double-click to open the Media Library<\/h3>\n<p>Small but nice extension of the image element: Instead of clicking on the image and then clicking on Image in the sidebar, you can now open the media library directly by double-clicking and selecting your desired image.<\/p>\n<h3>New element: Overlapping Images<\/h3>\n<p>The new \u201eOverlay Image\u201c element allows you to arrange images creatively. You can place them overlapping, adjust their size and position and use them to create appealing layouts.<\/p>\n<h2>Conclusion<\/h2>\n<p>I think the new version has some helpful functions and improvements that make our lives a little easier. I will soon be testing my practical example of ACF Flexible Contents with a customer. It could really be a great asset.<\/p>\n<p>You can find the official contribution from Breakdance <a href=\"https:\/\/breakdance.com\/breakdance-2-4\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">here<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Breakdance update news for version 2.4. Many in the community think it's the best update since V2. Find out why.<\/p>","protected":false},"author":1,"featured_media":259326,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"breakdance 2.4, 2.4, Vorschau im Builder, ACF, Hover Swapper, Bedingte Formularaktionen","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":47,"footnotes":""},"categories":[461],"tags":[466,465],"class_list":["post-259321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-breakdance","tag-release","tag-update"],"_links":{"self":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/259321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/comments?post=259321"}],"version-history":[{"count":0,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/posts\/259321\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media\/259326"}],"wp:attachment":[{"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/media?parent=259321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/categories?post=259321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cs-webdesigns.com\/en\/wp-json\/wp\/v2\/tags?post=259321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}