How to Use Style Guides in ClickFunnels 2.0 | Coaching Corner #023

What's up, Fun Rockers?

What's going on? Welcome back to Coaching Corner.

Yeah, what a good time. We weren't— I wasn't here with you last week, David. David had a— I, I saw, uh, you set this up and it was pretty, pretty crazy. The, the, uh, the chatbots, automated chatbot AI. Yes, but we're gonna even take it back a notch to some other things that people are getting confused on. And yeah, yeah, yeah.

So if you are curious on how to set up an automated AI chatbot widget on your website, then go watch last week's episode. Uh, for some of us, kind of blew our minds, right? Uh, there's a rumor, by the way, that it will probably get easier in the future. Okay, so just keep that on the shelf. Yes, yes, there's a rumor. But today, welcome back. Uh, first off, new schedule. We're actually moving our Coaching Corner schedule to Tuesdays because we're doing office hours, open office hours, Monday, Wednesday, and Friday, uh, in the morning for those of you that need to get some of your tech questions answered.

Fun stuff. Yeah, Monday, Wednesday, Friday. You can find that in the ClickFunnels Facebook group. If you are not in there, jump in there.

It's, uh, also, oh, also, also, you can go to clickfunnels.com/calendar and you can find it there.

That works too.

You can find all the, uh, the upcoming events there or on your ClickFunnels dashboard.

There's so many spots. That's right, find this wherever you want.

But we try to make it easy for you. Feel free to hop on into those, uh, open office hours, come and ask us specific questions, and we'd be happy to see you there.

Yeah, buddy, we'll be there tomorrow morning. So yeah, bright and early for you.

But all right, now what are we talking about for this session?

We're gonna be diving into style guides. I feel like we still get questions about this stuff pretty often, so it's nice to come back every once in a while and just come back to the basics, to come back to the things that make your life easier, that are already in the platform. You don't think about X, or, you know, integrating these new tools, or worry about adding a new app. This is all like the stuff that is going to be used. You can create it once and use it everywhere inside of your accounts, and it's going to speed up your workflow. It's going to make your life easier. It's gonna— it's just something you should make sure you keep in front of mind when you're— yes, working with clients, working for your own stuff, whatever. Especially for your own stuff, because style guides make it so you can have the same colors set up, the same fonts, the same shading, the same buttons. You can— it's, it's just going to speed up your whole thing. Yeah, just—

so here's a, here's a good question to tee this up, uh, who here would rather have the hard and slow path or the easy and the fast path when it comes to building funnels? I for one choose the easy and fast path. So if you're interested in that, then stick around on this video. It's going to help to help you to get your funnels built easier and faster.

Yeah. Okay, without further ado, this is, uh, today's agenda, right? Again, I've already mentioned we're talking about style guides. We're talking about how to set them up, how to use them, how to understand where styles are coming from inside of your accounts. Um, something called— well, I like to call the triangle of styles. Looks like that. Yeah, kind of coming from the top down. We'll show you how it kind of like flows throughout the, uh, flows throughout the whole ecosystem, right? Okay, so, uh, first things first, how do we actually create a style guide? That should be project number one here, right?

Show me, Tyson, I have no idea.

Okay, we're starting from scratch inside of your ClickFunnels workspace, right? We're all looking at the same screen here. Let me make this a little bit wider, and then there we go. Um, if we go down to the bottom left-hand side of your screen you should see an option for Workspace Settings. This guy right here, click on that directly. After that, you're going to see a secondary navigation appear here, and the one thing we're searching for is going to be Styles right over here. It looks like it has a little paint palette right next to it. Click on it directly and it should take you to this page right here, but probably you won't see as many things listed. We have a ton of styles that are being used in this workspace for here, um, and that's okay. You can use different styles for different occasions, different projects. Use them when you need them, right? Um, let's start with just creating a brand new one. Over here in the top right-hand side of the screen, there's an option for New Style. Just click on that directly, and from there we can give this guy a name. We'll call this David's Awesome Style Guide.

Yeah.

There we go.

Let's go, let's go.

After that, click on Create Style, and we should be brought back to that same page we were looking at a moment ago. There we go. Okay, now we've created the style guide, but how do we actually go in and make the adjustments? How do we make it so it is your own thing for your own brand, for your business?

Yes, I'm dying to know.

You're dying to know. We're all dying to know. Click on the little paint palette right here to the right side of the name. Right, this guy right here. This is where we can go in and actually customize the style guide itself. Let that load. When it does, it'll be brought to this central page right here where we can kind of click through 6 different items, 6 different things we can set templates up or presets for, from fonts, your colors, your shadows, borders, buttons, and corners. All those core things you'll end up using all the time for most of your builds. Um, We'll start off with fonts. Actually, before we do that, over here on the right-hand side, you can kind of scroll down and get an idea of what is already set up. You can see all the presets from your shadows. There we go. The borders, the buttons, all of that. That's a single glance there, so you have to click through each one individually. But yes, let's start with fonts. Click on Fonts directly, for example, and from here you can adjust your base font size for mobile and desktop. Personally, I, I leave this as is. I don't touch this. Um, I don't know if you have a different preference for this, David, but I, I just leave it.

I usually leave it too.

Things can get a little wonky. This adjusts your base rem size. Don't want to get too technical here, but it's just going to adjust the font sizes for everything that you set, um, to be larger or smaller based off of what you have here. But, uh, usually I, I just scroll right on down or hover down directly to the first item here, which is Headlines. If you click on headlines here or subheadlines or content, it's going to show you the ability to go and set presets, uh, from small to extra large. There we go. Um, you can— we'll show you how to use these, how these actually come into play in a moment. But just for now, um, be aware that you can— whatever you set here for, say, small on desktop, uh, if you use that same size, it'll apply the small preset you have on mobile as well at the same time. Boom. Um, so if we all love Style Guides— I love you guys. Yeah, uh, he's a lovable guy. Um, you can either type it here, you can drag and drop it, but basically once we set it here and we go into the editor, there's going to be some buttons that you can click to easily get to the size that you're looking for or your preset here that you have configured in Style Um, nothing too crazy there. You can set up your font family, right? Click up here at the top for font family, type in the name, or scroll through and, I don't know, explore what you're, you're looking for. You might find something cool. Um, there's that. You can change the font weights, and you can do this for, again, the headlines, the subheadlines, and the paragraphs or the content here. Yeah, yeah.

Let's talk about best tips, practices here, and maybe just my personal preference. Um, as far as your, your fonts, the different fonts that you use on the page, I'd recommend not picking more than 2. And usually, uh, the headline and the subheadline, I would recommend that they be the same and then just have a different font for your content. Tyson, your thoughts?

Yeah, I usually stick to either 1 or 2. That you can vary it with the boldness, right? So if we go back to say headlines, I usually will vary it based off of the font weight, um, if anything. But if you have too many fonts on the page, I don't know, I feel like you got a lot going on the same page. I've seen good like pages that make it work well if you have more than, more than 3, but I feel like it's easier not to. Yeah, it's a lot easier to get way out of control and just start losing losing the meaning.

Yeah, and that, that actually kind of goes for colors as well too. Whenever it comes to like accent colors, usually it's— I mean, don't go more than 2. Some, you know, 1 is actually a good number. Have like a darker color as like your background, um, and then an accent color, 1, maybe 2. Yeah, don't, don't really recommend to have like 4 different color, you know, color variations for accents.

True. And it comes back to the same thing. I mean, uniformity is probably the word I'm looking for here. If you have too many colors— one, if you have too many colors, too many fonts, it becomes distracting more than a— I don't know, something that lifts up the, the visual, uh, appeal on the page.

I don't know. How about, how about we show an example real quick of that? Can we go to marketingsecrets.ai? Oh no, sorry, sorry, marketingsecrets.com. Or no, or is it AI Secrets Challenge? That's what it is.

AI Secrets Challenge.

Where are you trying to get? The AI Secrets Challenge.

I got you.

Dot com. Okay. For example, here we have purple as the, like, one of the main colors for the page, and then we have an accent color of green.

Yeah, always got those bright green buttons. I love it.

Now we have, uh, Yeah, and we have a main font scheme. Okay, so Tyson, if you could inspect the headlines and then inspect the paragraphs.

Okay, what do we got? Headlines here, Work Sans. Yep.

And now let's do a paragraph.

Paragraph down here, Work Sans. Okay. Let's go down here. Work Sans.

See, it's cool.

It's 1 to 2.

They're really keeping it simple. And one of the cool things that you see that they're doing here is on the color accent. So that would be like a bold, or they're doing some custom CSS with an underline, hiding the underline and actually changing that font to a different font and color. Yeah, so that's a cool thing that you can do too. But don't get too crazy with it and add 3 different fonts. Maybe, you know, 4 is getting way out there. Try and keep things simple and focused on your messaging and offers.

Agreed. Well, I guess that's a good segue into colors, right? So if we go over to the left-hand side, we should see an option for colors. This guy over here, a little paint palette. Um, up here at the top, you can set up your presets regarding the colors you want to end up using. If you click directly on them, you can either paste your hex code directly if you already have one, or you can just drag this little color splotch around the, uh, the canvas here. And/or change the hue right here. But this becomes your new pre-designated color or preset for this— or for your style, right? Your theme colors. You do the same for all these guys. And David, you mentioned before to me that you like having two lighter colors here by default. Is there any reason for that? Or—

yes, yes. So I usually have like a white and then like a barely off-white. So that That's very nice whenever we're doing— whenever we want to create some depth on the page, we'll do like a barely off-white as the very background, which would be the light background you see there on the color preset. And then I would make a row that has the white as the background. That way it makes it feel like it's standing out from the background just a little bit.

Yeah, yeah, fair enough. I find I always find myself trying to come back and like I'll manually find a new color if I don't do that, uh, or new off-white. So way easier to have it here.

And we see ClickFunnels doing that quite a bit on, on a lot of their pages. That's where I learned from.

Oh, absolutely. Um, below that we have the ability for you to set up something called your paint colors. Uh, this is basically like a preset for your sections. You can apply this at the section level and the items within that section will end up changing based off of what you select. Whether it's lightest, light colored, dark, or darkest. If you click on these directly, you can go in and you can set your, uh, base. So like your background color, you set an overlay if you'd like to, you can set and adjust your headlines, right? So all of them default to say like this light blue, for example, right? Um, subheadline, there you go. See how it adjusts over here on the right-hand side. And we can do the same for all these guys— the link, the icon color, the bullets. Um, this might seem confusing until I show you how to end up doing it, but just for now, know that you can set up presets with these colors to speed up the editing process inside the editor.

Yeah, there we go.

Um, let's back out a little bit. We're going to discard this for now unless you have something else to say on colors. Nope, nope. Cool, discard. Uh, next one is me shadow. These are all It's the same, same concept in the sense that you just, you click on the item that you want to set presets for. From there you can go and customize. The difference here for the, um, for the shadow style here is that we have 3 different presets we can, we can apply that we can create, uh, 1, 2, and 3. So let's say number 1, right, we have a crazy amount of blur. Let's adjust that spread. Cool. Now I want to go to style number 2. And I want to make this super dark. There we go. You can see the clear difference there between them. So 3, maybe I want to have it so there's a lot more X, X direction there. Cool. You see it's kind of going off to the right there. Right now, that's what's going to apply when we use the style guide inside of the editor for wherever you apply shadow. Um, you can always override these things as well. We'll touch on that briefly. I'm going to update this one and go back to style guide. And let's see, the other main one I feel like I use most often is gonna be buttons. Border and corners are great. I don't find myself using those ones as much personally. Maybe you do, but buttons for sure.

Like, yeah, like the corners are generally usually set to a pretty good, um, option like by default. And then if you need to, you know, spot check individual ones, then you can go and do that. But 1, 2, and 3 is already set to a pretty good default on most of these style guides. Yeah, you might want to check the border because every now and then a wonky border gets in there. But this one here looks pretty good.

Pretty good by default. Yeah, 1 pixel for— it's just adjusting coloration. That's pretty much it. Yeah, but if you find yourself maybe using the dotted line more often, let You can, and you can barely tell because of the color. Increase size. Oh, I'm in the wrong one. There we go. Um, boom, that looks beautiful. We're gonna keep it because I like it. And update.

Sounds good.

All right, we got a preset in place for that. Now buttons, let's head to buttons real quick. Buttons, as far as like the style presets go, it's similar to the shadows where you have 3 different sets styles or presets that you can adjust here. You see 1, 2, and 3. Um, for buttons, we have 3 different states that we have to adjust. One is going to be the default, so when you're looking at a button without interacting with it at all. Um, hover is when you actually perform the action of hovering like that, and pressed when you actually click on it, for example, right? You can go through just the color, the text color, all this fun stuff, the font style, the weights. So I want to make this extra bold, I can. Cool. This is for the primary text. It was already pretty big before that, but, um, yeah, pretty much the same thing there. Do you have any go-tos for this? I feel like you're just— you're going for— I, I like having a subtle shift personally, if that helps anybody. I always go for Either the background— or sorry, I go with the background color on the hover state, except I will usually change it, maybe the opacity to like 80%. If you don't have a secondary color you want to go with, it's a little cheat there. Like, uh, let's see, I'll grab this for example. I mean, copy this, boom, and go into maybe like 80%. Nice. And just like that, now you still have a subtle effect, but That's in the case you don't have a secondary color, right? Yeah. Right. Okay.

So can I, can I show one thing here?

Absolutely.

So what I like to do, let's remove that one real quick and show this one. Okay. So one of the things that I like to do is have number 1 be the usual accent color, having a number 2 as like a different accent color, and then a number 3 being the inverse of one of those two. So what I'll typically do is come in here to number 3, and I'll actually look at number 1 and basically be like, okay, this background color, I want to set that to the text color. And then I want to set the background color to white or transparent. Yeah, I'll go like this. Boom, text color is now the inverse. Subtext is also the inverse. And we're looking down here.

Got it.

Hover could be the same. Pressed is going to be white. And inverse like that.

Yeah, I like that.

And then what's cool is where once you update the style guide, it up— it makes that change on every page that the style guide is assigned to. So now it looks like this.

Yes, you're kind of already shadowing here where we end up using the style guide, so you get a little sneak peek. I guess that's the next location we were going to go, but Um, actually, before we dive into that deeper, let's talk about the, the pyramid of, of styles, if you're okay with that.

Yeah, go for it. I'm curious what that is.

Yeah, you got me. It's a trickle-down effect. Um, so I've found— I'm gonna go and update this for now, and we'll go back to our style guide. Now let's say that we're done with the style guide, we're ready to start using this inside of the editor for our pages, for— well, there's a couple different areas. Either way, just click on the, the Back to the Website option over here in the top left. It'll reload you back into ClickFunnels or back into the, the, uh, regular view there. And now that we have a style guide, we want to end up using it, right? So starting at the top, the top of the, uh, the pyramid here is going to be your theme. Your theme affects basically everything below it. You can always override it, but the theme is like the starting point for most things. So if you go over here to themes over on the left-hand side, still staying within the same, uh, left-hand navigation there, click on that directly and it should bring you to this guy right here. Um, you can adjust these styles attached to a theme by just going to the little gear icon for that guy, this theme right here. Stick to the one that is active. The active one for this one is this one, right? So if I go I mean, you could use either one. You don't have to do the active one. You could do it for one that you set up for the future, whatever. Uh, just go to the gear icon and it should show an option for styles right here that you can go in and actually configure. Just from there, find your style guide that you created. I believe we call this one David's Awesome Style Guide. There we go. And hey, why not? Because why not? And then you update the theme and now it's going to— this is going to be the default style that that gets used for the levels below. Meaning if you use default style on your pages, your site, your courses, whatever, this is going to be what it pulls from unless you override it somewhere. All right, topmost level. Now the next layer down— I'm not going to actually change that— the next layer down would be in your site settings. So if I go and back out of here, click on the little top or back arrow on the top left, From there, go to Site and Blog on the left-hand navigation. There'll be an option for Site Settings, this guy right here. If you don't have this app already added, no worries, just go over here to Add Apps, and then you're looking for something that looks exactly like this, Site and Blog. But in Site Settings, if you scroll down, there will be an option for Advanced Settings, and this is where you can change your style if you'd like. Now, right now it's currently set to your default style, which means it's going to pull from what you have set in the theme settings. If you want to override it, you can, perfectly fine. Just go to the dropdown here, and again, you type in the name of the style guide you'd prefer to use. So in our case, it would be David's Awesome Style Guide. Um, just like that, you can save. And now this is going to be the things below. This is going to be the new source of truth. This is the next layer down. We have overridden it, so it's no longer the default. Um, The next layer below this comes to pages, your site pages, right? So if we go over here, um, on the left-hand navigation under Site and Blog, you can go to Site Pages directly. And if you go to the little gear icon here for one of these pages to edit the settings, you can then adjust the style under Advanced Settings here. So again, it's using default style, but Right now, if you have overridden the theme, that means that the site settings would be the new source of truth. That's the default that it will end up going back to. If you haven't overridden at the site level, then it's gonna be pulling from the theme level, the topmost level. All right, again, you can type here, override, use whatever style you prefer. And just like that, you'll see the correct colors, the correct font sizes, families, all that. directly on that page. Uh, next level, we're not going, we're not going down any further, we're actually going linearly. All right, so we have page, site pages, which is what we just looked at. The next one next to that would be in your funnels, right? So if we go to funnels up here in the top left, from there we can scroll over to the right-hand side here until we see a little gear icon for your funnels, right? For whatever one you're trying to make this adjustment for. And if you click on that, it'll allow you to then adjust the style for the funnel entirely, right? Same thing. If you're using default, it means it's going to be using either the override that you have set up in the site settings, or if you don't have an override set up, it's going to pull from the theme settings. Boom. Uh, or you can adjust or set up the one that you prefer here. Okay. Um, you can also do it at the step level. So if you go into a funnel directly, Right. Let's say you have one specific step that you wanna make this adjustment for and have it so you have something custom there. You can click on the three dots here for one of these steps, right? So let's say for this first one, click on the three dots, go to settings, and then again, you'll see an option for your style guide. You can adjust it as needed. Okay. Final position. Final, final level worth mentioning here is courses. If we click on a back arrow, the top left, um, and head to Courses on our left-hand navigation, we can go and click on it directly, and we can adjust, uh, style guides for modules. So if we click on, say, this guy as an example, right, uh, we'll go to this module right here, click on the three dots for this, click on Edit Module. We can then scroll down and we can adjust the style that's being used in Advanced Settings. Boom. Otherwise it's going to be using your default style, which is again going back up the tree, pyramid, however you want to, you want to picture this, uh, theme, then site settings. And then we have these three that live on like its own line, basically below the site, site pages Funnel. Below that we have funnel steps, and then we have courses.

Yeah, I like to think of it like a stream.

A stream?

Yeah, a stream. The theme is at the top of the stream, and so that affects everything below it, but it doesn't go the opposite way, right?

Yeah, it does not flow backwards. So you have so many ways you can customize.

I might have missed it, maybe I was dazing off. Did you show where to set the theme— sorry, the style guide here in the course?

The course, uh, up at the top. Are you talking— are you referring to these, the course settings perhaps?

Yeah.

Um, let's go down.

This is going to be your most common way to set it for your courses, and then probably you're not going to change it per the module or the lesson.

There we go. Just if you want to, you, you can get as linear as you want. So go Courses and Course Settings, and if you want to get even more granular, you can do it per module. Yeah, again, I, I don't normally do that unless I have to, but, um, it is there if you need to. Yeah, there is, uh, let's see if I go inside of a funnel now. I can kind of walk through how style guide is used in the, in the editing process here. Let's go this one. This funnel looks, looks fun, shall we, shall we say. Um, I'm gonna go to editor for this first page and inside of the editor, you can technically go in and adjust your style guide from here as well. You don't have to go back to your workspace settings, then the styles. You can technically go and go from the editor here directly. Up at the top of your screen, there should be an option for like a little dropdown, little gear icon with a dropdown, and in that dropdown you should see an option for style guide. And you'll see the same exact options that we saw initially when we're setting up for the first time. So if you have to make quick adjustments, it's there, it's easy to get to. Um, now for style guides, uh, let's start off with text, shall we? So let's go to this headline here, click on the little gear icon to access the settings, and right here on the right-hand side you'll see an option for style. Anywhere that you see style within the settings of an element, it's going to indicate or come back to the style guide that you've already set up configured. Uh, right now we're using the large, large default size there, but if I were to change it, it should adjust. And just like that, it's extremely large and it's kind of cascading down the page. But boom, you have quick access to the presets that you've created. Remember, it's worth mentioning again that if you select large here while you're on the desktop editor, it's also going to apply that same preset size to the mobile side, or whatever, like font size you applied to the large, large field there for font. Yes.

So always double check it, mobile and desktop. And also just be aware that, you know, the— these preset sizes may not be perfect for each one. It's just going to get you close. So like if you go and select extra large again, that may be closer to what you're looking for. But then you're gonna wanna override it and adjust it back down just a little bit.

Beautiful. Yeah. I guess that leads us into overriding. You can override any style that you have set up here. You don't have to use it. Maybe you wanted to use it as like a jump-off point or like just a way to get you that much closer to the endpoint, like David was saying. Always go to override if you need to. And you can adjust the size, the color, you can adjust basically anything about this that you need to. That's not just for text, that's basically for anything, anything else, right? We have shadow, we have border. Let's go to a button, for example, here. If you click on button directly, we do have presets for buttons set up. And if we scroll down for button style, there we go, we should see that we have our 3 presets here. We can choose between 1, 2, or 3, and you'll see it adjust accordingly on the, on the actual page. And if you don't like it, or maybe like you need this specific page to be slightly different, again, just go to Override and you can adjust the different states here of that button: default, hover, and press. Boom. Um, we briefly touched on Paint. Uh, I mentioned that if you adjust it, it would adjust the things inside of the section. Right? So if we go to section settings, I'm gonna go up here to the green border, click on the gear icon, and from there we should see an option for paint up here at the very top of the settings. Yeah, if you click on that, you'll see those 6 options— or is it 7? 1, 2, 3, 6. Yeah, 6. Um, and if you click on it directly, it should apply that preset that you have set up for that specific style or that, that paint, right? If I go to lightest background, we'll see the background changes, the text changes, the elements inside of there kind of change to adjust based off of our presets that we have in the style guide. You can also do none. You don't have to do a paint at all if you don't want to. Do you have something else?

Hey, what does, what does that, uh, that reset colors button do?

Where?

Edit the reset colors.

Oh, this.

Okay, uh, it gets rid of the colors and puts it back to— yeah. Watch this. Let's demo this. Can you select the lightest background?

Yep.

There you go. Okay, now click away and change one of the colors for the text.

Okay.

So if you have gone through and you've changed a whole bunch of different colors, or maybe you would like to change the overall look and feel of one of the sections entirely, then you can basically reset all of them back to your style guide by clicking on the the section and then clicking reset colors and it'll put all of them back to what you have in your style guide.

That's nice. Okay.

So fancy.

You know, scroll down. I can't say I've ever used that one. I usually just go back and manually do it.

Yeah, that doing it that way really makes it fast.

What was the other thing you want me to scroll down for? Sorry.

Click on the headline again.

Okay.

I want to see if this does this. So click there and okay, so it actually did not. Change it from reset and overriding. It didn't change that, but it did reset the color.

Yeah, yeah, we're back.

Just so we're all aware.

Yep, very cool. Um, that was a crash course on style guides. We did a lot in a little bit of time. If you have questions on any of this, any bit at all, hop into Open Office Hours or reach out to us at outreach@clickfunnels.com. It's totally up to you. Yeah, again, we have Open Office Hours Monday, Wednesdays, and Fridays, uh, now starting at 8 Pacific. Was that Eastern? 8?

Yes.

11 Pacific. There we go.

That's right.

Uh, just do a little time zone math. Um, that's it. That's all I got for you. Yeah.

Did you enjoy this training?

Was it helpful?

You pretty much covered it all pretty well. Um, we're a little bit over time. There's a few, there's lots more that we could talk about, but you'll have to join open office hours to find out those extra details.

So if you have questions or anything, let us know. That's fine. That's right.

Um, uh, we'll be happy to see you in there. So we hope that this training was helpful to you. Tyson, what you got?

Nothing. I just hope that you guys have a fantastic day. Have a fantastic rest of your week. And, uh, we'll see you next Tuesday, not next Wednesday. We're on Tuesdays now for this.

Yes. Thanks for joining, guys.

Thanks for joining. All right. Cheers. Happy Tuesday, everyone. Yes. All right. See you later.

Talk to you later, everyone.

Bye.