How To Make A Background Box

Welcome back to the User Experience podcast!  This week we have a really great episode about making background boxes, which you can use to highlight special sections of a Page, such as a Testimonial, Guarantee or Video.

You'll need to paste some code into your Page to get these working, and I've provided the example Code below.

Please watch the entire Video first before attempting to edit your MV site. 

And if you would like some professional assistance on this topic, we've got the program for you...

LEARN FROM A PRO

For detailed help in your own MV site with design like this and many other style features, please visit our friend Juci's program "Summer of CSS Magic" -- where you can get individual help making your MV shine!

CSS & HTML CODE

In this section you will find two pieces of code that I used in the demonstration.  The first one is the CSS code which you can paste into the "Advanced" section of a Page.  

The second box gives you the HTML code I used in my example.  You would copy this and paste it into the Source Code area of your Page, blog post, etc.

Be sure to follow the instructions on creating a backup of your CSS and HTML before doing any edits.

AUDIO

TRANSCRIPT

Hey, everybody, I'm Steve knots. Welcome to the User Experience podcast. And today we are right smack in the middle of our summer Page Design series, where we show you how to build cool stuff and yours inside your member vault. Now, this week, we're going to be doing this gray box with the rounded corners and the shadow underneath it, that you can use to call out a cool section and one of your pages or blog posts or even inside of a lesson or a course. Real quick, this is associated with Juci's project, summer of CSS magic. So if you feel like I'm getting a little too deep, or you're getting a little bit lost, I'm going to show you what I do.

And here's where you can learn how to do it in your account with your own customization, your own branding, your questions that you see will help you answer. This is a paid product. And she'll take you to an absolutely fantastic place of understanding code at a deeper level, not to make you into a programmer, but just to help you understand how to apply this in your own MemberVault.

So let me show you how I make this gray box. Now the reason is, the reason I want this is I want people to land on this page and get a quick overview and click the button. I don't really want them to scroll down and read everything about what they're going to learn and what's inside. I want them to get to the front top like landing page almost, and just say Oh, of course title that's attractive. Video tells me what's going on subheading, make your track sound Pro, that's the result I want. Description, oh, learn to make it in one week. That's what I want. Click the button to sign up here. And they come on inside. So this gray frame is really highlighting this top section of information course title video call to action button. And the drop shadow makes it kind of hover above above the page. It's just a great little layout to, you know, make the section pop out. So today I'm going to show you how I do that on a more simple page. Right here, the background Box page. This is a demonstration page. And for basic tactics.

Remember that before we edit anything, we're going to go to the page, go to the source code, select all I copy and paste to a text document before we mess up our own page. So we have a backup copy. In case anything goes screwy. And if you happen to have a page with any custom code in your CSS or JavaScript, go to your CSS area, copy, select all copy and paste to a different text document. So you have a good solid backup you can return to in case something goes weird. Also, for general practices, we're going to have one page open with editing a second tab open with the preview. And every time I make an edit, I'm gonna go refresh the page preview and make sure I know what my edits are doing. What you don't want to do is you don't want to go into your code editor, slip in here, edit for 45 minutes. And then finally save at the end and come back and your page is broken. And you don't know what broke it. But believe it or not code is kind of a linear process. If you do one thing at a time, and you're always refreshing, you will know exactly which part works and which part doesn't work. And then you can easily go one step back and find, oh, you know, I had this wrong or whatever.

So those are some general practices we talked about over the last couple of sessions, I want to just reiterate, you don't have to be afraid to play with your code. If you do some backups, and you go slowly and refresh, step by step. So that's how to keep it safe. So you don't have to get worried. Now what's happening on the background Box page? Well, to make this really simple, I wrote a lesson plan. And I'm going to be very open and show you what has to happen. Two parts. One is in the CSS. One is in the HTML. And when I say that the CSS is in the advanced section of your page editor custom page CSS, this is just the normal pages. So I got a list of pages. Go in here, the background Box page, click Edit. And all these fields are available page settings, name, title, blah, blah, blah, page content, underneath SEO underneath advanced open that up and CSS. So step one is to add something in the CSS. And step two is add something in the HTML editor with the source code button. What are we going to add? Well, in the CSS code, we're going to drop this whole thing in here. And the basic element is titled div box. Now you don't have to have nevermind it in this example, it's called div box and you see can take you deeper on how to create these for yourself. We're going to paste that in the CSS code.

And then part two, within the HTML, we're going to call up that box. With div class, we're going to create a division in the page. That division says this division is called div box that tells your page to go over to the CSS and find out what's happening in the div box and apply it to that section. Below this class tag, we've have the text images, video, everything you want to put inside the box. And then when you want the box to stop, you close it with the end div tag. So in HTML land, this inside the brackets is called the tag. div class is the tag and slash div is the end of the tag. Everything between these two tags is going to be the content that ends up inside the box. So let's see how to apply this. We'll start by copying the CSS code, copy. Go down to my Advanced Settings, paste and save.

Now I can go refresh the page right here but nothing happened. While we did this sort of setup on the page. until the page, okay, there's gonna be a container called the div box. And when we asked you for it, we want you to put it on this page. Okay? It's like a little recipe. And now we need to go into our page at the code editor, and paste some div tags to tell the page where to put the box. So the question is, where do we want to put the box and the way this applies to you is, when you're looking at a section of your page, you can decide, oh, I want to have these certain things be framed inside of a box. So on my page, starting from here, the title and amazing box, I want that in the box, I want the picture, this little kind of interesting line, seriously, you need to click this button, or else the whole entire internet is going to explode. Well, that's pretty dramatic. And then the button now under the button where it says less important, that's not going to go inside the box.

So my task now is to go to my code. And figure out where is the div tag going to end? Okay, the first div tag is going to go right above the very top, because that's the beginning. So div class, copy that div box, go up to the top, paste that in there, that says, Above the amazing box line, the gray box, the division box is going to start. Now we wanted to end it. Let's see there seriously, click this button, then this line is the custom button itself with the buy. Now, the next line says less important. So we don't want the division box to be there. So we're going to type and div right here. So there's our HTML ending tag, the close tag, here's the open tag that says, I want the page to create the structure called div box. And then all the stuff in between here is going to go inside the box. So the title and amazing box, the image of the astronaut, the sentence that says click the button, and then the button itself should be framed inside this box. Let's save and go to our preview, refresh. And nothing happened. I wonder if that's because I copied and pasted some code that might have extra little glitchy stuff in there from the text document. I don't know. That was maybe not so clean. Let's refresh that. And this is what it's really like when your code hacking. And refresh again. It didn't work. Did I make a mistake on the HTML? Uh huh. div class.

This translated some punctuation when I pasted quotation marks. Unfortunately, this is what may encounter when you work with code. I want to save that again. That's the open tag div class equals div slash box. At the ending div, let's try this again. Divan and refresh, ah, and amazing box has appeared. I am I'm sorry, that happened because maybe it made me look a little bit unprofessional. But you know what, I'm not a programming professional. This is what it's really like to try copy and pasting code into your MemberVault site to play around with it and see what happens. Now I'm guessing when you sign up for coding glitter, I would predict that Juci has a pretty good way to teach you how to do this without making these mistakes. But at least you saw me make that mistake in real time and fix it. And we were able to get it done by knowing what's supposed to be there looking what's actually there, and fixing it.

So now what do we have an amazing box, there's the gray box with the rounded corners in the drop shadow. It has the title and amazing box inside it. There's the astronaut, the sentence "better click this button or else the whole entire internet's gonna explode", and the button and then below it check this out. The less important part is not included. It looks like it's a little bit too tight against the bottom of the frame. So we might want to space that out a little bit. Let's see. She's a better click the button to make sure the internet doesn't explode. What do we get to -- puginarug.com You have been honoring the pug for four seconds. I'm a Senior Assistant of pug. This is a link from a website called useless websites. And every time you go there, you can get random randomly go to like a completely useless website. This is the whole website. It doesn't do anything else except show you a plug in a blanket. I mean, we got to have a little fun in these tutorials. Right?

Let's see if we can clean up this page a little bit. So far what I showed you was how to create a gray box surrounding your page section that you want to look nice. Now, we wanted a little bit of space behind the lesson underneath the less important so let's just hit an enter space refresh. Did that work? No it did not.

Instead of this. So let's put in some great linebreaks. See, update, and refresh, there we go, I have a little white space under there now. So the less important part is where the rest of the page could continue onward. But what happens if your branding is slightly different and you don't like the gray color. And because you don't like the gray color, you also don't like the gray shadow? Well, there is a site where you can pick HTML color codes, and get different colors.

So let's review where are the color codes in this gray box? It's not in the source code, it's in the Custom CSS. Background color is this thing, EB EB EB? box shadow is 969696. Those are hex color codes, six digits, making colors. So let's pick some codes. Let's say we have a page with kind of midnight bluish branding to go with the outer space theme. I want the box to be kind of a light, lighter thing, let's say like that seven for a four F F, I can copy that here. Go to my CSS background color is going to be that. And we want the shadow to be a slightly darker version. Right. So let's just take that down here, I'm just kind of picking colors. Copy that, back to the code, background color, drink. And save. Now let's refresh and see if we get oh, there is an amazing blue box, more or less matching the outer space astronaut. And you can see the drop shadow around the box is a little bit of a darker blue color. Now you don't have to like these colors.

But the point is, it's very feasible to identify where in your custom CSS, the background color is defined. And once you have that, this six digit code can be replaced with anything you want. from something like an HTML of color picker site, or from your brand kit. If you have a professional branding folder in Google Drive that has your font and your brand colors and all that kind of stuff. That would be a good place to create backups for your brand identities, so that every time you create a page, you can get the exact same hex color codes. And you can just paste them in, instead of trying to move this little thing around and guess Oh, was it this blue? Or was it this blue? Or was that this blue? That can get a little confusing. So I recommend making a backup copy of your brand colors with all the little details. So when you go to slap them into your page, it's going to work, I want to go back to e, v, and 969696 to keep that gray type theme for my gray box and refresh. Oh, look at that. I remember that that's pretty easy to remember, because it's only EB and nine, six.

So that's all I wanted to show you for today is making a gray box with an outline of the drop shadow, and how to understand where that box goes relative to everything else on your page. Just for an example, if I did want to include everything in there, I can delete that tag, put the end div at the very bottom after all the other stuff. Save, save, refresh, refresh. And now the gray box is expanded to swallow up the less important section and have everything in the gray box. And I love how these look, they really make it look like a special part of the page that's just meant to be there. You know, it's it's defined or intentional. One more time for the people in the back. I want the division, I want the gray box to end above the less important section. So I put the end tag there, maybe delete one line break to make it. Spacing appear. There you go. Amazing box picture tag line button, and the less important section underneath. Now on my demo page over here, this is my sales page for a basic mixing course, you can see the same thing, a gray box with the headline sub sub headline description button and the box ends. Now if you have a page where you let's say you wanted to create something like you have a challenge, and you wanted to have just these bullet points within a box, what you can do is go to your source code, find those actual words within the code, and just enter the div tag above it and below it. And you'll create another gray box right there.

And here's the cool thing about CSS every time you have a gray box. If you want to change the colors of the box, you don't have to go in and type a different color on every different section every time the box appears. All you do is go into your cascading style sheet, which is the CSS, you change the color in one place. And all the boxes on that page are going to adapt to that color. This is the power of style sheets. In the old days of HTML before CSS, you would have to literally go down your entire page. And every time you see the gray box you'd have to change the color with the six digit hex code and have a chance of making it wrong. And every time you go to another one you got to go there and use the code find out where it is and change the gray box. Oh my gosh app To scroll, then you'd have to preview all those and see if it actually worked. Look how nice that is special bonus, really identifying, hey, this is some extra stuff that you get. And the power of CSS is that you change the colors in one place. And everything updates on the whole page. And you know, it's all going to work. And that adapts to, of course, more than just colors. But anything you put in CSS, you can update it in one location, it becomes a recipe that all those other places draw from to update on the page, which I think is super cool, it makes your life a lot easier.

And that's what we're all about here in the User Experience podcast. So one more time, if you want to learn this, from a real pro doesn't make mistakes live on camera like me. Check out Juci's product, "Summer of CSS Magic", where she's taking you through detailed advanced workshops, where you can customize this page editing technique to your own branding, maybe you want square corners instead of round corners. Maybe you want to pick colors that match your branding, she can help you with all that stuff. And more. There's a curriculum where you can see what she's teaching and all the different weeks, I'm loosely following her curriculum to show how I implement these in my site just to let you know, hey, this is possible. And when you really want to do it, you can go deeper and sign up with Juci, which I highly recommend you do because she's super cool and fun to hang out with. And I know it's going to help you out.

So that's all for me. Thank you so much for watching. If you have any questions, you can drop a comment underneath this on the blog or in the Facebook group. And we will be glad to hop in and answer. Thank you so much. Have a great day.