Tutorials

Create a Gallery Lightbox with Thumbnails from a single image

supamike November 25, 2025 No Comments

Breakdance uses the LightGallery JS library for its lightbox features, so all dependencies are already included. The following code shows how to open a Lightbox gallery with thumbnails when you…

Add a Lightbox to Posts Built with Gutenberg or Classic Editor

supamike October 12, 2025 No Comments

Breakdance includes an integrated LightGallery.js lightbox feature, that works with Wrapper Links and Galleries. What if your posts are created in Gutenberg or the Classic Editor?Follow this quick tutorial to…

How to connect a Breakdance Form to Bit Flows

supamike September 8, 2025 No Comments

Bit Flows (aff link) is an AI-driven workflow automation tool designed for WordPress that offers unlimited workflows and integrations, competing with services like Zapier and n8n. It features a user-friendly…

How to automatically play a Video in a Popup

supamike June 4, 2025 No Comments

Here's how to automatically play an MP4 video when the popup appears. When closed, the video pauses and resumes from the same point upon reopening. Step 1: Set Up Your…

How to add Floating Labels to your forms

supamike May 20, 2025 No Comments

A floating label is a user interface design element where the label for an input field initially sits inside the input and then "floats" above the input when it is…

How to synchronize two sliders

supamike May 16, 2025 No Comments

How about a script that links two sliders to build a proper thumbnail slider? While the existing ThumbSlider custom element covers basic needs, it has some constraints—it only supports images…

How to add WPGridBuilder facets to more than one Loop element on a page

supamike April 13, 2025 No Comments

When you enable the GridbuilderWP option in a Post List or Post Loop Builder element, note that it can only be activated once per page due to a Breakdance limitation—not…

Hoster Plugin: Download Links Shortcode Solution

supamike April 8, 2025 No Comments

The plugin Hoster, by Dplugins, is a WordPress tool that allows developers to launch and manage plugin updates from a private location, bypassing WordPress.org restrictions and providing more control over…

How to change the sticky logo on Scroll

supamike March 10, 2025 No Comments

Here's how to easily change your logo on scroll when your header is sticky. The approach involves layering two logos: the primary logo is visible initially, while the secondary logo…

How to animate each image of the gallery element with GSAP

supamike January 17, 2025 No Comments

If we use the entrance feature on the gallery element, it will affect the entire gallery, as expected. To create an entrance animation on the images themselves, we need to…

How to show ‘no results found’ with WP Grid Builder

supamike March 9, 2024 No Comments

WP GRIDBUILDER may display a "no results found" message only when we use their own grid functionality, but not when we build the grid ourselves, with the Post List or…

How to add sparkles to your text

supamike March 8, 2024 No Comments

Where sparkles dance and web designs breakdance Sparkly Text is a lightweight web component allowing developers to integrate eye-catching animated sparkles, making any text element shine. Customize the count, size,…

How to add the missing alignment style for the RichText element

supamike December 16, 2023 No Comments

Starting with Breakdance 1.7, the RichText element can now use the good old tinyMCE editor. One small problem: the image alignment options don't work in the frontend. Here's an example…

Animated Shape Dividers on Scroll

supamike November 20, 2023 No Comments

With a few lines of code, magically done with GSAP , we can easily animate the shape dividers, which can make a pretty cool effect, especially for a hero section.…

Parallax Effect on Mouse Position with GSAP

supamike November 19, 2023 No Comments

The Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position : Step 1 - The main…

Masonry layout for the Post Loop Builder

supamike October 30, 2023 No Comments

The Post Loop Builder and the Post List elements don't have an option to turn the layout into a MASONRY one. We can only choose between a List, a Grid…

How to create a dark mode toggle in Breakdance

supamike September 18, 2023 No Comments

Oct 2024 update: Javascript code fix by Moussa Khelifi The CSS prefers-color-scheme media query is utilized to identify a user's color scheme preference, allowing for automatic switching between light and…

How to create a Reveal Effect with GSAP

supamike June 28, 2023 No Comments

SUPA COOL REVEAL EFFECT MADE WITH THE FANTASTIC GSAP LIBS FOR BREAKDANCE BUILDER An simple and easy way to add an animated reveal effect to your texts and images. Just…

How to create a floating animation with GSAP

supamike June 22, 2023 No Comments

😜 BREAK DANCE Why using GSAP instead of a basic CSS animation?It's easier to manage, there are more options and the best of all : The animations will only run…

A better search with Relevanssi Search Plugin

supamike June 22, 2023 No Comments

By default, the WordPress search engine doesn't include Breakdance's content because it's stored in a custom field. To fix that "issue", the best and easiest way is to use a…

Category: Tutorials