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

What's up, [ __ ] 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 had a I saw uh you set this up and it was pretty crazy. The uh the chatbot, automated chatbot AI. Yes. — But and we're gonna even take it back a notch to some other things that people are getting confused on and — 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 um there's a rumor, by the way, that it will probably get easier in the future. Okay. So, just keep that on the shelf. We have a rumor. — 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 Click Funnels Facebook group. If you are not in there, jump in there. — It's uh — also — Oh, also — also you can go to clickfunnels. com and you can find it there. — That works too. — You can find all the uh the upcoming events there — or on your Clickones dashboard. There's so many spots you can find us 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 for today's 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, things that uh make your life easier that are already in the platform. You don't have to think about ex, you know, integrating these new tools or worry about adding 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 going to — 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 just going to speed up your whole thing. — Yeah. — So, 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 you to get your funnels built easier and faster. — Yeah. Okay. Without further ado, this is the today's agenda, right? Again, I 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 your account. Um, something called, well, I like to call the triangle of styles. Looks like that. Yeah. kind of go come 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 have 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 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 that 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 right here. Um, and that's okay. You can use different styles for different occasions, different projects. Use them when you need them, right? Um, 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. — Cool. Uh, 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 again, 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 that you can use? — 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 six different items, six 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 that at 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 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 just leave it. — I usually leave it to — it. Things can get a little wonky. This adjusts your base rim 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 just scroll right on down or hover down directly to the first item here, which is headlines. If you click on headlines here or sub headlines 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 will apply the small preset that you have on mobile as well at the same time. — Boom. Um, so if we all love style guides, I love you guys. — Yeah. — Um, — 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 guide. — Yes. — 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 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 sub headlines, and the paragraphs or the content here. — Yeah. — Now, let let's talk about best tips practices here and maybe just my personal preference. Um, as far as your fonts, the different fonts that you use on the page, I'd recommend not picking more than two. And usually, uh, the headline and the sub headline, 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 one or two 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 in the same page. I've seen good like pages that make it work well if you have more than three, but I feel like it's easier not to. It's a lot easier to get way out of control and just start losing the number. — Yeah. And 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 two. sometime, you know, one is actually a good number. Have like a darker color as like your background. Um, and then an accent color one, maybe two. — Yeah. — Don't really recommend to have like four 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 or too many fonts, it becomes distracting more than a — I don't know. Yeah, something that — lifts up the visual appeal on the page. — I don't know. — How about we show an example real quick of that? Can we go to marketingsecs. ai? — Oh, no. Sorry. Marketingsecs. com. — Marketing — or is it AI secrets challenge? That's what it is. — AI secrets challenge. What are you trying to get to? AI — the AI secrets challenge. I got you. — 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 uh font scheme. Okay. So, uh Tyson, if you could uh inspect the headlines and then inspect the paragraphs. Okay. — What do we got? — We got headlines here. Work sands. — Yep. And now let's do a paragraph. — Paragraph down here. — Work sands. — Okay. — Let's go down here. Work sands. See, it's yeah, one to two. — They're really keeping it simple. And uh one of the cool things that you see that they're doing here is um 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 three different fonts. Maybe, you know, four is getting way out there. Trying to 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, 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-desated color uh or preset for this um or for your style, right? Your theme colors. Uh 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. Was there any reason uh for that or? — Yes. So I usually have like a white and then like a barely off-white. So 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 so you don't — And we see ClickFunnels doing that quite a bit on a lot of their pages. It'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 to 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 can 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 sub headline. Here we 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. Cool. Discard. Uh, next one is going to be shadow. These are all it's the same concept in the sense that you just you click on the item that you're 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 three different presets we can apply that we can create uh one, two, and three. So let's say number one, right? We have a crazy amount of blur. Let's adjust that spread. Cool. Now I want to go to style number two. And I want to make this super dark. There we go. You can see a clear difference there between them. Style three. Maybe I want to have it so there's a lot more X direction there. Cool. You see it's kind of going off to the right there. Um, right now that's what's going to apply when we use the style guide inside of the editor for wherever you apply a shadow. Um, you can always override these things as well. We'll touch on that briefly. I'm gonna 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 going to be buttons.

Border and corners are great. I don't find myself using those ones as much personally. Maybe you do, buttons for sure. Like I that's — 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 one, two, and three is already set to a pretty good default on most of these style guides. — Yeah. Uh, 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 defaults. — Yeah, — one pixel for it. Just adjusting coloration. That's pretty much it. — Yeah, — but if you find yourself maybe using the dotted line more often, 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 going to 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 three different sets um styles or presets that you can adjust here. You see one, two, and three. Um for buttons, we have three 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 adjust 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 like having a subtle shift personally if that helps anybody. I always go for um 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 this 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 it's in the case you don't have a secondary color, right? — Yeah. Right. — Um Okay. So, — can I show one thing here? — Absolutely. So, what I like to do, uh, let's remove that one real quick and show this one. Okay. So, one of the things that I like to do is have a number one be the the usual accent color, having a number two as like a different accent color and then a number three being the inverse of one of those two. So, what I'll typically do is come in here to number three and I'll actually look at number one 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. — So, 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 we're 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. — Yeah, you're kind of already shadowing here where we end up using a 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 pyramid of styles if you're okay with that. — Yeah, go for it. I'm curious what that is. — You got me. — It's a trickle down effect. Um so I found I'm going to go and update this for now and we'll go back to our style guide. Now let's say 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. Um, either way, just click on the back to website option over here in the top left. It'll reload you back into ClickFunnels or back into 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 lefth hand side, still staying within the same uh lefthand navigation there. Click on that directly and it should bring you to this guy right here. Um, you can adjust the style. It's 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 can do it for one nit set up for the future, whatever. Um, 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 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 uh gets used for 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 overwrite it somewhere. All right, topmost level. Now, the next layer down, I'm not actually change that. The next layer down would be in your site settings. So, if I go and back out here, click on the little top or back arrow on the top left. From there, go to site and blog on the lefth 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 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 uh 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 drop down here and again you type in the name of the style guide you'd prefer to use. So in our case 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 you go over here um on the lefth 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 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. Uh if you haven't overridden at the site level, then it's going to be pulling from the theme level, the topmost level. All right. Um again, you can type here override, use whatever style you prefer. And just like that, you'll see the correct colors, the correct uh font sizes, families, all that uh directly on that page. At the next level, we're not going down any further. We're actually going linearly. All right. So we have pa 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 will 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 uh 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 we go into a funnel directly, right? Let's say you have one specific step that you want to 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 uh level worth mentioning here is courses. If we click on a back arrow in the top left um and head to courses on our lefth 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 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 the core settings? Perhaps. Okay. Um, we'll scroll 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 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. — Again, 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 editing process here. Let's go with this one. This funnel looks fun, shall we? Shall we say? Um I'm going to 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 to 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 drop down, little gear icon with a dropown. 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, guys. Um, 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 indicates or come back to the style guide that you've already set up and configured. Uh, right now we're using the 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, uh, 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 field there for font. — Yes. Uh — 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 going to want to override it and adjust it back down just a little bit. — Beautiful. Yeah. Uh, I guess that leads us into overwriting. You can override any style uh 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 end point like David was saying. Um, 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. Um, that's not just for text. It's basically for anything else, right? We have shadow, we have border. Let's go to a button for example here. If we 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 three presets here. We can choose between one, two, or three. And you'll see it adjust accordingly 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'll adjust the things inside of the section, right? So, if we go to section settings, I'm going to 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 six options. Or is it seven? One, two, three, six. Yeah, six. Um, and if you click on it directly, it should apply that preset that you have set up for that specific style or 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. Again, uh, 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 is what does that uh that reset colors button do? where edit — the reset colors. — Oh, this. — Okay. Uh, how can you click — 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 uh 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, — that's so fancy. Scroll down. — I can't say I've ever used that one. I usually just go back and manually do it. — Wow. — Yeah, that doing it that way really makes it fast. — Uh what was the other thing you want me to scroll down for? Sorry. — Uh 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 overwriting. It didn't change that, but it did reset the color. — Yeah. We're back. — Just so we're all aware. — Yep. — Very cool. — Um that was a crash course on style, guys. We did a lot in a little bit of time. If you have questions on any of this, any of it at all, hop into open office hours or reach out to us outreach clicks. com. 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. 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, anything, let us know. It's fine. — That's right. — 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. — All right. Talk to you later, everyone. Bye.