Transcription
Hey, this is Louis from Breakdance. And in this video, I'll show you how to rapidly build a complete website using Breakdance. You'll learn how to create a header, a footer, a home page, another page, a contact page with a contact form, a menu will link it all together. We'll set up your homepage URL correctly. You'll learn how to use the global settings to customize everything. And we're not going to design anything. We're going to do it all using the pre-made sections and Breakdance's design library. So all these sections, we can just add them to our page in just one click, which can make it super, super easy to build out our pages.
Okay, let's go into the WordPress admin panel and do it. So here we are inside the WordPress admin panel. And the first thing we're going to do is add a home page. So to do that, we're going to go to Pages and then Add New. Let's call this Home Page and hit Publish. Now, let's open up Breakdance by clicking Edit in Breakdance.
Here we are inside Breakdance. And let's add some designs to this page. So we'll go to Add. And if we wanted to build out the design manually, we could with all of Breakdance's elements. But I don't want to do that. I'm lazy. I want to use the design library. So let's open up the design library. And we instantly have tons of beautiful designs we can add to the page in just one click. We have a number of different design sets. So you can take a look at the marketing agency design set. You can take a look at the architecture design set. These all look absolutely fantastic. You can mix and match sections. You could put a section from this design set if you like, and then you could use a section from another design set elsewhere. But let's go into the Samba design set and let's use some sections from Samba. So the first thing I'm going to do is just use this first one as my hero section because this looks pretty good. And then I want to add maybe some social proof below that. So let's open the library again. And let's look for some testimonials. We could just search for. Having trouble finding anything. We could just click and search pages and type in testimonials. And there we go, testimonials. Let's find some testimonials. I like this section right here. So let's just click Add to Page.
Now we've got our testimonials. And you notice they don't look exactly the same. When you open up the library, you'll notice it says this design relies on global settings. It won't look the same unless you import them. And it's going to make it really easy to customize later because we can just modify the global settings, that'll affect everything. So let's go ahead and import those global settings. So let's confirm that. And there we go. We've imported the global settings for Samba. And now this looks exactly the same as it does in the preview. And let's go back to the library and add some more sections. So maybe we want some kind of content sections. Let's see what else we got in here. We've got team, we've got features. Yeah, here, let's let's add in this feature section here for some page content. And then let's maybe add a call to action in at the bottom. So here we got some called actions here. I think I like this one. I like this one right here. So let's add this to the page. And there we go. We've created a beautiful home page, uh, in, you know, very, very quickly.
Now, to customize this all, all we can do, all we do is just be click and customize as we watch. We won't edit the text. You know, you can just double click to edit the text, type in your own headings, you know, fill in your own text. See this opens. This is this icon. We want this to open up a video. So let's click the icon, go to link, and let's go into the settings for the link. Let's make this a light box link. We wanted to open up a video. And then we could paste in our video URL right there if we wanted to do that. We customize these testimonials. If we wanted to reorder elements on the page, we could. Maybe we want to get rid of this heading or drag it somewhere else. Maybe we want to add some space. We mouse over the edge. We have other videos on actually designing pages with Breakdance. So I'm not going to go into much detail here. I'm just going to show you how to quickly build a page using the library. Watch the other videos to learn all about the customization options available to you. But okay, here is a nice home page. So let's go ahead and click save.
And now that that's saved, let's go back to the WordPress admin panel by clicking the X and choosing Exit to WordPress. Now that we've created a home page, let's add in a header and footer that applies to all of our pages. To do that, we'll go to Breakdance Headers and let's click Add Header. I'll call this Main Header. And under Location, we're going to apply the header everywhere. Let's click Add Header. And now let's edit in Breakdance. And for this header, I'm just going to find one I like in the design library. So I'll go to Add Library. Let's look for headers. Here are some headers and so on. But which one do I want? I think this blue one is pretty nice. So let's add that to the page. And let's save.
Okay, let's go back to WordPress and let's add in a footer. So we'll go to Breakdance Footers, click Add Footer. I'll call this Main Footer and apply footer everywhere. Let's click Add Footer. And then let's edit in Breakdance. All right, here we are at Breakdance again. Let's open up the design library by going to Add Library. There's also a keyboard shortcut to get into the library. You can just click Command or press on your keyboard Command B. That'll get you browsing the library immediately. And let's find a footer. So here we got some Footers here. Let's add in what kind of footer do we want? Got a lot of nice photos here. Let's add in this. But this is a nice footer right here. And let's go ahead and save this. And then exit to WordPress.
And now let's take a look at our home page and see how it looks with the header and footer added. So we'll go to Pages and Home Page. We'll just click View. And here is our home page with the header, the home page we designed using the design library, and the footer. So that looks great. Let's go ahead and add another page now. Let's add a contact page. So I can go back to the WordPress admin panel. And I'll go to Pages and Add New. And I'll call this one Contact. Let's publish that. And let's edit with Breakdance.
Okay, here we are inside Breakdance. And you can see our header and footer showing up. Let's go ahead and add in a contact page. So it's going to Add Library. And let's see if we can find any good contact section. So here's Contact Us. We could add in some info about our offices. Maybe we want to change this heading to, uh, "Contact Us. Find us in person at the following locations." Maybe we want to add in a map. Maybe we want to customize this a bit. So let's just add a columns element manually. Let's do two columns. Let's drag this address over here. Um, in fact, let's get rid. Let's get rid of all these other addresses. So we can open up the structure panel. And I'm not going to go into much detail on editing pages. You can watch our other videos for that. But let's just delete, delete these addresses. And we have our one address here. Let's just in this column, let's add a little map element. So as you can see, it's really easy to customize the existing designs too. Let's use without API key just for demo purposes. And here we go, here's our map. Let's go into size and make that a little bit less tall, 300 pixels tall. And there we go. We got a nice map. We could probably put in our. Let's put in this address as our actual address right here. Okay, looks good.
Let's add in a contact form. So let's go to Add and Library. See if we find any good section with contact form. Here's a nice contact form right here. So let's add that to the page. And maybe we want to customize this form a bit. Maybe we only want the first name and the email address and the message. Let's just go to the form builder, choose first name. In in the fields here, we can clear out the fields we don't want. So we'll delete last name, we'll delete email. And now you just have first name and message. We probably want first name now to be full width. So we'll open up first name. We can go to Advanced. And we'll just clear out that width so it's full width. And there we go. And now on submit, if we look at actions, uh, by default, it's going to email us and store the submission. Let's open up this email action. Make sure it's sending the email where we want it. It's not. So we probably should put in your email address, uh, at, you know, wherever your email address is. And you're good to go from there. Okay, there we go. That's how to set up a contact form. So pretty easy. Let's go ahead and save this page. And let's go back to. Let's go to the front end, take a look. And here we go. Looks good. Looks good.
Let's go ahead and add another page. Let's, uh, let's just go New New Page in the admin bar. And we'll call this, uh, Our Services. And let's publish this. And then Edit with Breakdance.
All right, here we are inside Breakdance again. Let's go back to the design library. So we'll add in that library. And let's, let's design a nice Services page. So maybe we want, what do we want to put? Let's take a look at, um, we've got some team sections, we've got heroes, logo clouds, icon box. We could use that. We could use these for services right here. Let's add that. Um, our services. Now, we just fellow. We do digital marketing, um, search engine optimization, um, print design. And let's add another section. Maybe we want to add a testimonial saying our services are really awesome. Here we go. Let's add this testimonial right there. It looks pretty good. Let's add in another section for the library. Let's, let's see, uh, see some pricing. Yeah, let's do some pricing on these different services. Everything you need for $99 a month. Looks pretty good. So we'll throw that in there. Um, then let's add in a another contact section there. So here we go. Let's add this to the page. And maybe we just want the form. So maybe we can get rid of this column. And, uh, let's copy this heading. So I'll just right click copy. And then right click paste. And let's drag that above the form. Add some space. Um, get started today. And you want to go to the form settings. And make sure this form is actually going to your email or sending it to MailChimp or Slack or Discord or wherever you wherever you like your leads to go. Breakdance has integration supports web hooks, etc. Okay, let's go ahead and save this page. And let's take a look on the front end. That looks pretty good.
Now, let's go ahead and make it so our menu actually links to those pages. So let's go Breakdance in the admin bar menu and open up that main header. And we've got, we've got, we want a link to our home page. So I'm just going to rename this pricing link to Home. So I'm just double clicking to edit the text. And then for the link, we're just going to link to our home page, which is My URL is just breakdance.local. Okay. Then for, uh, we have our services. I forget the URL to services. Let's open up the link chooser. So we'll just click link. And let's search our site for services. And here's that page, Our Services. Let's make a link there. Let's delete these drop down menus. We don't need these. So we'll delete and delete. Or we can customize and put links in here if we want it, but we don't. And then we want another link to contact. So we'll just click services, click duplicate. And then change that text to contact. Click the link icon. And let's find our contact page. Not URL, we want to search for existing content. There's contact. Add link. And there we go. So now we have a menu. Let's go ahead and save that.
And let's go back to WordPress. We also want our home page to show up on the home of the site. Because right now, when you go to the home page, it's going to be a slash home page, and that's not what we want. So we'll go back to the WordPress admin panel. We're going to go to Settings, uh, I think it's Reading, and then Your homepage displays, choose a static page, and under Homepage, choose Homepage. And, uh, let's go to Pages now. And let's view the home page. And that's great. The homepage is now where it should be. We can click over to the services page. Uh, we can go over to the contact page. Um, everything is beautiful. That's how to build a website with Breakdance rapidly using the design library.
Now, let's customize the global styles a little bit. Because these design sets that you get in Breakdance, they make use of global styles. So you can get your site on brand much more easily than you can with many other builders. So let's go to Breakdance and click Edit Global Styles. This is going to let us browse around our site while tweaking the global styles. We'll get a preview of everything. So let's go over the home page. And here we are on the home page. Let's go over to the right and edit our global settings. So as you can see, we have global settings for colors, buttons, typography, forms, and much more. Let's go over to colors. And maybe we don't want our site to be blue. Maybe our brand color is purple. So let's go ahead and change our brand color to purple. Let's change our link color to to purple as well. Let's take a look at any of the palette colors that are present. No blues there. So that'll change most uses of blue to purple. So that's great. We'll have to tweak this blue manually because it's probably a gradient. Let's take a look at our service page. Um, as you can see, those changes took effect on the services page as well. We've got our purple check marks here. Or maybe we change our mind. We want our brand color to be red. So there we go. We can change that brand to red. We can change our link color to red as well. And now these are red. The buttons are red. This is red. Everything is red. So it's really easy to get your site on brand quickly. Let's go to the contact page and make sure that all looks good too. And voila, it does.
When you know, let's save our global settings. And let's go back to the front end of the site. So we'll just click this arrow to get out of there. And one more time, let's go home. And to wrap things up, let's just fill in a better red for, uh, the hero section on the home page. So go to Breakdance and click Open Home Page.
Here we are in Breakdance one last time. Let's click this section. We'll go to background. And if you want to see, uh, where the styles are coming from for anything in the design library that you add to your page, you can just click the modified button down here. And it'll show you all the styles that the designer who created the design library section, uh, tweaked in the first place. So for any element, you just click modify to see all the modified styles. This makes it really easy to find the thing that was modified that you need to change. So here obviously is that blue gradient that's on the overlay. We could just get rid of this gradient. And, uh, then it's not there. Well, maybe we don't want to do that. Maybe we want to customize the gradient. So let's go back here, click modified. And, uh, let's find that green. Let's, let's choose a different gradient. And let's just make that gradient more of a red. And, uh, yeah, there we go. Much better.
Okay, that is how to, uh, build a website rapidly using the Breakdance design library. Thank you very much for watching. And don't forget to check out our website and YouTube channel for hundreds more tutorials on all the different parts of Breakdance.