Introducing the Summer CSS Page Design Series

Welcome to this exciting series of tutorials on how you can build custom Pages in your MV that look clean and Professional.

In this weekly series you'll learn CSS and HTML code tips that you can easily apply in your own MV to make some fantastic Sales Pages, Landing Pages, Blog Posts and more.

In the User Experience series I'll show you how I do it in my own MV, and for more in-depth support you can join our code master Juci in a series of workshops where she will help you fine-tune the edits to work in your own account.

Get ready for a two-month series of code edits!

And don't worry about keeping track of them all.  We're already collecting them for you in one master blog post which you can bookmark and return to at that link.

Curious about Juci's genius code skills? Stop in and visit her Code & Glitter site right away and sign up for the Summer of CSS Magic.

AUDIO

TRANSCRIPT

Hey, I'm Steve Knots and welcome to the User Experience podcast, I am really happy to announce our summer series of CSS magic. And thanks to our code genius Juci for making up that cool name! What is CSS? it is Cascading Style Sheets. Don't even worry about what that means. The point is, this is going to help you customize pages in your MemberVault account, so you can build out a sales page, a landing page, a product offer, anything, a blog post, even these would apply to.

And you can make it look really professional with graphics, buttons, images, drop down menus, little boxes of color behind the text, all kinds of fun stuff that makes it look really fancy and official, as well as hardcore details, like maybe removing the page title up at the top or removing the footer at the bottom, setting the page with customizing it. So it looks like what you want, and all the distractions are gone.

Why do we want to remove the distractions because that will raise your conversion rates. And when people come to a page with a product offer with a button that says By now you want them to click that button and buy your offer and join your membership or your your your product or whatever it is. And this is all about helping you get there and helping you do that.

So what we're going to do is, we're going to go week by week and show you one simple edit you can make to your MemberVault site on a page to end up with something that looks like my demonstration page. And we're going to do it step by step. I'm not a programmer, I'm not a web designer. I'm not a code genius, but I know how to do a few edits. And I'll show you where to put them in your MemberVault, how to fix them, if they're not working, and how to make sure you don't break your site. I know a lot of people might be nervous about oh, I'm gonna break my site.

That's the first thing I'm going to show you today is how not to do that. So you can be completely safe to explore, experiment, test it out, see how it looks, undo it if you don't like it, and you're never going to be in danger of ruining what you already built. So let's start with a little preview of what I built so you can see what you're going to learn.

Here is a page on my site, I have a course called Basic mixing with Ableton Live and you can see right away, the page is not full width. Okay, the video and the text are defined in a smaller window that makes it easier to scan right and left when you're reading. Up top I have a video, notice there's this gray box with rounded corners and a drop shadow behind it to make it jump out off the page, you're going to learn how to do that we have a new button right up here a custom button, you're going to learn how to do that and even make the button have rounded corners or square corners if you like it. Then we got some basic tech text and gifs and images. It's MemberVault. So I'm using gifs, we got some bullet points. These are like the basic styles that you can do right now in the editor, which we'll take a look at.

There is another custom box with a drop shadow and a button and some images and graphics. Here's a really fun thing that a lot of people love. You're going to learn how to do these accordion drop down menus with bullet points inside, expand to see Module One activities, it's a great place to put extra details for people who want it without crowding up your page with tons of stuff. So I do the same thing with basically all the modules. Later on the way down testimonials. You'll see how to make these and now you have to have your own testimonials. I did not create these. They're not fake. They're actual real screenshots. And I'll show you what I did to get them applied on that page. Look at nice. Here we have the bonus section, we got some graphics that you're going to learn about. And another call out box or the highlighted thing.

These are some graphics like you might make in Canva or something. So you should probably work on collecting some screenshots from your actual product or photos of you or or your users smiling. So you have some raw material to add into your page. Because I can't make that for you. That's your own content. But I'll show you how to work with it. We got some PDF previews, a little bit about my community some more testimonials, another custom button, the satisfaction guarantee section a little bit of the about your instructor with a little head in a circle that looks cool. We can talk about that some credentials, another button FAQs, again, with the drop down menus in place to really make it easy for people to get their questions answered.

And then down at the bottom social icons, I can show you how to make those and get them lined up looking good. So people can easily contact you if they have a question. Why? Because that increases conversion builds trust makes them feel confident that they're going to get support to get to the result without wasting their money, we got a little mock up, I can show you that at the end of the summer series.

And then down at the bottom of my page, we have the final call to action button and a couple of other icons. So that is what I'm going to show you how to do the different features you see here are absolutely simple for you to apply inside your member vault. Assuming that you have your video finished some screenshots, some photos, some basic product graphics. So those are things you need to create. And then we'll put them into the format of a page with the layout like this, with the page with the title, the styling, all that kind of stuff. Our friend you see is even better at this than I am. So she's going to follow up. Let me tell you what you have to look forward to. Now here is our MemberVault blog posts with the CSS library. This is going to become a collection of every episode in one place. So you can click the link and get to a tutorial that tells you how to dot dot dot with my video on there.

But if you want to go even deeper, our friend Juci who's a real code boss has made a series of workshops and the name "Summer of CSS Magic" that she invented, where you can sign up with her and go through as a paid paid resource, the schedule of all these things where she's going to show you on a video in depth and give you a q&a session where you can get it working in your site. I would like to do that. But she's the better person to have that happen.

So you can see an introduction to CSS, all about buttons, fancy FAQs, eye catching page sections, some of the stuff that I talked about, you're going to learn how to do it with her in these workshop series, where you're going to really get the help you need. If you want to customize your colors, customize your fonts, make it look exactly right on your account, because I can show you what I did that as an example. And you see can show you how to get it working on your site. So this is really exciting.

Those are her dates, mine are on podcast coming out on Tuesdays. So you'll be able to look for those as free posts in the Facebook collab. And on the on the MemberVault blog. So to get you started, I know you're all drooling with excitement, we looked at what my page looks like. It's really critical to be confident when you're doing these kinds of edits.

So for anybody who has never done any code at all, you may have only seen this Page Content.

So for anybody who has never done any code at all, you may have only seen this Page Content Builder where you know, you type in your words, and you can make like this right here, make your track sound Pro, I selected the drop down heading to to make it look like that. Let me undo all this. Now the first thing I want to teach you right now, this is something you can learn right now that you can do, the first thing I did to do a backup. So I never break my site, I'm never worried about losing anything or undoing what I did. I go to a text document, open a basic blank text, I have one called HTML backup.

Let's go to the code editor. This is the source code button, it looks like the two brackets, you click that. And you get into this world. This is where people start getting scared, because this is not really human language. I mean, you can read it. But this is like computer language. All I'm going to do select all, Command A, Command C or Ctrl C to copy, you can do that from your Edit menu, copy, like that, select all and copy. Now that I copied everything, I can close that little window, go right over my HTML backup and paste.

Now I have one big document of that page. And you know what I should do is title it basic mixing with Ableton Live and the page. That way when I open up this text document, I know what page it is, I have a total backup, I could go right here and delete all this stuff, I could do select all and hit delete, erase that whole page and save it and freak out it would be all gone. And guess what, when I need the backup, I go over here. I start with this part of the code, Command C, select all that again, you don't want to copy the actual word HTML backup.

But I would just copy all that stuff. Go over here to the code editor and paste it in there. It's really important when you're working with code, what you don't want to do is you don't want to go to the basic visual editor and try to paste your code in there with all the brackets and quotation marks and stuff. Because it's going to look like gobbledygook for the end user, it's not going to look right. So you want to make sure that you go into the code editor, anytime you're working with this stuff, and copy and paste from there. And once you get used to it, you can figure out you can sort of decipher Okay, make your track sound pro that's in between h2, I chose h2 styling for that. So you can kind of figure out oh, this little bracket means h2, this little bracket means h2.

So that means everything in between those two h2 brackets is going to have that look of the h2 size. I'm not telling you, you're not going to learn HTML by doing this. But you might be able to understand a little bit about how there is a beginning and an ending section that says something about what's in between. So right here, the words make your track sound Pro are big and bold faced with like the h2 style. And when you go to the code editor, this line right here shows you that h2 style, align the text left, these words are getting the h2 style. And then after the word Pro, there's a forward slash end of h2. And after that, we're back to regular P style, which is paragraph style. That's super basic. I don't expect you to reverse engineer all your code, I just want to let you know the code editor is where this happens.

And before you work with any kind of custom code, it's a really good idea to make a backup in a text document and save it don't leave it as an untitled text document, you want to give it a name and save it in a place you can find it again because restoring it is important. Likewise, when we're doing any CSS code, use this section if you want to add custom CSS, okay, I have a little bit of code in here. So here's what I'm gonna do. Command A select all, Command C copy, go to my text document, I have a CSS backup. Paste it in there. And I want to make sure I tell myself which page this is for.

And save. Now I have total freedom to go in. Edit my HTML to make the page look cool with little blocks and Blips. Go into my custom CSS code and play with the format of the page like the page width or adding buttons or something like that. You might not understand the difference between HTML and CSS, that'd be a great question for you see, I could sort of explain it, but she'll do a better job. The point is, now you know how to make a backup of your custom code. This is really important.

And remember that on MemberVault, tech support, we're not really helping you with CSS, like, once you step into that world, you're on your own, it's kind of like, you know, we can help you like, fix your car. But if you want to drive to the Antarctica, you might have some problems. So like, going beyond the limits of the normal roads, is what happens when you're playing with your own code. That's why I wanted to teach you how to back it up right away before anything else. So you don't get yourself into trouble. Or if you do, you can easily backup and restore what you had, without that panic of like I deleted everything. And I don't know what to do. I know, you know, the theory of backups. So that's what it's all about. And just to round out this section, when we're in page settings, to work with HTML, you get it from the source code editor. And that's kind of where you can see the edits that you make with these paragraph and boldface and things like that.

And then to get to the cascading style sheets or the CSS, you click into the advanced section, right down here, custom page, CSS, and I'd like to point out that this is only for the one page you're editing. So when I put CSS code in here, it's only for this one page at this address. And it's not for my whole memory vault account, your env account does have a CSS section, if you go into sorry, appearance, and branding, account preview, custom defaults. There's a lot of places you can adjust stuff. Colors, title, logo, things like that. And settings, account setting, use social sharing, advanced settings here, your custom CSS, that's where I have a whole bunch of stuff about other parts of my MV, like the announcement bar, or other things like that.

So we're not going to do a whole entire build of your entire MemberVault platform, we're only going to do one page at a time, which makes it easier for you to make small edits, see how they are working, and not disturb all your other products by accident. Okay, so that's what that's, that's all I'm doing today, we just did an intro to welcome you to this summer of CSS magic, where you're going to learn how to style your page and make it look cool. We have a weekly episode coming up. And I'm going to do these as a podcast series like this, where I give you one little hint, show you how it looks on my page and give you a way to play with it.

Then if you want to go deeper, I really recommend you check out Juci's product, the summer of CSS magic, she's going to have a week by week workshop with code snippets direct access, access to her code, brain q&a, a bonus call in August, all kinds of stuff that's in the schedule. And I wish I knew all this stuff, I might actually sneak in on her her episodes too.

And you can read about it, she's just such a nice friendly person and has helped me a lot with my own MemberVault. So that is what it's all about. This is the end of today's podcast. It's been super short and sweet. Remember, do your backups. And you don't have to worry, you make a text document, save it somewhere else, copy and paste your code. And then you're free to play around and get big headings or customized page width or drop down menus or background color borders with drop shadow. It is so much fun when you get your page really looking good. So that you know what you can do. Like I'm doing right now, all my stuff on Squarespace, migrating it over to MemberVault. Last week I talked about the footer links with my disclaimer and my privacy policy. They're all on MemberVault.

Now I'm not using Squarespace for any of those pages. And the more we develop these page builder features, the more you can just build a MemberVault, use this as your main dominant site with your custom domain and everything and bring all your people here blog, got it,
landing pages, got it products in the membership, of course, we got an affiliate program we got going on. It's really exciting to see this platform growing. I'm super happy to be part of it. Thank you for watching, and I'll see you next week for another little design drop.