In this video tutorial I’m excited to show you the easiest way to create a wireframe design inside your WordPress website for free!
Video Transcript
[00:00:00] if you’ve ever looked at your webpage and said something’s missing, or something’s just not flowing correctly, it’s likely that you need to go through an exercise in wireframing. And in this video, I want to walk you through what wireframing is and a super easy, fast, and freeway that you can do it on your own website.
[00:00:21] Hey guys, John here, and after working with dozens of clients and building out hundreds of websites, web pages, and funnels, I can tell you that one of the things that’s easy to skip. But it really hurts you in the long run is doing a good front end wire frame design of your project. And a wireframe can be best represented by this little image here on the cadence WP website, where you’re basically building out the skeleton of the future webpage showing how the blocks, how the sections work together.
[00:00:50] Putting them in, but not really focusing on adding, adding all the content or all the words yet, but somebody giving you that Birdseye 30,000 foot view of what’s about to be built. This is really helpful when dealing with new clients or if you’re not a seasoned designer of you’re on your own, when you’re working through your.
[00:01:07] Page, whether that’s your homepage, your about me page, or even a sales page for your next product in your funnel. All right. So in this video, I want to show you how you can create wireframe blocks without having to go to some other tool. You know, there are tons of tools out there for professional designers to do wire frames, right?
[00:01:26] Honestly, they’re not that necessary any longer. And unless you are planning on being a completely professional web designer, I think that what I’m gonna show you in this video is an awesome shortcut that you can do right now. All right. So I’ll pull up a sample website here. There is nothing on this website, but we’re going to go and build out a couple of pages.
[00:01:45] Directly on the site for the homepage and a sales page for our product. And we’ll be using a very simple and free wire framing method to do this. All right. So what we’re going to do here is come into plugins, add new, and I want to show you what cadence blocks has added into their library of tools. So if you come here to Caden’s blocks over a hundred thousand active installations, um, when it comes to designing and WordPress, this is my favorite tool.
[00:02:12] All right. So once it’s loaded up, you are good to go. We’re going to come here and add a page and let’s make this a homepage. All right. And we’ll go ahead and publish it so we can see what it looks. Okay. Whole lot of nothing right now. What I want to do for this design is let’s just build out a structure for, let’s say a service based business.
[00:02:32] And I want to first go ahead and give myself a clean canvas to work from. So I’ll come here to edit the page. And let’s get rid of all the stuff that’s kind of in the way. For example, I don’t want to show the page title. I want to make this a full width page. I don’t want to have a box silo and have room to breathe and play with my design.
[00:02:51] And I also want to get rid of that top patting remove the featured image. Good to go. Alright. So what we just did, there was give us a nice canvas to work with. Now we can start to really play around with our design library, and this is a new feature added in by cadence recently. And I’m very impressed with how they’ve implemented this.
[00:03:10] So when you first go to the design library, you might need to opt in if you’d like to, uh, to access to this, but it’s completely free. And I see they’re adding to this light light. Quite frequently, I’m going to go ahead and hit the little refresh button up here to check, to see if there’s any new updates, any new designs.
[00:03:24] But what we have here is a very easy to bring in a set of designs that are already done for you. Like, look, I like building websites, but I don’t like all the tinkering of all the settings, adding padding here, removing margin there, changing the colors of everything. And what’s beautiful about the way they’ve implemented this library.
[00:03:45] Is they’ve done all that for you, but they’ve also made it as minimal as possible. Meaning if they don’t have to put it in a custom color, they don’t put in a custom color. Let’s just show you an example here. I’m going to add this hero image or this hero section. And look, what’s happened here in the library.
[00:04:02] It showed it with a blue button because I had to pick a color somewhere. But because this particular website actually has its own theme, colors, uh, added in it’s a red primary theme color. It brings it in with that color. That means that your design going to stay kind of on point as often as possible. So let’s add a few more sections in let’s have a three, like are what we do kind of thing, uh, who we are, what we do, right.
[00:04:31] Well, that one might be a good one here. Here we go.
[00:04:38] This one right here. What we do, and you’ve got a few images. This is a very classic looking design. Let’s add another section here and let’s do maybe a portfolio or a bunch of images. Cadence has given us the ability to, um, do a drop down to show different categories of things that you got here. So let’s find a gallery of images.
[00:04:59] All right. This is it. But maybe there’s too much white here. I can click through and I still have all the same design options as I would expect. And I can change the background color to maybe a subtle one there and keeping my portfolio images like that. Add one more row. And maybe we have a service or a promotion.
[00:05:21] So we’re going to add in this little promotional item that has a coupon code again, notice how it’s actually brought in my theme colors for those webpage, not the classic ones. And to really make that clear, let’s go in and add an older style. So we go to the design library. You see, we have these tabs up here of wireframe starter packs and sections.
[00:05:43] The starter packs are. Also beautifully designed full fledged pages, but the problem is there’s so much kind of specific design language, like look at all these blocks and, um, you’ve got these gradients throughout. That’s very specific and unless that’s exactly what you’re looking for, I find that. Just as much time undoing work that’s in those design libraries as I would, if I were to just start from scratch.
[00:06:07] So, um, I’m not a huge fan of those. And then inside the sections, let’s say, for example, we want to pull in this section. Unfortunately, all the colors are kind of predefined, predesigned and predefined. So if you wanted to make it fit with your branding, you would have to go through and kind of change everything.
[00:06:24] One by one. That’s the downside of the classic way of adding in templates and sections and cadence kind of gets rid of that here with his wireframing by just giving you that structure, setting up the padding. So it looks good. Maybe adding in what your process is gonna say. Our process customers. And then maybe you want to finish it off with the pricing table, add one more row, come to the design area and we can select down to price table.
[00:06:59] I wish they would, um, make that alphabetical and you see here, they still have, uh, our color scheme throughout. So if I want to look at this page on the front end, Click on view the page. Look at this, like, this looks like a pretty well built website and nothing here is earth shattering, right? None of these designs are going to make you like, oh my goodness, I must have it.
[00:07:20] But it makes you look professional. It gives you that, that feel of kind of continuity that nothing’s really out of place. Sometimes if you try to overly design things, I find that it makes it look worse. It makes it look. Um, unprofessional, especially when it comes to background images and just too much, right.
[00:07:40] Less is more in 20, 21 and beyond. So I’m a huge fan of how they’ve done this. Let’s go ahead and add, also show you how you could use this for a blog post and they’ll come into a blog post here and example blog posts. Now check this out. You can actually come in and go to a room. And they have something here for content here you are content, check this out.
[00:08:09] They actually have something built out where you could put in your table of contents. And even imagine this being able to design out an entire structure for how to write a good list post, or how to write a good, authority building posts and being able to bring that in. So you have your entire outline right here on the page for you just ready.
[00:08:28] Pretty stinking. Cool. Let me publish this to show you and just like that in your blog posts, all these are still functional. You can still actually get to everything from that design. Let’s come back to our homepage. And what I like about cadence as well is their website is extremely lightweight. It doesn’t slow your website down from anything, from what I’ve seen in my testing.
[00:08:52] And, uh, they have some pretty cool features. I still need to cover in other videos, which allow you to even share these designs across websites, across clients, even sell access to them by creating your own cloud library, which we’ll cover in a separate video. Let me know in the comments down below, if you’d like to see how that works.
[00:09:10] all right, guys. So that was just a quick overview of the cadence wireframe functionality inside the cadence blocks. Plugin. If you are looking at your website for the next three to five years, it does look to me like Gutenberg is going to be that number one page builder over time. If you’re looking in 2021, it’s probably neck and neck with the most classic page builders like Devi Elementor thrive, architect, things like that. But I am looking ahead and it’s growing at an incredible clip and it is absolutely doable with a plugin like cadence blocks. You can build out a beautiful website.
[00:09:43] Uh, Without a whole lot of muss and fuss along the way. If you enjoyed this video, I’d love to hear what you think about it, what you think about Caitlin’s blocks and what is your current page builder of choice? Let me know down in the comments section below, and if you found this helpful and let’s get more videos from me, be sure to subscribe and like this video, and I appreciate you and I’ll see you in the next video.
[00:10:02] Take care.
