Lessons

Lesson Info

Adding Text & Images to Your Page

We'll start talking about adding an editing text um I'm not going to go crazy with this because you don't have a type don't mean I'm gonna go nuts that way, but as we start to work in here I mentioned before that we have the visual editor and we have the text out of there if I click on the text editor to take a look let me show you this a lot of people just they they fear this and I understand that, okay? Because if you look in here this is mostly the html this is what you're looking at you're looking at almost raw code here, okay? Now anybody who worked in the text out of there before you know it's done this there's a couple things that are really good in a couple of things that are really bad. First of all, if you ever copy a link from somewhere every does this twenty times you'll be in visual and you'll like paste the link or something like that and the link won't work because you just pasted the lincoln there and it just shows if we go into text and pace the link a lot of times the...

link will actually appear or allow us to click on something to do it the text is the code okay now what's interesting about wordpress is that in the visual editor here and I got about this drives me nuts but if I go in here and I hit a return what's it doing to the actual code what's behind the scenes what is it adding okay it's adding paragraph it's adding up e tag hey, this visual editor is meant for us to bill to go in and do things visually but it's still adding code behind the scenes now I just need a return there if you take a look I'm gonna go into text and take a look at it and you're going to see right there a lot of that's what I used to start in here I was like okay it added a paragraph but it's not actually where's the pea tag you know I mean if you go to the website pete eggs there so I'm just trying to make you aware that it is adding code for you okay? So we're gonna switch back and forth between the two of these, you know, depending on what we want to work on and how we want to work it so we go back order visual you'll also see the individual editor we have a tool bar that we can toggle and themes will actually have more or less content in here for you and it depends on the theme but some teams will have this think j impact I mean just stuff you khun d'oh you'll also see that some themes like this theme actually has a google fun that's loaded automatically and that font is right there I forget it's calling its lehto um, but the thing is, if you want to have, like, every google font, that kind of things, some themes will have it in there by default, and they'll actually have it as a menu or something option appear to be able to do that once again. It's one of those things that if it's not in the theme, you can add it if you want using a plugging, but you're going to see here that if I click on things, some of that one of the big things were going to do is right here going to c paragraph this is we're going to start to add our content and you know what? I think one of the biggest things that drives me crazy is that this visual editor um if some themes, it doesn't mirror what it's actually gonna look like on the site because ever seen that, okay, it's, it's a little nuts. So if I go in here and say let's, you know, heading to whatever if I were to say this and go look at it, it looks like that on the site, the theme edit of the person who creates the theme needs to go in and create a style sheet that styles this toe look like that okay, so that's another thing that's a little bit you're kind of like a man okay, so we go back to paradise so we have a lot of things I'm not gonna go through all this we have alignments and all that kind of thing we have linking right here if you want to insert that it links uh I wanna answer later on we're going to talk a little bit about the more tag here but there's just the other stuff we don't really need to talk about like text, color and that kind of thing do we you guys to understand okay, you click on text color you pick a color you're good to go right? Okay, so I'm not gonna go there but let's say we want to do this I wanna add some media on when I had a picture I'm gonna start to add some video that kind of thing okay, so I'm gonna come in here and you know what? I don't want to do this on the home yeah, I do want to do it on home I'm gonna get rid of this this quote right here on the block quote and you're going to notice nobody has ever done something like that like you you delete something let me undo by the way I did a command z that undid so we can do commands in here sometimes a little bit um if I delete noticed the formatting of the or something like this next okay so what's going on it's actually if you guys if you ever see something like this I immediately go over to the text over here and you could see there's a block court around it okay, so this is where sometimes you're gonna have to kind of dig into that text take a look at it so it's where press is really trying to help you sometimes too much okay. All right, so let me let me nuke some of this yeah, yeah let me nuke some of this there we go and I'm gonna get a return on the uncertain image so if you look up here you're gonna see add media so when they click on that and we already did the picture for the banner but this is a little different because it's still going to use the media library but it's going to give us more options if you look in the left over here as we start to add imagery and content you're going to see we can you know we can upload a file if we have to when goto our library this is stuff we've already put in and you guys could see that from the customizer it's always every time you pick something for customizer it's gonna load it in there, so you're gonna see it, ok? So you're going to see, to be honest, I'm going to see in themes with customizer if you keep changing your mind, it's going to keep loading those in so you're going to see all the old ones too, okay? It's not going to replace them. So all right? Yeah. So you're going to see right here that we have insert. This is actually a good, good thing, too, sometimes in for insert from your world. So if you have an image that's on another site or someone else's site, etcetera, facebook, et cetera, you can actually just type in the earl and pull it directly in that could be very useful times. Um, I'm going to insert media. I'm just gonna basically pick a picture, but I'm going to upload it. So I'm gonna go to upload files, select the file and this is one of the images that we have someone inserts chef jim it is not a very big image. It's only four sixty and there is gym and you can see that. In all of his glory, yes, he is. I don't even know what he's doing there is he is he cooking is things today you're making making on the oh, no, no invisible doughnuts. So I'm I'm gonna click open here and take a look at this and you're going to see it puts it in their display before let me go down here, though you're going to see that with some of the hour we've got things, there can be a little different when you insert into a page or opposed, and this is the stuff we want to look at right down here when you insert into a page or post a lot of times, especially a page it's going to do things like ad u alignment and this is something that I've always just is something that it's very blah gish okay, where we have it's going to create a link to that media file automatically. So if yu capital to click on it, it's going to open it up in another window kind of thing, a lot of times I'll turn that off. I mean, I don't know you get your call, you get your customers, earl, you can set things up, but I'm going to say none for that. Okay, now, this is what I wanted to point out you're going to notice here what's called size it's going to show us all of the sizes are the sizes that it thinks are there that are generated. You guys can see that these air, some some of them that we can actually pull from, if you will, okay, depending on the theme, depending on what's going on in the background, it may or may not show all of them because some of them may actually be used in the background as responsive images to replace when you get to a smaller device. Okay, so in this case, I'm going to say, you know what? I might want to use it at medium little bit smaller, and I'll insert it into the paige this is actually an image like we saw sitting in that folder that was generated, okay? So I'm going to insert image into page, and we could do multiple if we want to and there we go. There's jim awesome. Now, of course, we have all kinds of information here we can work with, and if I click on this, you're going to notice that with wordpress, things change over time, you'll see that we can edit it quickly if we want. Okay, so I could go here and edit in this little teeny pencil right there soon as I add it, we're going to kind of go back in here and there's some things we can do in some things we can't, which there it is, that's it, but we can also create a captions. Let me do that. I'm gonna put a caption here I'm going to say, jim the baker, okay? And I will update and you're going to see the caption show up right there, okay, nice. Now I'm gonna click on the image of what I'll do is we'll go out and maybe do like, an alignment for this. So say let's, aline left and get that out there and we're going to take a look. Now, if you look at the image itself, you can see how it's kind of get down a little bit. It may be that that's just the visual editor messing with us and it's gonna look fine out there, but it might also be what what could it also be? Yeah, it could be that if I go to the text over here up in the upper right corner and I take a look at that actual image, there could be a tag around it or something happening that's not quite working okay, it looks like it's actually. Okay. Right now, if you guys noticed this is actually separate paragraph if I come up here and do something like this like set it next to it and go to the visual editor again you see it's going to actually look better when it gets out of the page sometimes even spacing khun matter when you work with me here. Okay, I know a lot of times when I work in here I actually have a plug in that stops wordpress from messing with my my coat in my text I don't ever when I work in certain themes of certain things I on ly work in the text and I just start coding and doing my thing of course it depends on your bends and I'll note, you know, and all that stuff but that's just me. So anyway, let me update this when you go take a look at it, all right? Um let's, let's do this. I'm gonna go in and just look a little bit more it's some of the other content that we create, uh we've got the short codes we can work with, so let me do this, let me go down towards the bottom, you can see my revision starting to stack up here a little bit actually, you'll notice this check this out you guys, if everybody had an auto save save your bacon and being around that yeah, I can't tell you how he tells that's happened I've been like, oh, yes and actually you'll find that sometimes when you make watch us I'll go ahead and make some kind of change if you look at the update button every every so often what's gonna happen is that thing's going gray out for a second and you're not gonna click out I used to be like what kind of click on you? Because it's saving an auto update our auto safe okay, yeah, exactly yes, let me do that. All right, so I'm gonna come down here you're going to take a look and see that I have short codes I want to mention these just a little bit because there are important you're going to see that we have seen the main ones, the gallery, et cetera if I come in here and go to let's say like video or something to that effect um you can just copy paste these if you want to type men it's up to you, all these they're going to do is basically put in the placeholder for it and they needed to tell where the video where the audio file is etcetera with video we can go in and add a girl from youtube, for instance which is pretty cool because you could do something like that and down here we actually short codes that I put in here to create columns. I did this because I wanted I wanted you to see short codes firsthand there's a lot of teams that use them and you can add a lot of power to your pages to a lot of different things with them. This is a little bit interesting because it kind of works sort of like html I'm actually gonna wrap content in these short codes and have it create columns for me so watch you can see to call one now I ii do this. Actually, I made this and I forget what they are, so I'm gonna go light. Copy this. Okay? Somebody copy this and go up and I'm looking at my content up here and I'm like, okay, I want to make a couple counts maybe so I want this first bit of text here to actually be that now we need to be in the visual editor because he's a short codes or at least you want to be in the visual editor. I'll come right here and I'm just gonna pace that little short code right there, you just type it in and I was going to return we could do that, and the idea here is that we're just gonna rap the columns we want to show up in what's called an opening and closing this little slash right here. Particular is actually saying that's the end of the column. Okay, there's, the beginning. There's the end. So if I want to create a second column now I'm gonna go down here. Maybe I'll hit a return. Let's do that. I'm here to return up here. Return paste that one in here. And you're going to say it's two column to that second column? Like I said, just trying to show you that there's a lot of ways we can do this and work with this. Let me copy some of this text right here and actually paste this. And so we have some more text and I'll go down towards the bottom and put in a call to to call you that right there. And I want to close this one. This is the end of the columns. I put that little splash in front of it. Not right there. Right there. Come on, brian. You do this for a living. Okay, so I got the little clothes right there. You can see it. So, let's, take a look at it. I'm gonna go ahead and update, save it. Go out to our page and take a look you're also going to see you guys you don't have to even have the page open there's a lot of ways to view the page or preview the changes from here so you can see that the next thing I could do it if I decided I want to do something like add video for instance I'm gonna go to my contact page I'm gonna goto all pages over here on the left and I'm gonna go to my contact page for instance and I'm gonna start to add some video now if we come in t contact page you're obviously what we can do is we've got our blank area to start with yeah, I can type in, you know? Hey, let's let's just have you email us still typing like you know it's just to have something on the page email us at you know, brian at brian would training dot com all right, I'm gonna cheat here. I'm going to just copy that if we want to put a link on something it's pretty simple I just go to lincoln do it. Let me just do this just so we have something out here you're going to say it's gonna automatically put it in their forts, which is kind of cool and I don't want you to do anything else click add link there it is now if I'm gonna go in and let's say we want to do things like ad, you know, just anything video, et cetera okay, we can use those short codes if you wanted to the short code you're going to see there's a listing I just tried to pick the big ones that we could use right down here. Ok, but there are more that we can use there's a lot more stuff that we can insert here in wordpress by default if I just go in and do something like video, for instance and I hit return sometimes it's not gonna actually do what it says it's supposed to do. So if I do this, this is kind of ah, stupid thing you could do, but if I kind of either update or toggle back and forth between the two, it'll kind of kick in the pants and say, let's, do this thing okay? Yeah, so you're going to see the okay it's saying we need video let's do this. So if I click right here it's going to say, all right, let me get this I'm gonna be able to edit this or delete it if I click on the edit here, you're going to see video details now this is where it's going to go and say let's, add a video file okay, now this is kind of interesting, but you're going to see that word press is going to try and add alternate sources for html five playback, which is pretty cool okay remember four I was talking about trying to, you know, kind of get this toe work everywhere the thing is when we work with video and we've actually got to put a video in here will go to prison for face video and add one, we're usually going toe work with three different file formats we're gonna work with thestreet right here empty for agathe or a or o g ve and webb you guys have heard of all those different file formats for video? Yeah, some of them right and before, of course okay, this is crazy. It really is. To be honest, I'm actually very, very happily surprised that that word press is doing this for us. This is actually really cool it's gonna give us a fall back so essentially mp for plays on ios devices, iphone, ipad all that kind of stuff, you know, in some other browsers as well, and we've got ogden wear them which are actually fall backs for other like fire fox chrome we knows inner explorer etcetera so is gonna allow us to play back some of these the idea here is that we're gonna give it a video I'm going to set up the right size we wanted that's going to be the key okay? And then we're going to try and give it the other video file format so I'm gonna click on web in here and say let's go at it let's grab it and put it in you guys all know how to create let's say like ah web and video or an oxy or a video okay, um there's a lot of ways to do this if you have the same way you guys have the creative cloud you have adobe software, okay? We all kind of new, right? If you are a creative cloth subscriber you can actually download what's called media encoder adobe creates this program for video specifically and it allows you to create in different formats. Okay? And one of these is going to be in before and you can actually do the other ones as well. I'm pretty positive I actually have I'm not trying to push this, but I actually have a complete I just went right to it. This little program here it never happens called miro video converter which is free you khun give them money, which is actually very nice two d'oh okay, but mural video convert is a very simple, simple program that just converts for web okay, so it's not gonna like you too to pick the main format most of the time we're going to start with them before that's gonna be like the main video file and we're gonna have it generate the tv in the web. If you drag the mp for on here, you can just choose the format down here and it will give you that format. It will give you these two options. I wear them and the og vi and you just have it spit him out. It'll generated for you. It'll keep the same size but that's going to be one of the keys. Okay. Videos got to be roughly the size you want it because is in a responsive website. You can probably imagine where I'm going here. Okay, but what winds up happening with video? Is it winds of scaling? Okay, now one of things is gonna happen with with with wordpress and with video that you insert like let's say you started youtube video directly in here by default it's not going to be responsive, they're going to find that was getting a lot of video content. You throwing here, what's gonna happen is just going to sit there and be the way I wide and you go down to mobile and still gonna be a wide bust out here your page because you never had something like that happen, yeah when you open it on a mobile or some other device and that's that's a product because it's not playing because it's a product of maybe maybe we didn't give it and us these air action let me get off mirror here. These are what are called alternate sources. Some people call them fall backs it's not really true, because then before is not everything. So we're giving an alternate sources and some people that put video and don't give it that alternate source. So if it doesn't play, it just doesn't play. So you just get a blank box or nothing. Okay, yes, this is where you would put a video that you created on here directly into the website versus uploading a youtube code, which you had mentioned probably is the better solution. Yeah, just just from a this one. Ok, this is a good discussion because it's something that every wants to do every wants to do some kind of video, right? Yeah, exactly. It's popular. I'm always pitched pushing people towards using hosted services, you know? I mean, because this kind of thing can get really dicey. And if you if you give it these video file formats, they could actually be compressed too much, they could look like you know what, okay, so you're just feeding it some some video you've got to make sure that you do it right obviously and we could set the settings but we're also going in and we're trying to set some things and we're assuming that all of this is gonna work, but one of the things that really the social sites just do it right I'm just going to say that they have all this done they get it all done in the background they even have flash fall back. So if it's like an old browser to play looks worse than a broken video either unprofessional it does it looks really, really bad and, you know, I hosted my own videos for a long time actually used easy as three I used amazon for hosting and I did a lot of this stuff I had my own player, I used a player called video dot js, which, by the way, is a great response of video player if you want to use your own videos on dh there's a plug in for that, but, uh, this is something that you don't want to take lightly, like you said, because it's gotta work okay, especially in a client site, you know? I mean, so so that's why a lot of us are using a youtube uh, something like that etcetera to get it to work, so this will once we tell it what video we want the mp for the og the web it'll put it in here to let us set some settings we can do if you take a look here, we can do set things like automatically pre load or just the metadata this is stuff that html five if you don't know what you're doing, it may not play back fast enough or it might load too much, you know what I'm saying? So you really kind of if you do this kind of thing and you're not really sure what it's doing, we've obviously got to test it, you know, that type of things so obvious auto playing loop we don't really you guys figure that out, so, um and they're gonna see over on the left here I do like the fact that it does give you okay there's, the replace we can for fallback purposes select a poster image so poster image is it could be anything I want with a lot of people do is they will actually take a screenshot of the video and maybe put something across like, uh, you know, you stink or something like that, you know, just something that says the video will not play on your system or something if you know like that that picture can show up if the video is doesn't play okay, the poster plays the poster shows in place so that if you don't have a poster that's, where you get the blank box or the gray bar or whatever, and so that's something we could do, um, and we can also add subtitles, which is a it created separately and it's much more involved than I'm going to go into here, okay, but this is how we could add video if we wanted to, and it is going to html five and kind of set it up for us and make it work as faras responsive video and things like that we are we're going to take this a little further. We're gonna have to use our own code. We're gonna have to use a plug in ok, to do things responsibly. And once again, we do that in the advanced class. Okay, so that's a plus for that that's. Good. So all right, so as far as the video that's, something we can do right there, um, you will find that there are a lot of different plug ins available to kind of handle this kind of stuff. And I would just suggest to go looking the plug ins directory and see for responsive video, you'll see some of the top hits to help you, so that's one thing we're going to do um don't want pretty video here it's fine uh if we want to do something like let's say we want to do it I want to do a google map okay? I'm gonna put a google map on my page uh, what I'm gonna do is I'm gonna go grab my google map I've got it right here and you can see that we're just going to kind of throw out an address here and I'm going to say, uh let's go to long beach, california that's pretty pretty effective right there and what I want to dio is if you look down here, you're going to see a lot of social sites are going to allow you to embed the code okay, this is everywhere a lot of these have this you're going to find somewhere some kind of setting option I'm gonna see settings right here and you're gonna see share or in bed map now we can do it this way. This is kind of like you having to do the hard work there's also widgets from plug ins you can use and different things like that will do this for you okay, but if I click on sharing that map, you'll see that we have what's called the embed map code and this is the code that we're going to copy and putting our page so if I go in I pick a size a generic size right here gonna see small medium large or custom size I'll come up here and right click and say let's copy it I'll go back over to my page and in here now where do you where do you think I'm gonna paste this yeah we're probably gonna go in the text ok because this is actually I frame it's code and noticed it put a little so we know what nbsp is when is that irritates me I don't know what it is totally your taste me so check this out I just real quick sidebar how many of you ever done this you go in and put a bunch of spaces and actually on the web it only shows one space okay you can't you can't put more on the ones base because they think it's just space fright like final frontier type thing um nbsp stands for non breaking space and if you want to put a bunch of spaces you put a bunch of these little guys in there so that's just stupid simple but that's what that is so yeah all right so I'm gonna paste this code in there you could see paste and match style and why I did that but I did um and I've got the eye frame right there I'm gonna make sure it's on its separate you see right there I'm going to state return separate and I'll get a visual make sure we're looking pretty good and there we go it's not gonna previewed actual map in page here but I could just simply go on update take a look at it or preview changes if I want to and go back out to my page and see what we got so there we go so there's a map okay, now you're gonna find in that little space so they return between you two but you will find that we do need to go in and watch this check this out the watch you make it then the map. Okay? Can you see the bad here? Okay, this is one thing. Uh, I'm just trying to show you guys that responsive everything has to be responsive, not just your structure or not. Just your pages in your columns and things like that, but all the content to by default, your images are responsive, responsive, generic. Okay, um by default, your image is let me just throw this up over here. If you don't mind, they actually have a little bit of styling on him. And if you guys noticed if you put a picture there's an image right there there's my page if you put a picture on a page and wordpress and you just collapsed the page in the browser, you make it narrower for most every theme out there that is responsive it's going to take that image and just scale it somehow make it smaller make it bigger okay now images that you place in your code or sorry in your pages we'll never get bigger than one hundred percent of their original size the reason why is because almost all responsive themes have some way of setting a wit and in the css you'll almost always see something like this is the most the simplest way you could make a responsive image but it's also very simple so we see the theme actually has what's called max with a hundred percent of your images which just means they can't go any bigger than I made them or when I placed them but they can go smaller and scale proportionally ok, the map itself is not an image so it doesn't treat it that way which is unfortunate I wish it could be that easy um you will see though check this out I'm gonna go back over to the page there are a lot of plug ins you can use and different things like that for maps if I go in here and go to the actual text told me come right up here to the text what that you will see in the code you guys see it in here with a night sometimes thi this is a total cheek but sometimes you could just if something has a static with tonight's set on it sometimes that just won't go any smaller or any bigger you can also sometimes remove that totally okay you can also try this this actually works at times you can try what's called a hundred percent and you can even set height to what's called auto if you want to automatically or keep it at that same height if you want you it won't work all the time but I'll try usually like a height like that if you look at the wit the content there one hundred percent that is what a lot of our content is going to be it's going to be set at some kind of size now what is one hundred percent understand what I always almost like what is that one hundred percent of the container whatever it's inside off oh kind of makes sense though doesn't because it's one hundred percent with the screen it would be always busting out of the column right? So it's it's it's in a column it's a hundred percent the width of the column and if column has like patting like pushing in stuff that still pushes in it doesn't bust out of that so this is responsive you're going to find a lot of stuff like this if something has a width and height set on it sometimes it can create some some bad things okay it could actually do some some wacky nasty things if I have ah site where there's tons of maps on it I'm not going every map doing this you can create your own styling if you want you can also there's a plug in, of course to do this that says responsive maps or response of google maps okay, so you're gonna find that you'll find a lot of stuff like that, but our goal is to try and make everything responsive work properly and of course, one of the things we have to do is test you know what I mean? You gotta look at, you got to go see just because it says it is doesn't mean it is going to be responsive or work the way we expect it, so I could of course set my let me set my banner background real quick just because I want to separate one for this page, so I'll just do this. I can upload a whole bunch of files if I want to at one time despite selecting him, so select them and this can save you a ton of time. We got more doughnuts to look at, so I grab a doughnut yeah, which one you guys like, I'm going to go? I know I'm an old fashioned kind of guy don't wise let's say that you'll set it up and I'm gonna keep the default. We can always change the text if you want to. And I'll go ahead an update, and we should have it out there.