Updating your Themes & Styles

Foreign. We are live. Hello everyone and welcome into another Training Tuesday. Hopefully you're doing well wherever you're tuning in from. So today I really want to talk about something that adjusts all of your colors, your fonts, your overall look to your store, your funnel, whatever that may be, and that is themes and styles. So they may not be something that you're immediately thinking of, but they are really important from a time saving perspective and a brand cohesion standpoint. So let's go ahead and talk about them and how to use them within clickfunnels. Now, before I hop in, let's actually talk about what each of them do. So first, your theme is essentially a template. When you select a theme, you're literally going from nothing to to a fully developed site. And what I mean by that is once you install your theme or your template in all of the pages that are immediately added in. So rather than starting from scratch and building out your homepage, then moving on to a products page and building all that out, and then finally, let's say you want to build a collections page and then you want to adjust your add to cart and your checkout page. Right? There's a lot of work that can go into that, but what we really want to do is select a theme and everything's done instantaneously. So you can simply install a theme and then you can build off of the foundation that it gives you. Now, there are a lot of themes currently within clickfunnels and I'm going to show you how to install them and take a look at all of the different ones that you can explore and then we'll dive into styles. So styles are essentially what style stylizes your pages. So that's everything on the page from the fonts to the colors that your brand uses, and then maybe some of the smaller details that you may not think of, like the shadows and the borders of the buttons and so on and so forth. So Dante, who is our Click Funnels champion, he is usually my co host here, but he uses a house analogy when he talks about the editor. He talks about sections, rows and elements being the house of the foundation and then the rooms of the house and all of those things within those rooms. I actually like to think of themes and styles in the same way. So your theme is essentially your structure and your foundation, so all your framing and everything. And then your style is all of the information that you're putting within the house. So all of the appliances and the furniture and so on and so forth. So. So I just Like a really good analogy, and I think it fits really, really well. So to reiterate themes, set the structure, and then styles give your brand life. So let's go ahead and jump in and take a look at how to add and edit these themes and styles. So let me go ahead and share my screen here. There we are. All right, so I'm here in a ClickFunnels workspace and I'm in the Plants RS workspace right here from the dashboard. The first thing I want to do is head over to the workspace settings. So down here in the bottom left, if you guys can see that, let me go and tap on that. Make sure I'm in the right window here because it doesn't actually look like it's adjusting. So. Always have a little bit of technical stuff to work on. Okay. I gotta actually find the window here. Very odd. Nothing like doing it on your own and not having your co host here, Dante, to run through everything while you're troubleshooting here. But we'll go ahead and get it working in just a moment. Let's go ahead. That is very bizarre. All right, let's go ahead. Come back here, full screen it while we get this actually on the back end working. All right. And you know what, I'll just go ahead and do a full screen capture so we can. There we go. Okay, so now, now we're actually working here. So. All right, so here I am. Sorry about that. Here we are in the workspace and what I want to do is I want to head down to the workspace settings here in my bottom left corner. Now when I tap on that, it's going to open up all my workspace settings. And the first thing I really want to find here are, are my themes. So if I tap on this, it's going to go ahead and bring me into my themes section. Now from here we can see that I have a current theme that's active in my workspace, which is the Workout with Me theme. This is a customized theme that we have created and we also have the fitness theme in here. So what happened here was we came in and we first created the fitness theme from a template. Then we made edits to this and resaved it as our personal theme, the Workout With Me theme. So. So making those adjustments, we want to make sure that we save the updates. So that's exactly what we did here. Now, to add a new theme, if you're in your ClickFunnels workspace, you head here to your workspace settings, tap on themes Click this, add a new theme button, and what it's going to do is open up the window with all of my templates here. So I have a fitness theme, which is the one that we used for the workout with me, but also real estate. You know, there's an agency course, ecom Hero creator. So whatever you may be trying to accomplish within, click Funnels. You want to maybe find a comparable theme that would fit that branding. So let's say, for example, you're running an E Comm shop. Take a look at all of these different E Comm templates that we have, and then you would choose the one again that most applies to what you're trying to accomplish. Right. So if I come in here, I'm actually just going to back out because I'm going to look at this theme, and the moment you create a new theme, it's going to bring you into the editor. So here we can see we went from absolutely nothing if you have no theme to this entire page built just like that. So what? That took maybe 15, 20 seconds to install in. And now instead of creating my storefront from scratch, what I can do is I can come and make all, all of these edits and I can change, you know, these images out, I can change this text, but I can keep the overall structure of this theme if I so choose. Now, you can see all of these colors are very bright, so the theme looks really nice. I like the structure. You know, I like the call to action section here. I like the featured product section. Right. And I can make small adjustments to this, but the colors are driving me crazy. They're way too bright. So that's where we shift our attention over to the styles. So let me go ahead and back out of here. And then from this same window here in the workspace settings, I'm going to go to the styles tab. And if I tap on that, I can see there's a bunch of different styles created here in this particular account. But I'm going to shift my attention here to the new style button. Let me tap that and let's go ahead and create a new one. So let's call this training Tuesday, and then I'll create the style. And now I can come in here and I can customize the designs by tapping here or just tapping on the title. So here in the style guide, we can find several different customizable options. The first one is going to be fonts. So if I open that up, we can see that Poppins is my font I'm using for the Headline, the sub headline and the content of everything. So if I wanted to come in and I said, you know, I really like the format that that theme gave me. I like how all the sections are visualized together. I really don't like the font though. All I have to do is come in here and I can say, you know, the headline is good, but maybe I want to change this out to this rubik that looks good. So let's go ahead and click back and then I can tap update. And if I had set this style guide to be live, making that simple update would change the sub headline across my entire storefront and all my funnels. So be very aware if you make any adjustments to an active style guide or what's going to happen is that's going to change across site wide. So be very careful when editing anything that's on an active style guide. But this is not an active style guide. So I can play around with it as much as possible. So I can pop in there, I can make any adjustments to my fonts, and you can even see there are several sub adjustments. So if I really want to make a very specific change, I can do so I can also do desktop or mobile only sizing. And then I also want to bring your attention here to this one toggle button, the mobile sizing. This will automatically scale all font sizes for smaller screens. So I highly encourage you to turn that on when creating a style guide. I'm going to head back out of here and then the second thing I really want to focus on is the colors here. So you have may, you may already have an established brand with established colors. And what you can do is at that point bring in all of your colors and it'll automatically create and generate different pages for you. So right now you can see these are pretty neutral colors. It's a pretty professional look. I like it a lot. But I can see that my colored background is just standard gray, the same thing as my light background. So what, what that is essentially telling me is that when I drop a new section in, it is giving it one of these different colors. And I can adjust this based on the back end, but if I select it, I can even come in and make more customized changes. But if I tap this auto generate, you see immediately it gives me an actual color to the colored background. It adjusts the light background. So I think this looks really good. If I dropped a light background section here on my website, this is exactly how it would look. If I come in here, I say, this brown is too light. Let's go ahead and change that to a different brand color. Just like that. I can make the adjustment. And again, you can toggle by mobile or desktop to make sure that they look exactly how you want them, depending on the device someone's viewing it as. All right, so I'll go ahead and tap update on this. Go back. And then the last thing here are shadows, borders, buttons, corners. Right? These are all pretty minuscule changes, but you can still go in and you can see how they are adjusted. So if I really wanted, like, nice and rounded buttons, I could do that. And you can make all of those changes as you see fit. Same thing with the colors, Right? So if I wanted my buttons to be a different color, I can say, well, the background, maybe I want it brighter. Right. Maybe I wanted a deeper blue. So anything that you can customize, it can be customized here in the style guide. All right, so let's go ahead and click back. And now if I come in, I'm going to head back and head back to my theme here. I'm going to come to this fitness theme, And I'm going to come back into this. And so here is the one where I was saying, man, those colors are bright. So once you create your style guide, how do you actually apply it to your theme? There's a few different ways you can get to it, but the easiest way is probably down here in the bottom. There's a style guide button. If I just tap on that, I can actually make all of these changes now. So let's say I come into this colored background. I say, nope, I don't want that one. I want it to be a different color, whatever it may be. And now it's adjusted that quickly. So hit update and you'll see this change. And there we go. It went from that really, really bright yellow to this more neutral, off white color. So all in all, that is what I want to show. Let me go ahead and move this out of the way now that we've finished up the presentation. There we go. All right, thanks for being back there. So that essentially covers everything on the themes and style side. That being said, if there's anything you guys want to learn about each and every week on the Training Tuesday, I'm more than happy to cater to your questions. So please, in the chat, leave any sort of topic that you might want to learn a little bit more about in the ClickFunnels world, and I'd be more than happy to create a training on that and walk through it at a different training Tuesday So, with all that being said, thanks so much for attending today, and we'll see you next Tuesday. Thanks again.