0:00:00
Hey, my name is Kevin Geary. I’m the creator of automatic CSS and frames. And I want to welcome you to this quick two-part series on getting started with frames. In part one, we’re going to take a look at getting the frames plug-in installed and activated. I’ll show you the new frames area of the ACSS dashboard. We’ll talk about some new features that come with frames. And then we’re actually going to wireframe out a home page for an example client, including the header and the footer. We’ll talk about wireframing strategy. Why wireframing is important. How to get paid for this wireframing process? Really good money. And then what we’re going to do is talk about, in part two, how to take our wireframe and actually style it into a completely custom web design using the classes that are already attached to those frames and ready to go for you.
0:00:54
So again, very quick two-part series. But I do want to say, if you have any questions, we have a support group. There’s documentation inside the support group. And we also have a dedicated frames support staff. So if you ever have any questions, we are happy to jump in and help. Or you can choose to get help from users inside the community, whatever you prefer. Let’s go ahead and get started. So, I’m going to share my screen with you. This is a brand new installation. Now, in order to use frames, you do have to have automatic CSS. And at the time of this recording, you do need to have Bricks Builder.
0:01:28
Now, we are making frames compatible with other builders. But right now, it’s exclusive to Bricks Builder. So Bricks, I’m going to assume, is already installed. Automatic CSS, I’m going to assume, is already installed. And now we’re going to talk about getting frames up and running. So, you’re going to install the frames plugin, just like you do, any other WordPress plugin. And as soon as you install and activate it, you are going to see it right here. You can get to the license key area two different ways. You can either click this little license link or under automatic CSS, you can go to frames license. So, I’m just going to go ahead and click the link here. And you’re going to see a license key box. I want you to grab the license key from your dashboard, copy it to your clipboard, paste it into this field, hit save and activate, that’s step one of two.
0:02:15
You have one more step to do. So, after the actual plugin is activated, you actually have to activate part of Bricks’ templating system. So, we’re going to go to Bricks settings, and we’re going to go to templates. And under the remote templates area, this is how Bricks actually connects to our server and grabs the frames and brings them into your library and allows you to import them into your website. We have to tell Bricks what our remote template URL is. So, you’re using Bricks Builder, right? You’re using frames. So, your remote template URL is bricks.getframes.io. This is not a real working public website.
0:02:57
It is specifically for hosting the frames. That’s it. So don’t try to go there and do anything. You’re just literally getting the remote template URL from there. And then you’re going to take that license key. It’s already on your clipboard, and paste it again in this box right here. Your license key is also your remote templates password. Then you’re going to go ahead and save your settings. Once you’ve done that, you are good to go. Now before we jump in and start wire framing, we’re going to take a look at the automatic CSS dashboard. Because when you have frames activated, you’re going to be able to use this new area of the ACSS dashboard, which is dedicated to frames.
0:03:34
And the first thing you want to make sure of is that load frames styling is turned on. And this is going to give you access to things like the light background and dark background areas of frames, which can be customized. Or you can swap them out. We’ll talk about that as we go. And then we have text light and text dark. These are just placeholders basically. But they can still be used across the website. All you have to do is customize them, which happens right here in these boxes. You can use ACSS variables. That’s what we would recommend. You could obviously put in a hex code or anything else you want, but we would recommend ACSS variables here.
0:04:10
And then we have some content customizations. These are based on the concept of using contextual utility classes. And frames are built with contextual utility classes. Because these are immensely powerful. I’ve done videos on contextual utility classes before. And we’ll talk more about that when we actually start wireframing out the page. But what I would like you to know is that these contextual utility classes that you’re going to find all throughout frames are actually customizable from right here. So if you don’t like your hero padding, if you don’t like your content spacing, your container spacing, your grid gaps, your lead width, all of that can be tweaked and adjusted from this panel right here.
0:04:51
And those changes apply to every page on your website, which is fantastic. So if you would like to make more breathing room between all of your content, you can do that. If you’d like to tighten everything up from one area, you can do that right here. We also have some card styling that is going to be consistent across all of your cards. This is how all of your card frames will start out. If you want to completely abandon this and just do your own thing, you’re absolutely free to do that. Or, if you want to keep that global control over your basic card styling, you can leave the variables that are already in all of your cards. And you can tweak everything from here in the dashboard.
0:05:28
And then when we start releasing our accessible components like bottles and toggles accordions, carousels, things like that, you’ll be able to turn those features on and off from this area of the dashboard. All right, so we’ve gone over everything that you really need to know to get started. Now what we’re going to do is actually start our wire framing process. So, I’m going to go to bricks, and I’m going to go to templates. And you’re going to see here that we have no hat or template. We have no footer template. This is a completely blank installation. The only thing I did is I set the brand fonts in bricks. So, in bricks, I set like my container, my site with, and I set the fonts.
0:06:07
And that’s the only thing that I’ve done in automatic CSS in our color palette because we are in the wire framing phase. I’ve set my action and primary colors to black. I’ve set my base color to black. The only, you don’t have to do this. But if you legit want your wire frame to be like a black and white wire frame, so no colors, nothing to distract to the client, which I do recommend, by the way, because that’s kind of what the purpose of a wire frame is. It’s not to focus on colors. It’s not to focus on anything really, but structure, layout, content, and get your client to make decisions on those things.
0:06:44
We’ll talk about that more when we get to the actual wire framing in just a second. So if you want to follow along with exactly the way I do things, this is what I do. I have the action color and the primary color set to black, the base color and the shade color set to black. And I just turned off my secondary and accent for right now. We’re probably not even going to need those for this for a client like this. This is just a sample client, by the way, it’s not a real client. Everything is made up, but we are treating it as if it could be a real client. So, I just have these two turned off for right now. OK, so let’s go ahead and dive in.
0:07:20
Now, there are really two ways to approach wire framing. One is you could open the Bricks Builder. You could start going through the frames library and just start adding components to a page. Or what I recommend, if you’ve done any of my trainings on process in web design, pricing in web design, just having that professional process, you know I recommend doing a discovery phase with clients. Before we build anything, we really need to know a lot about the client. We need to know what kind of people they serve, right? Who is your target customer? We need to know how to talk to them. What are your selling points like that we need to hit on? What is the offer going to be?
0:08:02
Because wire framing is part of UX design, designing the user experience. We have to know exactly what layout is going to work best for the target market that is coming. What kind of content do they need to encounter? How are we going to position that content? Where are we going to put the calls to action? What’s the offer going to be? All of these things get figured out in the discovery process. And if you’re not doing discovery with your clients, you don’t have to. I mean, if you don’t want to, if you feel like, hey, I can just wing it. And that’s what you do.
0:08:34
I’m not going to knock you, right? But I did a video in my inner circle on how you can add a minimum $1000 to every single project, even with small clients, just by selling discovery. Oh, by the way, keyword research, SEO research, that goes into the discovery process as well. So if you want to make more money, if you want to have a professional process, and if you want to get all your ducks in a row and have your information kind of organized and your strategy organized before you start building, I would highly recommend selling a discovery process. And one of the things that will come out of that discovery process, here’s our base camp right here. And I’m going to click on auto client fake, right?
0:09:13
And I’m going to go into ducks and files, and you’re going to see here that there is a home page outline. It is just a rough bullet point outline. But if you review this, you can see that we’re going to need a header with a nav and a phone number and a call to action. Phone number is very important for local clients. We need that prominent in the header. Next, it’s going to have a hero. We’re going to have dealer quality German auto repair. So, we’re going to pretend that this auto repair client, so it’s not a generic auto repair shop. They actually specialize in German vehicles. So, we’re going to be able to have that niche as our main focus. And then we’ve got some basic content all written out here.
0:09:54
We have the intro with a video. It’s been determined. It’s been determined for this fake client that they would be really well-off if they had a video from the owner of the shop covering all the selling points. Maybe even touring the shop because they have a really nice shop. We want everybody to see how nice this shop is. And just hear personally from the owner of the shop, I think that would be fantastic for user experience. And so, that’s exactly what we’re going to do. So, we’re going to put a video in there. And then we, under the video, we want to cover these top-selling points. And our top-selling points for this mechanic today are going to be certified German mechanics, and really, they specialize in German cars.
0:10:36
And then quality OEM parts. So, not just using any parts on your luxury vehicle. They’re using original equipment, manufacturer parts. And then we want to highlight that they have over 500 five-star reviews. That is not an easy feat to achieve for one local shop. So, the fact that they have that as a selling point, let’s go ahead and highlight that and point that out to visitors. Pretty much right when they arrive. The next thing we want to do is, we want to see if we can segment these visitors. So, when visitors arrive, they might be a Porsche owner. They might be a BMW owner. They might be a Mercedes owner. They might be a Volkswagen owner.
0:11:13
We want to talk about different things. We want to talk about these things in a different way, depending on what type of car the person drives. So, it makes sense that we have a section where they can actually select their type of vehicle. So, they can click on Porsche or BMW. And now we’re going to take them, by the way, this is really good for SEL, because all of these pages are going to be like Porsche Repair, BMW Repair, Mercedes-Benz Repair, Audi Repair. We’re hitting all the key keywords that this person wants to rank for. And we’re taking the person to a dedicated page where we know what kind of car they have, and we can really speak to them. And then in analytics, we can see, hey, how many people are we getting for Porsche versus BMW versus Volkswagen?
0:11:58
We can see what the most popular make is, maybe in that area. And then how these pages are converting to our offer, all of these things are very important and should go in to your UX design process, your wire framing phase. All of this thought is very important. And you can see I’m just working from a very basic bullet list. That’s so easy to do, right? Anybody can do that. Nothing fancy. The next thing that we want to do is just have testimonials, also very important to a local client. Then we can have an expert insights area. So, this client is going to be publishing a blog post that had to maintain your Audi, had to repair XYZ on your, or had to change your windshield wipers on your Mercedes-Benz or something like that.
0:12:42
You get the point. We want like an expert advice corner that’s going to be populated by our blog articles. Last thing we want is a footer, but here’s what’s unique in this footer. We want the offer to be very prominent in the footer. The offer is going to be a 25% discount for first time visitors. And that discount is going to be off of the labor. So, not the parts, right? Because we got to make some money. But we’re going to give them 25% off of the labor for their first time visit. We want that offer to be very prominent in the footer, because we want it to be on every single page. OK, so this is the outline that we want to achieve. So, what we’re going to do is we’re going to go into Bricks Builder. We’re going to start with our header.
0:13:25
Then we’re going to do our footer, because those are our templates. So, we’re going to work in our template area first. And then we’re going to go to our homepage. And we’re going to bring in the frames that we need to fulfill this outline, to fulfill this strategy. So from the WordPress dashboard right here, the first thing we’re going to do is go to Bricks. And we are going to go to Templates. We’re going to start with our header template. So, we’re going to hit Add New. And we’re going to write header. And then over here on the template type, we’re going to choose header. So, this basically assigns the template that you’re about to create to the header area in Bricks. I’m going to go ahead and hit Publish. And then I’m going to edit with Bricks to pull up the builder.
0:14:04
And then I’m going to click on the Templates area at the top right. This is where frames live. And you’re going to see that there are two tabs here. One says my templates. One says remote templates. And if you hover it saying, hey, Bricks.getFrames.io is what we’re connected to. So, you’re going to click on the Remote Templates tab. And you can see the entire frames library right off the bat. But what I would recommend is that to just randomly scrolling through here, you’re going to see that we have everything organized for you into bundles and tags. A tag is like what kind of thing is it? And the bundle is what family does that fit into, right? What kind of content is this? So, we’re looking for a header, right? So, what I would do is under the template bundle, I would come down and find headers.
0:14:53
And when you select that immediately, it’s going to resort to headers. Now we’re releasing new frames all the time. So, right now at the recording of this, there are three headers in there. But there are more coming to frames. There’s even a header builder coming to frames as an accessible component. So, there’s a lot coming in the future. For right now, we just want to choose the most acceptable frame for what we’re trying to accomplish. And we have two choices here. One has the logo on the left here with a call to action on the right. It’s got a phone number and an address. Another one has just a phone number and a call to action. They both have nabs, obviously. They both have logos, obviously. This is a local client.
0:15:35
I think it would be best if we could have their phone number and their address up there in the header. So, I’m going to insert template bravo. And you’re going to see here, when you’re first using frames, it’s going to ask you a question. It says, this template contains a theme style. Would you like to import it? If you say no, it’s going to keep asking you this over and over and over again. If you say yes, it’s going to import the frames theme style. But that doesn’t matter to your installation. It’s going to have zero impact on what you’re doing with the rest of your website. So, just hit yes. And you’ll never see this question again. And then you can move forwards. So as you can see, I hit yes.
0:16:11
And I’ve got my header. And it says, hey, there’s no nabs found here. So, what we want to do is, we want to save what we’ve done. And as you know, as a WordPress user, there are a couple of different ways that you can create a header. Or a menu, I should say, I’m just going to go into the customizer. I’m going to go to menus. I’m going to create a new menu. And this is going to be called menu. And then we can start adding our pages from here, which is nice, right? So if we want an about page, we can add that. If we want a services page, we can add that. Maybe we want a contact page. We can add that. And maybe we want to add our homepage to that.
0:16:50
So let’s just go ahead and add that. So, we have home about services and contact. That’s probably all we need for right now. So let’s just go ahead and hit publish. And the good thing is we didn’t just add those links to the header. And look, they show up right away. It populates that in your frame. But just for, you know, because you may have multiple menus eventually, it is a good idea inside that frame to select the nav menu. And then actually, well, let me refresh this whole builder because it doesn’t have access to the menu that we just created. So now I’m going to click on the nav, and I’m going to select that in the bricks menu builder. So, it’s always pulling from that specific menu. I’m going to go ahead and hit save.
0:17:31
And you’re going to see right off the bat that we’ve already got our mobile. Everything is looking good at every breakpoint. Things that need to happen, need to happen right out of the box. We are fulfilling our outline that we talked about, a header with a nav and a primary phone number and a CTA. Well, if we look at what we’ve got, we’ve got a CTA right here. We’ve got our phone number, and we even have an address up there. So really, really good stuff. All right. So, I’m going to save, and I’m going to bounce back out to the templates area. Guys, we’re done with the wire framing portion of our header. It’s as easy as that. I’m going to add new, and I’m going to add a footer. And this time I’m going to assign this to the footer area. I’ll go ahead and hit publish.
0:18:13
I’ll go back into bricks. And I’m going to do the same thing. I’m going to open my templates, go to remote. And this time I’m going to look, not through galleries. I’m going to look through footers. And we can see the footers that are available to us. You do want to hit this little refresh button from time to time. That’s going to make sure you’re seeing all the latest frames. And then we do have a change log as well. So, as new frames are released, you can keep up with what’s new and what has just been introduced. So, I want one with a call to action. This has a call-to-action button. This one doesn’t really have a call to action. This one doesn’t have a call to action.
0:18:47
But this one, footer echo, does have a nice call to action. Like a whole call to action area in it. Now, if I didn’t like that, and I wanted a completely separate call to action, I could go into my CTAs. And I’m going to see a whole bunch of options. And I can still add these to my footer template right above my footer. No problem. Some of them you may even be able to add directly into the footer. And you can really mix and match. Frames is very modular. You can mix and match these different kinds of frames to get exactly what you want. But for me, in this footer, this footer echo template has exactly what I need. And so, I’m going to click to insert it and look, I get exactly what I need. It just one click. I don’t really have to do anything here.
0:19:32
This is all showing me exactly what I want. So, I’m going to go ahead and hit save. And then I’m going to bounce back out. We’ve done our header. We’ve done our footer. And remember, if you’re selling the wire framing part of this, you’re getting paid to do this. You’re going to pay good money to do this. And so frames is not just making your life more efficient and easier and more fun. You’re making insane margin on the deliverable of creating wire frames. All right. So, I’m going to go now into pages, and I’m going to go to my, there’s my pages that I created in my menu. See that? I’m going to go to home, and I’m going to click edit with bricks.
0:20:12
And now we are tasked with actually wire framing out the body portion of this page. So, I had my outline. Remember, we wanted a hero section first. And that’s usually what you would add first. So, I’m going to go up to my templates, remote templates, and I’m going to choose my heroes. I want to see what’s available to me in terms of a hero section. All of these heroes are available to me. You can see their different layouts. And I want to show you one little trick. There’s a little preview eye right here. And let’s, I’m liking hero India. I’m liking how that looks because this is a luxury auto shop. I wanted to be very visual. And so, this one clearly has like a background image thing going on and then the content’s kind of out of the way, but it’s kind of darkened and I kind of like it, right?
0:21:01
But I’m going to click preview, and it’s going to give me a live preview of this frame in a separate tab. And then I can really say, oh yeah, okay, I like the direction of this is going. So now I’m going to insert that frame’s template. And you can see that it inserts everything in my structure panel is labeled to show me exactly what is going on. I can collapse that down if I want to. But we’ve added our first frame to our actual body page. And notice it’s inheriting the fonts that I’ve chosen. So I chose Baybus. Baybus, I don’t know how to pronounce that font. And then I chose Barlow for our body font and everything is just kind of styling itself to what’s set up from like a basic standpoint, right? But it’s still going to look just like a really clean wireframe. All right, the next thing that we’re going to do is we’re going to add our next section, which if we look at our outline here.
0:21:59
We’ve got our hero, and we’ll do content insertion in just a minute. I want to get through the wire framing, and then we’ll work on our content insertion. You’ll see how quick this goes. So, the next thing we need is an intro with a video and our top-selling points. Okay, so I’m going to open our templates again, remote templates. I do want to mention you should toggle import images whenever you’re importing a template that has images or a frame that has images. So for this, what I want to do is go to my content sections, and I’m just going to look for something basic. We could do this, but this has two images side by side. We’re going to do content section alpha here because it’s going to give me a little intro text on the left. This is an introduction section. So, a little intro on the left, and it’s going to give me an image on the right. But I know because frames is modular that I’m just going to be able to easily swap that image out for a video placeholder.
0:22:54
So, I’m going to go ahead and hit insert template here, and it’s going to insert that onto the page. Sometimes this happens right here. This is a bricks issue. Okay, this is not a frames issue and it does really bug me. But you see it inserted that frame inside, and you can see it’s right here content section alpha. It inserted it inside hero India. So, all you have to do is drag it out, and then you can just drag hero India above it to get the structure that you were looking for. So, there’s our hero and here’s our little intro section. Now let’s talk about the modular nature of frames. I have an image placeholder right now. I want a video placeholder. Well, guess what?
0:23:34
We give you that as a frame. So because you know, we’ve been in this situation before. We realize, hey, it’d be nice if we had a video placeholder we could swap out with. So, we’re going to go to remote templates, and we can choose placeholders and right now, you can see there’s image placeholders. There are video placeholders. There’s going to be more placeholders coming as we figure out and give feedback from the community. What are important placeholders to have? So, we’re going to go ahead and insert the video placeholder template and this time it actually inserted it right where it needed to insert it and I can simply delete my image placeholder that was there. So, this is going to be where that intro video is, and now we’re just going to look at our outline. We need our top-selling points like we need three feature cards because we have three selling points.
0:24:20
So three feature cards. So, what I’m going to do here and again this shows you the modular nature. I’ve inserted a hero section. I’ve inserted a content section. Usually, what you want to do is get your content sections down like your main sections of content on this page. And when you’re in frames, and you go into something like features, you can also sort by sections. That way you’re not going to see cards. You’re not going to see grids. You’re going to see full sections of features that you can pull in. But in this case, I actually want to pull in a feature grid into a section I already have, and frames gives you the ability to do this. So instead of sorting by sections, I want to sort by grids of features. And I’m going to look just I’m looking for a very simple card layout structure, right?
0:25:13
Feature grid alpha seems to be like a really good option. Your grid bravo could work as well. But I don’t want the icon next to the heading. I want the icon above the heading. And that’s kind of a different structure thing going on here. So, I’m just going to choose feature grid alpha. I’m going to insert that, and it’s going to insert this grid and all I have to do, and you can see this grid right there in the structure panel. It is labeled feature grid alpha. It’s not labeled as a section. So, I’m going to open content section alpha. Here’s my inner, and all I have to do is drag that up below my inner. And now you’re going to see that I have a feature grid right below the content that was already there. Now they’re not spaced out.
0:25:57
Here is where contextual utility classes and contextual variables come into play. Watch this, how I can get my content spacing between these containers to be equal. And when I add more frames, it’s going to exactly match those frames as well. So, I’m going to click on the content section right here, and you’re going to see it already has a class content section alpha. So, I’m going to click on that class. And if I style this class any time I add content section alpha to any other pages, it’s going to look like this content section alpha, which is great because I want my stuff to be consistent. I don’t want this kind of layout styled one way on one page and style the different way on another page. You can absolutely do that if you want to. But by default, I would like it to look the same. So, I’m going to style the class. And this gets into a little bit of what we’re going to do in part two, but in part two we’re really focusing on styling.
0:26:52
In part one, we’re just getting things to look the way we need for a wireframe. So, I’m going to go ahead and add a row gap here of var fr container gap. That’s one of my contextual variables. You look at the spacing now that it’s put between this container and this container. That is going to be consistent across every section because of this contextual variable. All right. So, I’m going to go ahead and hit save to save my work. I don’t have auto save on. So, I like to save as we go. So, this section’s almost done, guys. But look, there are four things here by default. I only want three things. Do I need to go search for a frame that only has three feet? No, I don’t need to do that. I can easily just remove one of these cards.
0:27:38
So, I’m going to remove the alpha, that feature card alpha, one of them, and that leaves me with three of them. And now what I need to do is just adjust my grid structure. So watch what I’m going to do. I’m going to grab feature grid alpha. I’m going to click on the class. And for right now, because bricks does not have a grid builder, all right. It’s a very unfortunate fact right now. It’s coming. It’s not here yet. But right now, all of our grids are just written in the CSS area. This actually makes it really easy for you. You can see right here the grid template column structure.
0:28:18
And you can see it’s repeating four at one fractional unit each. Well, four needs to just be three. So, what happens if I just do that? I get exactly what I needed. And guys, it’s still fully responsive, right. So, it’s going to stack nicely at every single break point. And that even can be adjusted. So now I’ve got three feature cards for my features. Now I’m not done here because I want to, I want to embellish this wire frame just a little bit, right. I want it to look a little bit more structured. So, what I’m going to do is, I’m going to grab feature card alpha class, which all of these are alpha feature cards, okay. And I’m just going to give it a little bit of padding, give it a little bit of a light shade background color, just to give it a little bit of structure.
0:29:04
So, I’m going to add my contextual utility classes. Another one is card padding. So, I’m going to do var, FR card padding. And guys, it’s just like ACSS. You’re going to learn this stuff superfast. And you don’t even have to do this. You could put any other variable in if you wanted to. Space in is going to work. You could put 2im. Guys, you can put whatever values you want here. But if you want to be a frames pro, then you would use frames contextual utility variables and classes. So, this is going to be card padding. And then I’m just going to apply that to all sides and look every card updates automatically. And then I’m going to go to backgrounds, and I’m going to use my base color, which I set to black already, or you can use shade if you want.
0:29:52
However, this is so easy to change later, especially because you’re using classes. So, you’re not having to go elements to elements to element. But I’m going to use base ultra light. And that’s just going to give it a little bit more structure on the page. Let’s go ahead and look at what we’ve got so far. So check this out. We see the structure coming together. Let’s go ahead and move on. Let’s continue down our outline. So, we want our vehicle type selection, the Porsche, BMW. We’ve got to be able to see visually what kind of car they drive and allow them to click on that. All right, so now I’m going to go back to features. Most things in ACSS is card-based like services, people. People does have its own area.
0:30:34
But portfolio stuff, all that’s going to be under features. So, I’m going to be looking through my features. And I’m going to look for one that, I think, would be good with. I want one that’s a little dynamic, right? I’m going to preview this feature section India right here. I’m going to see the behavior. This is kind of the thing I’m looking for. I’m looking for like inner activity, right? I want something a little, looking at how it blurs the image. And that is a real image, not a background image. And it kind of blurs the image when it does this overlay effect. And the entire card is clickable. I like this. I like this. Okay, so let’s go close that tab.
0:31:11
I want features section India on my page. I’m going to hit insert template. And this time it actually inserted it in the exact right spot. So, it didn’t mess anything up for me. All right, so I’ve got that. That’s going to be, but guys, hold on. We don’t have six types of cars. We only have four types of cars. So, what do we do? Well, why don’t we just start by deleting two of these cards? So, I’m going to open feature section India. And I can see my feature grid India right there. And I am going to just collapse all these so you guys can see them. But look, I need to get rid of two of these. So, I’m going to go get rid of you, get rid of you.
0:31:47
And then what do I need to do? I need to change my grid structure. So, I’m going to click on the grid. I’m going to select the class. Because everything is done at the class. We’re going to go down to our CSS area. And we see right there it’s set to repeat three columns. Well, I want two columns because there are four cards. I want two and two, right? So, I repeat two, one, oh, look at this. Look at this. We’re just done. We’re ready to go. It’s still responsive. Everything still works.
0:32:13
How easy can this, it can’t get any easier, right? Well, when they put in their visual grid builder, maybe for some people, it’ll get a little easier. But you’re just changing numbers, right? It’s very, very simple. All right, so let’s think about this now. What else do we want on our outline? We want our vehicle type selection testimonials. OK, well, let’s go ahead and go back to our templates. Let’s go to social proof. Testimonials are social proof. So, we’re going to find those in the social proof category. Mm, all right, again, I want something, oh, I like this. Look at this, I like this. I like that.
0:32:55
It’s very, very, very clean. However, however, I want something a little bit more dynamic. And I want something more visual. Again, the more cars I can show, the more beautiful luxury German cars I can show, the better off we’re going to be for this client, I think. So, I’m going to use this one, testimonial section golf. We’re going to insert that. And see, once again, it inserted it into another section. So, I’m just going to drag it out. And then I’m going to reorder these real quick. OK, now I’ve got my testimonial section golf. Let’s go look at our homepage. Let’s see what we’ve got going on. So, we’ve got this area where they can select their cars.
0:33:34
And then look at this, a full width image. It’s going to be a nice, beautiful German luxury car back there. And then I’ve got a working carousel for my testimonials. And, God, if these testimonials can actually easily be queried from a query loop. If you like to put your testimonials in a custom post type and query them, very easy to do with this frame. Or if you want to just do random manual insertion of testimonials into this carousel, you could do that too. So, either way, it’s going to work great for you. All right, so I’m pretty much done there. What else do I need to do? We got our testimonials in.
0:34:10
We need to do our expert insights, our articles. OK, so I’m going to go to templates, remote templates. And this time, I’m going to choose the blog. And then I’m going to, again, sort by sections. And like I said before, I’m looking to make this very visual. So, this one’s standing out to me. Box, trot, echo, charlie, delta. These all look good. This one’s a little fancy. It’s got like an author bio in there. This is going to be pretty much the same author for every single article. So, that’s going to get a little redundant, I think. I’m going to go with echo, article section echo.
0:34:45
Let’s insert that. All right, here it comes. Wow, look at that. One thing you’re going to notice right off the bat is it’s already pre-configured as a query loop. It’s already going to start pulling in whatever articles are in your database for that site. And actually, I kind of lied. Before we started, I put in three sample articles, because I knew we were going to need an article grid on here. And then I wanted it to be all set. So, you didn’t have to sit through me, like going and adding dummy articles to the website and all that jazz. Once the articles are in, it’s going to pull them automatically.
0:35:19
Now, I’ve got my articles, but here’s the thing. Again, I want to show how easy it is to make tweaks and adjustments, right? Again, you could be a basic frames user, which is just add the frames, hit save, move on with your life, or for pro users who are like, I’m just using frames to speed up my workflow. But I still want to achieve very specific things. For example, I want this to be three cards, and I want the first card in the query loop to span two rows and put the other two cards next to it. So let’s take a look at how we could do something like this. So, I’m going to collapse all of our sections. Article section echoes what I just inserted. I’m going to open that up.
0:35:59
I see my intro, and I see the grid. Well, I’m going to open the grid up. I see the card, and I see that that is a query loop. So, the first thing I’m going to do is go change the query from two posts to three posts. And immediately, it’s going to pull in a third post. Now what I’m going to do is just alter the grid structure a little bit. Again, this is more advanced users, but it shows you the flexibility of frames. So, I’m going to go into article grid echo, and I’m going to go down to style CSS. Again, this is where the grid is shown. And the first thing I’m going to do, is I am going to make that first card in this grid span two rows.
0:36:40
So, I’m going to do root, and then I’m going to target all direct children. But then I’m going to insert an instruction. I’ll zoom in here a little bit so you guys can see. So, I’m targeting, that’s what the star targets all children. And then this says all direct children. So, all direct children. But then I’m going to say actually only the first one. So first child. And then I’m going to open my curlies, and then I’m going to do something. So, I’ve got my first child. What am I going to do with it? Well, I’m going to go grid row, and I’m going to say start on row one, span to row three, which spans two rows.
0:37:15
And you’re going to see, look at this. Right away, it is adapting to what I’m asking it to do. But I also want to change the grid structure a little bit. So instead of repeating two even columns, I actually just want it to be, let’s say, a 3FR and a 2FR grid. So three parts to two parts. And that’s pretty much going to get me exactly what I want. Let me zoom out. And I’m going to go over here and look at this grid that I just came up with of article cards. It’s got a nice little hover effect on it. And it’s going to take me right to my blog. And this is like a little default that Bricks puts in here. I’m going to show you.
0:37:55
I’ll give you a little bonus. We’re going to insert our own blog post template. Just so you can see how fast this stuff is, OK? But look at this section that I was able to build out. So, what else do I need? That’s basically it. We’ve done the entire thing. Let’s make sure that grid is still responsive. Look at that. It’s still automatically responsive, because my break point instruction is still taking effect. All right, so we’re good to go here. Now it’s the content insertion phase. We don’t want to send this to our client. Let’s look at it again.
0:38:26
It’s a good wire frame. It’s a good wire frame. But we don’t want to send this right to our client. We want to get some content in there, so they have something to digest and understand why we put everything in the positions that we put it in, right? OK, so let’s see how fast we can just insert our content. So, our hero needs to say dealer quality, German repair. So, I’m going to go up to my hero. I’m going to grab that heading. And I’m going to insert dealer quality German auto repair. All right. It’s got some keywords in there. I’ll put a little dash there, dealer quality, German auto repair. All right.
0:39:02
And then I’m just going to grab my little lead text here. And I will pop that in. And I actually want that to be bigger. So, I’m going to do hero India lead on this class. And I’m going to go to typography. I’m just going to say, hey, make this large text. So, var text L is going to make that a bit larger. And then for my primary call to action, we’re going to make that say book an appointment, book, and if I can type book an appointment. And this one is going to say, choose my vehicle. How about that? Choose my vehicle or book an appointment, which one? And then this one, we’re actually going to give it a link, external URL, pound sign, choose vehicle, all right, to that ID.
0:39:48
And then I’m going to come down here. This is that section where they choose their vehicle. I’m going to go to style CSS and ID. And I’m going to say, this is called choose vehicle. Now, when we save and check this on the front end, my little call to action for choosing my vehicle takes people right to where they choose their vehicle. Fantastic. Very easy stuff. All right. Now we do our little welcome section here. So, it’s going to say meet your German automotive specialist. We’re going to put this in here. All right. Meet your German automotive specialist.
0:40:24
And then I think I’ve got a little blurb that needs to go in. So, I’m going to grab that. And I’m going to insert that. And we’ll read all of this stuff in just a second. And what I’m actually going to do is we’re going to change the length of this lead here. Let’s see, 48 characters. Yeah. That looks really good. All right. Perfect. I’ve got my video placeholder. Nothing really needs to happen with this. This needs to say about us. OK.
0:40:52
Because this is a section kind of like about the shop and all of that. I’ll just say more about us. There you go. Just like that. All right. Let’s do our awesome features here. So, we’ve got certified German mechanics. So, we’ll put that in. And then next we’ve got quality OEM arts. I can highlight correctly. We’re going to drop this in. And then we’re going to take our over 500 5-star reviews and drop that in. Next we’re going to do our text for that.
0:41:27
So, our first little value add or talking point text, selling point, whatever you want to call it. We’re going to insert that there. And then we are going to insert this here. So remember, the key point of this is we need to send something to the client that they can review and approve before we get into the whole design phase. We don’t want to do a whole bunch of design work. And then have them come back and be like, I don’t like the structure. I don’t like that. That’s ordered. I don’t like the way that content is. You’re going to do it.
0:41:58
It’s way too inefficient. Do this wireframe really quickly with frames. You’re selling them the wireframes. You’re going to pay to do this part separately. Then you send it off for approval. Once they’ve approved it, then all you have to worry about is making it beautiful. We’re having your designer make it beautiful. Either way, we’ll talk about that in the next part. OK. So, I’m going to keep moving on down to here. And this is your choose your vehicle. And I’m actually going to give this a little background. So, we’re going to come in here, background. I want to do base ultra lights.
0:42:29
Let’s go to our base colors, base ultra light. And I actually, I think I chose base light here. I actually want to choose base ultra light. I want that to be a little bit lighter. Notice they all change at exactly the same time. This is all class based. OK. What do we need to have this part say? So, vehicle selection types, when you push BMW, Mercedes-Benz and Audi. So, I’m going to select this. It’s going to say Porsche. You could absolutely query these from a custom post type. All right. Next one is going to say BMW.
0:43:02
Let’s actually make this a BMW repair. Let’s add a little bit extra into what we’re doing. A little extra SEO going on here. OK. So, we’ve got Porsche repair, BMW repair, Mercedes-Benz repair. And then I’m going to grab Volkswagen. Volkswagen. Gotta make sure we spell it, right? Repair. OK. I don’t need to worry about photos or anything else. This is just wire framing. OK. So, nothing else to do there. This is going to say, shoes.
0:43:39
It’s going to say what? What? Let me get rid of this. Some screen sharing is a little bit of lag going on. Let’s do a quick refresh. All right. So, I’m going to come down here. This is going to say what type of car do you drive? And then this is going to be vehicle selection. And this is going to say, choose the type of car you drive below. Or, let’s say, click on the kind of car you drive. Let’s just make it super obvious, plain language, all that good stuff. I don’t like the size of my H2s.
0:44:21
We’re going to take a look at that in just a second. Let’s move on. That section is done. Now we’ve got testimonials. Well, guess what? We don’t need to do anything with our testimonials. Because that’s going to all get inserted later. They can plainly see, OK, this is what a testimonial is going to look like. Expert insights. What do we need to do with that? We probably just need to say, how about we’ll give it a little heading, like tips and insights from our experts. Let’s keep this all like that. And then here is articles.
0:45:02
And yeah, let’s say articles from our, how do we want to phrase this? We put a little more SEO juice in here. Articles from our, let’s do a little refresh. Not like in how bricks is behaving right now on me. All right, let’s go down. Articles from our top mechanics to help you care, to help you keep your luxury German vehicle, or car, luxury German car, looking, and running. Amazing. I don’t know. I’m writing copy on the fly. OK, and then over here, we’re going to say more articles. That’s going to take people to the blog. And while we’re here, we can go ahead and link that up if we wanted to.
0:46:02
So, I don’t actually have a post. We won’t do it now because I don’t have a page for it yet. So, we’ll just save that. Got a little content in there. Now let’s go out and go to our footer real quick and just pop that content in. And then we’ll review our wireframe. And then I want to give you a little bonus of adding our blog template in. All right, so I’m going to open our footer. I could have done it from where I was, but I decided to take the long way. All right, so right here, we’re going to insert our 25% discount for first time visitors. Let’s paste that in, and then we’re going to grab this.
0:46:38
And we’re going to paste it in as well. Perfect. And this is going to say, book an appointment. All right, I’m going to go ahead and save. And then down here, we didn’t have content for it. But this can say we’re a local German auto or local auto repair shop specializing in German cars. Come get your Mercedes. Let us, how about, let us care for? Let us care for your Audi, Porsche, Mercedes, Benz, or Volkswagen vehicle. How about, we’d be honored to care for? We’re a local audio. Oh, if you, I don’t want to use we or a lot. We’re a local auto repair shop specializing in German cars.
0:47:41
If you have, if you own, if you own an Audi, Porsche, Mercedes, Benz, or Volkswagen vehicle, we’d be honored to help you care for it. Something nice and personal like that. I don’t know. All right, let’s go ahead and hit save on that. And guys, we’re looking pretty good. Let’s just fill these out real quick. So, we’re going to go with card types, something like that. And then we’ll say, again, let’s pump this SEO juice in here. So, Porsche repair, this is going to be Audi repair. And guys, you can query loop this all day long if you want to, so Porsche repair, assuming these are a CPT, a custom post type, very easy to do. Porsche repair, Audi repair, Mercedes, Benz repair.
0:48:36
And then let’s come down here. And let’s do our Volkswagen repair. And then over here, we’re going to say our shop. And then this link is going to say about us. And then this link is going to say, how about articles? And then this one can be book and appointment. And then this one can be contact us. Our shop, how about services? We’ll do services there. And then this can be book and appointment. And then we can add one more link. And all we have to do, to do that, is duplicate our list item. And then we’re going to add a contact. It’s super easy to do. It’s safe.
0:49:26
And look at this. It’s already pulled in. German Auto Shop, the name of the website’s already been pulled in automatically. The copyright year has been pulled in dynamically. Your privacy policy disclaimer terms of use, links are already there ready to go. All of this stuff is perfectly structured from an HTML5 and accessibility standpoint. So, we’re going to go ahead and hit save and review what we’ve done, guys. And keep in mind, this probably could have been done in 15, 20 minutes, maybe even quicker, especially if you’re working from an outline. I’m sitting here talking and explaining everything and just going in detail.
0:50:00
If I was just working and just adding these frames and dropping in content, look at this. It is already for our phase two of styling. This is pretty good. And you’ve got paid to do this part. So, you’re going to send this off to the client, get your feedback, get your approval, make whatever tweaks. They say, hey, we’re good to go. I’m liking the direction this is going. Then you get to styling. Because you’re styling everything at the class level, everything is going to take shape so amazingly fast. And you’re going to see that when we do part two. But let me give you your bonus, OK?
0:50:35
So, we’re going to go, remember, right now, if they click on a blog post, what are they going to see? Well, let’s make sure they see the right thing. So, we’re going to go into dashboard. We’re going to go to bricks templates. We’re going to add new. We’re going to say blog single post. All right. I’m going to sign this to single. I’m going to go ahead and hit publish. I just want to show you how fast this is. Hit edit with our bricks. We need to make sure that we assign our template settings. So, I’m going to assign this to post type posts, hit save. Now I’m going to go to the library.
0:51:10
And I’m just going to drop in a fully done blog post template. I’m going to go to blog. And I’m going to choose template. And here are my fully done blog post templates. I’m going to choose alpha. Nice classic blog design. I’m going to go ahead and hit save. We’re going to go back to the front end. I’m going to hit one of these blog articles. Look at this. Featured image already pulled in. Title already pulled in. Author, date, comments. Everything is ready to go. Here’s the blog post body.
0:51:38
Everything, all the formatting that’s already done. Look, it’s pulling in my author card. Check this out. Well, I want to show you a couple more things, too. Don’t leave me. There’s so much to show you. I’m going to go to profile. Let’s go to user’s profile. And let’s pretend this is the author. It’s pulling in my Gravatar. This is the author bio. You can write whatever you want right here. And it should show up. I’m just supposed to show it. It should show up automatically in your blog post template or wherever your blog author information is shown.
0:52:17
I’m going to go ahead and hit save on this to update my profile. Let’s go check out. Oh my gosh. Look at this. Everything just pulls in dynamically, guys. It’s already got a related post area. Now, I only have two related posts right now. But if there was a third one, it would show up here. Look at this. Already ready to go. That’s a hard thing to do, related posts. It’s already done for you. OK, so my blog template is done. I mean, I’m getting, that’s another deliverable. I just got paid to create a blog post dynamic template.
0:52:52
But with frames, what did that take five seconds to add that in? And it looks good out of the box. I haven’t even started styling it yet. When I start styling it and spending more time on it, I mean, this site is going to really, really come together. It’s going to be very sharp. So, that’s it. We are done with the wire framing phase. We are done with part one. Oh, I did want to show you the last thing, which is just some tweaks to automatic CSS. So let’s go to automatic CSS. I want to make my headings a little bit bigger. My H1 and H2 specifically. So, I’ll go to typography.
0:53:23
Let me pull up our homepage again. So, here’s our H1 right here, right? So pay attention to that. So, I’m going to go to heading overrides. I want that to be, let’s say, 60. And then I want my H2. I will do H2 separately. So, I made my H160. Now it’s 60. So, the H1 nice, more size bold in your face. That’s what I’m looking for. Still responsive, 100% responsive all the way down. But now look at these H2s. Still a little small. So, what I’m going to do is go 42 on my H2s.
0:54:00
I’m going to come over here. Look at that. Bigger on my H2. So, that’s one example. Let’s do contextual variables. Kind of those things work, right? Remember we had container spacing right here? I want a little bit more container spacing. So, I’m going to come over here, frames, container gap. I’m going to change this to an XL gap. I’m going to hit save. I’m going to go back to the front end. Back gap just got bigger, right? All of the gaps between my containers just got bigger. So between this header and these cards just got bigger there, they’re all equal to the gap between this header and this grid just got bigger.
0:54:38
All exactly the same, all insanely consistent. That’s what you get with frames. And I’m just showing you guys the surface level power of frames. You see how fast we’re working? I want you to tune in for part two when we actually do the styling of this page. Because that is where the real money gets made. And you’re going to see how easy your life is when it comes to styling these frames. And getting a custom web design. Again, you’re not fit into any box. You can do whatever you want with these frames. I’m out. I’ll see you guys in part two.
