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