How To Style Your Images

AUDIO VERSION

WELCOME

Welcome to the final episode of our summer series of Page Design tips.

I've had a really good time making these and sharing them with you, and I hope you have found them to be useful.

In this week's episode you'll learn how to make your images appear to hover above the page, with rounded corners and a slight shadow beneath them.

It only takes a tiny snippet of CSS code, and then the use of the regular MV image uploader.

Hop in and take a look and remember, if you want more help you can always ask our resident code expert Juci.

INSTRUCTIONS

1. Open the Page editor, Blog post or Product where you wish to embed your images.
   
   
2. Add the CSS code snippet in the Advanced: CSS section.
   
   
3. Go to the Page Design or Text Edit Area 
   
   
4. Upload an image from your computer
   
   
5. Immediately save and Preview the page in another Tab
   
   
6. Check the image size and position first before attempting to style it
   
   
7. Now enter source code mode
   
   
8. Find the "img src" tag that has the link to your image
   
   
9. Add the following text within the tag:   class=“img”
   
   
10. Close the source code editor
    
    
11. Save the Page, Refresh and check your work.

CODE SNIPPETS

CSS: copy and paste the following code into your Page settings at Advanced > CSS

HTML: copy and paste the following code into your Page to see the flower example from the video tutorial above

LEARN FROM A PRO

If you find you would like to have a little more help with the programming side of things, please visit the "Summer of CSS Magic" program.

This is where you can get individual page design help to customize your own MV site, in an excellent program from our friend Juci.

GET HELP WITH YOUR CSS

TRANSCRIPT

Hey everybody, I'm Steve knots. Welcome back to the User Experience podcast for the final episode of our CSS page design series from this summer, where we've been making cool stuff that you can upgrade inside your MemberVault to add little visual effects like controlling the page width, or removing the title, or doing drop down menus or possibly making images with rounded corners, like we're going to do today.

So real quick, before I go too far, there is a blog post on the MemberVault site I want you to be aware of the post is called CSS library that is at courses dot VIP member vault.com/css library. And this is a library of goodies where you can find links to all the past episodes from this summer, where we took you through topics like adding custom buttons, drop down menus, etc.

And remember, if you would like some more help from a real pro, click on this link and check out the summer of CSS magic, which is a paid program from our friend Juci, she is a code and programming pro who can help you customize your own site with the exact colors, branding and layout that you want for your page. Now I can help you with a couple of tips. But she can help you really get it done if you've never done this before.

So what are we doing today, here we have when you basically embed an image, like this top one that says square image, it just looks flat. It's a rectangular image hard corners, you know, pointy corners, flat against the page, and it doesn't have any dimension to it. In the image below, you can see the title says rounded corners with a drop shadow. Same exact image. But now I'm using some styling to round the corners and add a little shadow that to make the image appear that it's hovering above the page. You don't think you could do this with code, it looks like oh, that's a graphic designer, they had to crop it and add a shadow blob and blur it. Now you don't have to do any of that you can do a little bit of CSS code to make your photos look like that right away when you upload them.

And for practical application, I'm going to show you how to do this with a testimonial. I get a lot of testimonials from Facebook, from my Facebook group, where people just drop a comment about you know, whatever. And it's really handy to zoom in, take a screenshot of that and a little rectangle and paste it into a sales page or an email or anytime you're promoting one of your offers. It helps so much to show us social proof. And why not make that social proof look professional.

So what we're going to do is drop in a few little pieces of code into a page. To make that happen. Just for review, we go to our pages section in our content menu, we're going to be working on the rounded corners page. So I click Edit. That's how easy that is. And before we do anything with the HTML code in the code mode, let's go to Advanced and drop in some custom page CSS. Right here is a little piece of code snippet, CSS code that you can paste and copy, you can copy and paste in. Make sure if you have any custom page CSS already, you should come in do select all, copy and paste it to a text document so that after you edit your code, if you happen to make a mistake, you can get back the original without ruining everything you had before this page is blank so far, so I don't need to do a backup.

And what we're doing is defining a parameter called image. IMG. And it's going to say that anytime I call up this class, what the what the page is going to do is assign a border radius of 15 pixels, that's the corner, making it round instead of just pointy. And then this box shadow description saying that the shadow is going to be this many pixels wide around the edges. And this is the color of the shadow. So that that number 969696, you might recognize that as a hex code, we can change the color if you wanted to blue shadow or whatever. But the point is, this is a class of what your page is going to do to any image when you call up the Image class.

And let's take a look at what our page is doing. Again, in preview mode, the rounded corners page, we have a square image up top just a flower with pointy corners. Then the text says rounded corners with a drop shadow. And there's the text. And there's the picture looking different. I'm reviewing that very clearly so that when we enter the code editor, all of a sudden you don't see pictures, you just see black and white text. So at the top h2 header to square image, we have just a simple picture embedded with a width and height attribute.

For review, when you do that, you can go to your MemberVault image insert. You upload it from wherever it is on your hard drive. And then you can put in the image title, get the width, the height, and the class could be for alignment if you want to align it that way. So everything in this top image is just right out of the MemberVault standard image uploader. I didn't do anything special for that. Now at the next one where it says rounded corners with a drop shadow. This image is almost the same, but classroom time what is the difference between this one and this one? This line of code has image a source the source is divine defined with a link.

Notice that link is inside my MemberVault because I uploaded the member the image to my member vault I'm not linking to an external image on a different site with height auto and the tag Okay, now how about down here? We have the image source tag same link class equals img aha, this little line where it says classy equals img. That's the only difference between these two image image attributions. And what this is doing is telling the site, hey, when you have this image, apply the parameters of the CSS class IMG, and make it styled by whatever that class calls up.

Remember, the class down here, calls up border radius calls a box shadow. So the lower image is the same exact upload and check it out in preview mode. Oh, I mean, when you're, when you're on your page editing these to look the same. Because it's the same image, we uploaded it the same way, same size, same shapes and everything. The only difference is the bottom one. In the source code mode, there's this little piece of little tiny little thing that says class equals image, which means the page itself is going to do the Photoshop work for you to round off those corners and add the shadow.

So your second one looks like this. That's the difference. And that this might be the shortest episode of all that is how easy it is. So let's see if you know for practical purposes, let's say you want to drop a testimonial in there and have it look good. I have a couple on my machine here.

So I'm going to upload a testimonial using the image browser upload document is 22 testimonials, Adam loving number one basic image uploader, I'll say add. It's a good idea to add this image title for general internet architecture. And also so I can find it. When I'm looking at the code mode, I'll set the width to 350. Save, there it is, click outside the frame to autosave. Check the other Preview tab and refresh.

Remember, for general practice, anytime you're editing code, it's a good idea to preview and refresh after every step. So I uploaded an image. First, I want to preview and make sure the image is there before I mess with it and try and make it look like anything else. So that and the reason for previewing like that is if something goes weird, and you don't get the result you want, you will only have to back up one step. Rather than finding out that you did an hour of work, you broke something at the beginning, now you have to undo it all and maybe you didn't have a backup and now your whole page is screwed. It's a huge waste of time and headache. And this is a really, what I'm doing here is giving you some tips that makes it totally safe for you to edit your own member of all pages without being afraid of breaking your site. So that's why I preview and refresh right away.

So there's the word testimonial on screen here is an image from Facebook. And this has no border, it looks like this person's head in the comment are kind of floating on the white space with nothing to define the edge of the testimonial and the page behind it. Now if I happen to have a page of a different color background, you would see that it's just a white rectangle around this screen this the screenshot of the testimonial.

So we want to make it look a little bit more attractive to the eye by adding the rounded corners and the shadow. Now how do I do this? If we were in the classroom, I would make you raise your hand and answer but we're not. So what I'm doing is entering source code mode. Here I can see the new image. How do I know it's the new one because the title Adam testimonial as the title I gave it, and there's the width and height and everything. The only thing that's missing is this little piece of text says class equals img.

Now I could type it but I'm going to copy and paste. Now within the image source tag, that's the pointy brackets. The highlighted section right here is the whole image source tag. So that source tag has the link, the attributions class title, all title, width and height. Within those pointy brackets, you need to have the phrase class equals img to tell your page to style that image with the attributes we defined in the CSS sheet. Okay, so we save, save the page and we refresh. Wow, look at that. So that's cool.

Now you can see exactly how big was my screenshot that was cropped kind of around the person's head and the text in the in the lake and everything. And now the edges are rounded. And there's a little bit of a shadow on all four sides. So the whole thing is floating above the page with a slightly heavier shadow on the lower right corner to make it look like it's popping up towards the upper left. And guess what when you're reading and scanning, our eyes, start at the top left and go across and down. So this makes it putting the shadow on the lower right is a visually strategic thing to make this image pop into view where you perceive that it's important to see at first, I think that is such a cool little subconscious technique.

And that's how easy it was now now we have a testimonial here popped up with the border and everything. Let's say we want to just compare testimonial. I'm going to copy and paste this whole thing one more time. And now with the upper one, I'm going to remove the class img just for a little before and after comparison. Let's save that now. You can see in my page editor, I don't observe the rounded corners of the drop shadow. That's why it's really important to preview so that you know your code is working. And here we go look at the difference between before and after with this testimonial. The upper one. It just looks like it's there on the page. And yeah, I mean the information is there. theoretically, somebody could read it and get the benefit of that testimonial.

But the lower one, it's in a box, it's got a shadow, it's rounded, it looks professional, it looks like a Photoshop editor made it. And it's even high enough resolution that you can read the text and everything. So the bottom one makes a much better, bigger and better visual impact, just like the flower photo compared to the flat square one that's just pasted on the page. So this is something to put in your toolbox of design tips when you're making your page and you want to have, you know, the circle head like if you have a testimonial and a person's photo, you can have the photo stand out above the page by using this technique. All kinds of fun stuff like this you can do. If you want to go a little bit farther, you could play with adjusting the border radius to a different number to make the corner a little more pointy or have a bigger, bigger curve that eats up more the corners. And of course with the box shadow.

By playing with these pixels, you can adjust which direction the shadow is dropping, and which color the shadow is dropping. So those are some advanced tips. But really, I'm not such a great designer and programmer, I have a couple of tips. But the way to do it if you really want some help customizing your MemberVault site is check out the summer of CSS magic from our friend UC, who is a really cool person, super funny sense of humor, easy to work with, and a great teacher and she has this amazing program that seriously, it's a paid program and the amount of money you spend to learn this stuff from her is 100 times cheaper than paying a designer to do it for you. Not to mention wasting all the time trying to communicate with that designer and tell them what you want before they even start doing it. So I really recommend her program if you would like to go more into customizing your membership site with some hands on CSS code and glitter.

That is it for the summer series of CSS page design tips. I hope you've enjoyed this series. I hope it's helped you and I hope it's given you some things you can do to play within your site to build landing pages, sales pages, promo text description areas, or blog posts or freestanding pages on your site to fill all the needs of your business. So you can bring in your audience, develop a relationship, get them engaged, start them earning some EP and points in your in your account, and then purchasing your products to work with you and your coaching business, your membership subscription or your online courses.

Whatever you're doing. I hope this makes you do it better. And if you have any questions, you know where to find me in the Facebook group in the collab, drop a comment and I'll see you next time. Thanks so much for watching.