What's New In Breakdance v2 - Bilingual Subtitles
Hey, this is Lewis from Breakdance and in this video
Translate.Error: 500 switch translate engine.
I'm gonna show you the great new stuff coming to Breakdance version 2 and before we get started
Translate.Error: 500 switch translate engine.
I would like to issue a huge thank you to everybody who submitted feature requests
Translate.Error: 500 switch translate engine.
Everybody who submitted bug reports everybody who submitted support tickets your feedback has been
Translate.Error: 500 switch translate engine.
invaluable in helping us shape this product and helping us make breakdance version two as good as it is.
Translate.Error: 500 switch translate engine.
So thank you.
Translate.Error: 500 switch translate engine.
There is, there's more breakdance version two than I can cover in this video.
Translate.Error: 500 switch translate engine.
We're gonna try to keep it to, you know, 45 minutes to an hour.
Translate.Error: 500 switch translate engine.
Check the change log for all of the polish because there's tons of little details.
Translate.Error: 500 switch translate engine.
that we polished, tons of little enhancements.
Translate.Error: 500 switch translate engine.
I cover them all in this video.
Translate.Error: 500 switch translate engine.
In this video, I'm gonna try to cover a lot of the big picture stuff and some of the small picture stuff.
Translate.Error: 500 switch translate engine.
Okay, without further ado, let's get started.
Translate.Error: 500 switch translate engine.
Design presets are a brand new feature in Breakdance version 2, and will revolutionize the way you design, and save you a ton of time.
Translate.Error: 500 switch translate engine.
With presets,
Translate.Error: 500 switch translate engine.
you can save in elements design settings,
Translate.Error: 500 switch translate engine.
and then apply those settings to other elements of the same type in Whenever you update a preset,
Translate.Error: 500 switch translate engine.
the changes will instantly reflect across all of the elements that use it, making site-wide adjustments a breeze.
Translate.Error: 500 switch translate engine.
Let's go ahead and edit the preset that I have applied to all four of these image hover cart elements.
Translate.Error: 500 switch translate engine.
So we'll go to the Design tab, here's the preset, let's click the Edit button, and now let's change the Overlay Color.
Translate.Error: 500 switch translate engine.
So I'll go right here,
Translate.Error: 500 switch translate engine.
and let's choose a lighter blue, and as you can see, that applies to all of the elements that use this preset.
Translate.Error: 500 switch translate engine.
Let's say I to change the image zoom effect, right now it blurs on hover, let's change that to zoom in.
Translate.Error: 500 switch translate engine.
over the image now zooms in, and that applies to all of the elements that use that preset.
Translate.Error: 500 switch translate engine.
On this page, I have a number of icon boxes.
Translate.Error: 500 switch translate engine.
I've applied the same preset to each icon box, so let's go ahead and edit that preset.
Translate.Error: 500 switch translate engine.
And as you can see,
Translate.Error: 500 switch translate engine.
the changes are going to apply to all of the icon boxes, even though I'm just editing the preset one time.
Translate.Error: 500 switch translate engine.
Now, let's see we want to add another icon box below the existing icon boxes.
Translate.Error: 500 switch translate engine.
Let's go to Add,
Translate.Error: 500 switch translate engine.
let's find Icon Box,
Translate.Error: 500 switch translate engine.
let's drag it onto the page,
Translate.Error: 500 switch translate engine.
and the other ones don't have a button,
Translate.Error: 500 switch translate engine.
so I'm going to go ahead and clear out the button on this one,
Translate.Error: 500 switch translate engine.
and now to apply the preset from these icon boxes to this icon box,
Translate.Error: 500 switch translate engine.
we'll just go to the Design tab and go to the preset drop down.
Translate.Error: 500 switch translate engine.
the same preset we for the other icon boxes.
Translate.Error: 500 switch translate engine.
And voila, this icon box now looks exactly like all of the other ones.
Translate.Error: 500 switch translate engine.
Here I have four images.
Translate.Error: 500 switch translate engine.
Let's go to the design tab.
Translate.Error: 500 switch translate engine.
And as you can see, I've applied a preset to this image.
Translate.Error: 500 switch translate engine.
I've also applied the same preset to the other three images.
Translate.Error: 500 switch translate engine.
So let's edit the preset.
Translate.Error: 500 switch translate engine.
And now the changes I make to this preset are going to apply to all of the images that use it.
Translate.Error: 500 switch translate engine.
So let's go ahead and go to borders and let's change the radius from 0 to 40.
Translate.Error: 500 switch translate engine.
And as you can see, they now all have a 40 pixel radius.
Translate.Error: 500 switch translate engine.
Let's go to image and go to the aspect ratio and let's make these a bit taller.
Translate.Error: 500 switch translate engine.
And as you can see, that is affecting each image with the pre- it.
Translate.Error: 500 switch translate engine.
Let's create a preset.
Translate.Error: 500 switch translate engine.
So I have a button element.
Translate.Error: 500 switch translate engine.
Let's go ahead and customize the design as we like.
Translate.Error: 500 switch translate engine.
So I'm going to make this a yellow button, and I'm going to make it have square corners.
Translate.Error: 500 switch translate engine.
Now let's save this design as a preset so we can apply it to other buttons.
Translate.Error: 500 switch translate engine.
So we're going to up to the design preset drop down, choose create preset from design, and I'm going to call this one yellow button.
Translate.Error: 500 switch translate engine.
Let's go ahead and save that.
Translate.Error: 500 switch translate engine.
And now let's go to some other buttons on our site.
Translate.Error: 500 switch translate engine.
And let's do that.
Translate.Error: 500 switch translate engine.
And as you can see, the preset is applied to the button.
Translate.Error: 500 switch translate engine.
It's applied to this one.
Translate.Error: 500 switch translate engine.
There we go.
Translate.Error: 500 switch translate engine.
Let's say we wanted to add a new button, maybe right here.
Translate.Error: 500 switch translate engine.
Let's just go to the add panel, choose button, add the button.
Translate.Error: 500 switch translate engine.
And let's go to the design tab and choose the yellow button preset.
Translate.Error: 500 switch translate engine.
And there we go.
Translate.Error: 500 switch translate engine.
And now if we edit this preset, for example, maybe we want to make the button have rounded corners.
Translate.Error: 500 switch translate engine.
We've done that there.
Translate.Error: 500 switch translate engine.
And that's affected all of the other buttons that use the preset.
Translate.Error: 500 switch translate engine.
To see and edit all of the presets you've created, go to the dot dot dot menu and click Design Presets.
Translate.Error: 500 switch translate engine.
Here, you get a list of presets you've created grouped by element type.
Translate.Error: 500 switch translate engine.
To edit a preset, click the Edit icon.
Translate.Error: 500 switch translate engine.
Let's edit the border icon.
Translate.Error: 500 switch translate engine.
When I choose to edit this preset,
Translate.Error: 500 switch translate engine.
because I haven't selected an element that has this preset applied to it, it warns me that I should do that.
Translate.Error: 500 switch translate engine.
That way, I'll be able to see my changes in real time.
Translate.Error: 500 switch translate engine.
So let's go ahead and click this element, which has the bordered icon box preset applied to it.
Translate.Error: 500 switch translate engine.
And now I can edit the preset.
Translate.Error: 500 switch translate engine.
So let's go to Container and let's customize.
Translate.Error: 500 switch translate engine.
And as you can see, these changes are affecting all elements that use that preset.
Translate.Error: 500 switch translate engine.
set.
Translate.Error: 500 switch translate engine.
To customize the design of an element that has a preset applied to it, detach the preset from the element.
Translate.Error: 500 switch translate engine.
So here I have an icon box.
Translate.Error: 500 switch translate engine.
It has the border icon box preset applied.
Translate.Error: 500 switch translate engine.
I will click the detach styles button.
Translate.Error: 500 switch translate engine.
This will apply the styles in the preset to the element.
Translate.Error: 500 switch translate engine.
Now I can add at the element level, and my changes won't affect other elements, they use the preset.
Translate.Error: 500 switch translate engine.
For example,
Translate.Error: 500 switch translate engine.
let's go to Container and change the background color,
Translate.Error: 500 switch translate engine.
and then let's go to Typography and change the text color for both the title and the text.
Translate.Error: 500 switch translate engine.
And now as you can see,
Translate.Error: 500 switch translate engine.
we've customized this icon box using the preset as a starting point without affecting other elements that use that preset.
Translate.Error: 500 switch translate engine.
Let's take a look at the revolutionary new layout engine in Breakdance version 2.
Translate.Error: 500 switch translate engine.
Our new layout controls are designed with beginners in mind,
Translate.Error: 500 switch translate engine.
and make it easy to create vertical, horizontal, and grid layouts that are totally responsive, without any technical knowledge.
Translate.Error: 500 switch translate engine.
For the professionals and coders among us,
Translate.Error: 500 switch translate engine.
Breakdance V2 now gives you direct access to CSS Flexbox and So whether you're just starting out or you're a seasoned creator,
Translate.Error: 500 switch translate engine.
the layout engine is crafted to cater to all levels of expertise, ensuring everyone can achieve exceptional results with ease.
Translate.Error: 500 switch translate engine.
Let's create some layouts using these controls.
Translate.Error: 500 switch translate engine.
Here I have a section that contains a heading,
Translate.Error: 500 switch translate engine.
text, Let's go to the layout controls, and we want the items in this section to stack vertically, one after the other.
Translate.Error: 500 switch translate engine.
So we'll click the vertical icon.
Translate.Error: 500 switch translate engine.
Then we want to align the items.
Translate.Error: 500 switch translate engine.
We align them left, center, or right.
Translate.Error: 500 switch translate engine.
Let's choose center.
Translate.Error: 500 switch translate engine.
Let's vertically align them center.
Translate.Error: 500 switch translate engine.
So we'll choose the vertical align center option.
Translate.Error: 500 switch translate engine.
And then let's space them out using gap.
Translate.Error: 500 switch translate engine.
That was easy.
Translate.Error: 500 switch translate engine.
Next up, let's create a horizontal layout.
Translate.Error: 500 switch translate engine.
Here I have a div that contains a menu and a button, and I want to put the button over here, horizontal to the menu.
Translate.Error: 500 switch translate engine.
Let's go to Layout, let's choose Horizontal, now under a line, let's choose Space between the items, and for vertical a line, let's choose.
Translate.Error: 500 switch translate engine.
center.
Translate.Error: 500 switch translate engine.
And voila, it's that easy to create a horizontal layout.
Translate.Error: 500 switch translate engine.
Now, let's make a grid layout.
Translate.Error: 500 switch translate engine.
Here, I have a div element with six icon boxes, and I'd like to display them in a grid.
Translate.Error: 500 switch translate engine.
Let's go to layout, click the grid icon, and let's start with three items per row.
Translate.Error: 500 switch translate engine.
And it is that easy.
Translate.Error: 500 switch translate engine.
We now have them displayed in a nice grid.
Translate.Error: 500 switch translate engine.
Now, let's make it responsive.
Translate.Error: 500 switch translate engine.
So let's go down to a smaller breakpoint.
Translate.Error: 500 switch translate engine.
Still looks good at three.
Translate.Error: 500 switch translate engine.
Let's go down to a smaller breakpoint.
Translate.Error: 500 switch translate engine.
Let's change that setting to two on that breakpoint.
Translate.Error: 500 switch translate engine.
Let's go down to a smaller breakpoint, and here we'll change it to one.
Translate.Error: 500 switch translate engine.
And voila, that how easy it is to create a responsive grid in breakdance using the new layout.
Translate.Error: 500 switch translate engine.
For learning purposes, let's reproduce this layout.
Translate.Error: 500 switch translate engine.
We won't use the CSS Flexbox or CSS Grid controls.
Translate.Error: 500 switch translate engine.
We'll just use the beginner-friendly layout controls.
Translate.Error: 500 switch translate engine.
So go ahead and add in a new section.
Translate.Error: 500 switch translate engine.
Let's copy this, so we'll just set the background color to the same thing, or copy and then paste.
Translate.Error: 500 switch translate engine.
Now let's go ahead and copy this button in.
Translate.Error: 500 switch translate engine.
So command C,
Translate.Error: 500 switch translate engine.
command V to paste,
Translate.Error: 500 switch translate engine.
let's copy this heading in,
Translate.Error: 500 switch translate engine.
command C,
Translate.Error: 500 switch translate engine.
click in the section you wanna paste in,
Translate.Error: 500 switch translate engine.
command V to paste, and we've spaced out the button by simply mousing over the bottom of the button and drag to add to spacing.
Translate.Error: 500 switch translate engine.
Okay, next up, we have these two columns of content.
Translate.Error: 500 switch translate engine.
We have a column that contains a grid of images,
Translate.Error: 500 switch translate engine.
and we have another column that contains a testimonial,
Translate.Error: 500 switch translate engine.
and then an image that is horizontal to the name and location of the testimonial author, and then those are vertically centered with the image.
Translate.Error: 500 switch translate engine.
So let's create that.
Translate.Error: 500 switch translate engine.
So to do that, we're going to go ahead and add columns.
Translate.Error: 500 switch translate engine.
add columns, and we want two columns.
Translate.Error: 500 switch translate engine.
And in the left column, we want all of these images.
Translate.Error: 500 switch translate engine.
So let's just copy and paste.
Translate.Error: 500 switch translate engine.
So command C, command V on Windows, that's control, or you can right click, copy and paste.
Translate.Error: 500 switch translate engine.
Third image, fourth image, fifth fifth image.
Translate.Error: 500 switch translate engine.
image.
Translate.Error: 500 switch translate engine.
And now we want these to display in a grid.
Translate.Error: 500 switch translate engine.
So we're going to go to the column, we'll go to layout, and we're simply going to choose grid.
Translate.Error: 500 switch translate engine.
And we want this to be a three column grid.
Translate.Error: 500 switch translate engine.
And there we go, if now reproduce that.
Translate.Error: 500 switch translate engine.
Now let's go ahead and reproduce the layout of the testimonial.
Translate.Error: 500 switch translate engine.
So do that, we're going to copy the testimonial text.
Translate.Error: 500 switch translate engine.
and there's some space below that and then there's going to be some space above this.
Translate.Error: 500 switch translate engine.
This is going to be the tricky part.
Translate.Error: 500 switch translate engine.
How are we going to add an image and then put that horizontally and that vertically and these both group horizontally.
Translate.Error: 500 switch translate engine.
To do that we're going to use a div element.
Translate.Error: 500 switch translate engine.
A div element lets you group other elements and lay them out individually.
Translate.Error: 500 switch translate engine.
So let's Let's add a div to that column,
Translate.Error: 500 switch translate engine.
inside the div, we're going to add this image, and then inside the div, we're going to add another div.
Translate.Error: 500 switch translate engine.
And that's going to allow us to group these vertically, but group this and the other div horizontally.
Translate.Error: 500 switch translate engine.
So let's open the structure panel so you can see what's happening here.
Translate.Error: 500 switch translate engine.
We have a div.
Translate.Error: 500 switch translate engine.
let's add another div next to the image.
Translate.Error: 500 switch translate engine.
Now we have a div next to the image.
Translate.Error: 500 switch translate engine.
Inside that div we're going to add in our testimonial author name and our testimonial author location.
Translate.Error: 500 switch translate engine.
And now let's go to this parent div that contains all of it.
Translate.Error: 500 switch translate engine.
And let's go to layout and stack horizontally.
Translate.Error: 500 switch translate engine.
Now let's go to gap and lets it vertically align center.
Translate.Error: 500 switch translate engine.
And it's kind of a strange font, I think I'm going to add a little spacing.
Translate.Error: 500 switch translate engine.
low, so it's visually centered.
Translate.Error: 500 switch translate engine.
Not just centered as far as the browser is concerned, but is centered as far as the eye is concerned.
Translate.Error: 500 switch translate engine.
And that looks pretty good.
Translate.Error: 500 switch translate engine.
And now let's double check.
Translate.Error: 500 switch translate engine.
Looks like we got a little more spacing below this thing.
Translate.Error: 500 switch translate engine.
So I'm just going to click here and add a little bit more spacing.
Translate.Error: 500 switch translate engine.
And looks like this column is maybe a little bit narrower.
Translate.Error: 500 switch translate engine.
So let's mouse over the column, click it, and then just.
Translate.Error: 500 switch translate engine.
to shrink that column just a little bit.
Translate.Error: 500 switch translate engine.
And there we go.
Translate.Error: 500 switch translate engine.
We've nearly reproduced this layout.
Translate.Error: 500 switch translate engine.
Let's add a little bit more spacing between the two columns.
Translate.Error: 500 switch translate engine.
So let's go to the parent columns element and let's go to spacing column gap.
Translate.Error: 500 switch translate engine.
Let's make that say 80 pixels.
Translate.Error: 500 switch translate engine.
And by default, the grid gap is going to inherit the column gap.
Translate.Error: 500 switch translate engine.
We don't want that here.
Translate.Error: 500 switch translate engine.
So we'll click back to this column and under space between items, we'll set that to say 30.
Translate.Error: 500 switch translate engine.
And that looks pretty good.
Translate.Error: 500 switch translate engine.
In breakdance v.
Translate.Error: 500 switch translate engine.
box is directly accessible in the layout controls.
Translate.Error: 500 switch translate engine.
Go to Layout, click the Cogs, and then click Flex, and you'll have all of the CSS Flexbox properties here.
Translate.Error: 500 switch translate engine.
Flex Direction, Alight Items, Justify Content, etc.
Translate.Error: 500 switch translate engine.
This is an example layout I've created with Flex box.
Translate.Error: 500 switch translate engine.
It's important to note that this same layout can be created with the beginner friendly layout controls.
Translate.Error: 500 switch translate engine.
These flex box controls are here for the die hard flex box users,
Translate.Error: 500 switch translate engine.
people who think in divs, who think in CSS, who think in HTML, and are familiar with this.
Translate.Error: 500 switch translate engine.
But this is by no means better than the beginner friendly layout controls.
Translate.Error: 500 switch translate engine.
Let's take a look at this layout as it's created with flex box.
Translate.Error: 500 switch translate engine.
So here we have div is display flex, flex direction column, line items, flex start with 15 pixels a gap.
Translate.Error: 500 switch translate engine.
This div is inside another div, and that div has the button, and then this div is stacked horizontally with flex box.
Translate.Error: 500 switch translate engine.
So flex direction, roll a line items center, justify content, space between it.
Translate.Error: 500 switch translate engine.
This section is flex box with 60 pixels of gap, then we've got an image, then we have another div.
Translate.Error: 500 switch translate engine.
This div has negative 210 pixels of margin on it so it overlaps.
Translate.Error: 500 switch translate engine.
And this div is, well, I made it horizontal, but could do it flex box as well.
Translate.Error: 500 switch translate engine.
You could just go here, go flex, flex direction, row, set gap.
Translate.Error: 500 switch translate engine.
What did I have in there?
Translate.Error: 500 switch translate engine.
60, 30.
Translate.Error: 500 switch translate engine.
And there we go.
Translate.Error: 500 switch translate engine.
Same thing.
Translate.Error: 500 switch translate engine.
You tell me that's easier than using the horrid on to controls though.
Translate.Error: 500 switch translate engine.
It certainly is not.
Translate.Error: 500 switch translate engine.
So for the die hard flex box users, I'd really encourage you to take a look at the beginner friendly layout controls.
Translate.Error: 500 switch translate engine.
Let's take a look at the same layout created with the beginner friendly controls and it's much simpler.
Translate.Error: 500 switch translate engine.
Layout stacked vertically.
Translate.Error: 500 switch translate engine.
And here we have a div stacked vertically.
Translate.Error: 500 switch translate engine.
Here we have a div stacked horizontally.
Translate.Error: 500 switch translate engine.
Here we have two columns.
Translate.Error: 500 switch translate engine.
Of course, they stack horizontally.
Translate.Error: 500 switch translate engine.
They've got 30 pixels a gap.
Translate.Error: 500 switch translate engine.
And if we look at each individual column, stack the content vertically, align it left vertically align a center and gap it out 15 pixels.
Translate.Error: 500 switch translate engine.
That is easier.
Translate.Error: 500 switch translate engine.
These beginner friendly controls are extremely powerful.
Translate.Error: 500 switch translate engine.
So again, flex boxes there, if you want it, but 99.9% of the time, you won't need it.
Translate.Error: 500 switch translate engine.
New and breakdance version two, the full power of CSS grid is directly accessible in the layout controls.
Translate.Error: 500 switch translate engine.
Go to layout, click the cogs and then choose display grid.
Translate.Error: 500 switch translate engine.
And here you have the CSS properties for grid.
Translate.Error: 500 switch translate engine.
We aren't limiting you with a visual grid builder.
Translate.Error: 500 switch translate engine.
If you want one of those,
Translate.Error: 500 switch translate engine.
you can use your favorite visual grid builder simply paste in the CSS value for the grid property into the appropriate box and breakdance.
Translate.Error: 500 switch translate engine.
And you'll have your grid.
Translate.Error: 500 switch translate engine.
Let's go ahead and make a three column grid.
Translate.Error: 500 switch translate engine.
So I'm going to go auto slash repeat a three one out far.
Translate.Error: 500 switch translate engine.
And there's my three column grid.
Translate.Error: 500 switch translate engine.
Let's go ahead and add in a gap.
Translate.Error: 500 switch translate engine.
So there's 40 pixels of it.
Translate.Error: 500 switch translate engine.
gap.
Translate.Error: 500 switch translate engine.
And again, you can put in any valid CSS value in this box for unlimited power.
Translate.Error: 500 switch translate engine.
Let's go ahead and take a at the grid child controls.
Translate.Error: 500 switch translate engine.
So here I've got my section, I've got my six divs inside of it.
Translate.Error: 500 switch translate engine.
Let's collapse and then expand so we can see that one are easily six divs.
Translate.Error: 500 switch translate engine.
Let's go to this div and let's go to the grid child controls.
Translate.Error: 500 switch translate engine.
There's a keyboard shortcut that I'm going to use here and I'm going to show you how to
Translate.Error: 500 switch translate engine.
use later in the video because we've got a ton of those in breakdance version two.
Translate.Error: 500 switch translate engine.
We're going to use shift F.
Translate.Error: 500 switch translate engine.
Then type grid and the grid controls pop right up.
Translate.Error: 500 switch translate engine.
Let's say we want this one, two, span two columns.
Translate.Error: 500 switch translate engine.
We're gonna go grid column and span two.
Translate.Error: 500 switch translate engine.
And there we go, the full power of CSS grid available in breakdance.
Translate.Error: 500 switch translate engine.
We've added a keyboard shortcut to immediately start typing in custom CSS code.
Translate.Error: 500 switch translate engine.
Click any element, type CSS on the keyboard and the custom CSS box will come up.
Translate.Error: 500 switch translate engine.
It'll automatically be focused and you can just immediately start.
Translate.Error: 500 switch translate engine.
Let's take a look at the new migration mode feature in breakdance version.
Translate.Error: 500 switch translate engine.
Migration mode lets you easily upgrade an existing WordPress website to Breakdance without
Translate.Error: 500 switch translate engine.
any disruption to your normal visitors without the need for a staging environment.
Translate.Error: 500 switch translate engine.
It's very easy.
Translate.Error: 500 switch translate engine.
All you have to do is install Breakdance on your existing website and enable Migration mode.
Translate.Error: 500 switch translate engine.
The Breakdance version of your website will only appear for you and people you select.
Translate.Error: 500 switch translate engine.
All other visitors will see your original website.
Translate.Error: 500 switch translate engine.
You can build whatever you want with Breakdance, and once you're ready, turn off Migration mode to launch your newly built Breakdance website.
Translate.Error: 500 switch translate engine.
Traditional staging environments can be a big headache for e-commerce sites and other sites where data is constantly changing.
Translate.Error: 500 switch translate engine.
Imagine copying a to a staging server,
Translate.Error: 500 switch translate engine.
redesigning it,
Translate.Error: 500 switch translate engine.
and then by the time you're ready to launch,
Translate.Error: 500 switch translate engine.
your existing website got new user sign-ups, new orders, new products were added, blog posts were added, stock changed, etc.
Translate.Error: 500 switch translate engine.
Thinking those changes back from your live site to the staging environment is not straightforward.
Translate.Error: 500 switch translate engine.
significant data merge challenges.
Translate.Error: 500 switch translate engine.
Migration mode solves that problem.
Translate.Error: 500 switch translate engine.
You can continue to process orders, take user registrations and everything else without the complication of staging environments or data sync.
Translate.Error: 500 switch translate engine.
Okay, let's take a look at how the feature works.
Translate.Error: 500 switch translate engine.
So here I have a little demo site set up by installed Elementor and WooCommerce and let's
Translate.Error: 500 switch translate engine.
just go to the shop page and see what's going on here.
Translate.Error: 500 switch translate engine.
So here is the Elementor version of the site and it's got,
Translate.Error: 500 switch translate engine.
you know, shop page product, just default element or stock styles, you can go to the checkout, whatever.
Translate.Error: 500 switch translate engine.
Okay, let's say we're going to rebuild this with breakdance.
Translate.Error: 500 switch translate engine.
So let's go to plugins, let's activate breakdance.
Translate.Error: 500 switch translate engine.
And let's activate breakdance migration mode.
Translate.Error: 500 switch translate engine.
So migration mode is going to run breakdance only for the specified IP addresses, including yours.
Translate.Error: 500 switch translate engine.
It's going to automatically detect yours when you activate it.
Translate.Error: 500 switch translate engine.
So let's activate that.
Translate.Error: 500 switch translate engine.
And now the site is running breakdance for me only all normal visitors will see the Elementor version of the website.
Translate.Error: 500 switch translate engine.
Okay, let's start rebuilding with breakdance.
Translate.Error: 500 switch translate engine.
So for purposes of this demo, I'll just install some.
Translate.Error: 500 switch translate engine.
library.
Translate.Error: 500 switch translate engine.
So go to breakdance design library.
Translate.Error: 500 switch translate engine.
And let's go ahead and install this design.
Translate.Error: 500 switch translate engine.
So I'll click import.
Translate.Error: 500 switch translate engine.
Okay, that's imported.
Translate.Error: 500 switch translate engine.
Let's go over two pages and let's take a look at our shop page.
Translate.Error: 500 switch translate engine.
Let's view that.
Translate.Error: 500 switch translate engine.
cool.
Translate.Error: 500 switch translate engine.
So there that is.
Translate.Error: 500 switch translate engine.
Let's take a look at the product page.
Translate.Error: 500 switch translate engine.
And as you can see, we're now viewing the breakdance version of the website.
Translate.Error: 500 switch translate engine.
Now, let's take a look at the website from a different IP address.
Translate.Error: 500 switch translate engine.
I've switched IP addresses here.
Translate.Error: 500 switch translate engine.
So I'm just viewing the website as if I was a normal visitor.
Translate.Error: 500 switch translate engine.
And let's see what we see.
Translate.Error: 500 switch translate engine.
the original website, and I can keep browsing this.
Translate.Error: 500 switch translate engine.
I could place orders.
Translate.Error: 500 switch translate engine.
I could use the existing website exactly as if breakdance was never installed.
Translate.Error: 500 switch translate engine.
If I'm a normal visitor and only the admin and people you specify can it be the breakdance version of the website.
Translate.Error: 500 switch translate engine.
What should you do if you're using breakdance migration mode and your IP address changes?
Translate.Error: 500 switch translate engine.
Easy.
Translate.Error: 500 switch translate engine.
Just go back to the plugin screen of your WordPress admin panel,
Translate.Error: 500 switch translate engine.
go to breakdance migration mode, deactivate, and then reactivate That reset the IP address migration mode uses to your current IP address.
Translate.Error: 500 switch translate engine.
Happy migrations!
Translate.Error: 500 switch translate engine.
Enjoy building the new version of your website with breakdance, without affecting your existing website for your existing visitors.
Translate.Error: 500 switch translate engine.
Let's talk about the new keyboard shortcuts.
Translate.Error: 500 switch translate engine.
Shift plus F, and Command plus I, or I on Windows.
Translate.Error: 500 switch translate engine.
We all know the Breakdance offers a huge number of options,
Translate.Error: 500 switch translate engine.
way more than you've ever seen in a visual builder, but with great power, often comes a lot of navigation.
Translate.Error: 500 switch translate engine.
That was a big complaint about Breakdance Version 1 from our more advanced users.
Translate.Error: 500 switch translate engine.
They know where the setting is, they know where where the or they just have to click too many times to get there.
Translate.Error: 500 switch translate engine.
So these keyboard shortcuts will allow you to eliminate the clicks entirely.
Translate.Error: 500 switch translate engine.
You just watched me click five times to get to the Z index setting.
Translate.Error: 500 switch translate engine.
Let's do it with no clicks.
Translate.Error: 500 switch translate engine.
Shift F, type Z, zero Z index.
Translate.Error: 500 switch translate engine.
Before we dive into these shortcuts, I'll first explain how controls in breakdance are organized and how the properties panel search feature works.
Translate.Error: 500 switch translate engine.
So for an element in breakdance, if the element has content controls available, you'll see those in the content tab.
Translate.Error: 500 switch translate engine.
If the element has design controls available,
Translate.Error: 500 switch translate engine.
you'll see those in the Design tab, and those design controls are going to be specific to each element.
Translate.Error: 500 switch translate engine.
For example, heading will have different design controls than say a section or a section.
Translate.Error: 500 switch translate engine.
And then the Settings tab has more advanced settings,
Translate.Error: 500 switch translate engine.
such as animations, conditions, custom and the wrapper styles, which is a one-to-one mapping of most CSS properties.
Translate.Error: 500 switch translate engine.
The Properties Panel search is available at the bottom of the Properties panel.
Translate.Error: 500 switch translate engine.
It's going to be in the lower left corner of my screen.
Translate.Error: 500 switch translate engine.
And if you click in the search box, you can begin typing to search the element's controls.
Translate.Error: 500 switch translate engine.
By default, the search box will only search controls in the Content and the Design tab.
Translate.Error: 500 switch translate engine.
So for example, if I want to see all of the color controls on this element, I'll just start typing color.
Translate.Error: 500 switch translate engine.
my color controls.
Translate.Error: 500 switch translate engine.
I can now edit the colors without having to go to the Design tab and click in and find the actual color controls.
Translate.Error: 500 switch translate engine.
Search does not search the settings by default.
Translate.Error: 500 switch translate engine.
To the Settings tab, you have to toggle the Settings icon on the right side of the search box.
Translate.Error: 500 switch translate engine.
So, for example, if I'm looking for Z index and I type in Z, no controls found, but if I click the Settings icon,
Translate.Error: 500 switch translate engine.
it will now search the settings and it will find that.
Translate.Error: 500 switch translate engine.
Lastly, we have the modified button, and clicking this will show all of the modified controls on the element.
Translate.Error: 500 switch translate engine.
So I click modified, I can instantly see all of the settings that were changed on this element.
Translate.Error: 500 switch translate engine.
Now let's talk about the shortcuts.
Translate.Error: 500 switch translate engine.
The first shortcut is Command-I, or Control-I if you're on Windows.
Translate.Error: 500 switch translate engine.
Command-I lets you see all of the modified settings on an element.
Translate.Error: 500 switch translate engine.
So, if you have any active element, I'll click this section here.
Translate.Error: 500 switch translate engine.
Just press Command-I, and it's the same as clicking that Modified button.
Translate.Error: 500 switch translate engine.
So, Command-I, and now I can see all of the modified settings on this element.
Translate.Error: 500 switch translate engine.
If you're ever wondering why an element looks the way it does, Command-I is your answer.
Translate.Error: 500 switch translate engine.
If you pulled in a design from the design library and you're wondering exactly what settings were used to create it,
Translate.Error: 500 switch translate engine.
press Command-I, and you'll instantly see all of the settings used.
Translate.Error: 500 switch translate engine.
To focus the properties panel search box, in search and element settings, simply press F.
Translate.Error: 500 switch translate engine.
No to click.
Translate.Error: 500 switch translate engine.
Just have the element active,
Translate.Error: 500 switch translate engine.
press F, and now you'll see the search box in the lower left hand corner is focused, and I can begin typing.
Translate.Error: 500 switch translate engine.
Let's look for all of the color controls, and here we go.
Translate.Error: 500 switch translate engine.
No need to use the mouse, just click an element, press F.
Translate.Error: 500 switch translate engine.
and then start typing for what you are looking for.
Translate.Error: 500 switch translate engine.
The Shift plus F keyboard shortcut will focus the properties panel search box,
Translate.Error: 500 switch translate engine.
and also toggle the settings icon, allowing you to search inside the settings tab.
Translate.Error: 500 switch translate engine.
So say I to set a Z index on this button.
Translate.Error: 500 switch translate engine.
What going to do is create this layout where I'm using a negative model.
Translate.Error: 500 switch translate engine.
and then I want this button to overlap the section below it.
Translate.Error: 500 switch translate engine.
Well, let's hit Shift plus F.
Translate.Error: 500 switch translate engine.
That focuses the properties panel search box and toggles this icon.
Translate.Error: 500 switch translate engine.
And then that just type in Z index and actually we get it with Z right there.
Translate.Error: 500 switch translate engine.
Let's set the Z index.
Translate.Error: 500 switch translate engine.
And there we go.
Translate.Error: 500 switch translate engine.
No need to click.
Translate.Error: 500 switch translate engine.
Shift plus F and you are searching those advanced wrapper settings.
Translate.Error: 500 switch translate engine.
Breakdance has a ton of great keyboard shortcuts that can save you time.
Translate.Error: 500 switch translate engine.
To see them all, press Command or Control if you're on Windows and then Shift forward slash or question mark.
Translate.Error: 500 switch translate engine.
Command Shift forward slash.
Translate.Error: 500 switch translate engine.
And here is the list of all available shortcuts.
Translate.Error: 500 switch translate engine.
There's a ton of stuff from everything from save and undo to copying and pasting and deactivating an element.
Translate.Error: 500 switch translate engine.
Learn these and you're gonna get a lot more done a lot more quickly.
Translate.Error: 500 switch translate engine.
To go along with the release of Breakdance Version 2, we wanted to ensure we had comprehensive tutorials for all aspects of Breakdance.
Translate.Error: 500 switch translate engine.
One of the big complaints about Breakdance Version 1 is that our tutorials were lacking.
Translate.Error: 500 switch translate engine.
Not anymore.
Translate.Error: 500 switch translate engine.
Over the last year, we've produced hundreds of tutorials, both for everything in Version 1 and the new features in Version 2.
Translate.Error: 500 switch translate engine.
You'll find all of these tutorials on our website at Breakdance.com.
Translate.Error: 500 switch translate engine.
They are well organized by topic.
Translate.Error: 500 switch translate engine.
You can find the it's easy to find exactly what you're looking for here.
Translate.Error: 500 switch translate engine.
For example, let's take a look at our dynamic data tutorials.
Translate.Error: 500 switch translate engine.
Here we have three pages of videos covering all aspects of Breakdance's dynamic data.
Translate.Error: 500 switch translate engine.
feature.
Translate.Error: 500 switch translate engine.
We have an extremely powerful form builder, and here you will find four pages of videos covering all aspects of the form builder.
Translate.Error: 500 switch translate engine.
Save for pop-ups,
Translate.Error: 500 switch translate engine.
we have tutorials on making complete website builds, tutorials for all aspects of WooCommerce, tutorials designing and laying out your site, and much, much more.
Translate.Error: 500 switch translate engine.
You can also find our videos on YouTube.
Translate.Error: 500 switch translate engine.
Our YouTube channel is at official breakdance.
Translate.Error: 500 switch translate engine.
We have it.
Translate.Error: 500 switch translate engine.
five videos at the time of this recording and we're always adding more.
Translate.Error: 500 switch translate engine.
You can find them organized by playlist or just go to the videos tab and start scrolling.
Translate.Error: 500 switch translate engine.
We've covered every aspect of breakdance with these videos.
Translate.Error: 500 switch translate engine.
We've opened up our tutorials library to third-party creators.
Translate.Error: 500 switch translate engine.
Go to the author section on the left and you can search tutorials by author.
Translate.Error: 500 switch translate engine.
If you're a tutorial author and wish to submit tutorials, go to the Breakdance Customer Portal, scroll down and click Submit Content.
Translate.Error: 500 switch translate engine.
Here you can submit your tutorials to us to be featured in the tutorials library.
Translate.Error: 500 switch translate engine.
We promote these to our email list, we them on Facebook, we tweet them out, we want to do it.
Translate.Error: 500 switch translate engine.
to help you get a bigger audience and incentivize you to create great content for breakdance.
Translate.Error: 500 switch translate engine.
Let's take a look at the new menu custom area functionality and breakdance version 2.
Translate.Error: 500 switch translate engine.
First, for context, I'll do a quick walkthrough of the menu functionality included with Breakdance.
Translate.Error: 500 switch translate engine.
Breakdance includes an extremely powerful built-in menu builder.
Translate.Error: 500 switch translate engine.
Menus created with Breakdance are beautiful by default, responsive by default, and fully accessible and keyboard navigable by default.
Translate.Error: 500 switch translate engine.
Menus and Breakdance can be as simple as a list of links,
Translate.Error: 500 switch translate engine.
where they can be more complex and contain buttons,
Translate.Error: 500 switch translate engine.
links and even drop downs and inside those drop downs you can place any
Translate.Error: 500 switch translate engine.
Let's take a look at a header you may have seen before.
Translate.Error: 500 switch translate engine.
This is the menu on Breakdance.com and here I have a menu custom drop-down element inside
Translate.Error: 500 switch translate engine.
that I have my categorized list of links.
Translate.Error: 500 switch translate engine.
I have another menu custom drop-down and this one I have a of links and also a testimonial element,
Translate.Error: 500 switch translate engine.
two column layout,
Translate.Error: 500 switch translate engine.
then I have a third drop-down with list of links on the left and I've got a post list in here displaying the tutorials,
Translate.Error: 500 switch translate engine.
I've got a button.
Translate.Error: 500 switch translate engine.
You really can put anything in these menus and you can control exactly what does show in doesn't show on different devices.
Translate.Error: 500 switch translate engine.
For on smaller devices I don't want to show this,
Translate.Error: 500 switch translate engine.
let's take a look at the responsive behavior and take a look at the resources drop-down and as you can see I'm only showing the list
Translate.Error: 500 switch translate engine.
of links and not that second column with the tutorials.
Translate.Error: 500 switch translate engine.
So it's extremely flexible and powerful.
Translate.Error: 500 switch translate engine.
Now let's take a look at the new menu custom area functionality in Breakdance V2.
Translate.Error: 500 switch translate engine.
The menu custom area allows you to put anything you want in the top level of a menu.
Translate.Error: 500 switch translate engine.
Let's try it.
Translate.Error: 500 switch translate engine.
So I'll add the menu custom area.
Translate.Error: 500 switch translate engine.
and let's drag it to the left of this button,
Translate.Error: 500 switch translate engine.
so we'll just click and drag,
Translate.Error: 500 switch translate engine.
and now I want to put a little search icon in here that's going to open up a search form.
Translate.Error: 500 switch translate engine.
So let's go to add, let's find the search form element and pop that in and that's going to look good by default.
Translate.Error: 500 switch translate engine.
We've got a nice full screen search form.
Translate.Error: 500 switch translate engine.
Now let's say we also want a search form in the mobile menu, but we want it to be different.
Translate.Error: 500 switch translate engine.
We want it to be full width.
Translate.Error: 500 switch translate engine.
We don't want it to look like this.
Translate.Error: 500 switch translate engine.
We want to use a different search element.
Translate.Error: 500 switch translate engine.
Let's go ahead and go up to the menu customary element.
Translate.Error: 500 switch translate engine.
Let's go to visibility and let's hide this one in the mobile menu.
Translate.Error: 500 switch translate engine.
Now let's take a look at our mobile menu.
Translate.Error: 500 switch translate engine.
So let's go down to found landscape.
Translate.Error: 500 switch translate engine.
Let's open up the menu and as you can see the menu custom area is not appearing.
Translate.Error: 500 switch translate engine.
Now let's add a new menu custom area element to the mobile menu.
Translate.Error: 500 switch translate engine.
So to menu custom area, add it, and let's drag it up to the top of the mobile menu.
Translate.Error: 500 switch translate engine.
And let's go ahead and add a search form to this menu custom area.
Translate.Error: 500 switch translate engine.
Let's go to the design tab and let's change the style from full screen to classic.
Translate.Error: 500 switch translate engine.
And let's go up to the menu custom area and under container, let's set the padding to 16 pixels on all sides.
Translate.Error: 500 switch translate engine.
That looks good.
Translate.Error: 500 switch translate engine.
Now let's make sure this menu custom area only appears in the mobile menu.
Translate.Error: 500 switch translate engine.
So we'll go to visibility and we're going to hide this in the desktop menu and let it show in the mobile menu.
Translate.Error: 500 switch translate engine.
So here is our mobile menu with our search form.
Translate.Error: 500 switch translate engine.
And let's take a look at the desktop menu with our search form.
Translate.Error: 500 switch translate engine.
So that's the menu custom area.
Translate.Error: 500 switch translate engine.
Put anything you want in the top level of a menu and show different content in the mobile menu and in the desktop menu.
Translate.Error: 500 switch translate engine.
Totally flexible.
Translate.Error: 500 switch translate engine.
When we first released Breakdance version 1, the design library was very lacking.
Translate.Error: 500 switch translate engine.
With version 2, that has changed in a big way.
Translate.Error: 500 switch translate engine.
We've been constantly adding new design sets to the design library since we released Breakdance version 1,
Translate.Error: 500 switch translate engine.
and the design library is now packed with countless ultra premium templates.
Translate.Error: 500 switch translate engine.
Go to Breakdance.com slash templates to browse them.
Translate.Error: 500 switch translate engine.
The Breakdance Design Library now contains countless sections.
Translate.Error: 500 switch translate engine.
You mix and match to create your own page designs.
Translate.Error: 500 switch translate engine.
Let's go ahead and add in this preheader.
Translate.Error: 500 switch translate engine.
Let's open the library again and add in the menu below it.
Translate.Error: 500 switch translate engine.
Let's open the library again.
Translate.Error: 500 switch translate engine.
We can press library or just press command B or control if you're on Windows to get back to where you were.
Translate.Error: 500 switch translate engine.
Let's go to the home page.
Translate.Error: 500 switch translate engine.
Let's see if there's anything we like there.
Translate.Error: 500 switch translate engine.
Let's add in this top section.
Translate.Error: 500 switch translate engine.
Let's go back to the library, let's scroll down, see if there's anything else we want.
Translate.Error: 500 switch translate engine.
I think I'm liking this section right here.
Translate.Error: 500 switch translate engine.
Let's add this one to the page.
Translate.Error: 500 switch translate engine.
And now let's go ahead and add that nice little ribbon effect we saw at the bottom to the page.
Translate.Error: 500 switch translate engine.
and let's take a look at maybe the about page for another section or let's just wrap it up with a
Translate.Error: 500 switch translate engine.
footer and there we go.
Translate.Error: 500 switch translate engine.
We've built a beautiful page out of just the sections.
Translate.Error: 500 switch translate engine.
We want they look nice together.
Translate.Error: 500 switch translate engine.
Let's go ahead and customize the global settings.
Translate.Error: 500 switch translate engine.
One of the great things about breakdance is that all of the complete websites in the design library are built with global settings
Translate.Error: 500 switch translate engine.
so you can instantly customize the colors the typography and many other aspects without having to edit the elements individually.
Translate.Error: 500 switch translate engine.
So go to the dot dot dot dot menu go to global settings and let's say we want to change the color scheme to say pink and purple.
Translate.Error: 500 switch translate engine.
Let's just go to the palette and let's just change this color to maybe this pink right there.
Translate.Error: 500 switch translate engine.
That looks good and then for the primary color which use the background.
Translate.Error: 500 switch translate engine.
Let's do something like that looks good and let's scroll down and as you can see those colors are changed just about everywhere.
Translate.Error: 500 switch translate engine.
We don't have to customize the individual elements.
Translate.Error: 500 switch translate engine.
We use the global settings to tweak At the time of this recording,
Translate.Error: 500 switch translate engine.
the Breakdance Design Library now includes 36 ultra premium complete website templates that you can import to your own Breakdance installation in a single click.
Translate.Error: 500 switch translate engine.
These templates include home pages, sub pages such as about pages, service pages, team and more.
Translate.Error: 500 switch translate engine.
And you have to do is click the Import button and then customize your text,
Translate.Error: 500 switch translate engine.
images and global settings and you'll be Let's take a look at some of these templates.
Translate.Error: 500 switch translate engine.
Here is the beauty salon template.
Translate.Error: 500 switch translate engine.
You can preview directly on Breakdance.com.
Translate.Error: 500 switch translate engine.
You can go here for a responsive preview or click preview to open up the website in all of its glory.
Translate.Error: 500 switch translate engine.
Let's take a look at some of the other designs in the design library.
Translate.Error: 500 switch translate engine.
Here we have a great design for freelancers and digital agencies with creative services to offer with various pages like a services page,
Translate.Error: 500 switch translate engine.
a pricing page, a portfolio page to showcase your work.
Translate.Error: 500 switch translate engine.
Let's take a look at this design, which is great for local service companies, like construction companies.
Translate.Error: 500 switch translate engine.
It looks great and it has all the pages you need to convey at the various services that your business offers.
Translate.Error: 500 switch translate engine.
Here we have a premium design for an online clothing store.
Translate.Error: 500 switch translate engine.
These are multi-page designs we didn't just make the home pages look good,
Translate.Error: 500 switch translate engine.
we made all of the sub pages look absolutely fantastic as well.
Translate.Error: 500 switch translate engine.
We know lots of our breakdance customers are creative professionals and digital agencies,
Translate.Error: 500 switch translate engine.
so we included numerous templates to help you showcase your work and get more busy.
Translate.Error: 500 switch translate engine.
Here we have a beautiful template for photographers and other artists.
Translate.Error: 500 switch translate engine.
Here we have a great template for an agency that does website creation, online marketing, digital strategy.
Translate.Error: 500 switch translate engine.
We made it easy to showcase a portfolio of your work.
Translate.Error: 500 switch translate engine.
Let's take a look at a few more premium website templates included with the Breakdance Design Library.
Translate.Error: 500 switch translate engine.
All of the websites in our design library are WooCommerce ready.
Translate.Error: 500 switch translate engine.
Even you don't see WooCommerce installed on the website,
Translate.Error: 500 switch translate engine.
if you simply install WooCommerce, WooCommerce will look good by default because all of our design library websites make use of global styles.
Translate.Error: 500 switch translate engine.
So WooCommerce will simply inherit the colors, fonts, and spacing that we making WooCommerce automatically match the design of the rest of your website.
Translate.Error: 500 switch translate engine.
The Sombi UI Kit now contains over 30 pages of premium sections.
Translate.Error: 500 switch translate engine.
You mix and match to create any page you can imagine.
Translate.Error: 500 switch translate engine.
Let's take a look.
Translate.Error: 500 switch translate engine.
So just add this feature section to my page.
Translate.Error: 500 switch translate engine.
And then let's go to say team cards.
Translate.Error: 500 switch translate engine.
Let's take a look at some of these different team cards.
Translate.Error: 500 switch translate engine.
We a big team.
Translate.Error: 500 switch translate engine.
Let's add this bigger team card to our page right there.
Translate.Error: 500 switch translate engine.
Let's go back to Somba.
Translate.Error: 500 switch translate engine.
Let's take a look at some statistics.
Translate.Error: 500 switch translate engine.
Maybe we want to toss in a stats box like this.
Translate.Error: 500 switch translate engine.
And let's take a look and see what else we want.
Translate.Error: 500 switch translate engine.
Maybe we want some social proof.
Translate.Error: 500 switch translate engine.
Of course, we can search there.
Translate.Error: 500 switch translate engine.
Let's search testimonials.
Translate.Error: 500 switch translate engine.
And let's toss in this nice simple testimonial slider.
Translate.Error: 500 switch translate engine.
And we could wrap things up with a footer.
Translate.Error: 500 switch translate engine.
So let's look for some footers.
Translate.Error: 500 switch translate engine.
And let's add this.
Translate.Error: 500 switch translate engine.
There we go.
Translate.Error: 500 switch translate engine.
Everything looks nice.
Translate.Error: 500 switch translate engine.
And of course, that uses a global setting.
Translate.Error: 500 switch translate engine.
So can open up the global settings and customize those colors very quickly.
Translate.Error: 500 switch translate engine.
We can customize the typography.
Translate.Error: 500 switch translate engine.
We can customize the buttons.
Translate.Error: 500 switch translate engine.
It's very easy to get things in the break dance design library to match your brand.
Translate.Error: 500 switch translate engine.
We've opened up our templates library to third party creators.
Translate.Error: 500 switch translate engine.
Go to breakdance.com slash templates and click third party only to see all the third party templates.
Translate.Error: 500 switch translate engine.
So far over one.
Translate.Error: 500 switch translate engine.
3rd party templates have been submitted.
Translate.Error: 500 switch translate engine.
You can browse by your favorite author over here on the left.
Translate.Error: 500 switch translate engine.
If you're an author and wish to submit templates, do so in the customer portal you can submit a template.
Translate.Error: 500 switch translate engine.
We'll it in our marketplace, promote it on Twitter, Facebook, via email, feature and blog posts.
Translate.Error: 500 switch translate engine.
We want to do everything we can to help you get
Translate.Error: 500 switch translate engine.
your template into the hands of people who want it and we want to help our customers have the best selection of templates possible.
Translate.Error: 500 switch translate engine.
We now have over 400 written documentation articles for breakdance.
Translate.Error: 500 switch translate engine.
You can find these by going to breakdance.com slash documentation.
Translate.Error: 500 switch translate engine.
We have documentation for everything as simple as installing breakdance.com.
Translate.Error: 500 switch translate engine.
dance, builder basics, such adding elements to your page, all the way up to very advanced topics.
Translate.Error: 500 switch translate engine.
For example, writing PHP code, the documentation is detailed and well organized.
Translate.Error: 500 switch translate engine.
You'll find various categories such as design, headers, footers, and will forms, dynamic data, and every other aspect of breakdance.
Translate.Error: 500 switch translate engine.
Since we release breakdance version one,
Translate.Error: 500 switch translate engine.
we carefully monitor the questions we were getting in our Facebook group,
Translate.Error: 500 switch translate engine.
in the YouTube comments and at our support desk, and we made sure to write detailed documentation to answer all of those.
Translate.Error: 500 switch translate engine.
Of course, we're always available to help you.
Translate.Error: 500 switch translate engine.
We're happy to provide technical support whenever you want to contact us,
Translate.Error: 500 switch translate engine.
but hopefully now you won't have to wait for a response from us because if you have a question,
Translate.Error: 500 switch translate engine.
odds are good, our documentation answers it.
Translate.Error: 500 switch translate engine.
Let's take a look at the new Sticky Header Offset functionality in Breakdance Version 2.
Translate.Error: 500 switch translate engine.
This makes it much easier to create sticky effects on multi-row headers.
Translate.Error: 500 switch translate engine.
So I have a very common design.
Translate.Error: 500 switch translate engine.
We have a top bar with some information in it and then below that we have the main header.
Translate.Error: 500 switch translate engine.
I've used a to create the top bar and then a header builder for the main header.
Translate.Error: 500 switch translate engine.
You can use two header builders if you wanted, no reason not to do that.
Translate.Error: 500 switch translate engine.
Anyway, we want to make this one stick to the top on scroll, but we don't want this one
Translate.Error: 500 switch translate engine.
to stick to the top on scroll.
Translate.Error: 500 switch translate engine.
So let's create that effect.
Translate.Error: 500 switch translate engine.
We'll go to header builder, let's go to sticky, enable, stick.
Translate.Error: 500 switch translate engine.
sticky, and when you enable sticky it immediately sticks to the top of the screen.
Translate.Error: 500 switch translate engine.
Well, we added a new offset control that makes it easy to offset the header builder when it's sticky
Translate.Error: 500 switch translate engine.
from the top of the screen before scroll.
Translate.Error: 500 switch translate engine.
The top bar, if we go over here and look at the size, is 58 pixels tall.
Translate.Error: 500 switch translate engine.
So in this header builder, under sticky and then offset the new offset control, we'll enter in 58 pixels.
Translate.Error: 500 switch translate engine.
pixels, and this header is now offset 58 pixels when it's sticky.
Translate.Error: 500 switch translate engine.
Let's scroll and see what happens.
Translate.Error: 500 switch translate engine.
The header is still offset 58 pixels.
Translate.Error: 500 switch translate engine.
We don't want that so.
Translate.Error: 500 switch translate engine.
We will go to scroll behavior, and under the new offset after scroll control, we'll enter in zero.
Translate.Error: 500 switch translate engine.
Now the header looks like this before scroll and after scrolling, it to the top of the Let's improve the effect a little bit.
Translate.Error: 500 switch translate engine.
So let's go to style and let's go to borders and let's add a shadow.
Translate.Error: 500 switch translate engine.
So it's now gonna have a shadow when it's sticky.
Translate.Error: 500 switch translate engine.
That's pretty nice.
Translate.Error: 500 switch translate engine.
And let's make this animation look a little bit better when this header moves up.
Translate.Error: 500 switch translate engine.
Let's just stick this one to the top of the screen at all times.
Translate.Error: 500 switch translate engine.
So we're gonna go to the section.
Translate.Error: 500 switch translate engine.
We're go to settings.
Translate.Error: 500 switch translate engine.
sticky position top.
Translate.Error: 500 switch translate engine.
It's now always going to stick to the top of the screen and this will just overlap it as we scroll down.
Translate.Error: 500 switch translate engine.
Let's take a look.
Translate.Error: 500 switch translate engine.
Beautiful effect.
Translate.Error: 500 switch translate engine.
Super easy with the new sticky offset control and breakdance version 2.
Translate.Error: 500 switch translate engine.
We enhanced the header builder with a new page top margin control for sticky headers
Translate.Error: 500 switch translate engine.
So here I have a header that is clearly supposed to float above the content We could make it an overlay,
Translate.Error: 500 switch translate engine.
but then it wouldn't be sticky on scroll what we want is it to be sticky So we'll enable the sticky option and that's gonna cause this to stick to the top of the screen and
Translate.Error: 500 switch translate engine.
this content below it to move up by the same height as the header and page.
Translate.Error: 500 switch translate engine.
Let's enable that.
Translate.Error: 500 switch translate engine.
And that looks great.
Translate.Error: 500 switch translate engine.
That is the behavior we want.
Translate.Error: 500 switch translate engine.
However, in some cases, we want a sticky header that doesn't overlay the content.
Translate.Error: 500 switch translate engine.
And for that,
Translate.Error: 500 switch translate engine.
we have the page top margin control that will push the content under the header back down to where
Translate.Error: 500 switch translate engine.
it was before we made the header sticky.
Translate.Error: 500 switch translate engine.
Let's take a look.
Translate.Error: 500 switch translate engine.
So here I have a header and And let's go ahead and go to Sticky, and let's make it sticky.
Translate.Error: 500 switch translate engine.
Well now it's sticky, but as we can see that content jumps up.
Translate.Error: 500 switch translate engine.
The old way was to just add additional top margin to the top section on the page,
Translate.Error: 500 switch translate engine.
and you could offset the effect of the sticky header that way.
Translate.Error: 500 switch translate engine.
But in some cases, you may not want to do that on every page of your website.
Translate.Error: 500 switch translate engine.
You have a global header.
Translate.Error: 500 switch translate engine.
You want to just put in the height that you want automatically added to the page's top margin.
Translate.Error: 500 switch translate engine.
So let's do that.
Translate.Error: 500 switch translate engine.
Let's go to the header builder.
Translate.Error: 500 switch translate engine.
Let's go to sticky and under page top margin, let's enter the height of the header, which in this case is 132 pixels.
Translate.Error: 500 switch translate engine.
And now when we make the header sticky or not sticky, as you can see, the section below it doesn't mean.
Translate.Error: 500 switch translate engine.
move.
Translate.Error: 500 switch translate engine.
We it where it is.
Translate.Error: 500 switch translate engine.
It there instead of there.
Translate.Error: 500 switch translate engine.
Let's take a look at the new CLA shortcut to add a class.
Translate.Error: 500 switch translate engine.
Breakdance has an extremely powerful classes in the Selectors system,
Translate.Error: 500 switch translate engine.
but one of the main complaints we got about it in version one is that it's hidden away, and that's by design.
Translate.Error: 500 switch translate engine.
Most users don't want it.
Translate.Error: 500 switch translate engine.
However, many of those that do said Breakdance was absolutely awesome, except for the fact that it was time-consuming
Translate.Error: 500 switch translate engine.
to So we've added a keyboard shortcut, so you can add classes instantly with no clicks.
Translate.Error: 500 switch translate engine.
Let's take a look.
Translate.Error: 500 switch translate engine.
So let's select an element.
Translate.Error: 500 switch translate engine.
We want to add a class to this section.
Translate.Error: 500 switch translate engine.
Let's type in CLA, and that opens up the panel to add classes, and I can just start typing.
Translate.Error: 500 switch translate engine.
So let's give this one a pink background, so we're going to type in BG, pink.
Translate.Error: 500 switch translate engine.
We've already added that class to the site, and then we just press enter to add that class.
Translate.Error: 500 switch translate engine.
We'll just hit enter, and the class is added.
Translate.Error: 500 switch translate engine.
And note that the dropdown remains open, so you can select additional classes and hit enter if you wish to add those classes.
Translate.Error: 500 switch translate engine.
the keyboard, add classes instantly.
Translate.Error: 500 switch translate engine.
Let's do it again,
Translate.Error: 500 switch translate engine.
so we'll go down to this section, type CLA, and this is what we want to do, BG, light, headhunter, and that class is added.
Translate.Error: 500 switch translate engine.
Let's take a look at editing a class.
Translate.Error: 500 switch translate engine.
Let's click one of these links.
Translate.Error: 500 switch translate engine.
I have a class on this link.
Translate.Error: 500 switch translate engine.
We can type CLA to get to the classes.
Translate.Error: 500 switch translate engine.
And we can just click the class we wish to edit.
Translate.Error: 500 switch translate engine.
And let's say I want to change the styling of all these links.
Translate.Error: 500 switch translate engine.
For example, change the text styling.
Translate.Error: 500 switch translate engine.
I can just loop through my typography presets.
Translate.Error: 500 switch translate engine.
And as you can see, because it's a class, it's updating each link at the same time.
Translate.Error: 500 switch translate engine.
Say we want to space these out.
Translate.Error: 500 switch translate engine.
We could add eight pixels of margin or less.
Translate.Error: 500 switch translate engine.
and customize that way.
Translate.Error: 500 switch translate engine.
New and breakdance version two, we improve the filter bar by adding options to sort the categories or taxonomies and to hide the uncategorized category.
Translate.Error: 500 switch translate engine.
So here I have a post list with some filters on it.
Translate.Error: 500 switch translate engine.
This is built into breakdance, these filtering options.
Translate.Error: 500 switch translate engine.
And go back to all.
Translate.Error: 500 switch translate engine.
And then let's go over to filter bar and sort by.
Translate.Error: 500 switch translate engine.
And instead of sorting by names, you can see these are in alphabetical order.
Translate.Error: 500 switch translate engine.
We can sort by the term order.
Translate.Error: 500 switch translate engine.
You can set that in WordPress or the count, the number of items in the category.
Translate.Error: 500 switch translate engine.
So if I sort by count,
Translate.Error: 500 switch translate engine.
the categories with the least items will be on the bottom and the categories with the most items will be.
Translate.Error: 500 switch translate engine.
Let's take a at the new Pulse Dot element.
Translate.Error: 500 switch translate engine.
So I have this beautiful hero section,
Translate.Error: 500 switch translate engine.
and at the top I've got this special offer button, and I wanna draw a little more attention to this button.
Translate.Error: 500 switch translate engine.
So I'm gonna add an animated pulsing color dot to this button.
Translate.Error: 500 switch translate engine.
So we're gonna use the new Pulse Dot element for that.
Translate.Error: 500 switch translate engine.
This makes it easy.
Translate.Error: 500 switch translate engine.
Just it to the page, drag it where you want it.
Translate.Error: 500 switch translate engine.
animated pulsing dot previously this would take a bit of work a little bit of
Translate.Error: 500 switch translate engine.
custom CSS animation now it's easy with the pulse dot let's set that accent color
Translate.Error: 500 switch translate engine.
and just for purposes of this video so you can see what's going on I'll make it
Translate.Error: 500 switch translate engine.
huge and that's the effect you get obviously don't do that in your design it'll
Translate.Error: 500 switch translate engine.
look a little bit better if I make it about that bit the pull size like that.
Translate.Error: 500 switch translate engine.
And there you go, very subtle, very professional effect, nice to draw the user's eye, to the user's attention to something.
Translate.Error: 500 switch translate engine.
We've added the ability to import and export your global settings.
Translate.Error: 500 switch translate engine.
To do so,
Translate.Error: 500 switch translate engine.
go to the dot dot dot menu, click global settings, Click the new dot dot dot menu in global settings and choose export global settings.
Translate.Error: 500 switch translate engine.
This is very useful if you want to, say, set up some global settings that you're going to use across numerous.
Translate.Error: 500 switch translate engine.
builds.
Translate.Error: 500 switch translate engine.
Then, to import the global settings on the same or another breakdance website, go to the dot dot dot menu, choose import global settings, and choose that global settings
Translate.Error: 500 switch translate engine.
file you just exported.
Translate.Error: 500 switch translate engine.
Click import, and your global settings will be imported.
Translate.Error: 500 switch translate engine.
New breakdance version 2, we've added a content reveal element.
Translate.Error: 500 switch translate engine.
Breakdance has a vast collection of built-in elements,
Translate.Error: 500 switch translate engine.
and with version 2,
Translate.Error: 500 switch translate engine.
we've expanded that collection So here I have a service type page and let's scroll down and here I have a lot of text
Translate.Error: 500 switch translate engine.
right here.
Translate.Error: 500 switch translate engine.
This is a lot of text for this sort of page.
Translate.Error: 500 switch translate engine.
Let's go ahead and put that text in a content reveal element.
Translate.Error: 500 switch translate engine.
So to do that, let's go to add, let's click.
Translate.Error: 500 switch translate engine.
And let's go ahead and drag the text of the content reveal,
Translate.Error: 500 switch translate engine.
let's open up the structure panel,
Translate.Error: 500 switch translate engine.
here's the text, let's drag it into the content reveal, and let's delete the default text that was in the content reveal.
Translate.Error: 500 switch translate engine.
And here we go, here's our content reveal element, we can click read more and see the content or read less and hide the content.
Translate.Error: 500 switch translate engine.
And of course you can customize all of this,
Translate.Error: 500 switch translate engine.
you can customize the labels of the button,
Translate.Error: 500 switch translate engine.
you can customize whether you're hiding by a specific height or by a number of lines,
Translate.Error: 500 switch translate engine.
you can set the max height for the content reveal, whether we scroll to top.
Translate.Error: 500 switch translate engine.
And of course you can customize all of the styles as well.
Translate.Error: 500 switch translate engine.
New and break dance version two, we've added support for the SVH and SVW unit types to element studio.
Translate.Error: 500 switch translate engine.
So if you're building a custom element,
Translate.Error: 500 switch translate engine.
you add a unit input like the one shown here, you can go to allow types and under types, you can find SVH and SVW.
Translate.Error: 500 switch translate engine.
In break dance version two, we've made a number of enhancements to our slider functionality.
Translate.Error: 500 switch translate engine.
So here I have an advanced slider and we've set slides per view to three,
Translate.Error: 500 switch translate engine.
we could set that to four or two, but let's use three and let's click the arrow and see what happens.
Translate.Error: 500 switch translate engine.
It slides one slide at a time.
Translate.Error: 500 switch translate engine.
Then we get to the end of the slider.
Translate.Error: 500 switch translate engine.
We can go the other way, or we could have made it an infinite slider.
Translate.Error: 500 switch translate engine.
Okay, let's take a look at the new slides per group setting.
Translate.Error: 500 switch translate engine.
Slides per group lets you slide more than one slide on each click.
Translate.Error: 500 switch translate engine.
Let's go to Settings, Advanced, Slides per Group, and let's slide three slides per group.
Translate.Error: 500 switch translate engine.
Now let's click B-arrow, and it's slide three slides is if you're going to the next page.
Translate.Error: 500 switch translate engine.
And of course the slides per group setting is responsive.
Translate.Error: 500 switch translate engine.
We added a new initial slide option to the slider.
Translate.Error: 500 switch translate engine.
So you can see the slider starts with this slide and then the other slides are here and you can click there to go, right?
Translate.Error: 500 switch translate engine.
But of course you can not go.
Translate.Error: 500 switch translate engine.
left.
Translate.Error: 500 switch translate engine.
Let's say you want the initial slide to be something other than the first slide in the slider.
Translate.Error: 500 switch translate engine.
Well, let's do that.
Translate.Error: 500 switch translate engine.
So is the number of the first slide.
Translate.Error: 500 switch translate engine.
Let's make that the first slide, or that the first slide.
Translate.Error: 500 switch translate engine.
And now you can go both directions.
Translate.Error: 500 switch translate engine.
We've updated the stock icons that are included for free with breakdance to font awesome version 6 free.
Translate.Error: 500 switch translate engine.
For any element that uses an icon, open the icon chooser and you'll see the font awesome 6 icons in the icon chooser.
Translate.Error: 500 switch translate engine.
Let's take a look at the new Shift plus Escape keyboard shortcut.
Translate.Error: 500 switch translate engine.
Pressing Shift and Escape together will select the parent element of the currently selected element.
Translate.Error: 500 switch translate engine.
So here I have a pricing table.
Translate.Error: 500 switch translate engine.
It's a column.
Translate.Error: 500 switch translate engine.
Let's press Shift, Escape.
Translate.Error: 500 switch translate engine.
It will select the column.
Translate.Error: 500 switch translate engine.
Let's press Shift, Escape again to get to the columns.
Translate.Error: 500 switch translate engine.
Now we want to get to the section, Shift Escape one last time.
Translate.Error: 500 switch translate engine.
We're the section.
Translate.Error: 500 switch translate engine.
Use this one to speed up your workflow.
Translate.Error: 500 switch translate engine.
Let's take a look at the new badge element.
Translate.Error: 500 switch translate engine.
So I have this page and let's say we want to add a badge above this heading.
Translate.Error: 500 switch translate engine.
Let's go to add and then search for badge and just drag that in.
Translate.Error: 500 switch translate engine.
And this is a nice little utility element that makes it easy to add these badges without
Translate.Error: 500 switch translate engine.
having to use a text element and then add padding or assign a class.
Translate.Error: 500 switch translate engine.
So now let's go to the design tab for this badge and let's open the badge controls.
Translate.Error: 500 switch translate engine.
Let's set the background color to one of
Translate.Error: 500 switch translate engine.
then let's go to typography and set the color to this base color that we use for
Translate.Error: 500 switch translate engine.
other text on the site there and let's use a typography preset to make this match the design of the rest of our site.
Translate.Error: 500 switch translate engine.
and let's fill in some actual let's do our services.
Translate.Error: 500 switch translate engine.
And there we go.
Translate.Error: 500 switch translate engine.
That is the batch element.
Translate.Error: 500 switch translate engine.
We've added the ability to copy and paste all elements on a page at one time.
Translate.Error: 500 switch translate engine.
You can copy to another page on your existing website,
Translate.Error: 500 switch translate engine.
or you can even copy and paste to a different breakdance website on a different server.
Translate.Error: 500 switch translate engine.
Let's see how to do it.
Translate.Error: 500 switch translate engine.
So we'll go to the structure page, channel, we'll click the new dot dot dot menu and click Copy All Elements.
Translate.Error: 500 switch translate engine.
Now let's go to the page where we want to paste the elements,
Translate.Error: 500 switch translate engine.
and again,
Translate.Error: 500 switch translate engine.
this could be on a completely different server,
Translate.Error: 500 switch translate engine.
a different domain name, a different breakdowns website, and we'll go to the Structure panel, click the dot dot dot menu, and click Paste Elements.
Translate.Error: 500 switch translate engine.
and voila, the elements are pasted.
Translate.Error: 500 switch translate engine.
We've updated the Google Fonts list, included with Breakdance to include all of the latest fonts available on Google Fonts.
Translate.Error: 500 switch translate engine.
We added the ability to open tabs on hover.
Translate.Error: 500 switch translate engine.
So I have an advanced tabs element, and let's take a look at what I've done here.
Translate.Error: 500 switch translate engine.
I've added five tab content elements inside, and there's a video inside each of the tabs.
Translate.Error: 500 switch translate engine.
By you would click the tabs, and they would open, but new in Breakdance V2.
Translate.Error: 500 switch translate engine.
If you go over here, you can choose the open on hover option for tabs and then these tabs will open on hover.
Translate.Error: 500 switch translate engine.
Let's go ahead and take a at this effect on the front end and I'm just going to move
Translate.Error: 500 switch translate engine.
the mouse and the tabs open on hover.
Translate.Error: 500 switch translate engine.
Beautiful effect.
Translate.Error: 500 switch translate engine.
There are a of creative ways to use this effect.
Translate.Error: 500 switch translate engine.
Breakdance includes an extremely powerful conditional element display feature,
Translate.Error: 500 switch translate engine.
and we've added so many conditions that they're getting difficult to find, so we added an auto-complete to the conditions dropdown.
Translate.Error: 500 switch translate engine.
So here I have a header with a login link and a login form in this custom dropdown.
Translate.Error: 500 switch translate engine.
I only want this login link to appear for logged out users,
Translate.Error: 500 switch translate engine.
so go to Settings, Conditions, Edit Conditions, let's add a condition, and New and Breakdance B2.
Translate.Error: 500 switch translate engine.
This is now an auto-complete, so you can just search for what you're looking for.
Translate.Error: 500 switch translate engine.
Let's search for user logged in status.
Translate.Error: 500 switch translate engine.
logged out, and now this login link will only appear for logged out users.
Translate.Error: 500 switch translate engine.
New and break dance version two,
Translate.Error: 500 switch translate engine.
we've added support for an unlimited number of CC and BCC recipients on the email action of the form builder.
Translate.Error: 500 switch translate engine.
So here I have a form for making restaurant reservations and under actions after submission,
Translate.Error: 500 switch translate engine.
let's go to email and then let's set up the email action.
Translate.Error: 500 switch translate engine.
So here we can customize the email message, decide who's going to receive it, etc.
Translate.Error: 500 switch translate engine.
Let's go ahead and add a CC recipient.
Translate.Error: 500 switch translate engine.
So here we can just type in a list of email addresses.
Translate.Error: 500 switch translate engine.
Me, the example.com, the number, the example.com, etc.
Translate.Error: 500 switch translate engine.
And of course you can also set these from data.
Translate.Error: 500 switch translate engine.
The form builder, for example, you go here and you could choose the email field and put it there.
Translate.Error: 500 switch translate engine.
And if there was additional email fields in the form builder, then you could do.
Translate.Error: 500 switch translate engine.
And so on.
Translate.Error: 500 switch translate engine.
In Breakdance, it's always been possible to copy the design of an element and paste that design onto another element.
Translate.Error: 500 switch translate engine.
For example,
Translate.Error: 500 switch translate engine.
if I wanted to copy the design of this section,
Translate.Error: 500 switch translate engine.
I'd right click and hit Copy,
Translate.Error: 500 switch translate engine.
and then if I wanted to paste this design of this section onto another section,
Translate.Error: 500 switch translate engine.
I'd go to that section, right click and hit Paste Design.
Translate.Error: 500 switch translate engine.
But that copies the entire design, the layout, the spacing, all of the settings.
Translate.Error: 500 switch translate engine.
What if I only wanted to copy part of the design, say, the background?
Translate.Error: 500 switch translate engine.
Let's go ahead and undo.
Translate.Error: 500 switch translate engine.
And let's go back to that first section.
Translate.Error: 500 switch translate engine.
Let's say I just want the background.
Translate.Error: 500 switch translate engine.
I want this background color.
Translate.Error: 500 switch translate engine.
I want this nice background texture.
Translate.Error: 500 switch translate engine.
But I don't want to copy the size, spacing, or any other settings.
Translate.Error: 500 switch translate engine.
Well, now you can mouse over a control set.
Translate.Error: 500 switch translate engine.
section, and right click it and copy the properties in that section.
Translate.Error: 500 switch translate engine.
So let's say I a copy background,
Translate.Error: 500 switch translate engine.
right click,
Translate.Error: 500 switch translate engine.
copy background,
Translate.Error: 500 switch translate engine.
and now let's scroll down to the section where we want to paste the background,
Translate.Error: 500 switch translate engine.
and let's go to the background properties, right click, and paste background.
Translate.Error: 500 switch translate engine.
Now we've now copied the background from this element to this element, and we've left all of this element's other settings.
Translate.Error: 500 switch translate engine.
OK, you made it all the way to the end.
Translate.Error: 500 switch translate engine.
Check the changelog for more details, because we, of course, we can't cover everything in this video.
Translate.Error: 500 switch translate engine.
And go to breakdowns.com.
Translate.Error: 500 switch translate engine.
Unlock More Features
Install the Trancy extension to unlock more features, including AI subtitles, AI word definitions, AI grammar analysis, AI speaking, etc.
Compatible with Major Video Platforms
Trancy not only provides bilingual subtitle support for platforms like YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, but also offers AI word/sentence translation, full-text immersive translation, and other features for regular web pages. It is a true all-in-one language learning assistant.
Supports All Platform Browsers
Trancy supports all platform browsers, including iOS Safari browser extension.
Multiple Viewing Modes
Supports theater, reading, mixed, and other viewing modes for a comprehensive bilingual experience.
Multiple Practice Modes
Supports sentence dictation, oral evaluation, multiple-choice, dictation, and other practice modes.
AI Video Summary
Use OpenAI to summarize videos and quickly grasp key content.
AI Subtitles
Generate accurate and fast YouTube AI subtitles in just 3-5 minutes.
AI Word Definitions
Tap on words in the subtitles to look up definitions, with AI-powered definitions.
AI Grammar Analysis
Analyze sentence grammar to quickly understand sentence meanings and master difficult grammar points.
More Web Features
In addition to bilingual video subtitles, Trancy also provides word translation and full-text translation for web pages.