 Okay, it looks like we're live Let me turn There we go, all right Got my screen for testing. I'll go ahead and give it maybe a minute or two before kicking this off Anybody here? Let me know if my mic is working if it sounds okay. Everything is good on your end Cool. Well sounds good on my phone. So all right. We're gonna kick this one off I am gonna give it a couple minutes You know see who joins and who enters but I am going to have a very hard beginning hard kick off on this one Five minutes in 805. I'm going off because we are gonna be doing something fun inside this video and video I've been doing a lot of lessons in the course. We're gonna do something fun in this live stream Okay, I need to wake up. I got my trusty Elementor mug and I don't have a break dance mug, but this is still my favorite mug for right now Awesome. What's up Dustin? Thank you, man. Appreciate that. Maybe I'm gonna begin before the five minutes I really can't wait to dig in. I've been waiting for this for since a black Friday Since I bought break dance. I've been waiting to do this. I've been waiting to crack it open and see what it's like All right, anybody use break dance yet. I want you all to share your experience inside the chat I want to hear from you guys also. Check it out. All right. I am just gonna kick it off I'm impatient right now. I've been waiting for this and I also don't have a whole lot of time I don't I got a limited amount of time. I can't I don't know I saw on Twitter somebody said it took them four hours to figure out how to build a header and bricks I mean, I think they're just trolling, but there's no way I would ever sit down Trying to build a header for four hours. That would drive me bonkers. I will lose it. I will lose it Plus I don't think it would take that long if you're familiar with page builders. All right Cool, I see people are joining All right, what we're gonna do here check this out So this is gonna be a different live stream than what I usually do This one I got break dance builder. I bought it over the holidays And I haven't tried it yet. I haven't opened it. I haven't installed it. I haven't played with it I haven't even watched a tutorial on it. I haven't watched any videos I mean the only videos I did watch are maybe the introduction videos from Lewis And break dance that shows a little bit of separate break dance, but I haven't watched anybody's tutorials I haven't seen how it works So only thing I know about break dance is that it is built as a direct competitor against Elementor also that they use yellow and black like bricks So that's the only thing that I know and I know that is from the team of oxygen and Lewis All right, cool. So check it out. I got a link. All right, so I'm gonna put two links inside the chat For you guys to check it out. Now. I'm gonna keep it real the second one is going You know what I might be going to do that I was going to share an affiliate link, but I don't know if I should because you know I do have the affiliation Because I create content and it helps support the channel But I also affiliate I only throw affiliates out there also what I personally would use or would recommend It's got to go through my test So you know what I'm gonna do I want to see if this passes my test I kind of already know it does because I have heard from the break dance community I've seen the results and others. So, you know, my my hopes are kind of high to be quite honest with you that this is a solid tool But still I want to give it a shot and if it's good, then I'll Affiliate out there and put my stamp that. Hey, this is worth checking out. All right. So real quick. Let's go ahead and do a screenshot A screenshot. Okay guys, it's late over here and it's been long. All right. It's been long It's been some long days. All right, so let's see here All right, I gotta take a look at my phone so that way I could make sure everything looks right. Okay. Here's break dance That's the back the back dashboard right there, but yeah, here's break dance and it is basically just a direct competitor to Elementor that's how they position themselves and They're very very clear about that positioning and the thing is Elementor is huge So it's given another opportunity and honestly for me I love the competition because the competition pushes everybody and for us as the end user It's a win-win. Now the one thing that has stood out to me with break dance and the thing that's got me interested Is that they they really promote that? WooCommerce works well with them and For me, this is my personal experience WooCommerce with Elementor has always been my challenge It's been my struggle fact if you were to go and use the WooCommerce elements right now in Elementor well those elements are all old. They're all like really really old from back in the days and They have default like four pixel margins on them Like I have to write a lot of CSS to make it work So it is a bit of a headache and it's something that I would love Elementor to update because it's great to come in now with new features But the old ones the old originals like the like the WooCommerce elements They have not been updated. They haven't been brought up today like they need a complete revamp I feel that'll make them like really fully Ready for WooCommerce, but here's here's these guys. They're positioning it. All right, so let me see Okay, I can see me on my screen It looks okay. All right Cool, so let me see over here. All right. I got two screens open I am just going to dig in and I'm just going to go ahead and kick this off now I'm a other screen over here. I got my chat. So I am going to be periodically Looking over to the side if anybody has questions or if anybody has all right, check it out If anybody has experience with breakdance I want you to chime in because Just like how I saw that post with somebody trying to build a header for four hours with bricks How I saw somebody put that in Twitter. Uh, I call nonsense on that one I do not buy a plus like I said I would I would rather quit building websites in the spend four hours trying to figure out a header at this point I use the tools that I got and that's Google searches those I don't have that kind of time So I will be using Google searches if I get stuck I'm going to dig in and then also I want you guys to let me know if I start to get stuck on something You got experience drop it inside the comments. All right. So what we are going to do over here We are going to build a first side. I'm going to install it for the very first time Let me see. I got my dashboard. I'm using instant WP. I spun up a site. This is brand new Install haven't done anything to this install yet. We're gonna set this up and we're gonna add breakdance inside of here Now for my test, I did the same exact test with bricks We are going to replicate bubble now back when I did this with bricks That was about a good year and a half ago Maybe even closer to two years. It was my first time using bricks This is a test that I did and well bubble had a different website then but still I want to stick with my bubble test The reason why I'm going to use this right here is because it's a simple box grid layout It's not too complicated. Now. I'm not going to get stuck trying to you know build Well, this is just a video really, you know We're going to keep it simple and I probably will not get to the whole build I might just get down to here the whole point of it is to use a real Example figure out building. What is it like building like a header so that way we could take a look at the theme templates We're going to take a look at you know the builder and building layouts and creating grids and our different options and stuff like that and Yeah, with that. Let's see what happens. All right when I did this with bricks It took me legit about It took me about a good two to we have about two hours two and a half hours To build the entire page and I mean the entire page including the header and footer But when I did build it with bricks I got stuck a lot and I had to go to some Google searches because well, you know I was a power Elementor user and bricks is quite different what I'm expecting here though I am expecting this to be more like Elementor that's my expectation since they are positioning themselves as an element or replacement Alright, so I don't see any chats yet. I don't see anybody in here yet. Am I alone? Is there somebody in here? All right, I'm gonna have to drink a lot to you guys. It's late at night and I do intermittent fasting So I get dry at nighttime All right, cool. I'm gonna dive in right now. So Let me go back over here and I'm gonna first set up my install. That's always the first step that I do I get rid of these These sample pages that they have always clear them out. This is just my OCD kicking in right here I'm gonna go to my post Let me go ahead and clear out this. Hello World right here. Let me go ahead and delete it. Make sure we don't have any plugins. Okay. No plugins Any themes? Wow, it's a WP got some clean installs. That's pretty good. I'm glad that they don't have like the last four years of 20 20 themes. Okay. Let's go ahead and let's ask some pages so that way we could build our menu. Let me add home Oops, that's new. I'm not used to this. All right Author who is that? Oh, okay. It must be because we spun up the site. I probably didn't even create an account All right, we got our home. Let's create an about Okay, this must be part of that theme I have not built a site with the default 2024 I've been built a site without anything but hello Or bricks in the last three years. So this is all new right here. Let's see here All right, I knew that pop-up was coming this time Let's do services publish It's going to add a couple more I'm going to put in pricing wait for that pop-up. That's buggy. That's bugging me. It's not buggy. It just bugs me All right pricing People like the font though that they got in here. It's pretty dope And then I'm going to do contact. I want to make sure we you know what I got to do the bubble test I forgot Okay, I'll create a login and Okay, I could change those names. I'm not gonna I don't think I'm going to create a drop down. That might take too long Let's see here get started And my last bubble test I made the menu identical So let's see here. What else we got login All right, and then I'm going to do a contact cells. So I'm not going to make the menu exactly but What I want to do and I'm going to try to attempt with this is to at least create a main menu here And then a secondary menu including a button. So I'll see what do I have to do? Do I need to write css for this or can I do all this within a builder? I'm going to try to do everything within a builder and resist writing css to the best of my abilities. Okay Uh, let me see here. Okay. So we got to create We got to create. Oh wait Oh, it must be because of the theme. See, I haven't used this theme. I'm not a gunnenberg user Where's the menu? Is it uh-oh? Am I tripping? Am I missing the menu right now? Is it late? Or what is the deal? Okay Let me try Yeah, it must be because it's all right. I'm not trying to learn all that right now I am going to go to the themes. I'm going to put a whole different theme in it I don't know. It's a theme. What theme to use with it though I'm going to I'm going to go to my default Elementor I was thinking to do astra, but you know what I'm going to do. Hello Let's go ahead and let's see if hello worse, which hello's a bear bones theme So technically it should I don't know. Oh, I hope I don't get these notifications if I do I will delete it, but at least for now I could create my menus I couldn't do that in 2024 at least not the way that I'm used to doing it Oh, don't ask again for this session menu Create that let's see Home about services pricing Let's go ahead and create two menus Let me see All right, save Let's create a new one See, I'm going to try a couple different things. Maybe we could get away creating all this in one menu Or maybe I could build one here and one here now ideally especially for SEO I would try to find a way to do it all in one menu You know what in fact, let's go ahead and do that. Let me go back I want to try to follow all the best practices. So let's go ahead and do The other ones right here. Let me structure it up because I am going to start with the header That's always going to be my first step. All right home pricing. I usually I don't put home, but I just wanted to fill some space Okay, it looks like we're good over here I am going to prepare for this though. And let me go ahead and add some css All right at the CSS classes and I'm going to call this header Button, so let's go ahead and save this just in case if I do have to style that up with some css All right. Now let's go ahead and install breakdance And I'm going to upload it. I got it ready all ready. It's right here We're using the latest version 1.7.0 Now I have no idea who is here If you are though, let me know what's up say something inside the chat I do have it inside my other screen here. Okay, let's go ahead and activate the plugin and I got my code here on the other screen All right Oh, no, it shows. I'm going to have to Okay, I kind of went quick. Who's going to watch the replay and pause it and use it Let's see. I'll have to change that. I was hoping it was going to be like, you know security like Okay, that's my first impression. They didn't add security in that to block the code, but It is what it is All right, let's see. What do we got here? All right. This is my first time installing it I've never looked at breakdance yet All right, cool. So we got some good links over here in the video All right, I'm not going to do that yet. I'm just going to jump in now One thing I do notice is this is down on the bottom Huh, I have to see how that works inside the ui as far as the bar up over here are Our left side toolbar when things start to get added if it stays on the bottom I don't know. It's kind of interesting. I mean, I do like how bricks stays at the top Elementor seems to be somewhere inside the middle, but we'll see I personally I would rather have it either at the very top or very bottom Just makes it easier to access now first thing that I do on anything that I add My first step always is the settings I never skip this step I always go through all the settings because I want to see what I'm working with and this is going to help me out Okay, here we go. You can see I did get this in November. I've been waiting to use this since then global styles Okay, I'm going to come back to this theme WordPress theme system Let me see here Design every part of your site with breakdance disabling your theme gives you the best preference and maximum flexibility Okay. Yeah, sure disable. I don't need anything inside the theme Your themes header. Okay. So if you are going to be using, you know, another theme and you just want to use this to add to it Say you are using like, you know, astra and you are going to use stuff in the theme. That would make sense Okay, I like that. That's cool Woo commerce, what do they got here breakdance styles enable I don't have The theme system is disabled breakdance will Okay, I'm going to disable this because I'm not using Woo commerce and I don't know if this is going to add anything to the side. This is why I go through the settings I'm looking at what can I disable? How can I cut back below? How can I, you know, make sure that this is going to stay as light as possible? So let me disable that Okay. Yeah, we're not using that user access Okay Content full. Okay That's cool editor. Usually I'll go ahead and let them edit the content. That's if it's going to be for a client impersonate a user with edit content access Oh, this is pretty cool Yeah, that's pretty cool right there. That saves some time, you know, like I don't know about you but I've had to create user accounts And make myself an editor with a different email just to see what it was like see what the client is going to have Access to what they're going to be able to work with maintenance mode dope. They got maintenance mode. We're not going to go into their performance. All right Yes Yes Yes Yes Yes All right Yes, all right Okay, one thing already I'm seeing I do like is that they're not automatically turning things on That's one thing that really gets with, you know, that's one of my other pet peeves that I do have with Elementor as far as like their Their settings if you go to the features A lot of those features are turned on and they shouldn't be and I know they're trying to help out users that You know might not know about them But still like things like notes are turned on by default And we don't need that like it does add extra code to the website All right, okay Uh-oh, does it have Something for Okay, it doesn't have anything for claffler. So we need to get that Install bricks. I know has that All right for the turnstile. So this needs some turnstile put in there All right post types Huh editing will only be enabled for the above post types Page, you know what? I don't want post Let's just go ahead and put on page for now and see what happens But post when I create posts, I like to use Gutenberg and create a template. That's how I'm Hoping I could use this and I'm pretty sure I can use it allow svgs. Yep Apply the content filter Design content you can enable this option filters. All right. I want to do some digging in on here before I enable that I'm going to leave that unchecked With you know, I'll probably end up reading that enable render I'm going to leave this unchecked as well Leave this unchecked as well. Okay, we'll leave all those And then privacy. Oh, no, I didn't do my Save changes. All right privacy Disable page and session cookies. Yeah, let's go ahead and do it. What's uh, see what that does Design library. Okay. What is this turn this website? Into a design library into a design set All right, I'm going to circle back to this because I don't know what this is all about right here Now if you're watching and you do You know, let us know put it inside the chat or the comments And then custom code. Okay header footer the basics right here. Actually a little bit less Oh, no, I feel like it's missing something Let's see here Soft reset total reset Soft reset total reset. Okay This is good to have Just like inside l Export settings. All right, cool. We're good to go now. Let's see. Good. They got form submissions That is really good Design library. What do we have here? Okay, it looks like templates are already included I don't want to import anything but let's take a look at a template Okay, and it looks like we can copy and paste this Nice. All right This is actually a working one. It is, huh? Okay. I don't know how I feel about this design though, but I don't know. What do you guys think about this design? I want to see some dope templates. All right Put some dope templates in there. You got to like I don't know. I would love to see something like really stepping up the game When it comes to templates. All right, let's check out one more template Ah, the typography is killing me. This typography is terrible. All right. So first I could tell right here just looking at this template like this is not good right here Look at how big this line height is and then the text all caps Like all caps is super tiny text like all right the typography is losing on this Yeah, this is not good right here bad bad design practices. Oh my god. Look at this spacing issue. Okay You can see my design ocd is kicking in All right, I'm not going to be using any of these templates, but I don't know I would like to see some really dope templates and I feel like it's something that everybody's missing I don't I have not seen any builder between the three that I've gone in bricks Elementor and now breakdance. I haven't seen any of them really come out with just some like super dope templates That you know look like a professionally polished website All right, this isn't as bad. At least it's got some You know some even grids. It's not terrible Still the typography is killing me All right, that's it. I'm not going to keep going. It's it's laid over here and I'm gonna Start complaining too much. All right, we got pop-ups now. Okay Looks like this is where we build our pop-up. I'm not going to touch that right now global blocks Okay, what is a global block? Okay, I'm going to call that what is oh, I think I might know All right, man, uh test global Huh This actually if this does what I think it does that's pretty dope. Okay. No, we do not want that Okay, this is the first time I've looked inside the builder Let's see what that experience is like Okay, we do got sections. I can't wait to see what the code looks like Okay, we got our flex controllers right here. We got our gaps and can we change it? Yes, dope. Okay horizontal, okay huh All right, so it looks like they're trying to make the flex options a little bit easier size Okay, all right. We're going to go back through that in a moment right now what I'm going to do is You know what? Let me try one thing really quick. Let me go back to No, that's Is it this right here? Oh, that's just to view. Okay Oh, so I have to click on this to get an element. Okay Let me get this right here Here it is my first global I want to test this out one. I'm testing out the front end All right, we save that All right, click the section. All right. That's pretty was nice All right, we'll go ahead and line that in the middle center Gap, what should we give it a two rim? Okay. I don't even know about the builder settings yet But I'm going to save this and I'm going to get out of here. Let's exit to wordpress All right, so we got that right there. So we got our headers and footers And then our templates. What templates do we have here? Okay? single product Shop page and product archives specific product archive. Okay. Nice That makes it a little bit easier creating different archives Post and post archive for four and search results. I wonder if this also can do it for let's say authors Uh Custom template Please read the documentation Like I'm wondering post type archive Post archive, I'm wondering if we could do like different categories tags. So we got the author. So that's good In our taxonomy archive. Okay. All right, dope. We got all that stuff. Let me get out of here Oh, there's a cancel right here All right, so I'm going to get started. The first thing I'm going to do is I'm going to build a header And I'm going to take a look around and see what settings we could do inside the setting So I'm going to call this main header Template, you know, I'm going to call it bubble header And you know what though? I got to cancel. There's something that's missing What about my custom fonts? Is there a space for that? Did I miss the fonts? Okay, and be knowing says a design library settings equal saving your website as a template All right, that is super helpful right there. That's pretty dope. All right. That's pretty cool Tomorrow one. What's up, bud? Good to see you here, man. Okay. Where are the custom fonts? I did not see custom fonts anywhere. Am I missing something? Do we do that directly? Okay, it's not going to be in any of these it doesn't that wouldn't be right All right. I'm using my tools Where to add custom fonts inside of right pants All right from the top drop down and preferences. So in the okay, it's in the visual editor. All right cool So let's go back over here to the header template. We're going to build it now Let's dive into the template and we call this bubble header Guys, I think that we're only going to be able to build the header the Banner and maybe one or two sections but Okay conditions Dope, okay. I love conditions Oh, is there an door? All right. That's probably going to take a while Let's go ahead and leave this right here. Do I need to add a can I want to make sure Because in bricks you have to add a condition. That was one of the things that got me stuck the very first time Using bricks was Not realizing I had to set a condition But I guess the location is the condition. So let's go ahead and just add this and see We can figure this thing out. Okay, cool. Let's edit and break dance Oh, I need another tea I think I needed tea with some caffeine in it though. This is a caffeine free tea Uh should have got one with caffeine. All right. So what are we going to do? We're just going to make this super super easy. All right. We got just the logo and menu So let's see what we can do with that. So first, you know what first off though, we got to go through the settings That's always the first step is to set up the settings. We went through the back end, but I know now for sure Okay, I'm going to close all these. Let's see what we got up over here Okay, it looks like these are our templates Previewing post archive my post archive Did I make this into a post archive? No, am I tripping out? Let me go back here header Okay settings, okay. No, it's a header. It's Okay. Okay. I must be tripping. So let's see here. All right. Not sure what this is I think I have to play around with this a bit more Uh Main menu. Okay. Let me click that up. I have I'm going to have to Figure out what this is all about right here. Now this one looks yeah That looks just about right. Let's go. Okay structure dope Does this float? Okay I wish I had a floating structure. That's the one thing I really do like about elements or is that floating structure? Uh I like it in bricks, but the only thing is I find that Building sites on my laptop when I go to the coffee shop or I'm in airports or something It can be a bit challenging like everything gets really small with the structure panel and then the other uh element and styling panel as well All right global settings selectors history There we go preferences and this must be where the fonts are at So I'm going to go through each one. Let's first take a look at global settings colors. All right Okay, so Rantex heading links Can we change the names to these or can I just create a palette? So all right Add a palette. Oh, that's good that they got gradients there. Let's say uh Able blue And let me go over here and get their color palette real quick And I could do that with my color eyedropper uh Oh, there it is Oh, no, I won't get it over there. Okay Cool. Let me get that blue That color bubble dark blue. I'm just going to add a couple of these. We're not going to do too many There we go. We got the dark blue If you're wondering what I'm using I'm using hub refi. It's so Good, it saves a whole lot of time. All right, and we're going to put white I'm just going to bubble white. I'm going to keep it consistent. I'm a geek like that Bubble white We'll just do fff and then Probably right. No bubble, you know what that's a boring That's a boring. Let's call it light bubbles. All right, it's late now. I'm going to be I'm going to play around Bubbles and then this one's going to be dark bubbles That's going to be formed by Text color. I hope I spelled that right Bubbles. All right, let's get the text. What do we got here? In that oops go ahead and turn that one off All right, we're not going to do any gradients. Do I have to save it? I don't want to lose this Well, okay, so this is floating Oh, please tell me if I close this. I don't lose it Okay, somebody in the chat. Tell me tell me. I'm not going to lose it All right All right, I'm going to close it. Hopefully I didn't lose it if I did. Okay. Good. Good I was a little worried because you know, it's tedious when he got to like Go out and get color hex codes. Oh man. That's the worst. Okay brand text You know, I could go ahead and add the text color heading color Uh background we could go ahead Okay Oh, we got our palette here. Okay. All right. I see All right. That's that's good That's good. All right brand color The brand is going to be that dark one. We got our links there. Let's see how that does. All right Let's keep going. So buttons make a style up your buttons Hmm I don't know. I kind of like Let me see. We got two options for buttons primary and secondary. I'm not going to do those yet Heading fonts Body fonts Okay, I want my globals. That's one thing that I do like about elements or as we have our global. So is that going to be a preset? Okay, it looks like it is nice. Nice. Nice. So we could put like like excel Title or title excel. Okay. I'm a little sleepy right now. I'm going to put header Excel and this should be the large one and of course we got to change this to ramp I wish they could give an option if they do got an option to change Things to ramp by default. That would be great. Okay font size rim. I'm not even going to try to Make it right right now. So let's just see here advance. What does it let us do? Okay line height Usually it's just going to be a one And it's going to be an m letter spacing. No more spacing. No decoration none of that. Okay All right, so it looks like we could do our presets. I'm going to let me add a couple more header large I'm going to add a custom font. I have something ready font size, let's say three point five wait seven And then I'm just going to do a body text for right now All right presets You know, this is the most tedious part about building the website, but the most important part You know, I'm just going to put text Uh medium. So that's a regular size text Font size right here. We're going to use ramp. I'm going to put let me see 1.125 Which is going to be like 18 pixels. Put this at 400 Advance over here in line height. I don't think line height should be in advance I feel like that should be in the regular preset Maybe the other ones should be in advance, but not line height line height is super important I'm going to put 1.75 m And leave the others the same. All right, cool. I want to move on because this will take me like another 15 minutes to get it right Oh, banana saying take my time. Oh, man. I wish I have client meetings inside the morning. I have a whole lot of stuff coming up. So I want to see how much I can get done in an hour But it looks like we might have to go a little longer I say I'm going to do an hour, but Yeah Didn't happen. Okay Forms. Okay, it looks like we could style up our forms for right here. Add some presets to the forms Uh, I'm going to leave that be Containers. Okay. What do we have here? Is this this is what I was looking for is this going to be for uh Is this going to be for A whole space Sections oh, I wish we could do preset sections that would be dope Call them gap Okay, I'm trying to I'm trying to see what is going to be the default space like right here We're to add a section. Let me close this to get more space Uh Let me see and add A text right here So it looks like there is some padding right here on this side. I don't know what it is. In fact, let me actually save this Okay, I have to click on no, I don't want to exit. How can I See this in the front end. I want to see it in the front All right, is there any way any easy way to click on this and No, I'm trying to clone. Okay, good All right, does anybody know is there like a button where I could click on it and just see it in the front end So I could quickly go back and forth or am I missing something It's really preference. Am I missing it? I want to You know, like elements where we got a button down here on the bottom We could click it and it opens up a new window and we see it inside the front end. Do we have that here? Okay collapse huh All right. Well, I can't see what I wanted to see there modify This is a little gear here. No, I don't want to modify No, I didn't mean to do that. Okay, that's good to know the command z takes us back. What does this little gear do? Okay, it's not doing anything All right, let's go ahead and just continue going. There's a couple things I want to see global settings Yeah, I'm trying to look at Setting our global width the width for the whole site, you know when you set up Well, yeah, any of the other ones there's an option. I know there's got to be an option here It's just a matter of finding it All right, I'm going to go to preferences. Let's see what we have over here preferences dark mode. Okay. Yeah I want dark mode. It's nighttime here Auto scroll to activate elements Huh, I have to see what that is I'm getting tired guys. My eyes are heavy. All right scale content to fit screen Okay dark mode disable messages for mtssr element shore Show element id I'm interested I'm in like one thing already that I could tell you that I feel from this like I know it's going to be a learning curve Uh, I have to admit it's a bigger learning curve than what I was expecting I was kind of expecting something closer to elements or but they do have their ui completely different the ui isn't You know It's not the same but maybe I need to spend obviously I need to spend more time But I could say this one thing I do like so far. Everything feels fast. It feels Really really fast. You could tell that this is fast. So that's good element id in this Okay, you know, I'm just going to turn all these on we know I want to see what the messages are disable code editor line wrapping No, I want the line to wrap Oh, there's my productivity report six hours today Yeah, I actually spent a two hour session in a coffee shop. So I hit eight Just had to throw that out there. Let me see though. Okay panel positions Uh add Okay, oh, that's kind of dope This is kind of dope. I like this Okay, selectors Huh, okay. I gotta I gotta dig into this right here All right. This definitely is something that I gotta learn right here All right, let's go back over here. I'm gonna put the selectors back over Okay, global settings All right, we're gonna keep those on the right The structure. Yeah, I want the structure to stay on the right That does make it a lot easier. It makes it cohesive with the way that I'm using bricks and elements or history revisions Does that look like okay? pop out position Wait pop out position stacked side by side huh Not even sure what that is All right, you know banana saying uh, we need to read the break dance guidelines Definitely man. Definitely, you know, like that is always the first step like for me This is my first step in my process. I go through the settings I want to deep dive into the settings. I want to see what there is because after I do that First I could set things up. I can see what doesn't make sense. I can see what does make sense I get a better idea and that is when I go To the documentations when I go to some videos I go in and take a look because it helps me to understand what I'm looking at I don't want to go into documentations and videos first. I want to first Take a look at this and see what am I working with and then yeah, definitely we're going to need to do something. You know what? Okay I see the custom fonts and the break points. So okay The one thing I was trying to do It must be inside here and that must be setting uh the container. So okay column gap I'm just assuming those are gaps I'm going to do ramp. I'm going to do one point Five Yeah, okay closer to about 20 pixels right there and then let me know. Let me go back here sections Container width. Okay. I'm going to make my container with uh 12 80 now. I could also do this with ramp. Uh, I just can't calculate it in my mind right now vertical padding I don't want default padding in it. The thing is You know like horizontal padding. I'll put a default horizontal padding. Usually I start off with 40 And then when it goes down to mobile or tablet when it goes down the tablet I'll take it down to 20. So they do have that option. Awesome Let's go here and put it at 20. That's going to save me a ton of time. I only set up The horizontal one only the ones on the side because it helps me keep my design system Consistent and in fact, I would actually set this up though with ramp. It's better to use ramp with this But right now I'm a bit too tired to go through. I don't have my ramp calculator out So I'm going to leave it at that Let me see what's in the other transition duration. Oh dove. Okay point Two millisecond, that's okay Oh, is that what I want I'm used to Seconds. So is that going to be a two? Okay, I'm used to doing like ease out point two s for my two seconds We'll leave it out there and we'll come back to that. All right So back over here though preference We might have to do this in a two part I might have to because I feel like I'm starting to get some of this down Uh Use fonts in external CSS Oh, never use this guy. It's never use this never use adobe fonts on your website Avoid that problem. It's bad for gdpr bad for performance We always want to host our own fonts now. Okay. I do have one founders road test this is actually The fonts That is on their website. Let me go ahead and add these Can I add them all? Okay Bowl. Oh, that makes things so much faster. Doh. Okay semi bowl. That's going to be my 600 Medium my 500 Wow, this has been the easiest way to add fonts that I've ever experienced Light no way. It's that easy Wow, let's close that up. Let me try something real quick I got to go back to these glows right here to my typography. Let's go to the presets right here I'm not going to touch the you know what we could okay. It's right up there. Oh, I didn't realize this We do have the base size Oh, so I can set this to 10 pixels That's going to make things easier when I do my ramp It's not going to be great for third-party tools But it'll be great for me to build my site. I'm going to leave it at 16 guys I go back and forth on this there's pros and cons but You know the default base size and the browsers is 16 and even though it makes it more challenging to Set my ramp. I've decided to go back to 16 I was using 10 for a while, but there's also nothing wrong with using 10 is still totally totally legit Let me go ahead and just undo that. I'm pretty sure it's set at 16 by default. Okay. Let me go ahead and save this Why do I have this spacing here though? I don't like that Let's go back to the containers here to the section vertical padding. Let's put zero. Okay I don't want I don't like default spacing. That's one of the things that uh That we have going on site elements or and I feel that a lot of people's websites are broken in the design Because of that default 10 pixels that are in the containers It's just as a designer. I you know like I don't know. I like a fresh start when there's default pixels and things. It just throws me off. So now Let me go ahead and build the temp the Header template. Let's see how quick we could do this. So I got in the section to the layout Let me see. Is it going to be here in advance? I'll first start with this. I'm guessing this is styles Okay I think the gap should have been by default. I did put it here. I don't know if this is going to Translate throughout the site. Let's see if we need to add it individually Horizontal we don't need to do anything there We're No, I want to do space in between Huh? I want to see my structure too That's going to help me out here Uh better section. Let me do that All right. Where's my space in between? Let's see. It might be in the advanced stuff background color All right, we got that. Okay. That makes things a whole lot easier. Okay. This is pretty dope here I do like it has this. I want to take a look at the code. I want to make sure but I'm pretty sure These are going to be variables, which is going to be great for the you know just for Or the back end stuff overlay. Okay We got gradient video nice. How is a gradient applied here? Just want to test out gradient Okay, you can save a gradient global that's dope. Okay nice Choose Okay, uh, let me see how How's this being done? Okay, kind of like figma. You just click on it. Can I add something else? Oh, wow. No way Oh, I like that You see what's happening here. We could add multiple hues right here. Now. Let's go ahead and turn it Okay, that's pretty dope. I gotta admit it. That is pretty sick. All right, cool Well, we're not going to do a gradient. So let's turn that off Because we are just replicating this very simple header right here super super easy Okay, I'm going to start adding in elements because actually let me finish going through this I want to see what I'm working with All right size. I wish these would close. All right. That's one thing I don't want a bunch of things open It would be great if these auto close if there is an option for anybody who is using Who is using break dance? There is an option to auto close One of these sections when clicking on the other one. Let me know All right size height, okay, we're not going to do let me see Contained Huh, okay, and this is cool. Just like on bricks. We could go ahead and exit it out I do like that. We're able to see what is styled with these dots right here I'm glad that they pulled this this has been This has been one of those things that breaks that has you know, it looks like it might be small But something like this really helps with the productivity. I mean, how many times have I gone through elementary? Wondering what was done. Where's the styles in and we're just clicking clicking clicking Going through so I'm really happy with that. Okay padding. Here we go Rem does it change it on all? Oh, yeah, apply it on sick. Okay. How about we can't Oh, it doesn't give us an option to Oh bummer. I was really hoping for that. It's another thing that I really like on bricks Is the fact that we can link Either the top and bottom or side inside left and right or we can link all of them That is a major major time saver right there Now we could do apply on all but I don't want to apply it on all I wanted applied only On the top and bottom If you really think about it, it doesn't make sense to just apply on all because it's very rare for situations that come up What we're going to have equal padding on the top bottom left and right Those are rare situations, but it is more common We come across a whole lot more situations where the padding is going to be the same on the top and bottom And we're going to have a different A different padding, but that's going to be the same on the left and right So hopefully that gets that's something that gets fixed later. That would be great to see that implemented And I'm also going to be nice too because I know this is still a new product. The fact that it's came this far In such a short time is pretty good. Let's see here rapper huh Okay, we could add the id we could add the class All right Section draft. Yeah, there's a lot to learn here. There's a lot to learn I don't break points So this makes it a little bit easier to hide Conditions, okay All right, we're gonna have to dig into those but I'm running out of time. I want to build this header. So All right, I'm going to go in and let's see That hides it add okay dope Let's see. I'm going to add can we drag? Okay. We don't drag. We only click Okay, let's do ahead and drop in the image now. I do have the logo for bubble Uh-oh It's taking a while. Let's upload that All right, let's go ahead and add our alts Bubble logo just out of habit Add that in here and your size fully add. That's no problem. Okay. It does give us the alt as well You can add in our custom. Let's see caption All right link. Yes, we want a link and let's see here URL and I am just going to put a forward slash For home And no, I'm not going to lazy load. Don't lazy load anything above the fold Let's see over here image with What is the width? Okay. I'm going to open up the side panel so I can go quicker Let me get out my bubble Oh, no my hover fi And this is 110 pixels, so I'm going to put 110. All right. Why is there a height on it? Is that from the actual image or Oh, it is from the image. Oh Okay, this was just oh, it's that's a png. That's why Yeah, I just snapped it's just off of google right here I couldn't download it off of their site tried couldn't do it All right now You know what? Let me remove this. Let me put a menu All right. So one thing it does I notice uh doesn't automatically put the header elements on top Like you would have an elementor or inside uh bricks You're in a header. It's going to throw the header elements and same thing I don't have to see if it's going to be the same for For the others, but okay menu build. Oh, okay Oh guys, we're going to have to jump back in here again This is we're going to have to have a number two For this but wait, I don't need That is kind of dope Okay, I have to see this on the front end. I got to see how this code is I usually try to stay away from mega menus because of the code because of the dom the divs and Just bad practices for SEO, but let's see what it is now One thing I want to do is let me style up the section because the section is not working Okay, okay, so it looks like we just have to style the horizontal so Hmm that was kind of easy space between remember I was looking for that middle And you know what though? All right, this is what I'm interested in I don't know if I want to do a menu builder. Let's see if they have another element here for the menu I want to use a default menu here. Okay. It must be this one. All right But this one right here. Let's say Hey, what's in it? How do I get down here? I know there's items in it It opened before am I missing something? Oh, I am okay. Okay So let's see here. Let's see what happens if I remove it Product show another section. Nope I call them. Nope Yeah, I don't want to drop down. So is this only for drop downs? How do I remove that? Okay, I'm going too deep. I'm going to have to experiment with that right there All right, let me go back here. Let me reduce. Let's see if I can start going a little bit quicker Here spacing. All right Doesn't do that see also Now I wish that if I were to use my arrow keys that it would be using like the decimals It would go it's like Like instead of going to one it would go 1.9 1.8. You know, that would have to change each one of these individually I'm going to reduce the sizes and this is The reason why I wish there was links for just Uh for just that. Okay. Anyways Let's take a look at the menu Main menu. That's good But it has default padding. You see this is what I try to avoid We got default and I guess that this is going to be more user friendly Uh for others, but I try to avoid the default padding. This is especially here on the left And also here on the right, I don't want any spacing right here Accessibility what they got for it. Okay, we got our attributes that we can add good good good good good spacing. Let's see here I don't want any margins for sure advanced conditions animations Wait, wait, wait, wait, wait, wait, wait Space in between. Okay, we're going to do this Rim, I'll go ahead and put 1.75 quite big So there's some there's some padding going on here There's some padding happening right now Is this it the padding There we go. Okay So we gotta set this this is what I want to see actually when I hit when I start up I wanted to start at zero because look at Let's go here to my space in between. Let's say I want to set 40 pixels here. That's going to be you know what X2 rim This one right here Okay, 2.5. That's what I want 2.5 rim This is what I want to set right here, but you see when I do that I got no spacing here on the on the left or none on the right When we have that extra spacing here, it's going to break the layout because I want this flushed all the way over To where we have our line on the side if we use that default spacing like it was We're going to have a gap right here. I don't want gaps like I'm really particular in detailed When I want my alignments to be perfectly aligned. All right, so we got that right there now Let me say I still don't okay anybody autoclose Oh banana says I like autoclose. Yes, I would love to see some autoclose for sure Okay I still cannot figure out how to see this in the front end Oh my gosh. Okay. I feel like element studio There's a lot to unpack in here and I don't want to slam them like You know, this is just my first reaction Not even about slamming at all. In fact This is not all so bad now what I really want to see. Okay Here we are in our front end. It took us an hour and 10 minutes and we got Halfway through the header. All right. Let's take a look at our sts at our at our dome right here real quick All right, so We got a section tag right here Okay, I do want to see how could we add this into a header tag. I want this to be wrapped in the header By default, it would be great if it was wrapped in the header It's one thing that bricks does it has all this semantic tags set up by default So they're sco friendly, but just like elementor It doesn't Uh elementors the same you got to set everything up individually for your templates to make sure you have the right semantic tags but that is changing over here because Let's see here. We only got one diff and I want to make sure where is This div should have a width to it max width. Okay the max width. Okay So that we're right setting that max width there. It did create that variable. That's good. Okay. We only got one diff Looks like the image and they do wrap the image in a figure tag. That's great. That's pretty good I mean, I would like to see the option to choose between figure and image Uh, just for a little bit better control, but You know, at least we have that we don't have that option inside elementor and the figure tag It is better to use for important images as far as sco Now we do have There are some divs in here not as much as elementor, but You know more than bricks Okay. Okay. Yeah, we got our image. This is good. This is actually pretty good Not bad at all. Okay Now to our menu So we got a div wrapping our nav Uh, the button I don't even know what that button is Did I add a button? Okay, that's going to be for our toggle for when we're inside mobile And then we have the nav that goes directly to the ul li a clean HTML right here not bad at all not bad at all section with only two divs So this this code output is pretty good. I do want to see what that mega menu is like though I am interested in you know what I am intrigued. I'm interested I want to know more about this Who else wants to know more about this right here? Uh, but let's see here. Hold up. There's still a couple other things Okay, we got our home page I didn't set up the customize. Yeah, I just want to see if there's anything added in the customize Okay, just defaults Break dance global styles. Okay, so we do have Access to the global styles here home page settings. Let me fix that up home Okay, I don't have any posts yet, but at least it'll redirect me there Okay, break dance open home open header. Okay. Nice. Nice All right, I want to look at one thing one more time before we bounce We're going to do this in the two part or we're going to pick this up next week Oh banana. Hey, thank you for sticking in there for sure. All right, cool. So, uh We're going to pick this up again next week I'm not sure if I'm going to get around to checking out any documentation Uh, but I do want to I feel like we're starting to get a grasp and getting to the point where I'm ready to build out the page And we definitely don't got time to build out the page I think next week we're going to come out and just pick up where we left off and build out the page But before we go, I'm just curious about something I do want to see what that menu builder looks like in the front end. All right, I'm going to save that I'm really okay. I'm going to have to google this. Let me see. Uh, I'm going to do it right now Uh, how to view a page in the If I know how to ask the right question front end with on break on break dance Builder I click in the x button and choose an exit to the front end I but I don't want to close it. I don't want to close it. That's the thing It give the option But if I choose it, it closes it. I don't want to close it. Okay, maybe Maybe I could open up link in a new Tap Okay, that's what I had to do. Don't okay. Let me check this out now Okay Okay section div wrapping that div wrapping that Oh, wow. Okay. We got our div Hold up. Is this right? The div is wrapping our mega it starts off with a nav. Okay our button. This must be our Close our toggle button for mega for mobile menu. But look at that We go right into a ul and then it's going to li. Let me drop this down. Okay. We got that a Let's see here. What do we have? Okay again button Yeah, it's hard to get around. Well, okay But at least okay, there are quite a bit of divs inside here But it looks like we got multiple columns going on. I have to like take a look at what that Yeah, we do have multiple columns But at least we have the right semantics inside here as well All right, quite a bit of divs, but the right semantics Hey, this right here is a whole lot better than what we got on else I have to take a look. I mean in all fairness. I do have to take a look at what Elementor has built because I know at first I went through the I went through the html and I was just like, oh no We cannot do this. It's going to be terrible for indexing. It's really hard to code and have clean HTML for mega menus and look at the thing is in case if you're wondering Like why I'm so particular about my html when it comes to menus is that it's really really important Because this is what google is reading. We want to make sure that is really clear So I'm really particular with that, but this is not that bad. I think that all these divs are just coming because You know, maybe it has Yeah, we have multiple columns right here. Let's see this one real quick. And then I'm going to bounce out. Okay, we got the li The div the button There's a div wrapping it. How many divs? two three four five, okay It's quite a few divs wrapping But at least we got our URLs in our li. All right guys. I am starting to fade away one more quick thing How do we turn this section into a header I need this to become a header tag. How do we do that? Is it inside the events? Tag, there we go. Okay And we got that right there refresh that Inspect that this is what we want to see a header. All right. Let me go back over here All right guys, that's it. That's the first look. That's a part one of the first look We're going to have to come back to it. All right. I'm going to catch up right now on the On the chat that's as you can tell I'm fading away. It's late night over here and you know, uh I'm pretty deep in the course right now. So that's who you know between that and That was like sick for a few weeks. I caught something just wicked That knocked me out for weeks and just took forever to get back But Those and trying to crank, you know working on this course Well, that's where I've been I'm glad to be back on these lives though, but I'm also uh The brain is starting to shut down if you can't tell Oh, what was that focused thing? All right. My favorite part. Okay. Let's see here My favorite part of breakdance is how you can switch between pages and templates and the editor. Ah, that's interesting That's really interesting. I want to take a look at that This is the reason why I got to do another one. This was not enough. I thought an hour I'd be able to go in Uh, take a quick look and build out a page But it is going to take a little bit more time, which is okay because I want to understand The actual builder and also Things like this. I want to see what it's like switch and be between pages and templates Can you try the the drope? What what's a drope? I have not heard of drope. Okay. I gotta google this one Let's go ahead and do we're going to do a screen show on this. All right. Let's see. What is drope? Builder Did I is that spelled right? Okay So One of a couple things are happening either it was spelled wrong Or their Search is terrible. I don't know If you can Let me know if we're spelling that right. I want I want to know what that is And website design says that it is such a time saver. No, I love saving time Now I want to check out the things that are time savers And I really hope that this right here this unboxing this first look this first try Also could help out You know because this is a new tool and it is something I want to see like I love seeing this competition I feel like we're in a very fun space right now. Now. It's kind of crazy as well that like all the tribes are like Like fighting each other right now But the thing is we're all winning because we're getting these really good tools, you know, and they all could learn from each other Uh After being inside bricks now for you know for like the last seven eight months Uh, I see some things in it that just make my workflow faster And if those were implemented here in break dance and the break dance like I feel like it's a bit easier using that ui in break dance than it is bricks Off the first like especially the very first time using it. I mean the very first time using bricks You know the ui was quite It took a lot more Time to get around it. It looks like break dance. I could see it And look at this was my guess even coming into it just because i'm hearing from communities I'm hearing from people. I'm also hearing from like the tools and what they're promoting, but My guess my guess in the way that I'm seeing bricks Break dance position is somewhere in between bricks and elementor. I think they're trying to like hit that sweet spot right there but uh Yeah, if they could have a few things so that they could just update on there Ah, I I could see that that will make it a whole lot Faster and easier and more streamlined to use I'm gonna spoil guys. I mean for real. I'm gonna spoil elementor spoiled me with building things easily visually uh breaks the spoiling me with uh productivity and Making faster workflows. Uh, I want to continue to be spoiled. How about you? I want them to keep spoiling us. So yeah, let's keep let's keep pushing it Let's keep taking a look and if you guys have anything else you want to take a look at we're going to keep these going I was out for the last few weeks Uh, but back we're going to keep these rolling With that though, it is getting kind of late over here. I got a client discovery first thing in the morning So I'm going to wrap this up. Thank you all for watching and I'm going to be back next week We're going to do a part two on this. We're going to see it through We're going to build at least half of that that bubble site. All right We're going to complete that with uh with break dance and I feel after that we're going to get a better idea and understanding on it All right and website design before we head out has said they're playing with uh spectra Spectra's another one. Like if I were to go and start using uh something guinea bird Quickly spectra. Those are the areas of the astra astra has been killing it. They've been crushing it With their whole ecosystem So yeah, there's a lot of good stuff out there. We're in a good time in a good place All right guys. I'm trailing off. Thank you all for watching. We'll be back next week